주요 내용으로 건너뛰기

0. 프로젝트 기본 세팅

create-react-app을 통한 react / redux 기본 셋팅

2017.10.20 (금) 수정

- 제가 글 작성 당시에만 해도 군인 신분이었기 때문에 여러가지 제약이 많았습니다;;

이제와서 지금 쓴 글을 읽어보니 상당히 보기 불편하더군요. 깃헙 링크 정도는 걸어주는게 맞는 것 같아서 아래 제깃헙 링크를 추가하겠습니다. 참조하실 분들은 먼저 제 저장소(https://github.com/leejh3224/simon-game)를 방문해주세요~. 


* 완성본을 직접 본인의 컴퓨터에서 실행시키기(개발서버 실행)

- 먼저 터미널을 실행시킵니다. (혹은 vscode를 사용하신다면 내장 터미널을 이용하셔도 좋습니다.)

- git clone https://github.com/leejh3224/simon-game.git를 통해 저장소를 복제해줍니다.

- 터미널에 cd simon-game을 입력하여 복제된 폴더로 위치를 변경하고,

- npm install 혹은 yarn 명령어를 입력하여 필요한 패키지를 다운로드해줍니다.

- npm start 혹은 yarn start 명령어를 입력하시고 localhost:3000 로 들어가시면 프로젝트가 잘 실행되는걸 확인하실 수 있습니다.


* 추가

1. yarn 을 통해 global 패키지로 create-react-app을 실행시켰을 때

맥 os의 경우 bash command not found 에러가 뜰 때가 있습니다.

이 경우 yarn global 설정하기(http://wani.kr/posts/2017/05/24/yarn-global-setting/) 게시글을 참조해주세요.



일단 제가 사정상 깃헙을 쓸 수 없어서 최대한 코드나 세팅을 자세하게 설명하도록 하겠습니다.


우선 저는 패키지 매니저로 npm 대신 yarn 을 쓰도록 하겠습니다.


yarn은 https://yarnpkg.com/에 들어가셔서 INSTALL YARN - 운영체제 선택 - DOWNLOAD INSTALLER을      통해 직접 설치하시거나


혹은 



Yarn에 대해 더 알고 싶으시다면 아래 링크를 참조해주세요.


 Yarn에 대한 자세한 설명 : https://www.vobour.com/book/view/Y5vcMHJGHyN5ayheM


다음은 텍스트 에디터군요.


저는 vscode를 추천합니다.  


일단 vscode를 다운받으시고(https://code.visualstudio.com/), 그 다음 기본적인 셋팅을 해줍시다.

VSCODE 화면
VSCODE 화면


다운로드가 완료되었다면 위와 같은 화면이 나올텐데  왼쪽의 다섯메뉴 중 맨 아래 '확장'에 들어가서

npm 3.3.0 / yarn 1.2.0 을 설치해줍시다. 


이제 따로 WIN + R을 통해 따로 터미널을 실행하지 않아도 에디터 내에서 스크립트를 실행할 수 있게 되었습니다! 


다음으로 ctrl + ` (backtick - 숫자 1 옆에 있는 키)를 눌러 터미널을 킨 다음 'create-react-app' 모듈을 다운로드 합시다.

yarn add global 이 아니라 yarn global add 입니다!
yarn add global 이 아니라 yarn global add 입니다!

자 이제 리액트 생태계에서 가장 훌륭한 boilerplate(웹펙/리액트/SCSS 등 자주 사용되는 기본적인 모듈들을 함께 모아놓은 템플릿) 중 하나인 'create-react-app'을 사용할 수 있게 되었습니다.


명령어는 굉장히 간단합니다. 



이제 cd(cmd 명령어 - 디렉토리 이동) 명령어를 통해 작업 디렉토리로 이동합시다. 



localhost:3000
localhost:3000

localhost:3000으로 접속했을 때 이 화면이 뜬다면 제대로 따라오고 있는 겁니다.


이제 쓸데없는 파일들을 지우고 본격적으로 시작할 준비를 해봅시다.


src 폴더에서 

1. registerServiceWorker.js

2. logo.svg

3. App.test.js

4. App.js

5. App.css 의 다섯 파일을 지운다음


다음의 세 줄을 지워줍니다. (--로 표시된 부분)

그리고 

Hello World를 띄워줍시다 ㅋㅋ


다음은 redux 차례군요.


Redux(https://deminoth.github.io/redux/)는 리액트 앱의 효과적인 상태관리를 위한 라이브러리입니다. 


공식 문서의 소개/3가지 원칙 페이지를 읽어보시면 알 수 있겠지만 redux에서 가장 중요한 것은


1. 진실은 하나의 소스에서(단일 스토어에서 상태를 관리)

2. 상태는 읽기 전용(상태는 액션 객체를 통해서만 변경가능)

3. 변화는 순수함수'로만' 작성(Math.random()과 같이 호출될 때마다 다른 값을 반환하는 함수는 사용할 수 없다는 뜻)


이 세 가지 원칙입니다. 


어렵게 느껴지실 수도 있지만 같이 프로젝트를 진행해나가다 보면 큰 무리없이 따라오실 수 있을 겁니다.


이제 redux를 우리 프로젝트에 추가해봅시다.



package.json을 다시 확인해보세요. 추가되었나요? 


마지막으로 styled-components 입니다. 


styled-components(https://www.styled-components.com/)는 리액트 앱에서 scss/less/postCSS 등의 각종 css 전처리기를 대신해서 사용할 수 있는 "자바스크립트"로 작성하는 CSS 정도로 이해하실 수 있습니다.


일단 프로젝트에 추가하도록 합니다. 



styled-components 도 이해할겸 시험용 컴포넌트를 만들어볼까요?


src 폴더 아래에 components 폴더를 생성한 뒤 RedP.js를 작성해봅시다.



붉은색 p태그를 만들어주는 RedP를 만들었습니다.  이제 index.js로 이동합시다. (수정된 부분은 **로 표시)



어때요? 붉은색 Hello World가 보이시나요? 


styled-components는 기본적으로 styled 객체를 불러온 뒤



이런 식으로 사용한다.


이제 필요한 세팅이 거의 끝났습니다!


다음 편에서는 Styled-components를 이용해 simon-game에 필요한 컴포넌트들을 만들어 보도록 하겠습니다~

다음 내용이 궁금하신가요? 구매하면 포스트의 나머지를 볼 수 있습니다.

  • 텍스트39

댓글