[회고] Elice 개인프로젝트 중간 점검🐾

서론

어느덧 엘리스를 시작한지 8주차가 지나고, 9주차가 지나갔다.
지난 5주간 프론트엔드 개발에 대해 배우고 나머지 3주동안 백엔드 개발에 관해 배웠다. 사실 두 분야 모두 배우기에는 짧은 시간이였지만 맛보기+어떻게 공부하면 좋을지에 대한 방향성을 배웠던 시간이라 생각한다.

9~10주차에는 웹서비스를 시작하는 개인프로젝트를 진행하는데,
나는 프론트엔드인 <직업 심리 검사>를 선택했다.
개인적으로 놀랐던 점은 프로젝트 주제 선택을 선착순으로 받았는데
백엔드가 먼저 찼던점...!

프로젝트 개요

• 그동안 배웠던 프론트엔드 기술(html,css,js,react )
• 커리어넷의 오픈 API
• 그외 라이브러리
  등을 사용하여 직업 심리검사를 할 수 있는 웹 사이트를 만드는 것이 프로젝트의 목표다.
• 팀을 나눠서 코치님이 팀마다 배정되고, 주에 1번 오피스 아워를 통해 코치님과 이야기를 나누고, 매일매일 집중 답변 시간을 통해 코치님께 이슈를 올리거나 MR을 통해 코드리뷰를 받을 수 있다.
• 와이어프레임 및 노션을 통해 필수 구현 기능과 선택 구현 기능의 명세를 받아 볼 수 있었다.

진행상황

• DAY 1.(11/16)
  짧은 OT뒤 프로젝트를 갑자기 시작하게 되어 머릿속이 ??가 됐다.
  그래도 와이어프레임도 있겠다. 뭘 해야하는지 명세도 있겠다. 개발을 시작했다.
  오...그런데 내가 이렇게 디자인을 못했던가,,? 제플린 및 피그마가 없는 개발은 아주 어려웠던 것,,,,, 머릿속에 있는 디자인을 css로 구현하려니 잘 안돼서 멘붕이였다.
  한 4시간정도 투자했었는데 검색하다가 너무 낯익은 디자인이 있어서 봤더니 material UI가 웹에서도 적용이 됐던 것,,,! 싹 다 갈아엎고 mui로 바꿔서 진행했다. 머터리얼 디자인은 플러터 개발을 하면서 사용했기 때문에 원하는 내용을 쉽게 찾을 수 있었다.

• DAY 2(11/17)
  useEffect와 리액트 리팩토링에 대한 궁금점이 생겨서 이슈를 통해 해결할 수 있었다.
  또한 Link태그와 a태그 차이점에 대해 알게되었다.
  (다시 보니 수업시간에 했던 내용이였다..ㅎㅎ)
  Link태그를 눌러도 작동하지 않는 이슈가 있었는데 임포트를 잘못해서 생긴 이슈였다. 검사 예시 페이지를 구현했고, 재사용하는 컴포넌트를 분리하고 퀴즈 페이지 디자인을 구현했다.

• DAY 3(11/18)
  검사 진행 페이지에서 url이 바뀌는 것을 방지하고자 페이지네이션을
  이용해서 검사 진행 페이지를 구현하였는데 페이지네이션 라이브러리를 익히는데 시
  간이 오래걸렸다. 그래도 get을 통해 내가 원하는대로 구현이 되긴 했다.
  이때부터 응답 항목을 저장하는데 어떻게 구현을 할것인지에 대한 고민이 시작됐다.......

• DAY 4(11/19)

나는 당연히(?) 응답 항목을 관리하기 위해서는 리덕스를 사용하여 전역변수로 관리를 해주려고 했다. 그것이 페이지네이션 방식에서는 사용하기 편할것이라고 생각했기 때문인데,,, 리덕스가 어려웠다. 사실 구조와 어떻게 사용하는지에 대해서는 수업시간에 배웠던것 + 하루종일 구글링, 강의, 책을 통해 익혔다고 생각했는데 내가 원하는 대로 구현을 하니 작동하지가 않아서 너무 슬펐다... 생활코딩님의 유튜브 강의를 보는데 지금 리덕스가 잘 안되거나 너무 어렵게 느껴진다면 정말 필요한 것인지 생각해보라는 말씀을 하셨다,,,,

저녁때 오피스아워까지 삽질을 하다가 오피스 아워시간때 코치님께서 이슈 리뷰를 하면서 봐주셨는데 리덕스가 정말 필요한지 생각해보라고 하셔서 놀랐다..! 신입 개발자가 흔히 겪는 문제가 리덕스를 남용하는것인데, 리덕스를 많이 사용하는건 좋지 않고 웬만해서는 props로 해결하고, 안되는것은 context API로 해결하라하셨다. 그래서 이틀정도 투자한 리덕스는 쿨하게 리액트 실력을 키워 다음 프로젝트때 사용해보기로하고 접었다.

또한 현업에서는 디자인 라이브러리를 사용하지 않으니 css연습은 필수라고 하셨다.
(공부할게 매일 추가되는중 ... )

• DAY 5(11/20)

뭔가 5일동안 풀로 달려서 이 날은 좀 지쳤었다.
그래서 저녁까지 놀다가 저녁부터 새벽까지 작업을 진행하다 잤다.
그런데 하나를 고치면 하나가 망가지고 또 하나를 고치면 다른 하나가 망가져서
너무 ..슬펐다.

새벽에 진행했기 때문에 분명히 내일 일어나면
제대로 기억이 나지 않을 것 같아서 에러가 나는 코드별로 정리해서
커밋하고 이슈를 남겨 놓고 잤다.

페이지네이션을 안썼으면 겪지 않았을 문제 같은데,
내가 너무 비효율적인 구조로 코드를 짜는가..에 대한 현타도 왔다...

프로젝트 아쉬운 점

1. api에 대한 의문

• 프로젝트 진행 4일째 아주 이상한 점을 발견했다. 사실 첫날부터 엥 뭐 어떡하라는건지라고 생각은 했었는데 나중 일이라서 미루다가, 검사 진행 페이지가 진행이 더뎌져서 결과 페이지를 하려고 보니 의심이 확신이 되는 날이였다.

• 다른 레이서분과 대화를 나눴는데, 그 분께서 네트워크 통신을 통해 api를 주소를 발견하셨다. 공식 메뉴얼에 없는 주소를 어떻게 알아내서 쓰라고 알려준건지 알 수 가 없었다.

• 공식 메뉴얼 업데이트가 21년 7월이였는데, 이 프로젝트는 엘리스 1기때도 동일하게 진행됐어서 그 사이에 api가 업데이트 됐는지 확인을 안하고 프로젝트를 진행한것인가에 대한 의문이 들었다.
  

문제점

1. 직업 심리 검사의 결과를 요청하려고 post를 보내면 url이 리턴 됨
   • 구조가 너무 이상했다.
   • 데이터 값은 웹을 통해 볼 수 있었다.
2. 엘리스 측에서 공유해준 api 주소를 커리어넷 공식 메뉴얼에서 확인할 수 없었다.
   • 이 부분에 대해 문의를 남겼는데, 다른 팀 코치님께서 답변을 해주셨다. 그래서 사용은 할 수 있겠으나 도대체 어디서 찾으신건지 알 수 없었다.
   • 안내해주신대로 api를 사용해도 결과값이 어떤걸 뜻하는지에 대한 문서가 없어서 결과표에 바로 적용할 수 가 없었다.
3. 1번을 해결하고자 결과 값으로 받는 url을 크롤링해도 얻을 수 있는 정보가 없었음

해결 방안

• 문의 및 이슈를 남겨 코치님들께 이 문제를 어필했다.(물론 남기기전에 충분히 api 문서 및 공지사항을 검토했고, 다른 레이서분들의 의견도 구했다.)
• 코치님께서 운영진측에 다시 한 번 말을 해보겠다고 하셨다.
• 월요일 까지 검사 결과를 제외하고 다른 페이지를 만들면서 답변 및 안내를 기다려야겠다.

2. 너무나도 짧은 오피스아워 시간

• 1기를 했던 친구가 정말 추천했던 점이 오피스 아워 시간을 통해 많이 배웠다고 좋다고 들었는데 주 1회 1시간이여서 너무 짧아서 아쉽다...
• 집중답변 시간이 효율적이지 못하다. 실시간으로 이야기를 할 수 없고, 답변이 달리는 시간이 너무 늦어서 다음날 확인할 수 있는게 아쉽다.

배운 점

1. 공부할 것이 정말 많다.(css,js,redux,contextAPI 등등)
2. 내가 사용하고자 하는 라이브러리를 왜 사용하는지 어디에
   사용할 것인지에 대한 구체적인 이유와 계획이 필요하다는 것을 배웠다.
3. 리액트에서 Props와 state를 어떻게 사용하지는 아주 절실히 배울 수 있었다.
4. 필요한 라이브러리를 공식문서를 보고 내 프로젝트에 적용할 수 있게 되었다.