토이 프로젝트: 🐶 show me my dog

첫번째 토이 프로젝트 "show me my dog"
https://www.showmemydog.site/

기획의도

13년차 애견인으로서 강아지를 너무 사랑한다.💕 그런데 요즘 방송이나 기사를 보면서 깊은 고민없이 강아지를 데리고와서 힘들어하고, 버리기까지 하는 사례들을 보고 너무 안타까웠다. 강아지를 키우기 전에 자신의 배경, 상황 등에 대한 충분한 고민과 강아지에 대한 사전지식이 필요한데 말이다.

짧은 시간동안 질문에 답하며 현재 강아지를 키울 수 있는 요건이 되는지, 자신에게 맞는 강아지가 무엇인지에 대해서 고민할 수 있는 시간이 되지 않을까해서 'show me my dog'를 만들어 보고싶어졌다.

개발 회고 (기억에 남는 코드)

고통의 시간도 있었지만 ㅎㅎ 전체적으로 재밌었다. 내가 생각한 걸 그대로 만들어낸다는 게 신기하고 뿌듯했다. 이 프로젝트를 통해서 전보다 1%라도 성장한 것 같아 더욱 뿌듯한 마음이 크다. 다음에도 좋은 아이디어가 생긴다면 좋은 사람들과 함께 토이 프로젝트를 계속 만들고 싶다.

• 사용자 답변 객체로 담기

  이전에는 배열형태로만 담아서 백엔드에게 보내봤는데, 이번에는 객체형태로 보내달라는 요청을 받았다.
  ex) 1번 1, 2번 2, 3번 1, ... -> {"1":1, "2":2, "3":1...}

const checkAnswer = (QuestionId: number, AnswerId: number) => {
		const key = QuestionId;
		const obj = { [`${key}`]: AnswerId };
		setUserAnswers({ ...userAnswers, ...obj });
		if (QuestionId === 10) {
			setLoading(true);
			axios
				.post(ANSWERAPI, userAnswers)
				.then((res) => {
					setLoading(false);
					setResult(res.data);
					history.push('/result');
				})
				.catch((error) => console.log(error));
		}
		if (QuestionId !== 10) {
			nextQuestion();
		}
	};

• 이전 문제로 돌아가기

  많은 퀴즈, 테스트 사이트들을 둘러보면서 한가지 공통적인 문제점(?)을 발견했다.
  대부분에서 이전 문제로 가는 ui요소를 찾아볼 수 없었다. 기본 뒤로가기버튼을 누르면 해당 웹 사이트에서 나가게 되거나 메인화면. 사소하지만 사용자에게 불편을 줄 수 있는 요소라고 생각했다.

처음에는 'params'를 이용하는 방법을 생각했지만, 이 방법은 사용자가 문제를 조작할 수 있었다. 답변을 선택하지 않아도 url창을 조작하여 아무 문제로나 넘어갈 수 있다.
그래서 좌우버튼을 생성하는 ui요소를 만들어야겠다고 생각했다.

{number !== 0 && (
        <img onClick={previousQuestion} className="left chevrons"src=""/>
)}
{Object.keys(userAnswers)[0] &&Object.keys(userAnswers)[Object.keys(userAnswers).length - 1] !== `${id - 1}` && (
					<img onClick={nextQuestion} className="right chevrons"src=""/>
)}

-left chevrone: 첫번째 질문에는 뒤로가기 버튼이 생성되지 않는다.(첫번째 질문, number = 0)
-right chevrone: 사용자가 첫번째 질문을 체크했을 경우 + 사용자가 마지막으로 체크한 질문이 question id와 같지 않은 경우 생성된다.

*object.keys()

키가 담긴 배열을 반환한다. 이 메소드를 이용해서 배열의 마지막 키를 얻을 수 있었다.

const user = {
  name:"mong",
  age: 14,
  gender: "male",
}

object.key(user) // ['name', 'age', 'gender']

//최종적으로 나와야 하는 값
console.log(Object.keys(user)[2]) // 'gender'
console.log(Object.keys(user)[Object.keys(user).length -1])
// 'gender'

• 체크한 답변 표시하기

  사용자가 체크한 답변의 버튼 색만 스타일을 입히고 싶었다.
  쉬울 줄 알았는데...(ㅎㅎ)
  인라인 스타일로 스타일에 변화를 주었다. 분명 더 좋은 방법이 있을 거라고 생각되지만 지금은 이게 최선인 것 같다.

{selections.map((answer, idx) => (
  <ButtonStyle style={{backgroundColor:userAnswers[`${number + 1}`] 
  && userAnswers[`${number + 1}`] == answer.id ? 'white' : '', 
              color: userAnswers[`${number + 1}`] 
  && userAnswers[`${number + 1}`] == answer.id ? '#FFC6C9' : '',
  }}>{answer.option}
  </ButtonStyle>
))}

현재 화면에 보이는 userAsnwers의 value를 가져온다. 그 vaule가 가져온 데이터,
answer.id와 일치하는지 확인 후 맞으면 스타일을 바꿔준다.