구직활동 기간이 종료되어감에 따라 현재 작업하는 것을 잠시 멈추고, 2021 현재 구직시장에서 빠지지 않는 리액트를 시작해보려고 합니다. 기존에 java-script , js를 사용하여 웹 페이지를 만들었습니다. react의 중요성을 인지했고, 이를 적용하여 CRUD 프로젝트를 만드는 것을 목적으로 포스팅을 작성합니다.
[React] 홈페이지에서 자세한 사항들을 확인하세요 !
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.reactjs.org
이번 포스팅에서는 개발환경을 셋팅하는 부분을 포스팅하려고 합니다. 나머지 부분은 작성하면서 중간중간 구분해서 업로드를 할 예정입니다.
[Vs Code] 설치
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
[Node.js] 설치
react를 개발하기 위해서는 Node.js가 필요합니다. 크롬, IE와 같은 웹 브라우져가 아닌 환경에서도 java Script를 사용하게 해주며 패키지 관리를 위한 npm 사용이 가능합니다. (LTS 버전을 다운로드 받았습니다)
다운로드 | Node.js
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
-설치가 완료 되었다면 cmd 창을 열어서 "node -v" 입력해 node.js의 버전이 출력이 되는지 확인하세요. (정상 설치 확인)
React 프로젝트 폴더를 원하는 위치에 생성해줍니다. VS code를 실행하고 하단에 TERMAINAL에 리액트 프로젝트 명령어를 입력해줍니다. (하위 폴더를 만들어서 생성했습니다)
Reat 프로젝트를 생성하기 전 적용할 폴더 경로로 이동 : cd (프로젝트 경로)
리엑트 프로젝트 생성 : npx create-react-app (생성할 프로젝트명)
만약 TERMINAL이 안보인다면 위에 있는 설정 창에서 Terminal -> New Termina로 터미널을 열어주시면 됩니다. 프로젝트가 문제 없이 설치 되었다면 안내문이 나옵니다.
React 프로젝트 실행을 해봅시다. 설치가 완료된 훙도 메세지에 나와 있는대로 명령어로 리엑트 어플리케이션을 실행해볼수 있습니다.
cd (프로젝트명)
npm start
정상적으로 React 프로젝트가 실행이 되었다면 메세지과 함께 React App이 브라우저에서 실행되고 있는 것을 확인할 수 있습니다.
정상적으로 실행중에 나오는 안내 팝업은 엑세스 허용 버튼을 클릭해주세요 ! 여기까지가 React 개발 환경 셋팅을 끝냈다고 할 수 있겠습니다. 이제 폴더 안을 확인하고 Hello React를 출력해봅시다.
-src/App.js 파일에서 코드를 변경하여 "Hello React"를 출력했습니다.
이제는 개발에 필요없는 파일 목록을 지워야 하는 차례입니다. 이는 처음 실행했을 때 웹사이트 상에서 React의 로고가 돌아가는 화면을 출력을 위한 파일들입니다.
- src/App.css
- src/index.css
- src/logo.svg
- public/favicon.ico
- public/manifest.json
파일을 제거하고 나서는 다른 파일 안에서 제거한 파일의 참조부분을 다 지워줍니다 :) 이제 기본적인 React 문법에 대해서 공부하고 CRUD를 만들면 될 것 같습니다.