닭발

닭발 @chopinoff

React.js

• [React 공식 문서] 0-4. TypeScript 사용하기

  설치모든 프로덕션 수준의 React 프레임워크는 TypeScript를 지원함프레임워크 별 설치 가이드 따르기Next.jsRemixGatsbyExpo 기존 React 프로젝트에 TypeScript 추가하기npm install @types/react @types/react-dom tsconfig.json 설정다음 컴파일러 옵션을 tsconfig.json에 설정함1. dom은 lib에 포함되어야 함 (주의: lib 옵션이 지정되지 않으면 기본적으로 dom이 포함됨){ "compilerOptions": { "lib": ["ES6", "DOM"] }}2. jsx를 유효한 옵션 중 하나로 설정해야 함{ "compilerOptions": { "jsx": "preserve" ..

  React.js/기초 2025. 2. 2. 00:44
• [React 공식 문서] 0-3. 에디터 설정하기

  에디터 설정하기VS Code: 가장 많이 사용되는 에디터 (+ 익스텐션으로 기능 추가 가능)WebStorm: JS에 특화됨Sublime Text: JSX와 TS를 지원, 문법 강조 및 자동 완성 기능 내장Vim: 모든 텍스트를 효율적으로 생성, 변경할 수 있음  에디터 기능 추천린팅 (ESLint)코드를 작성하는 동안 실시간으로 문제를 찾아줌으로써 빠른 문제 해결이 가능하도록 도움ESLint: 가장 많이 사용되는 JavaScript를 위한 오픈소스 린터React를 위한 추천 설정과 함께 ESLint 설치하기VSCode의 ESLint를 공식 익스텐션과 통합하기프로젝트의 모든 eslint-plugin-react-hooks 규칙을 활성화했는지 확인하기가장 심각한 버그를 조기에 발견할 수 있는 옵션(권장되는 e..

  React.js/기초 2025. 2. 1. 18:41
• [React 공식 문서] 0-2. 기존 프로젝트에 React 추가하기

  시작 전 로컬 개발 환경에 Node.js 설치는 필수!  기존 웹사이트의 하위 경로 전체에 React 사용하기chopinoff.com이라는 기존 웹 앱에서 chopinoff.com/some-app/으로 시작하는 모든 경로를 React로 구현하고 싶을 때React 기반 프레임 워크 중 하나를 사용해 앱의 React 부분을 빌드함사용하는 프레임 워크 설정에서 /some-app을 기본 경로로 명시함서버 또는 프록시를 구성해 /some-app 하위의 모든 요청이 React 앱에서 처리되도록 함  기존 페이지의 일부분에 React 사용하기React 컴포넌트를 통합하는 일반적인 방식임모듈 자바스크립트 환경 설정하기JSX 구문을 사용할 수 있게 JS 환경 설정import / export 구문을 통해 코드를 모듈로 분..

  React.js/기초 2025. 2. 1. 18:18
• [React 공식 문서] 0-1. 새로운 React 프로젝트 시작하기

  React 프레임 워크 사용하기프레임 워크를 사용하는 것을 권장함프레임 워크 없이 사용할 수 있나?: YES프레임 워크 없이 애플리케이션을 작성하고, 기존 페이지의 일부분에 React를 사용할 수도 있음하지만 애플리케이션이나 사이트 전체를 React로 구축하는 경우 프레임워크의 사용을 권장함 프레임 워크 사용을 권장하는 이유코드 분할, 라우팅, 데이터 페칭 등의 기능을 추가 작업 없이 간편하게 사용할 수 있음프레임 워크에서 제공하는 코드 구조를 사용해 다른 프로젝트들 간의 맥락과 스킬을 유지할 수 있음만약 애플리케이션이 프레임워크의 지원을 잘 받지 못하는 제약 조건에 놓여있다면 자체 맞춤 설정을 적용할 수도 있음npm에서 react 와 react-dom을 설치Vite나 Parcel 같은 번들러를 활용하여..

  React.js/기초 2025. 2. 1. 17:23