전체 글

그동안 여러 번의 웹 프로젝트를 진행하면서 yarn install을 진행하는 시간, yarn start로 프로그램이 실행되기까지 시간이 꽤 걸린다는 것을 체감하였다. 왜 이렇게 오래 걸리는 걸까..? 라는 생각을 하며 node_modules 폴더 구조를 이해하고자 했다. NPM...? NPM은 Node Package Manager의 줄임말로 Node.js 설치 시에 자동으로 설치되는 기본 패키지 관리자이다. npm은 파일 시스템을 이용해 의존성을 관리하고, 누구나 온라인 플랫폼인 npm 레지스트리에 게시된 캐피지를 사용할 수 있도록 공유 공간을 만들어 준다. 더불어 이런 온라인 플랫폼과 상호작용하기 위해 명령 줄 인터페이스를 사용하면서 패키지 설치 및 제거가 가능하다. Yarn Yarn은 페이스북에서 개..

지난 10/26에 Next.js 13버전을 발표했다. 이 글을 통해 어떤 부분이 달라졌고, 내가 배포한 nori 에서 변경해야 할 부분을 먼저 점검해보고자 한다. 공식문서를 참고하였다. 👇 최신 버전을 다운로드 하고자 하면 아래의 명령을 수행하면 된다. npm i next@latest react@latest react-dom@latest eslint-config-next@latest ✨ app/ Directory (beta) Next.js에서 가장 사랑받는 기능 중 하나는 파일 시스템 라우터이다. 즉, 폴더 안에 파일을 옮겨놓기만 애플리케이션에서 즉시 경로를 생성할 수 있다. 위의 폴더 구조를 따르게 되면 https://www.with-nori.com/write, https://www.with-nori...

styled-components는 기본적으로 css-in-js 방식을 사용하고 있다. ✨ styled-components : CSS-in-JS CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 추세가 되고 있기에 styled-componets는 많이 사용되고 있다. 기존 방식(css, scss 등)의 단점 전역 관리 css 파일은 전역적으로 관리해야 한다. 다른 디렉토리에서 작업을 하더라도 해당 파일이 또 다른 디렉토리에 ..