react, node.js 학습
웹개발 취업중 많은 회사에서 필요로하는 기술인 것 같아 공부하고 기록을 남김
Node.JS 설치
VSCODE 설치
React를 활용한 프로젝트!
1. React프로젝트 생성하기
- 생성하려하는 본인에 폴더를 우클릭하여 TERMINAL을 열어줍니다
. - 실행된 TERMINAL에 npx create-react-app 프로젝트명을 입력하면 프로젝트 생성이 진행됩니다.
npx : 라이브러리 설치를 도와주는 명령어. Node.js 설치가 되어 있어야 사용 가능.
create-react-app : React 세팅이 다 된 boilerplate를 만들기 쉽게 도와주는 라이브러리.
- 생성이 완료 됐다면 VsCode에서 생성된 폴더를 열어줍니다.
File -> Open Folder .. -> blog 폴더 -> 폴더 선택
2. 생성된 프로젝트 알아보기
node_modules : 라이브러리 모음 폴더
public : 이미지 파일과 같은 static 파일 보관함. 빌드 시에 압축되지 않음.
src : 소스 코드 보관함
src/App.js : 메인페이지에 들어갈 HTML을 작성하는 곳
public/index.html : 메인페이지 (코드 상으로는 아무것도 없다. 왜냐하면 App.js에 있는 것들을 index.js에 의해 index.html 안에서 보여주기 때문이다.)
package.json : 설치한 라이브러리 목록
3. 실행
VSCode 상단에 TERMINAL -> NEW TERMINAL 통해 TERMINAL을 열어줍니다.
TERMINAL에 npm start라고 입력합니다.
정상적으로 실행된다면 아래와 같이 화면이 나옵니다.
(원래는 기본값에 화면이 있습니다.. 세팅하느라 기본값을 지워서 아래와 같습니다..ㅎㅎ)
4. 마무리
오늘은 React를 활용한 게시판을 만들기전에 간단하게 프로젝트 생성을 했습니다.
처음 사용해보는 React라 앞으로 개발이 너무 기대됩니다!
