이것저것 공부한다:: React 시작하기
다음은 이 게시글을 참고하여 이루어졌다.
React를 공부하기 위해 기본적인 세팅을 진행하였다. 위 게시글에서는 React의 학습 및 개발을 위해 깔면 좋은 프로그램으로 다음을 소개하였다::
-Node.Js : JS 런타임 구동 환경.
-Yarn : 조금 개선된 버전의 npm이라고 함. 더 나은 속도와 캐싱 시스템을 사용하기 위함이라 하였으나, npm도 제대로 다루지 못하는 게 사실이므로 지금으로서는 설치 생략
-코드 에디터 : VS Code 사용 예정.
-Git Bash : Git을 사용하기 위해 필요한 프로그램.
React 프로그램을 만들기 위해서는 명령어를 입력해야 한다.
새로운 리액트 프로젝트를 만들기 위해서는 (입력은 Git Bash에 한다.) 다음 명령어를 사용한다.
$npx create-react-app begin-react
위 명령어의 begin-react는 프로젝트 폴더명에 해당한다. ‘npx create-react-app [폴더명]’의 형식을 지키되 자유롭게 입력해보자. 나는 ‘0726_reacr_pj’을 폴더명으로 선택하였다.
그럼 다음과 같은 창이 뜬다. y를 누른다.
앗! 첫 프로젝트 명으로 0726_reactPj를 선택했더니 ‘대문자를 섞어서는 안된다’는 에러 txt를 보내주었다. 이 글을 보는 분들께서는 미연에 이를 방지하기 위해 소문자로만 짓길 바란다. 하여튼, 작업이 완료되면 다음과 같은 화면이 뜬다. 설치를 한참 기다리면… 완료!
이 창이 제시해준대로 cd [파일명]을 입력한 뒤 npm start를 눌러 프로젝트에 접근한다.
다음 환경이 뜨는 걸 확인한다! 리액트 프로젝트가 정상적으로 만들어졌다. 위에 제시된 경로를 따라 들어가면 폴더 생성도 제대로 된 것을 확인할 수 있다.
이후 본인이 희망하는 editor를 열어 이 폴더를 연다.
코드는 이 쪽에서 수정 가능하다.
확인하면 좋을 각 폴더의 역할::
node_modules : 라이브러리 모음 폴더
public : 이미지 파일과 같은 static 파일 보관함. 빌드 시에 압축되지 않음
src : 소스 코드 보관함
src/App.js : 메인 페이지에 들어갈 HTML을 작성하는 곳
[참고 자료]
- 카테고리
- #기타
댓글 0
추천 포스트