반응형

2021/09 5

[env-cmd] next.js에서 각 환경에 맞는 환경변수 설정하기

개인 프로젝트를 개발할 때는 딱히 신경쓰지 않아도 될 수도 있지만, 실무에서는 개발 환경, QA 환경, 운영 환경등 각 환경마다 서버 주소나 변수들이 다른 경우가 많습니다. 그래서 각각 환경에 맞게 변수들을 등록해두고 환경에 맞게 변수가 자동적으로 적용되도록 해야합니다. 오늘은 env-cmd 패키지를 이용하여 환경변수를 설정해보겠습니다. 먼저, env-cmd를 설치합니다. npm install env-cmd or yarn add env-cmd 설치를 했다면, 환경변수 파일을 생성합니다. 저는 아래와 같은 이름과 내용으로 두 개의 파일을 생성하겠습니다. .env.dev NEXT_PUBLIC_MODE=dev .env.prod NEXT_PUBLIC_MODE=prod 그리고 package.json 파일을 수정합..

React 2021.09.27

[Next.js] ESLint, Prettier 설정하기 (Typescript/VSCode)

ESLint란? JavaScript 코드에서 발견 된 문제 패턴을 식별하기위한 정적 코드 분석 도구. Prettier란? 코드 포멧터(Code Formatter) Next.js 프로젝트에 ESLint/Prettier 적용하기 (VSCode) 프로젝트 생성 npx create-next-app --typescript 저는 typescript를 사용할 예정이므로 —typescript 옵션을 추가했습니다. ESLint 설치 npm i eslint --save-dev ESLint 설정하기 eslint --init 위 명령어를 터미널에 실행하면 eslint 설정이 시작됩니다. 여러가지 질문들이 나오는데, 저는 아래와 같이 설정했습니다. ❯ eslint --init ✔ How would you like to use ..

React 2021.09.13

[TypeScript] 기본 문법 정리

변수 타입 지정 let name: string = 'kim'; name = 'lee';// OK name = 100;// Error 가장 기본적인 기능으로는 변수의 타입 지정 기능이 있습니다. 위 예제에서는 name이라는 변수를 문자열(string) 타입으로 지정했습니다. 그렇기 때문에 'lee' 라는 문자열은 name 변수에 할당이 가능하고, 100은 Number 타입이기 때문에 name에 할당할 수 없습니다. 배열(Array) 타입 지정 let array: string[] = ['kim', 'lee']; 배열의 타입도 지정이 가능합니다. 위와 같이 [] 키워드를 사용하면 배열을 의미하고 그 앞에 타입을 붙이면 배열에 들어 올 수 있는 타입을 지정할 수 있습니다. 객체(Object) 타입 지정 let ..

JavaScript 2021.09.10

[Next.js] 시작하기

시스템 요구사항 Node.js 12.0 이상 MacOS, Windows 그리고 Linux 세팅 새로운 next.js 앱을 생성하기 위해서는 'create-next-app'을 사용하길 추천한다. 'create-next-app'은 프로젝트의 필요한 모든 것을 세팅해 줍니다. npx create-next-app # or yarn create next-app 만약 TypeScript 프로젝트로 시작하기 원한다면 '—typescript' 플래그를 사용하면 됩니다. npx create-next-app --typescript # or yarn create next-app --typescript 위 명령어를 이용하여 typescript를 사용하는 프로젝트를 만들어보았습니다. 프로젝트 이름은 'next-test-app'..

React 2021.09.09
반응형