[React] VS Code를 사용하여 세팅하기
원래 나는 jsp... jquery 시절 자바스크립트로 프론트엔드(?) 개발을 했었다... (아주 구석기시대ㅋㅋ)
그러다 Frontent Framework가 급부상 하면서 예전 프로젝트에서 Vue를 한번 찍먹(?)으로 맛보게 되었고,
지금 회사에선 React로 개발해보고자 하는 니즈가 있어 정리해본다.
2개 차이가 궁금하다면 아래글 참조
https://ssmyefrin.tistory.com/96
React VS Vue
요즘(?)에도 인지 모르겠지만 프론트엔드 개발의 양대 산맥 React 와 Vue!!! 일단 나는 Vue만 써본사람으로써 React는 어떨때 써야 더 매력적인지 알아보다 정리하게 된다. Vue와 React의 가장 큰 차이는
ssmyefrin.tistory.com
✔ 우선작업
NodeJS 설치가 필수로 되어있어야 한다.
VSCode도 설치해야한다.
Node.js 설치하러 가기(LTS 버전 추천)
Node.js — 어디서든 JavaScript를 실행하세요
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
VSCode 설치하러 가기
https://code.visualstudio.com/download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
나는 좀 쉽게 개발하기 위해 NextJS 프레임워크를 이용하겠다.
1. 새로운폴더를 하나 만들고 VsCode에서 Open 해준다.
2. View → Terminal 창을 열고 해당 아래 명령어 입력
npx create-next-app@latest
혹시 실행하다 하다가 갑자기 이런 에러가 뜨는경우가 있다.
npx : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npx.ps1 파일을 로드할 수 없습니다.
자세한 내용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1
이런경우 윈도우 powershell 을 관리자권한으로 실행시킨뒤 아래 명령어 입력
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
3. 설치가 되었다면 실행해보자
http://localhost:3000/
이런화면이 뜬다면 성공!