[MBTI 테스트 사이트 만들기 #0] Visusal Studio Code 설치와 Create-react-app 생성

Visusal Studio Code 설치와 Create-react-app 생성

수익형 웹사이트에 꽂혀서 MBTI 테스트 사이트를 만들어볼 것이다.

노트북이 고장 나서 친구 컴퓨터로 해야 되는데, 세팅부터 차근차근해보도록 한다.

node 설치

node가 설치 안되어 있다면 아래 다운로드를 눌러 설치한다. (필수)

https://nodejs.org/ko/download

다운로드 | Node.js

Visual Studio Code 설치

우선 개발에 필요한 Visual Studio Code를 설치해 본다.

VSC 설치는 이곳에서 할 수 있다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code 메인 화면

오른쪽 상단에 있는 'Download'나, 'Download for [OS]'를 선택해 준다.

보통은 현재 OS기준으로 되어있어 바로 다운로드 버튼을 누르면 된다.

다운로드 파일이 받아지고, 설치를 누르면 끝이다.

Create React App

터미널(명령 프롬프트)을 열고 프로젝트를 만들 폴더로 이동한다. 나는 문서에 하나의 프로젝트를 생성하기 위해 아래와 같이 명령어를 입력했다.

C:\Users\USER1>cd ./documents

그리고 React로 프로젝트를 만들 거기 때문에

npx create-react-app [PROJECTNAME]을 입력해 준다.

C:\Users\USER1\Documents>npx create-react-app my-app

명령어를 치면 아래와 같은 문구가 뜨는 데 그대로 엔터를 누르면 된다.

C:\Users\USER1\Documents\testdoc>npx create-react-app my-app
Need to install the following packages:
  create-react-app@5.0.1
Ok to proceed? (y)

설치하는 데 시간이 조금 걸린다.

 

아래 정식 사이트에서 보고 그대로 따라 해도 된다.

https://create-react-app.dev/docs/getting-started

Getting Started | Create React App

설치가 끝난 후 visual studio code를 열고 설치된 폴더를 연다. 

파일의 구조는 이렇게 생겼다.

개발모드로 프로그램 실행하기(화면)

package.json을 보면 'scripts' 여러 명령어들이 기본 세팅되어 있다. 스크립트 명령어를 커스텀할 수도 있다.

패키지가 설치된 폴더 내에서 아래 명령어로 브라우저에 창을 띄어본다.

npm run start

또는

npm start

개발모드의 화면이 나타난다.

개발을 위한 모든 준비가 끝났다! 🙌🏻

Github에 Repository 생성하고 올리기는 더 보기 클릭

1. 깃허브(github) 회원가입 및 로그인

https://github.com/

GitHub: Let’s build from here

1-1. Git도 설치해 준다. 

다운로드 링크: https://git-scm.com/download/

자세한 설명은 https://goddaehee.tistory.com/216 참조!

Git - Downloads

2. Repositories 메뉴에서 오른쪽 상단에 있는 'New'를 선택

3. Repository name에 프로젝트명을 영문으로 작성 후 아래 'Create repository'를 선택(하단 녹색버튼 있음)

• repository를 비공개하고싶다면, Private를 선택

3. 터미널에서 user profile 설정

https://kotlinworld.com/266 여기 참고!

4. 아래 코드를 그대로 Visual Studio Code 터미널에 가서 복붙 하기