[React] 유형테스트 만들기(2)

1. 기획하기
2. 페이지 나누기
3. 레이아웃 짜기
4. 버튼 만들기
5. 버튼 기능들
6. 결과창 만들기 

 

이제 기획을 대충 마무리 했기 때문에 

 

일단 결론적으로 내가 사용한 라이브러리를 말하자면

styled-components
react
react-router-dom
react-redux
redux
react-dom

를 사용했다... 사실 연구하면서 하느라 설치해놓고 쓰지 않은 것도 있을 것 

 

참고로 IntelliJ를 사용했습니다.

 

 

일단 프로젝트를 시작하자

react프로젝트 환경설정 및 시작은 이전 게시글 참고

2020/11/17 - [WEB_APP/React] - [React] 개발환경 만들기

[React] 개발환경 만들기

 

 

프로젝트 시작

원래는 create-react-app이었는데 그사이에 또 명령어가 바뀌었네요

//프로젝트를 생성한 폴더로 이동한 후
yarn create react-app react_collegetest


cd 생성한 프로젝트 경로

 

라이브러리 설치

yarn add styled-components react-router-dom react-redux redux react-dom

저는 인텔리제이 내에 있는 터미널에서 해주었습니다

꼭 생성한 프로젝트 폴더 내에서 설치해주셔야 합니다

 

프로젝트 시작

yarn start

저는 이건 인텔리제이에 프로젝트 틀어서 그 내부에 있는 터미널에서 해주었습니다 

 

 

절대경로 import설정

import시 상대경로가 아닌 절대경로를 이용해주기 위해 다음과 같은 설정을 합니다.

 

프로젝트 루트에 jsconfig.json이라는 파일을 추가합니다

 

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "includes": ["src"]
}

다음과 같이 입력합니다

 

 

 

 

페이지 / 컴포넌트 나누기

이전에 만든 프로토 타입을 기반으로 페이지별로 컴포넌트를 나눌 것이다!

일단

"시작 페이지" "질문 페이지" "결과 페이지"

이렇게 3개의 페이지로 나눌 수 있을 것!

 

 

일단은 3개의 컴포넌트로 구성되어 있다고 생각하고, 만들면서 필요하다고 생각되는 컴포넌트를 추가해 가기로 했다

 

src/components 폴더를 추가해준다

그리고 "StartPage.js" "QuestionPage.js" "ResultPage.js"를 추가해준다 

 

 

결과 페이지는 계산해야할 점수도 있고, 데이터를 끌고 와야하기 때문에 미루고

시작 페이지는 언제든 만들면 되기때문에 

두페이지는 일단 나중으로 미루고, 질문 페이지들을 만들어 보도록 하자! 

 

 

참고 사이트

create-react-app.dev/docs/importing-a-component/#absolute-imports

Importing a Component | Create React App