노마드코드님의 유튜브를 즐겨보는 구독자로서, 무료로 풀어두신 클론코딩 강의를 들어보고자 한다:)
드디어 본격적인 첫 시작! 을 하려고 했으나,,,ㅠㅠ 예상치못한 오류로 인해…
초반 진도만 겨우 나갔다ㅠ_ㅜ 아쉽…
React로 영화 웹서비스 만들기
저번편은 여기로


create-react-app 설치

create-react-app 를 설치해야 한다.
원래 react는 처음부터 환경설정을 하려면 힘들다고 한다.
그래서 편하게 설정하기 위한 것이 있으니, 바로 create-react-app이다.
create-react-app은 페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate으로,
모든 것을 설정하지 않아도 되고, 페이스북에서 주기적으로 업데이트를 해주기 때문에
많은 유저들이 사용하고 있다고 한다.

npx create-react-app movie_app

‘movie_app’는 원하는 폴더명으로 지어준다



이미지1

  • 그런데, 에러가 발생했다….! ㅠㅠ
    원인은 COMSPEC의 환경변수 설정이 잘못되어서 그런것!
    원인도 모르고 무작정 nodejs만 지웠다 재설치를 여러번 반복했다
    이래서 모든 문제는 원인을 알아야하는 것인가! ㅠㅠ
    어쨌든 환경변수를 바꾸면 된다고 해서 시도해봤다.



이미지2

  • 이번에는 다른 오류가 생겼다…ㅠㅠㅠㅠ 이런….ㅠㅠㅠ
    C:\Users\minkyu\AppData\Roaming 디렉토리로 이동 후
    npm 디렉토리와 npm-cache 디렉토리를 삭제해준다.
    npm cache clean --force 명령어를 입력해서 cache를 삭제해준다.
    그 다음 다시 시도했더니 성공!!!



    이미지3
    캬캬! Success!와 Happy hacking! 문구를 보니 너무 반갑다…ㅠ_ㅜ…
    이제 ‘movie_app’라는 이름의 폴더가 생성되었을 것이다!


에디터로 폴더 열기

Visual Studio Code(VSC)로 해당 폴더를 열어주었다.

이미지4

  • README.md 에 이렇게 많은 내용이 있을텐데 우선은 다 지우자!
    그리고 날 위한 설명을 적어준당!
    어떻게 적든 자유~~



이미지5

  • package.json 파일을 열어서 표시한 부분을 지운다!
    우리에게는 필요없는 부분이라고 하신당,,,ㅎㅎㅎ



  • npm start
    

    를 입력하면 프로젝트가 실행된다!
    이미지6
    바로 이렇게!!! 야호!!!