antd demo project 생성
* 대략 순서는 아래와 같습니다.
1. yarn 이 설치되어 있어야 합니다.
- yarn 설치 방법은 https://blog.naver.com/mantkr/222659502608 참조
2. 명령프롬프트로 이동
3. yarn create react-app antd-demo 엔터
4. cd antd-demo
5. yarn start
시작....
1. 프로젝트를 관리할 vscode를 생성할 폴더를 만들어주세요.
- 저는 c:\vscode로 생성 합니다.
- 명령프롬프트를 띄어주세요. (검색 아이콘에서 cmd 입력도 가능)
- cd c:\vscode 엔터
![](https://blog.kakaocdn.net/dn/cqGXsx/btrHp5TqsZr/mncKSTBfUWgIx4k08eeIe0/img.png)
2. yarn create react-app antd-demo 엔터
![](https://blog.kakaocdn.net/dn/bnnP9S/btrHvn6NRK8/bNkXYbMMXLeYkmUfB02H2k/img.png)
아래 처럼 다운 받습니다. 시간이 조금 걸려요...
![](https://blog.kakaocdn.net/dn/beO09S/btrHpwKLvBE/6Be3CvJwKAAleMoNb66Fb0/img.png)
다 다운되면.. 시작 명령어를 친절하게 알려줘요.
![](https://blog.kakaocdn.net/dn/cHIWil/btrHtg0ZvI3/KEzWLHA8W7gjBMKp2DmoC1/img.png)
3. cd antd-demo
![](https://blog.kakaocdn.net/dn/cqeJyw/btrHqEuvSvG/mkgBiV9WeIID02EXtEfbtk/img.png)
엔터시 아래 경로
![](https://blog.kakaocdn.net/dn/xfkuJ/btrHpPi3pr3/pKwxkZXV2xruix9bCJp99K/img.png)
4. yarn start 엔터
![](https://blog.kakaocdn.net/dn/bsQlSH/btrHoMUUeMT/n46trJ8zx2PN6pNk4lWY5k/img.png)
아래처럼 시작 하는중...
![](https://blog.kakaocdn.net/dn/bGt68E/btrHtwJUJnu/J645VnJ1UukIaaJhl9f1g1/img.png)
시작이 완료되면 아래처럼 정보가 출력되요.
![](https://blog.kakaocdn.net/dn/p53kU/btrHpOxDsXW/O8PtaYx9QsURMysWgkkEqk/img.png)
5. 시작시 자동으로 브라우저가 뜨며 접속됨
- http://localhost:3000
![](https://blog.kakaocdn.net/dn/UXmge/btrHumtwywy/qqCznMRMjlAZBZOPYt6HRK/img.png)
6. antd-demo 폴더로 이동
- 아래 폴더철럼 되어 있습니다.
- src 폴더에 소스 파일이 있어요.
![](https://blog.kakaocdn.net/dn/bbM6S2/btrHoOSJv9y/0XxEL2GjRQCsqSP3wSS8RK/img.png)
7. src 폴더
![](https://blog.kakaocdn.net/dn/dFpGMS/btrHpDX3XMu/OVcuaHoj9UF01KO6gSjpw0/img.png)
8. 일반 에디터에서 app.js 수정시는 한글이 깨질 수 있어요.
![](https://blog.kakaocdn.net/dn/XznmP/btrHqDh3nNB/nsg6xFCFRPJa9BtRT6PNtK/img.png)
9. 실행시 한글 깨짐
![](https://blog.kakaocdn.net/dn/dFp005/btrHqDWFVeP/0vJm1Jh52RVnTrFBmStIwk/img.png)
10. vscode에서 수정하기
- vscode에서 열어서 수정해야 한글 인코딩이 안깨 집니다.
![](https://blog.kakaocdn.net/dn/6axkF/btrHqoTC6jn/JegDYj7d5kXIUGlvRSr9H0/img.png)
11. 한글 안깨지고 잘 나오죠??
![](https://blog.kakaocdn.net/dn/yNzMv/btrHrNyAVTk/xAFfMfIPZTiswtuACNAnfK/img.png)
이상 hello word react 프로젝트 였습니다.
다양한 컴포넌트 등은 antd 에서 확인하세요.
https://ant.design/docs/react/use-with-create-react-app
끝..