아무튼 직업가치관검사 프로젝트를 만들어냈다. 해냈다😎
가치관검사 프로젝트
2주라는 시간동안 하나의 프로젝트를 만들 수 있을까... 나의 실력에 의심부터 들었다. 지난 1주차 회고를 하며 그 정도로 구현한 것만으로도 충분히 만족스러운데... 라는 나약한 생각을 하게 되었다. 나는 완성시키지 못할거야 그래도 괜찮아라고 하찮은 생각을 하고 있었다.
괜히 PPT만 산나게 만듦
< style > windows98 st < /style >
2주간의 프로젝트의 마무리는 자신의 프로젝트를 발표하고 피드백을 받는 시간이었다.
프로젝트는 너무 막막했다.
오피스아워는 일주일에 하루 1시간이었다.
어처구니없이 프로젝트를 시작한 첫 날 오피스아워가 있었다.
그래도 나에겐 큰 도움이 되었다.
처음 페이지 구현부터 리액트 라우터를 사용해야 편할까요?
나의 첫 질문.
그래서 react route를 공부했다.
(이렇게 공부를 하게 되는구나)
가장 먼저 컴포넌트를 분할했다.
5개의 컴포넌트로 나누고 데이터를 어떻게 넘길까 고민이 시작되었다.
Redux, api context...
제대로 배우지 않은 것을 공부해야하나 고민이 많아졌다.
Home
일단 정보값을 useState에 담았다.
react route history의 props 넘기기 기능을 사용했다.
결론적으로 로직이 작은 프로젝트에 어울리는 방법이었다.
(요즘 현장에서는 redux를 걷어내고 react query를 사용한다고 하니 고려해봐도 좋을 것 같다. )
Expage
예제 페이지는 Question page를 만들기위한 예시로
axios, progressBar, button-disabled 을 사용하여 구현
대망의 Question Component
Axios를 통해 그냥 get과 post만 쓸 줄 알면 되는줄알았는데,input으로 값을 입력받고, post로 보낼 값들을 또 다시 변형해야 했다. 쉽지 않은 작업이었다. 또한 기본에 충실해야 된다는 말을 뼈져리게 느끼게 되었다.
각종 데이터를 엮어 페이지의 동작을 조정했고, 끝까지 속을 섞였던 데이터 상태관리 부분은checked={}어트리뷰트로 설정할 수 있었다.
또한pagination한 next btn을 클릭 시 창이 밑에 머물러있는 것을 고치기 위해window.scrollTo를 이용해 위로 이동하게 했다. 하나하나 만들어가는게 꽤나 재미있었다.
ResultPage
검사 결과를 history.push로 가져와 answers 값과 같이 변환된 값을 사용했다. 이를 통해 axois post로 API를 요청할 수 있었다.
ReportPage
역시 제일 중요한건 마지막에 있었다.
해당 결과를 유의미하게 분석하는 과정이 필요했고, 이를 통해 챠트를 만들고 관련 직업을 분석했다.
(axois get 3회, axios post 1회를 사용했다.)
Chart
챠트 라이브러리를 사용했고, 추가적인 기능으로 어떤 가치관이 자신과 맞는지 나타내는 워딩을 보여주고 싶었다.
호돌이님! 자기계발 & 자율성의 가치를 가장 중요하게 생각하고 계시는군요!
이를 구현하기 위해선 해당 결과값을 내림차순 정렬해주고, 인덱스를 끌어서 가져오려했지만!? 유동적인 값을 사용할 땐 반드시 조건부 렌더링을 사용하는 것을 배우게 되었다. data[0].value error 가능성 많음
- 참고자료
조건부렌더링
직업정보까지 가져오는 table을 만들어, 필수 기능 구현이 완료되었다.
기능구현을 끝내니 남은 기간은 단 하루.
그래도 원래 콘텐츠 마케팅을 했던 사람으로서
보기 좋은 콘텐츠를 만들고 싶었다.
속성으로 styled.component와 app.css를 공부해 css를 사용해 꾸밀 수 있었고, 같이 공부하는 레이서 님의 도움으로 Azure를 사용해 배포 할 수 있게 되었다.
최대한 모바일 최적화를 하고 싶었지만, 아직 방법을 몰라 미숙했지만 다음엔 완벽한 반응형을 만들겠다!
마치며
프로젝트를 하며 너무 많은 작은 실패에 좌절했다. 가시를 밟은 냥 앞으로 나가기 어려웠다. 하지만 레이서, 코치, 온라인상에서 댓글을 달면 답변해주시는 천재적인 개발자 선배님들의 도움으로 프로젝트를 어쨋든 나아갈 수 있었다. 아이러니 하게도 작은 실패는 잦은 성취를 가져왔다. 조울증에 걸린 사람마냥 기분이 오락가락했지만 아무튼 나의 첫 코딩 프로젝트를 마칠 수 있었다.
전반적인 react를 이해할 수 있었고, 코딩이라는 막연함에 한 발자국 더 깊이 들어갈 수 있었다. 눈에 보이는 시각적인 장치를 조정하는 front-end에 관심을 더 높일 기회가 되었으며, 더 깊이 공부해보고 싶다는 생각을 가지게 되었다.
엘리스 AI트랙 과정 상 당분간 python을 이용해 데이터분석을 하며, 다시 react를 까먹겠지만, 꾸준하게 복기하며 공부를 해나가고 싶다.
react의 상태관리와 전체적인 맥락을 이해하고 어떤 방법을 써서라도 문제를 해결할 수 있는 해결력을 기를 수 있었다.
힘들었지만, 좋은 경험이었다.
안될 땐 물어보고, 물어봐도 어려울 땐 다시해보자
말은 쉽다
npm run start 가 안될 때... : npm i react-scripts
