안녕하세요 React 시작하기에 앞서 환경설정하는 방법을 소개해보겠습니다.
국비 수업에서 들을 때 보고 잘 따라했는데 집에와서 노트북에 하려했을때 엄청 헤맸어요 ㅎㅎ.
1. 일단 node.js 가 깔려있는지 먼저 확인해야 합니다.
cmd 창을 켜고
node -v이렇게 입력 했을때 해당 node의 버전이 아래와 같이 나와 있으면 깔려 있는겁니다!
그리고 저 같은 경우에는 cmd 창 말고 깃허브를 설치하면 같이 설치되는 git bash를 사용했는데
CMD나 POWERSHELL, GITBASH 등등 약간의 커맨드 차이가 있긴 하지만 이 셋다 써도 된다고 합니다!.
2. CMD 창에서 VisualCode 파일에 접근해 준다.
cmd가 저처럼 생소한 분들이 많을텐데 접근할때 필요한 저의 얕지만 꼭 필요한 지식을 먼저 공유하겠습니다.
ls // 현재 위치에 들어있는 파일의 목록을 제시
cd 폴더명 // 해당 폴더로 접근
cd .. // 현재 위치에서 상위폴더로 이동
mkdir 만들고자하는 폴더명 // 현재 위치에 해당 이름으로 폴더를 만듬.
cd d: // 바로 d 드라이버로 이동제가 하는 cmd 용어 전부입니다. 저 용어들을 잘 사용해서 Visual Code 폴더에 접근해 줍시다.
접근이후에 mkdir 만들고자하는 React 폴더명으로 만들어 주세요!
해당 폴더에 접근했다면
아래의 커맨드를 입력 해 주세요.
그러면 아래와 같은 내용이 출력됩니다.
마찬가지로 아래의 커맨드를 입력해주세요.
그러면 아래와 같은 내용이 출력될것입니다.
이후 최종적으로 입력해줘야 할 커맨드!
yarn create react-app 폴더명이 커맨드를 입력해주면 쭉 설치가 됩니다.
학원 컴퓨터는 느려서 꽤나 오래 걸렸던게 생각이 나네요.
3. PowerShell 관리자 모드 접속해서 접속권한 부여하기!!
Powershell 관리자 모드 접속후 아래의 커맨드를 입력해줍시다
Get-ExecutionPolicy
입력했을때 'Restricted' 라는 문구가 출력이 되어야 합니다!
위의 문구가 출력이 됐다면 다시 아래의 커맨드를 입력합니다.
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser위의 커맨드를 입력하면 아래와 같은 내용이 출력됩니다.
뭔가 위험어쩌구 무섭지만 용기있게 Y를 누르고 엔터 누르면 됩니다.
(저는 배운것을 적고 있는겁니다. 위의 절차로 인해 발생하는 손해는 곰나무와 무관함을 알려드립니다.)
4.Visual Code 에 접속해서 React 설치를 원하는 폴더에 접근해주기!
위의 File 에서 Open Folder 로 들어가 아까 최종적으로 입력해줬던
폴더명 기억하시나요? 이 폴더를 지정해줄 겁니다.
저 같은 경우는 그 폴더 명이 sample_react 입니다.
저 폴더를 한번 클릭해주고 폴더 선택을 눌러주시면 됩니다!
해당 폴더를 들어가보면 저희가 아까 다운받았던
이러한 폴더들이 깔려 있을 거에요!
이후에 Terminal 창을 열어주고
생긴 터미날 창에 아래 커맨드를 입력해 주세요!!
yarn start
yarn start를 치면 아래와 같은 내용이 출력되는데
이것도 역시 쿨하게 Y를 눌러주면 장엄한 로고가 빙빙 돌며 웹 React 창이 실행됩니다!!
이러면 React 초기세팅 끝!
React 초기 세팅에 대해서 알아 보았는데 다들 못난글 보며 따라오시느라 고생하셨습니다!
포스팅을 마치겠습니다!
'React > React 개념 정리' 카테고리의 다른 글
| React hook! 성능 개선을 위한 useMemo (0) | 2022.10.22 |
|---|---|
| React! Hook의 useEffect 에 대해서 알아보자! (0) | 2022.10.22 |
| React! Hook 의 기본 useState 에 대해서 알아보자! (0) | 2022.10.22 |
| React 에서 배열에 값을 추가 할 때 concat을 쓰는 이유 (0) | 2022.10.21 |
| React 에서 Map 사용하기! (0) | 2022.10.21 |
댓글