_app.js와 _document.jsnext.js를 설치하면 pages안에 _app.js와 _document.js가 기본적으로 들어있는 것을 확인할 수 있다.리액트와 비교했을 때 _app.js는 App.js와 같고 _document.js는 index.html과 같다. _app.js는 root 컴포넌트로 다른 컴포넌트를 자식 컴포넌트로 받아와서 렌더링 한다. _document.js는 모든 페이지에 공통적으로 들어가는 html 문서 역할을 하며, 메타 태그나 폰트 등 전체 페이지에서 적용되는 html 태그들을 관리한다. 🙋🏻‍♂️ 각 파일 간 포함 관계 정리 (렌더링 과정)1) _document.js의 에는 _app.js가 래핑된다.2) _app.js의 에는 index.js에서 정의한 페이지 컴포넌트가..

pages 폴더 안에 만들기리액트에서는 react-router-dom을 이용해서 컴포넌트를 로 제어했었다.하지만, next.js에서는 pages 폴더 안에 index 파일만 잘 구축해 놓으면 리액트처럼 일일이 Route로 연결할 필요 없이 쉽게 페이지 이동을 할 수 있다. 예를 들어, pages/content/index.js 라고 해당 경로에 파일을 만들어 놓으면 주소입력창에 www.shawn.com/content 라고 했을 때 content/index.js가 실행되는 것이다. 폴더 경로도메인 주소pages/index.jswww.shawn.compages/content/index.jswww.shawn.com/contentpages/content/[id].jswww.shawn.com/content/1pag..

Redux Toolkit을 사용하는 이유 Redux Toolkit이란 Redux 상태 관리 라이브러리의 공식적인 패키지로, Redux를 보다 간편하고 효율적으로 활용할 수 있도록 도와주는 도구이다. Redux Toolkit이 아닌 Redux를 처음 접했을 때 느꼈던 막막함은 아직도 기억에 남을 정도로 보일러플레이트 코드가 많아서 작성 부담이 컸었고, 표준 없이 자유로운 구조로 상태 관리를 해야 하는 것에 매우 복잡함을 느꼈었다. Redux Toolkit은 보일러플레이트 코드* 작성을 최소화하고 표준을 제공하여 개발자로서 더 효율적으로 학습하고 사용할 수 있게 도와주는 도구이다. Redux에 비해 학습 곡선도 낮고 코드 일관성도 높아지는 등 리덕스보다 장점이 훨배 많기 때문에 현재는 Redux Toolki..

createStore() const store = createStore(reducer); createStore()는 전역으로 관리할 상태들을 저장하는 store를 생성한다. reducer // Action Type의 경우 미리 변수로 선언해준다. (대문자) const ADD = 'ADD'; const MINUS = 'MINUS'; // Reducer const reducer = (state = 0, action) => { switch (action.type) { case ADD: return state + 1; case MINUS: return state - 1; default: return state; } } createStore()로 생성한 store에는 매개변수로 reducer가 필수로 들어가야 한..

유틸리티 타입이란? 유틸리티 타입이란, 제네릭, 맵드 타입, 조건부 타입 등의 타입 조작 기능을 이용해서 타입 스크립트 코드에서 타입을 더욱 강력하고 유연하게 다룰 수 있도록 도와주는 기능들을 말한다. 즉, 모든 프로퍼티들을 선택적 프로퍼티로 바꿔주거나 특정 프로퍼티만 골라내는 등의 자주 사용되는 타입들을 마치 내장 함수처럼 타입스크립트 자체에서 제공해 주는 타입인 것이다. 들어가기 전, 이 글에서는 타입스크립트에 있는 모든 유틸리티 타입을 정리하지 않을 것이다. 유틸리티 타입 중에서도 자주 사용되는 타입들만 정리할 예정이며 이외에도 다른 유틸리티 타입이 궁금하다면 타입스크립트 공식문서를 참고하길 바란다. 객체 타입에서 사용하는 유틸리티 타입 Partial / Required : 필수 프로퍼티 ⇔ 선택적..