vscode react 설정

자바스크립트 강의가 끝나고 리액트 강의가 시작했습니다

리액트가 프론트엔드의 메인이라고 할만큼 중요하고 복잡하다고 하여 열심히 따라잡을 예정입니다

 

리액트란?

- 사용자 인터페이스를 만들기 위한 자바 스크립트의 라이브러리 중 하나이며,

모듈형 개발로 빠르게 지원이 가능하고 라이브러리 특성상 붙여 사용하기 때문에 간편하여 프론트엔드의 표준으로 자리 잡았습니다

 

이러한 리액트를 사용하기 위해 vscode에서 기본적인 설정을 해야합니다

 

 

먼저 터미널을 실행할 폴더안에 리액트 파일을 만들어야합니다

 npx create-react-app "파일 이름" 으로 폴더를 생성해줍니다

 

여기서  npx는 npm, yarn과 같은 프로젝트 패키지 관리툴입니다

 

create-react-app은 CRA라고 부르며

react에서 따로 설치하지 않아도 필요한 라이브러리들은 자동으로
설치해주고 폴더 구조도 자동으로 만들어주는 일종의 명령어로 설정하기 까다로운 바벨과 웹팩을 초기 패키지에 포함하는 것이 장점입니다

 

여기서 바벨은 번역기이며  최신버전이 지원되지 않는 브라우저에 맞는 버전의 언어로 변환시켜줍니다

 

웹팩은 가장 많이 사용되는 모듈 번들러이며, 애플리케이션을 구성하는 자원 (html, css, js)등 을
모두 각각의 모듈로 보고 이를 종합해 하나의 결과물을 만드는 도구입니다

 

저는 강의에서 사용한 "todolist"란 이름으로 폴더를 생성했습니다

 

 

명령어를 작성하여 실행하면 리액트 라이브러리 폴더를 생성하기 시작합니다(시간이 좀 걸릴 수 있습니다)

 

 

 

생성되면 이런 문구가 뜨며 다음 명령어를 칠 수 있게 됩니다

이제 todolist폴더가 생성되었으니 폴더로 들어가야합니다

현재있는 폴더에서 cd "폴더이름"을 실행하면 폴더 내부의 todollist 폴더로 이동됩니다

 

 

잘 들어왔으면 이제 todolist를 실행시켜봐야겠죠

npm start 명령어로 라이브러리를 실행시킵니다

 

 

실행을 하여 완료되면 새 브라우저창이 열리면서 원자모양으로 된 아이콘이 보입니다

 

 

잘 실행이 되었으면 이제 폴더정리를 해줘야 합니다

라이브러리 폴더이긴 하지만 잘 안쓰이는 파일과 현재 처음 배워나갈때는 필요없는 파일들이 있기 때문에 제거해주고 원할하게 볼 수 있게 만들어줍니다

 

 

 

 

todolist 폴더의 내부는 이렇게 되어있습니다

먼저 public 폴더 안에서는 favicon.ico와 index.html을 제외한 나머지 4개의 파일을 삭제해줍니다

다음 src 폴더 안에서는 app.css js, index.css js 이 2쌍을 제외한 나머지 파일을 다 삭제해줍니다

app.test.js는 나중에 쓰이지만 현재는 필요하지 않으므로 삭제해줍니다

 

 

 

 

 

 

 

 

다 삭제하고 나면

 

 

 

이렇게 줄어들게 됩니다

하지만 여기서 터미널이나 브라우저창을 보면 오류가 나있는걸 볼 수 있습니다

정리되어있는 라이브러리에 파일들을 지워 생긴 오류인데요,

 

리액트는 오류가 났을시  '어떤 파일' 의 '몇번째 줄' 에서 오류가 발생했는지 알 수 있기 때문에 오류 텍스트를 잘 확인하며 수정하면 오류수정이 가능합니다

 

제 브라우저 창에 써있는 첫 오류 텍스트는 이거네요

src폴더 안의 app.js파일에 오류가 있으며 todolist /src폴더에 logo.svg 모듈을 찾을 수 없습니다 라고 뜹니다

logo.svg는 아까 저희가 필요없다고 삭제한 파일중 하나인데 오류가 생긴 App.js 파일로 가보면

 

코드가 짜여있습니다

지금 logo.svg가 app.js에 import되어있기 때문에 logo파일의 데이터를 지워줘야합니다

 

logo파일과 관련된 데이터를 다 지웠더니 

 

기존의 app.js 오류는 사라지고 새로운 index.js에 오류가 생겼네요 

여기서도  src 폴더 안의 reportWebVitals모듈을 찾을 수 있다고 나옵니다

이것도 수정해보겠습니다

 

작성되있는 index.js의 코드입니다. 여기서 reportWebVitals과 연관된 코드를 지우겠습니다

 

 

코드를 수정했더니 터미널이 정상적으로 작동하는걸 볼 수 있습니다.

혹시나 오류가 나시는 분들은 어디파일에 어디 부분이 오류가 있는지 터미널이나 웹 브라우저에 설명이 나와있으니 관련된 것을 수정하면 될 거에요

 

 

 

 

오류가 없으니 웹브라우저에도 오류 텍스트가 없어진 모습입니다

이렇게 리액트를 사용할 수 있게 간단한 설정이 끝났습니다

 

다음 글에는 몇몇 파일의 설명과 리액트에 코드를 작성해보겠습니다