Hello, GSM 회고

Hello, GSM 탄생 배경

2020년 저희가 입학지원을 하였을 때 불편했던 점이 많았습니다. 불편한 UI/UX와 잦은 alert 메시지 그리고 입력했던 정보를 다시 수기로 원서를 작성해야했었습니다. 저희는 이러한 불편함을 없애고 입학지원생들이 편하게 지원할 수 있도록 해야겠다고 생각해서 Hello, GSM 을 탄생시켰습니다.

기존 입학 시스템과 다른 점

전화번호 인증 로그인 → 카카오 로그인

원래 본인인증 로그인이였지만 간편하게 카카오 로그인으로 도입시켰습니다. 아이디, 비밀번호를 기억하지 않고 한번의 클릭으로 로그인을 할 수 있습니다.

원서 수기로 작성 → 자동 데이터 불러오기

원서를 수기로 작성했던 부분을 데이터로 불러와 일일이 작성해야했던 불편함을 없앴습니다.

간편한 UI & UX

기존 원서 서비스와 다른 디자인으로 사용자에게 쉽게 정보를 제공하였습니다.

잦은 alert → react-toastify 적용

🤔 내 아이디어로 문제가 해결된 것

원래 절차설명페이지 디자인은 가독성이 좋지 않았습니다. 그래서 다음과 같이 요구하였습니다.

내 아이디어

가운데 정렬로 되어있던 글을 왼쪽 정렬.
글씨 모두 볼드체 되어있었는데 특정 강조 내용만 볼드체.

해결

이전 디자인

피드백 후 디자인

🤯 트러블 슈팅

문제

접수 기간에 페이지 스타일 적용이 안 되는 오류가 발생하였습니다.
새로고침 하면 활성화가 되지만, 첫 렌더링 시에는 스타일링 적용이 안 되었습니다.
스타일링과 버튼 동작이 작동되지 않았습니다.

원인

hydration 스타일 이슈.
SSR, CSR 충돌.
날짜 Date 변수(acceptable)를 SSR, CSR 변수 동시에 사용하였습니다.
SSR에서 시간과 SCR 시간이 달라 충돌이 일어났습니다.

해결

acceptable 변수를 state로 만들어주었더니 해결되었습니다.

결론

hydration이란, 리액트에서 SSR 혹은 SSG(스태틱 사이트 제네레이션)을 실행한 HTML 결과물을 받아온 뒤, 브라우저에서 이것을 다시 리액트 트리에 맞게 파싱하는 행위이다.
SSR CSR 충돌을 해결하려면 클라이언트 사이드에서만, 혹은 서버 사이드에서만 렌더링 되는 로직을 제거한다.

참고자료

Next.JS hydration 스타일 이슈 피해가기

Next.JS를 사용해 웹을 만들어가다보면, 어느 순간 Hydration 이슈를 마주치게 된다. 이번엔 그 상황이 언제, 왜 생겨나는지를 파악해보고, 이걸 피해가를 방법을 알아보자. 하이드레이션이란, 리엑트에서 서버사이드 렌더링 혹은 SSG(스태틱 사이트 제네레이션)을 실행한 HTML 결과물을 받아온 뒤, 브라우저에서 이것을 다시 리액트 트리에 맞게...

https://fourwingsy.medium.com/next-js-hydration-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%9D%B4%EC%8A%88-%ED%94%BC%ED%95%B4%EA%B0%80%EA%B8%B0-988ce0d939e7

팀원에게 배운 점

로컬스토리지로 성적을 불러오는 기능에서 한 컴퓨터에서 여러 사용자가 입력했을 때 사용자를 구분하지 못하였습니다. 저는 로컬스토리지 한계로 사용자를 구분할 수 없다고 판단하였는데 같은 프론트엔드 팀원이 key값으로 유저 id값을 넣고 점수를 객체화하며 성적을 구분하면 되지 않을까? 라고 하였고 제가 해결하지 못했던 문제를 대신 해결해주었습니다.

그 모습을 보고 포기하지 말고 다양하게 문제를 해결하는 방법을 찾아봐야겠다고 느꼈습니다. 그리고 함부로 한계를 짓지 말자고 생각했습니다.

긴 기간 프로젝트 진행하면서 느낀점

기존에 있던 서비스를 제작하는 것이기 때문에 기존에 사용했던 사용자 입장을 더욱 더 생각해서 만들었습니다. 불편한 점이 무엇인지 어떤 기능은 유지해나가야 할 지 사용자 입장에서 생각하여 프로젝트 품질을 높였습니다. 이렇게 기존에 있던 서비스보다 더 나은 서비스를 만들기 위해 많이 노력을 하였고, 완성이 되었을 때 “내가 많은 사용자에게 도움이 되었구나” 라는 걸 느껴 이러한 서비스를 많이 만들어야겠다고 생각하였습니다.

🤩 성장한 점 & 알게 된 점

많은 사용자가 사용하는 서비스를 제작하면서, 사용자들에게 편리함을 제공해주는 개발자로 한층 더 성장하였습니다.

애자일 스크럼을 통해 프로젝트 관리를 할 수 있게 되었습니다.

처음 Next.js를 사용한 프로젝트로서 Next.js의 장점을 알게 되었습니다.