글 루 미 - 투 표

본 프로젝트에서는 Nextjs를 사용한 이유는 SSR이나 SSG를 활용하기 보다는, 별도 express 서버를 돌릴 필요 없이 Nextjs 자체만으로도 프론트엔드와 백엔드를 둘 다 처리할 수 있기 때문입니다.
프론트는 기존의 React와 같게, 백엔드는 투표 데이터를 호출, 삽입, 삭제하는 API의 역할을 맡게 됩니다.

기존 포트폴리오에서 global.scss를 공유하며, 추가적으로 이 프로젝트에서만 쓰이는 vote.module.scss를 사용합니다.

배열을 다룰 때, 직접적으로 push, pop을 하는게 아니라 state에 업데이트 시켜서 Virtual DOM과 동기화 하는 점이 조금 까다로웠습니다. 배열의 보기를 삽입/삭제하는 과정에서 스프레드 연산자를 유용하게 사용했습니다.

이제는 tanstack으로 알려진 React query를 서버상태 관리 및 관찰용으로 넣었습니다. fetch의 성공/실패/로딩중 등 관측이 가능하고, 언제 시도했는지, 몇 번째 시도인지 등 서버와의 통신상태를 점검할 수 있습니다. 근데 제 생각에는 생긴 것 자체가 가독성이 좋지는 않은 것 같아요.

투표 번호로 입장하기 코드▼
function onPressEnter(e:React.KeyboardEvent<HTMLInputElement>)
이벤트 하나를 넣어도 전부 타입을 지정해야한다는게 조금 빡센 점이긴한데, 그래도 컴파일 단계에서 에러를 잡을 수 있다는 점이 얼마나 좋습니까..

사실 전역상태관리까지는 필요없긴 한데, 팝업 나타날 때 스크롤 막으려고 넣어놨습니다.
어떤 페이지에서 팝업이 나타나든, body태그 자체에 scroll을 막아야하니깐요.

사실 쿠키를 기술스택이라 하기 좀 그렇긴한데, 사용자 정보를 식별하기 위해 쿠키에 랜덤번호를 지정해서 저장하는 것으로 사용자를 식별합니다.

왜냐하면 Mobile은 IP가 지속적으로 바뀌어서 식별정보로 사용할 수 없으니깐요.

본 투표는 카카오톡 공유하기 기능이 있습니다.

kakao API는 정해진 src url로 script 태그를 만들면, window객체에 공유하기 관련 기능이 추가됩니다. 거기에 정해진 객체의 format에 맞춰서 메소드를 실행하기만 하면 쉽게 공유가 가능합니다.

작은 프로젝트 하는 데에 express까지 만들 필요는 없을 것 같아서 Nextjs 자체로 해결하기로 했습니다.

정해진 시간이 되면 MySQL DB를 확인해서 파기날짜가 지난 투표 ROW들을 전부 DELETE 해버립니다.
투표 기간 > 결과 확인 기간 > 파기
방장은 투표 생성 시 기간을 정할 수 있습니다.

근데 우리집은 가정용 전기라서 24시간에 한 번만 실행하도록 설정해놓았어요.

투표 기본정보 테이블,
투표 보기 테이블(1번, 2번, 3번...),
투표자 테이블,
이렇게 세 테이블로 나누어서 제작했습니다.

직접 공책에 그려가면서 설계(?)했는데, 쉬운 일은 아니었습니다. 백엔드 개발자분들 대단...

본 포트폴리오 및 모든 작업물은 개인서버에 띄워져 있습니다. nginx로 리버스 프록시를 적용하여, domain.com/ 은 프론트 서버에, domain.com/api/는 api 서버에 연결되도록 포트번호를 지정합니다.