쑥쑥자라기🌱

꼭 지켜야 하는 룰 (지키지 않으면 오류) (1) JavaScript 식별자는 '문자(a-z, A-Z)', '밑줄(_)' 혹은 '달러 기호($)'로 시작해야 한다. 두 번째 글자부터는 '숫자(0-9)'도 가능하다. (2) '대문자'와 '소문자'는 구별한다. myname과 myName은 다른 이름이다. (3) '예약어(JavaScript가 찜해놓은 단어)'는 사용하면 안된다. 예를 들어 if, for, let 같은 것들이 있다. 지키면 좋은 룰 (더 좋은 스타일을 위해) 코드를 작성하는 일은 여러 사람들과의 협업이기도 하면서 스스로와의 소통이기도 하다. (1) 의미 없는 이름은 좋지 않다. 향후 복잡한 프로그램을 짜게 되면 변수와 함수를 여기저기서 적절히 활용해야 하는데, 이름이 a, b, c, d처럼 의..

코드를 읽고 실행하는 것은 컴퓨터가 정확하게 해주지만 코드를 작성하는 것은 사람이 하는 것이기 때문에 지나치게 주관적인 코드를 작성한다거나 오타를 내는 실수를 할 가능성이 있다. 이런 경우 추상화된 코드를 통해 문제를 해결할 수 있다. 목적을 명확하게 하고 불필요한 것들은 숨기고 핵심만 드러내는 것. 반복 입력하는 구체적인 숫자는 오타를 만들어낸다. 숫자에 대한 의미전달이 어렵다. 프로그래밍에서는 값에 의미를 부여하기 위해 변수(variable)이라는 것을 활용한다. 변수(variable)란 이름이 붙은 상자라고 생각하면 된다. 프로그래밍에서 등호 하나는 같다는 의미가 아닌 오른쪽에 있는 값을 왼쪽에 할당하는 할당연산자를 의미한다. 변수는 선언과 동시에 값을 넣어줄 수 있다.

추상: 여러 가지 사물이나 개념에서 공통되는 특성이나 속성 따위를 추출하여 파악하는 작용 추상화(Abstraction): 구체적인 정보들은 숨기고 꼭 필요한 핵심만 표현하는 것. 단순하고 간결하게 표현하면서도 핵심을 명확히 드러내는 것. 때문에 효과적인 소통을 할 수 있다는 장점이 있다. 프로그래밍의 추상화 복잡한 것들을 목적에 맞게 단순화하는 것. 목적을 명확히 하고 불필요한 것들은 숨긴다. 핵심만 드러낸다.

프로그래밍이란? 컴퓨터를 통해 복잡한 계산을 하는 것 자료형(Data type) 1. 숫자(Number) - 사칙연산 가능 정수(Integer) - 음수, 0, 양수 소수(floating point) - 소수점을 갖는 형태 2. 문자열(String) - '' 또는 ""로 감싸서 표현하는 문자. 양쪽으로 감싸는 따옴표의 모양을 통일해 주어야 한다. + 기호를 통해 문자열 연결이 가능하다. 3.불린(Boolean) - 참과 거짓 (true & false) 값만 가짐 어떤 조건에 의한 결과값으로 사용

리덕스는 리액트 생태계에서 사용률이 높은 상태관리 라이브러리이다. 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다. Context API를 사용해도 글로벌 상태 관리를 할 수 있고 상태 관리 로직을 분리할 수 있다. 특히 Context API와 useReducer Hook을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 개발 상식이 유사하다. 리덕스에서도 리듀서와 액션이라는 개념을 사용하기 때문이다. Redux는 Context API가 지금의 형태로 사용방식이 개선되기도 전에 그리고 useReducer라는 Hook이 존재하기도 전부터 만들어진 라이브러리이다. 사실 Context API가 개선되기 전에는 ..

1. 저장공간 함수형 컴포넌트에서 useref를 부르면 ref 오브젝트를 반환해 준다. const ref = useRef(value) ref 오브젝트는 이렇게 생겼다. {current: value} 인자로 넣어준 초기 값은 ref 안에 있는 current에 저장된다. ref 오브젝트는 수정이 가능하기 때문에 언제든 원하는 값으로 바꿀 수 있다. {current: "hi"} // const ref = useRef("h1") {current: "hello"} // ref.current ="hello" {current: "nice"} // ref.current = "nice" 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지된다. 컴포넌트가 계속해서 렌더링이 되어도 컴포넌트가 언마운트되기 전까지는 값을 그대..

어떤 컴포넌트가 Mount(화면에 첫 렌더링) 되었을 때, Update(다시 렌더링) 될 때, 혹은 Unmount(화면에서 사라질 때) 때 특정 작업을 처리할 코드를 실행시켜주고 싶다면 useEffect를 사용하면 된다. 기본적으로 useEffect Hook은 인자로 콜백 함수를 받는다. 콜백 함수란 다른 함수의 인자로 전달된 함수를 의미한다. 이 콜백 함수 내부에 원하는 작업을 처리해 줄 코드를 작성해 주면 된다. useEffect는 두 가지 형태가 있다. 1) useEffect의 인자로 하나의 콜백 함수만 받는 형태 useEffect(()=>{ //작업... }) - 렌더링 될 때마다 콜백이 실행 (컴포넌트가 맨 처음 화면에 렌더링 될 때, 컴포넌트가 다시 렌더링 될 때) 2) useEffect의 첫..

State : 컴포넌트의 상태 useState는 컴포넌트의 상태를 간편하게 생성하고 업데이트 시킬 수 있는 도구를 제공해 준다, const [state,setState]= useState(초기값) state의 생성과 동시에 가져야 할 초기 값을 useState의 인자로 넣어주면 state와 setState라는 두 가지 요소를 배열 형태로 리턴해준다. 현재 상태 값은 state라는 변수에 들어있고 state를 변경시켜주고 싶을 때에는 setState를 이용해서 간편하게 변경시켜줄 수 있다. state와 setState의 이름은 변경할 수 있다. setState 함수를 사용해서 state를 변경하면 해당 컴포넌트는 화면에 다시 렌더링이 된다. state를 변경할 때 새로 변경될 state 값이 이전 stat..