패스트캠퍼스 챌린지 27 일차 - 리액트로 만드는 퀴즈 사이트01

0. 공부 인증 

공부 시작 21 : 37

공부 종료 22 :37

주말이다!
근데 과제는 쌓여있다!

아오!ㅋㅋㅋ

 

1. 사이트 UI 디자인 및 상태 생각해보기

-> 인트로 페이지

-> 퀴즈 페이지

-> 결과 페이지

+ 기타 컴포넌트

 

2. 필수 모듈 설치하기

npm install redux react-redux node-sass styled-components

 

-> 디렉토리 구조 만들기 (components, store 폴더 만들기)

 

3. 리덕스를 사용해 상태 설계하기, 설계한 코드로 구현하기

store -> index.js

import {combineReducers} from "redux"

export default combineReducers({
    // 서브 리듀서 ... 
    
})

store -> module -> score.js

퀴즈를 풀면 정답 -> 점수 획득

오답 -> 점수 획득 X

// 퀴즈를 풀면 정답 -> 점수 획득
// 오답 -> 점수 획득 X

// 상태 : 사용자의 최종 점수(Score)
// 액션 : 정답인지 아닌지 판별, 정답 => 점수 ++

// 액션 타입 (문자열)
const CHECK_CORRECT = "score/CHECK_CORRECT"
const NEXT_PAGE = "score/NEXT_PAGE"
const RESET = "score/RESET"

// 액션 생성 함수
export function check ({quizIndex, anwserIndex}) {
    return {
        type : CHECK_CORRECT,
        payload : {quizIndex, anwserIndex} 
    }
}

export function next(){
    return {
        type : NEXT_PAGE
    }
}

export function reset(){
    return {
        type : RESET
    }
}

// 초기 상태 
const initialState = {
    score : 0,
    page : 0, // 0 : 인트로, 1 ~ n : 퀴즈 페이지, n+1 : 마지막 페이지
    quizs : [{
        q : "대한민국의 수도는?",
        a : [{text : "서울", isCorrect : true},
            {text : "경기", isCorrect : false},
            {text : "세종", isCorrect : false},
            {text : "숭실대", isCorrect : false}]
    }]
}

export default function score(state = initialState, action){
    switch(action.type){ 
        case CHECK_CORRECT:
            return {
                ...state,
                score : state.quiz[action.payload.quizIndex].isCorrect ? state.score + 10 : state.score
            }
        case NEXT_PAGE:
            return {
                ...state,
                page : state.page + 1
            }
        case RESET: {
            return {
                ...state,
                score : 0,
                page : 0
            }
        }
        default :
            return state;

    }
}

 

상태 : 사용자의 최종 점수(Score)

액션 : 정답인지 아닌지 판별, 정답 => 점수 ++

 

부가 설명.

퀴즈의 내용도 state에 저장하여, 어디서든 접근 가능하게 하고,
퀴즈를 다시 풀고 싶을 경우를 대비하여, 관련 리듀서를 제작하고,

퀴즈의 정답을 맞추면 점수를 올림.

 

위의  구조처럼 구현하지 않아도 됨.

 

ex) 리덕스의 다른 구조 예시

상태  : 사용자가 응단한 정답 목록, [0,2,1,3 ... ]

액션 : 정답 목록에 하나하나 추가 

....

 

또한 index.js 에서 리듀서들을 합치는 작업이 필요함.

import {combineReducers} from "redux"
import score from './module/score'

export default combineReducers({
    // 서브 리듀서 ... 
    score
})

 

그리고 해당 리덕스를 사용하기 위해서는,

 index.js 에서 추가해야 하는 코드

import {createStore} from 'redux';
import rootReducer from './store';
import {Provider} from "react-redux";

const store = createStore(rootReducer);

~~
<Provider store={store}>
	~~
</Provider>

 

이렇게 리덕스를 구성할 수 있다.

 

다음 편에서는 프론트엔드 스타일링을 진행할 것이다.

 

 

 

환급 챌린지 (27/30)

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지