메로그

원시값 원시값은 객체가 아닌 불변성을 가지고 있는 값들 입니다. 종류 string: String 전역 객체는 문자열(문자의 나열)의 생성자입니다. number: 숫자 값으로 작업할 수 있게 해주는 래퍼(wrapper) 객체입니다 bigint: Number 원시 값이 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다. boolean: 불리언 값을 감싸고 있는 객체입니다. symbol: Symbol()로부터 반환되는 모든 심볼 값은 고유합니다. null: 어떤 값이 의도적으로 비어있음을 표현하며 불리언 연산에서는 거짓으로 취급합니다. undefined: 값을 할당하지 않은 변수, 메서드와 선언도 평가할 변수가 값을 할당받지 않은 경우 종류의 대한 내용은 MDN 을 참고했..

Webpack 의존관계이 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러 입니다. 여러 개의 자바스크립트 파일을 번들링하고, 트랜스파일링 작업을 할 수 있습니다. Webpack vs Gulp Gulp 도 위의 동작과 비슷하게 할 수 있지만, Gulp 는 단순 task runner 일 뿐이다. (같은 일을 자동으로 처리하는..) Webpack 은 Package Builder 라고 불리는데 Package.json 의 스크립트를 기반으로 동작하기 때문이다. (Gulp 는 gulpfile..) 쉽게 생각해보면, 규모가 작고 간단한 일만 처리하는 프로젝트라면 Gulp 를 사용하는 것이 훨씬 가성비가 좋다. 대신에 규모가 큰 프로젝트라면, Gulp 의 기능 + 의존성 관리 기능(예: 노드 기반으로 ..

Redux state 종속성 탈피 (컴포넌트에 종속되지 않고 store 라는 곳에 state 형태로 저장함. state 가 변결되면 해당 state 를 바라보고 있는 컴포넌트는 모두 리렌더링 됩니다.) props depth 해결방법. 심지어 리액트는 단방향이기 때문에 Vue 처럼 부모로 올리기가 어렵습니다. action(dispatch 함수 이름) => dispatch(store 에 state 를 변경하는 함수) => store(state 변화) => view(리렌더링) 흐름으로 flux 패턴을 따릅니다. 설치 yarn add redux react-redux redux-devtools-extension redux-logger 용어 Action: 객체 형식으로 이루어져 있고, type 을 가지고 있음. A..

.gitignore GIt 에서 포함하지 않을 파일을 설정할 수 있는 File 입니다. 위치 위치는 항상 디렉토리의 최상위의 정의 됩니다. 사용방법 포함하지 않을 파일을 경로로 지정하여 .gitignore 를 생성해줍니다. .vscode/settings.json public/lib node_modules

React-Router SPA 화면처럼 화면에 깜빡임이 일어나지 않으면서, 다른 URL 을 가질 수 있도록 하는 것이 react-router 의 기능입니다. 라우터를 설치해 봅시다. npm install --save react-router-dom or yarn add react-router-dom Example 참고 로 감싸줘야 이제 라우터를 사용할 수 있습니다. 를 사용하여 다른 주소로 컴포넌트를 뿌릴 수 있도록 도와주는 컴포넌트입니다. 를 사용하여 특정 주소로 컴포넌트를 연동하여 사용할 수 있습니다. 에서 exact 를 사용하여 해당 path 에서 라우팅이 이뤄지기 때문이다. 사용하지 않으면, 주소를 이동할 때마다 컴포넌트가 계속 붙어서 나오게 됨... (주의) 메뉴바를 이용하여 각 페이지당 컴포넌트..

React Hooks React Hooks 는 React 16.8 버전에서 도입된 기능으로, 함수형 컴포넌트에서 상태 관리와 라이프사이클 메소드 등을 사용할 수 있게 해줍니다. 이전에는 클래스형 컴포넌트에서만 사용할 수 있었던 기능들을 함수형 컴포넌트에서도 사용할 수 있게 되면서 코드의 재사용성과 가독성이 증가하며, 컴포넌트의 성능도 최적화할 수 있습니다. React Hooks 에서는 다음과 같은 기능들을 사용할 수 있습니다. useState : 상태값을 관리하는 Hook useEffect : 라이프사이클 메소드를 함수형 컴포넌트에서 사용할 수 있게 해주는 Hook useRef : ref 를 사용할 수 있게 해주는 Hook useContext : Context API 를 사용할 수 있게 해주는 Hook ..