[현대이지웰 Java 풀스택 개발자 아카데미 6월] TIL 2주차 - React 사용 환경 세팅하기

📚 요약

이번주엔 뭘 작성할까 고민하다가 최근 노트북을 바꾸면서 (무려 12년만에...😭)

개발 환경 세팅이 생각보다 자주 찾아보게 된다는 걸 깨달았다.

 

블로그에 저장해두면 나도 찾아보기 쉽고😎

다른 사람들도 자주 찾아주지 않을까 해서 정리해보기로 했다!

 

1. VS Code 설치
   • Extention 설치
2. Node.js 설치

순서로 풀어보겠다!

 

 

 

🎷 VS Code 설치

수업은 VS Code의 터미널을 통해 빠르게 리액트 앱을 생성해주어야 하므로

VS Code가 필수다!

 

가장 먼저 검색에 [VS Code]를 입력해준다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

 

나는 Windows를 쓰기 때문에 정 중앙에 커다랗게 쓰인 Download for Windows로 다운로드 했다.

windows를 쓰는 당신! 지금 다운로드 하세요!!

 

 

설치파일을 실행하면 약관 동의해주고 그냥 다 Next해도 되긴 하지만~

PATH에 추가(다시 시작한 수 사용 가능) 을 추가해주자!

 

터미널에서 vs code를 사용할 수 있게 해주는건데 나중에 필요할 때 하려고 하면 귀찮다...

체크 안 했으면 나중에 재설치 해줄 때 체크해도 된다

 

 

 

 

설치가 완료되었다면 이제 Extention (확장)을 설치해줘야 한다!

Extention (확장) 은 VS Code 실행 후 왼쪽 5번째 아이콘을 클릭하거나

Ctrl + Shift + X 를 누르면 된다.

말풍선 찍기 은근 힘들었어...

 

이게 편의기능을 사용자가 선택해서 설치할 수 있도록 하는 기능인데

매우 유용한 것들이 많다...!

 

 

• Korean Language Pack

가장 먼저 한국어 팩이다!

 

영어로 해줘도 좋지만 아직은 코딩 익히는 게 더 중요하니까

영어공부는 차차 하기로 했다...😗

• Reactjs code snippets

react 코드를 더 편하게 작성할 수 있도록 해주는 기능이다!

자동완성, 틀린 문법 알림 기능 등이 있다.

 

특히 컴포넌트 추가할 때마다 필수로 입력해야하는 구문을

rsc 만 입력하고 Enter를 누르면 자동완성 해준다!

 

 

 

🎺 Node.js 설치

새로운 리액트 앱을 만들 때마다 일일이 설치하는 건 힘드니까

터미널 커멘드 한 줄로 자동 생성할 수 있도록 Node.js가 도와준다!

 

 

검색창에 [node.js 다운로드]를 검색해준다.

https://nodejs.org/ko/download

Node.js — Node.js® 다운로드

 

 

스크롤을 조금 내려서

Windows 설치 프로그램 (.msi)를 선택해서 다운로드 해준다.

 

다른 OS를 쓴다면 선택상자로 가볍게 변경해서 다운로드 할 수 있다!

 

 

설치파일을 실행한 후에는 다른거 볼 필요 없이 전~~부 NEXT 하고 인스톨 하면 된다.

 

 

설치가 제대로 되었는지 확인하려면 CMD창을 열어서

node -v   또는   npm -v  를 입력해서 버전 정보가 뜨는지 보면 된다.

노란색 영역은 내 유저ID라서...

 

 

 

🔥 결론

create-react-app으로 리액트 앱 생성하고 컴포넌트 추가하는 건

따로 새 글에서 풀어야 할 것 같다...

 

생각보다 내용이 길어진다...😭