01. Installation
Vite
Vite, 프런트엔드 개발의 새로운 기준
ko.vite.dev
Vite 툴은 다양한 프론트엔드 앱을 개발하는데 도움이 되는데
create-react-app을 사용해도 되고, Vite를 사용해도 결과는 같다.
1. CMD창에서 npm create vite@latest 명령어를 실행하면 vite 프로젝트가 생성된다.
2. vite의 최선 버전을 설치하겠냐고 묻는 프롬프트가 나올 수 있는데 yes라고 한다.
(이미 설치했다면 해당 프롬프트가 나오지 않는다.)
3. Project name을 입력 후 엔터를 누른다.
4. 프레임워크를 선택해라고 나오는데 React를 선택한다.
5. TypeScript를 사용할 것인지 JavaScript를 사용할 것인지 물어볼텐데
Javascript보다 TypeScript를 사용할 때 더 쉽고 오류도 적기 때문에
Typescript를 선택하는데 Rust typescript 컴파일러인 SWC를 포함한 Typescript + SWC 옵션을 선택한다.
6. 경로를 C드라이브로 해놓았기 때문에 C드라이브 내에 nwitter-reloaded 폴더가 생긴다.
1. CMD창에서 code nwitter-reloaded 명령어를 실행하면 Visual Studio Code에서 nwitter-reloaded프로젝트를 연다.
2. Visual Studio Code 툴 내 터미널에서 npm i 명령어를 실행하면 필요한 모든 것이 설치된다.
ex) 예를들어, package.json 파일을 보면 react, react-dom, typescript 정의들, vite, dev build lint preview라는 scripts 등
3. Visual Studio Code 툴 내 터미널에서 npm run dev 명령어를 실행하여 모든 것들이 작동하는지 확인한다.
4. npm run dev 명령어를 실행했을때 프롬프트에 나오는 URL에 접근하면
Vite와 React로 만들어진 개발서버가 생긴것을 확인할 수 있다.
Git - Downloads
Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. Latest source Release 2.49.0 Release Notes (2025-03-14) Download Source Code GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but ther
git-scm.com
1. Git을 설치한다.
2. git 저장소를 initialize 한다.
3. GitHub에 repository를 생성한다.
4. Visal Studio Code 툴 내 터미널에서
remote add origin https://github.com/bonsimony/React-practice-twitter-app 명령어를 실행한다.
Routing이나 navigation을 위한 react router dom이나 스타일을 위한
Style components와 같은 Dependency들을 설치한다.
npm install react router dom에서 @ 다음에 버전을 명시해야 하는데 6.14.2로 해야하며 이 버전은 중요하다.
1. Visual Studio Code 툴 내에서 npm i react-router-dom@6.14.2 명령어를 실행한다.
2. Visual Studio Code 툴 내에서 npm i styled-reset 명령어를 실행한다.
3. Visual Studio Code 툴 내에서 npm i styled-components@6.0.7 명령어를 실행한다.
4. Visual Studio Code 툴 내에서 npm i @types/styled-components -D 명령어를 실행한다.
Styled-Components 자동완성 플러그인 설치