Hello Jay's Programming World!

개인 프로젝트를 개발할 때는 딱히 신경쓰지 않아도 될 수도 있지만, 실무에서는 개발 환경, 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 파일을 수정합..

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 ..

시스템 요구사항 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'..

constructor() 컴포넌트 생성 시점에 호출 constructor 함수는 생명주기 함수는 아니지만, 클래스형 컴포넌트가 생성될 시점에 호출되므로 생명주기에 포함. render() 컴포넌트가 그려질 때 호출 componentDidMount() 컴포넌트가 처음 화면에 그려지면 호출 componentDidUpdate() 화면이 업데이트되면(새로 그려지면) 호출 componentWillUnmount() 컴포넌트가 사라질때 호출. 아래 diagram을 참고하시면 좀 더 이해하기가 좋을 것 같습니다. https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ React Lifecycle Methods diagram Fully interactive and ..