끄적이는 개발노트

git clone을 하고 npm i 를 진행하던 중 다음과 같은 오류 메세지가 발생했다. npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! 위는 npm 설치 오류 메세지로 npm install 을 진행하다보면 아래와 같은 에러메세지가 뜰 때가 있다. 종속성 에러로, 해결방법은 --save --legacy-peerdeps 를 추가하면 설치할 수 있다. npm i 'npm' --save --legacy-peer-deps

이번 포스트에서는 NestJS에서 middleware를 사용하는 방법을 알아본다. Middleware 미들웨어는 라우터 핸들러 전에 호출되는 함수다. 미들웨어 기능은 요청(request) 및 응답(response) 객체 및 어플리케이션의 요청-응답주기에서 next() 미들웨어 함수이다. next 미들웨어 함수는 일반적으로 next 라는 변수로 표시된다. NestJS 미들웨어는 기본적으로 express 미들웨어와 동일하다. 공식 express 문서를 통해 미들웨어의 기능을 알아본다. 미들웨어 기능은 다음 작업을 수행할 수 있다. - 모든 코드를 실행 - 요청 및 응답 객체를 변경 - 요청-응답주기를 종료 - 스택의 next 미들웨어 함수를 호출 - 현재 미들웨어 함수가 요청-응답주기를 종료하지 않으면 ne..

기존의 React.js에도 상태를 관리하는 Redux 가 있고, store가 존재한다. 일반적으로 React.js에는 하나의 Redux store만 존재하기 때문에 Redux를 만드는데 별다른 어려움이 없다. 하지만, Next.js에서 Redux를 사용하게 되면 사용자가 request를 보낼 때마다 Redux store가 생성되기 때문에 여러 개의 Redux store가 생성된다. 또한, Next.js에서 제공하는 getInitialProps, getServerSideProps 등에서 Redux store에 접근할 수 있어야 하기 때문에 복잡하다. 이를 간편하게 해결해주는 라이브러리가 바로 next-redux-wrapper 이다. 이번 포스트에서는 카운터 state를 통해 사용법을 알아본다. 1. 프로젝..

이번 포스트에서는 환경변수에 대해 알아본다. 기본적으로 .env.local 파일을 통해 환경 변수를 설정할 수 있다. 그 안에서, 서버와 브라우저에서의 사용법에 차이가 있다. 서버 // .env.local DB_HOST=localhost DB_USER=myuser DB_PASS=mypassword 사용할 때, process.env 를 통해 사용한다. // pages/index.js export async function getStaticProps() { const db = await myDB.connect({ host: process.env.DB_HOST, username: process.env.DB_USER, password: process.env.DB_PASS, }) // ... } 브라우저 Next..

이번 포스트에서는 Next.js의 기본적인 CSS 적용 방법에 대해 알아본다. 1. Global Stylesheet 어플리케이션에 stylesheet를 추가하려면 pages/_app.js에 CSS 파일을 import 해야 한다. 이 스타일들은 어플리케이션 내에 있는 모든 페이지들과 컴포넌트들에 반영된다. 말 그대로 글로벌 스타일시트이기 때문에 충돌을 피하기 위해서 pages/_app.js 내에만 import 할 수 있다. 우선, css 파일을 하나 만들어 다음과 같이 작성한다. /styles.css body { font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; padding: 20px..

이번 포스트에서는 서버 사이드 렌더링을 통해 데이터를 가져오는 getServerSideProps에 대해 알아본다. 1. 개념 getServerSideProps는 사전 렌더링되는 페이지의 필요 데이터가 요청 시에 가져와야하는 경우에만 사용한다. 서버가 매 요청의 결과를 계산해야 하고, 결과가 추가 설정 없이는 CDN에 의해 캐시될 수 없기 때문에, getStaticProps보다 느리다. getServerSideProps를 페이지에서 export할 경우, Next.js는 이 페이지를 매 요청마다 getServerSideProps로부터 리턴 받은 데이터를 사용하여 사전 렌더링한다. 마찬가지로, getServerSideProps는 페이지에서만 export 가능하다. function Page({ data }) {..