[ 프로젝트(React) ] 병과 테스트

✏️ Preview

 

웹사이트 링크는 다음(https://ywtechmilitarytest.site/)과 같고 코드는 저의 깃허브에서 볼 수 있습니다 :)

---

✏️ 서론

20년 ROTC 제대 후 웹 개발에 관심이 생겼지만 어떻게 공부해야 할지 잘 몰라 인터넷을 뒤적이다가 스파르타 코딩 클럽을 접했고(스파르타 코딩 클럽을 선택한 이유는 이상하지만 당시 2020스파르탄레이스에서 좋은 추억을 많이 쌓았는데 이름이 비슷해서였다.) 아무튼 웹 개발 강의 8주 과정을 수강하면서 처음으로 혼자 지금뉴스!라는 프로젝트를 만들었지만(후기) jQuery의 쓴 맛을 보고 SPA의 동적인 반응에 눈이 번쩍 떠지면서 새로운 프레임워크인 React를 공부하겠노라 마음을 먹었고 내 손으로 직접 만든 결과물을 보고 싶어 React를 활용한 프로젝트를 만들고 싶다는 생각을 했었다.

 

어떤 주제의 프로젝트를 만들까 하다가 최근 유행하는 성향 테스트와 비슷한 테스트를 만들고 싶었다. 하지만 이미 웹상에 올라와있는 성향 테스트 비슷한 주제가 많아 흥미가 없었다. 고민 끝에 군 생활 기간동안 좋은 추억을 갖고 있어 이를 활용하자고 생각했고, 대한민국 모든 남성은 자대 배치를 받기 전 어떤 병과(주특기)를 선택하느냐에 따라 남은 군생활이 결정(?)되기 때문에 이를 기반으로 공감대를 형성 할 수 있을 것이라고 생각했다.

---

✏️ 본론

병과테스트를 만들겠다고 마음을 먹고 처음 테스트의 문제를 만들려고 하니까 어떤 질문이 너무 딱딱하지 않고 친근감을 줄 수 있을까 했지만 생각이 잘 나지 않았다. (😂 창작의 고통 😂) 그래서 다른 테스트들은 어떻게 작성했을까 찾아봤는데 비슷한 질문들이 많았다. 하지만 나는 뭔가 색다른 질문을 원했다. 안산에 살고 있는 대학교 동기에게 커피와 케이크(🧠💧(뇌물))를 사주면서 같이 고민했는데 친구가 좋은 아이디어를 많이 내줘서 약 30 ~ 40 문제 가량을 만들 수 있었다. 여기서 거의 7일정도 쏟은 것 같았다.

 

또 스파르타 때부터 나를 가르쳐주신 튜터(나의 멘토)님께서 내가 작성한 코드를 리뷰해주셨는데 이는 나에게 한 줄기 빛과 같은 느낌이었다.

📍 내가 구현 한 기능

1. atomic design으로 컴포넌트 구성하기
2. 테스트 결과의 개인화
3. 반응형 페이지를 기반으로 모바일에서도 화면이 깨지지 않음
4. Image-blur-up기능을 사용하여 이미지가 끊김없이 로딩되는 듯한 사용자 경험
5. Dynamic open graph을 사용하여 각 결과마다 다른 공유 화면을 볼 수 있음(경우의 수는 12가지)
6. 카카오톡, 트위터, 페이스북에 공유하기 버튼을 통해 게시물 작성이 가능
7. 결과 페이지에서 나와 비슷하거나 반대되는 병과가 무엇인지 확인할 수 있음
8. 쿠팡 파트너스로 웹 사이트 수익화 하기

---

✏️ 결론

토이프로젝트를 하면서 내가 사용했던 기술들의 한계점을 보았고 이후에는 이런 기술들을 보완하기 위해 나온 또 다른 기술들을 써보고 싶었다.

 

1. TS(TypeScript): JS를 사용하면서 console 창에 뜨는 에러들을 잡는데 시간을 많이 썼다. 이런 JS 단점을 보완하기 위해 나온 컴파일 과정에서 에러를 잡을 수 있는 정적 타이핑 언어인 TS를 써보고 싶다. 또, Undefined, Null 등 변수 type에 관해 JS는 관대한 편이었다. (그래서 console창에 에러가 많이 떴나보다.) 이번에 TS를 공부하면서 type을 완벽히 짚고 넘어가고 싶었다.
2. SSR: CSR의 단점으로 꼽히는 SEO 최적화(JS로 작성 되어있기 때문에 크롤링 봇이 제대로 크롤링을 하지 못하는 점)와 첫 로딩 시 시간이 오래 걸리는 단점, 그리고 메타태그 설정은 netlify의 PreRenderIO 기능을 이용해 캐싱과 SEO 문제, React-Helmet을 이용해 해결했지만 이는 임시방편으로 사용한 느낌이 있어 근본적인 해결을 위해 next.js, gatsby을 사용해보고 싶다.