Large Rainbow Pointer
728x90
[Next.js] create-next-app 없이 프로젝트 생성하기
💜 리액트/Next.js2024. 6. 21. 00:28[Next.js] create-next-app 없이 프로젝트 생성하기

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) package.json 생성하기create-next-app 없이 next.js 프로젝트를 만들기 위해 먼저 package.json 을 만들어야 한다.먼저 npm init 를 입력해서 package.json 을 생성한다. react, react-dom, next 설치그 다음으로 Next.js 프로젝트를 실행하는데 필요한 핵심 라이브러리인 react, react-dom, next 를 설치한다. devDependencies 에 필요한 패키지 설치typescript 와, 타입스크립트 타입 지원에 필요한 @types/react, @types/react-dom, @types/node 그리고 ESLint 에 필요한 eslint, eslin..

[React] 좋은 리액트 코드 작성을 위한 환경 구축하기
💜 리액트/React2024. 6. 18. 14:23[React] 좋은 리액트 코드 작성을 위한 환경 구축하기

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) ESLint를 활용한 정적 코드 분석버그와 예기치 못한 작동을 방지하기 위해 여러 가지 방법이 있는데 그 중에 정적 코드 분석이 있다. 정적 코드 분석이란?코드의 실행과는 별개로 코드 그 자체만으로 코드 스멜(잠재적으로 버그를 야기할 수 있는 코드)을 찾아내어 문제의 소지가 있는 코드를 사전에 수정하는 것 자바스크립트에서 가장 많이 사용되고 있는 정적 코드 분석 도구가 바로 ESLint 이다. ESLint 살펴보기ESLint 는 어떻게 자바스크립트 코드를 읽어서 분석할까?자바스크립트 코드를 문자열로 읽는다.자바스크립트 코드를 분석할 수 있는 파서(parser)로 코드를 구조화한다.2번에서 구조화한 트리를 AST(Abstract..

728x90
image
loading