VScode의 리액트 기능을 통한 웹사이트 개발 방법

웹사이트를 만드는 방법은 아주 다양하다. 

그저 간단하게, 메모장에 html코드를 작성하여 .html로 저장하는 방식으로도 기초적이긴 하지만 만들 수 있고 VScode와 같은 IDE를 활용하여 만들수 있다.

여기서는 VScode의 리액트 기능을 통해서 웹사이트를 개발하는 기초 단계를 설명하고자 한다.

이런 생각을 할수있다.

굳이? 굳이 왜 VScode에서 그리고 왜? 리액트라는 기능을 사용해야 하는가? 라는 의문을 말이다.

그에 따른 대답은 간단하다.

직관적으로 개발하고 있는 진행상황을 바로바로 볼 수 있으니까.

VScode의 리액트 기능을 사용하면, VScode에서 코드를 지속적으로 동기화 하여 사용자가 VScode에서 수정 및 추가. 그리고 제가하는 부분들을 곧바로 반영해주고. 오류가 발생하면, 어느 코드가 문제가 있는 지 등등 다양한 정보를 제공해준다.

또한, VScode의 라이브러리 기능을 통해서 폭넓은 개발환경을 지원해주기 때문이다.

사전준비

Node.js 설치 https://nodejs.org/ko/

VScode 설치

검색창에 PowerShell 검색 후 관리자 권한으로 실행

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned 

명령어 입력 후 엔터.

1. VScode 접속

- 바탕화면에, 프로젝트를 진행할 임의의 폴더를 생성한다.

- VScode에 접속하여, 상단의 [파일] > [폴더 열기] 를 클릭하여 전에 생성한 임의의 폴더를 선택한다.

2. VScode의 터미널에서 리액트 설치

- 상단의 [터미널] > [새터미널]

터미널에 PS C:\Users\yangg\Desktop\test> 와 같은 폴더 경로가 나오면 정상이다.

여기서 npx create-react-app <원하는 이름> 을 입력하면 정상적으로 설치를 시작한다.

ex) PS C:\Users\yangg\Desktop\test> npx create-react-app ttest

y를 입력하면, 자동으로 리액트가 설치된다.

정상적으로 설치가되면 위와같은 메시지와 함께, 새로운 폴더 및 파일들이 생성된 것을 확인할 수 있다.

3. 리액트 실행

- 터미널에 만들어진 리액트 폴더로 진입하여 명령어를 입력해준다.

PS C:\Users\yangg\Desktop\test> cd .\ttest\

PS C:\Users\yangg\Desktop\test\ttest> 

위의 경로를 보면, 리액트를 설치했을때 정했던 ttest디렉토리로 경로를 수정한것을 확인할 수 있다.

- 설치된 경로에서 다음과 같은 명령어를 입력한다.

PS C:\Users\yangg\Desktop\test\ttest> npm start

그러면, 자동으로 웹사이트가 열리게 된다.

리액트는 기본적으로 3000포트를 사용하기에, 주소는 http://localhost:3000/ 와 같은 상태이다.

그렇기에, 만약 리액트를 실행했음에도 웹사이트가 열리지 안는다면. 

크롬의 주소창에 http://localhost:3000/ 을 입력하면 위와같은 페이지가 나타난다.

이게 리액트의 첫 초기 화면이자, 웹사이트 개발을 시작하는 기반 단계이다.

이제, 리액트의 Public 디렉토리와 src 디렉토리를 관리하고 파일들을 수정 및 추가하며 웹사이트를 개발할 수 있다.

간단하게나마 html의 구조나, 코딩 예제와 같은 부분을 통해 학습을 도움을 주고자 했으나

문뜩 그런생각이 들었다.

지금은 인공지능의 시대.

사용자가 하고자하는 의지만 있다면, 그 누구보다 친절하고 빠르게 피드백이 가능한 유능한 비서들이 넘쳐나다는 사실을 말이다. 

그렇기에 인공지능과 함께 자신만의 홈페이지를 개발하는 경험을 하는 것을 추천하는 바이다.

추가로.

이와같이 인공지능과 함께 개발하는 것을 '바이브 코딩'이라고 한다.