[React.js] CJ UNIT 8기 바이럴 테스트 만들기 00 React 초기 셋팅 (Mac m1)

이번에 CJ UNIT에서 바이럴 테스트를 제작하는 TF에 참여하게 되었다. 서버없이 진행하는 것이라 다같이 프론트를 맡아서 진행하게 되었다. 학기중에서 부터 시작된 TF활동이라 휴학생분들께서 너무 너무 고생많이 하셨다. 이제 방학이니깐 열심히 해야지 !! 

 

React를 이용해서 바이럴 테스트를 제작하기로 하였다.

 

바이럴 테스트란?

심리테스트, mbti 검사 등 요즘 유행하는 많은 검사가 있는데 이를 통해서 마케팅 및 홍보를 하는 것이다. 주로 어떤 사이트에서 질문을 등록하고 배포하는 경우가 많은데 우리는 메타버스 속에서 검사하는 것으로 할 것이기에 웹페이지만 제작하는 것으로 진행하기로 하였다.

 

맥북 MacOS m1으로 개발을 진행

 

맨 처음 단계인 react 개발 셋팅을 하였다.

https://velog.io/@cho876/Chapter01.-React-개발환경-세팅-Mac-OS

Chapter01. React 개발환경 세팅 (Mac OS)

해당 벨로그를 참고해서 초기 셋팅을 하였다. react는 간단하게 초기 셋팅이 되었다.

 

command+space를 눌러서 검색창을 띄운 뒤 터미널을 열어준다.

iterm을 이용하고 있기 때문에 iterm을 열어 주었다.

이렇게 node.js 설치 되었는지 확인해준다. : node -v

원래 설치 되어있기 때문에 설치는 해주지 않았다.

npm(Node Package Manager)도 제대로 깔려있는지 확인해 주었다. (*node.js에서 사용하는 여러 모듈들을 간편하게 사용할 수 있게 해준다.) : npm -v

node.js 최신 버전을 깔아준다 :npm -install npx -g

그러면 에러 문구가 엄청 많이 발생하는데 이를 방지하기 위해 sudo(최고권한)을 앞에 붙인다. : sudo npm -install npx -g 

그다음 npx 버전 확인 : npx -v

그리고 react 개발은 VScode에서 이뤄진다. 근데 이미 깔려있으니깐 해당 앱으로 넘어가서

VScode의 터미널을 열어준다. 

pwd : 현재 위치를 알려줌

현재 위치에 react 파일을 만들어 줄 것이다.

npx create-react-app 파일명 

인데 밑에 보면 빨간색 글자가 보인다. 빨간색 글자는 ... 에러라는 뜻

보니깐 파일명에 대문자가 들어가면 안된다. 다 소문자로 써줘야한다. 그래서 viral로 바꿔서 만들어줬다.

저렇게 쭈우우욱 뭐라뭐라뭐라 하다가 마지막에 cd viral npm start Happy hacking!이 나오면 성공인것 ~ 이 문구가 중요하다.

이 이후에 react를 실행해줘야하는데 * react는 실행하면 새로운 웹창에 띄워진다. 그때 저 명령어를 이용해줘야하기 때문이다.

먼저 cd viral로 폴더를 이동해주고

npm start로 react를 실행시켜주면 된다.