강의 실습 예제인 주사위 게임을 구현해보는 것이 목표이다
react 프로젝트 생성
npm init react-app .
설치가 완료되면 아래와 같은 패키지 구조가 완성된다
개발 모드 실행
해당 디렉토리에서 명령어 입력
npm run start
샘플 화면이 만들어지면서 생긴 더미 이미지, 텍스트 등을 삭제하였다
하단 이미지처럼
public 디렉토리 내부 index.html
src 디렉토리 내부 index.js
를 제외하고 더미 데이터를 모두 삭제하였으며 두 파일 내부에도 필요없는 코드들은 다 삭제하였다
※ 필요없는 코드 정리 [ Git 으로 확인 ]
https://github.com/KOO-YS/cramming-react/commit/b31559a02dd8a00a355527e2c7420e23eba572aa
💡💕
index.html body 태그 안에 <div id="root"></div>
코드를 놓쳤다.. 만약 이 글을 읽고 따라하는 사람이 있다면 추가하도록 하자!
코드 정리 후, 실행 화면
출처 : Code it "React 웹 개발 시작하기" 강의를 보며 실습합니다.
'React' 카테고리의 다른 글
React : study(4) { React State } (0) | 2023.02.08 |
---|---|
React : study(3) { React Component, Props, Children } (0) | 2023.01.25 |
React : study(2) { React JSX, Fragment } (0) | 2023.01.21 |
React : prepare() { React를 위한 준비 사항 - node, npm, React Developer Tool 설치 } (0) | 2023.01.19 |
댓글