Hello Jay's Programming World!

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