-
Next와 Mobx 정리 - [커스텀]
[Next.js app & document 커스텀] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 세팅 Next.js app & document 커스텀 Next.js app & document 커스텀 [Github Project 링크] App 커스텀 App은 가장 최상위 컴포넌트 입니다. 아래 사항들을 커스텀할때 사용할 수 있습니다. 페이지 별로 잦은 Layout 변경이 필요할 경우 페이지가 이동 될 때 마다 State 값이 유지되어야 할 경우...
-
Next와 Mobx 정리 - [라이브러리 세팅]
[Next.js 라이브러리 세팅] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 설치 및 Bebel 세팅 Next.js app & document 커스텀 Next.js 라이브러리 세팅 [Github Project 링크] 라이브러리 설명 babel-plugin-module-resolver 아래 코드 처럼 Import path를 간단하게 만들어주는 바벨 라이브러리 입니다. // Use this: import MyUtilFn from 'utils/MyUtilFn'; // Instead of that: import MyUtilFn from '../../../../utils/MyUtilFn'; styled-components [참고] babel-plugin-styled-components...
-
Next와 Mobx 정리 - [시작하기]
[Next.js 시작하기] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 세팅 Next.js app & document 커스텀 Next.js 시작하기 [Github Project 링크] 프로젝트 생성 Next.js에서도 React에서 사용하는 creat-react-app과 같은 creact-next-app이라는 CLI를 제공하고 있으므로 꼭! 사용하는 것을 권장한다. 물론 메뉴얼 세팅 방법이 있지만, 다루지 않았으며, 하단에 참고 사이트를 참고 해주세요. $ npx create-next-app # or $ yarn create next-app...
-
Next와 Mobx 정리 - [알아보기]
[Next.js 알아보기] Next.js에 대한 이해와 Mobx와 같은 라이브러리들을 사용해 웹을 개발하기 위한 기본 세팅 작업을 boilerplate로 만들어보는 과정에 대한 내용을 정리했습니다. 목차 Next.js 란? Next.js 시작하기 Next.js 라이브러리 세팅 Next.js app & document 커스텀 Next.js 란? [Github Project 링크] 기본적으로는 리액트를 기반으로 한 SPA를 빠르게 빌드할 수 있도록 도와주는 프레임워크 입니다. Next에서는 많은 기능을 제공해주지만 리액트에 대한 기본적인 지식이 있는 상황이라면 client-side routing, page layout 두가지만 배우면 빠르게 Next를 사용할 수 있습니다. SSR vs CSR...