[토이프로젝트] JUSTCODE 6기 수료식 오프라인 참여 여부 설문조사 회고

🛠 사용 기술 및 기간

22.10.20 - 22.10.21

react
react-dom
react-router-dom
react-scripts

dotenv
firebase

styled-components
styled-reset

react-icons

js-confetti

 

🏗 프로젝트 구조

public : 파비콘과 이미지 파일 폴더

src : index.html과 package.json 등 중요 파일 폴더

src/pages/home : 랜딩 페이지와 메인 페이지 파일 폴더

src/pages/form : 설문 페이지와 설문 제출 완료 페이지 파일 폴더

src/styles : 전역 스타일 파일 폴더

 

👉 프로젝트 실행 방법

터미널에서 프로젝트를 클론 받습니다.

git clone https://github.com/2021bong/justcode-6th-completion-ceremony.git

 

클론 받은 폴더로 들어가 필요 소스들을 다운 받습니다.

cd justcode-6th-completion-ceremony

npm i

 

프로젝트를 실행합니다.

npm run dev

 

해당 주소로 브라우저에서 확인할 수 있습니다.

http://localhost:5173/justcode-6th-completion-ceremony/

깃헙 레포 주소

---

💝 구현 화면

setInterval을 사용해 4초에 한번씩 꽃가루가 날리도록 했다. 꽃가루는 js-confetti 라이브러리를 사용했다.

확인하기 버튼에 마우스를 올리면 버튼이 색이 바뀌며 조금 커지고 클릭하면 다른 색상으로 바뀌었다가 페이지가 넘어간다.

 

 

수료식 일정을 확인할 수 있고 버튼 클릭을 유도하기 위해서 손가락 아이콘이 움직이며 버튼을 가리키도록 했다. styled-components와 setInterval을 이용했다. 스타일드 컴포넌트의 props를 이용한 스타일링 기능 덕분에 매우 쉽게 구현했다.

 

 

정보를 입력할 수 있는 페이지가 나오고 개인정보를 드러내지 않고 싶어하는 사람들을 위해 연락처 대신 이메일을 넣었다. 정보를 적지 않고 둘러만 보고 싶은 사람을 위해서 유효성 검사는 넣지 않았다. input의 value는 모두 state로 관리되고 제출하기 버튼을 누르면 정보들이 firebase의 firestore에 저장된다.

 

 

제출을 완료하면 꽃가루가 터진다.

 

이전 페이지에서 입력한 이름을 받아서 응원의 메세지가 나온다. 재미를 위해서 🔥과 👋에 애니메이션을 주었다. 이것도 위와 같은 방법으로 styled-components와 setInterval을 이용해 구현했다.

 

---

🎵 소감

내가 회의실을 빌려서 오프라인 수료식을 하는 건 어떻겠냐고 제안했기 때문에 오프라인 수료식 진행에 책임을 져야한다고 생각했다. 수료식을 할로윈 컨셉으로 진행하기로 했고, 저녁 식사도 하면 좋을 것 같아서 참가 인원을 파악을 해야했다. 지난 기업과제 때 firebase를 이용하지 못해서 아쉬웠던 차에 좋은 기회인 것 같아서 프로젝트를 진행했다.

 

수료식이 대략 한 주 정도 남았기 때문에 금요일부터는 설문을 받아야 일정이 여유로울 것 같아서 하루만에 끝내야했다. 목요일 저녁에 즉흥적으로 시작해서 금요일 새벽 3시를 목표로 잡고 진행했는데 firebase에 데이터를 추가하는게 예상만큼 잘 되지 않아서 아침 7시가 되어서야 자잘한 문제는 무시할 정도로 완성하고 잠들 수 있었다...🥲 그래도 밤새 몰입해서 코딩하니 재미있었다...⭐️ 이 맛에 개발하는구만~

 

하고 싶어서 진행한 프로젝트다 보니 다른 프로젝트보다 더 재밌었고 즐거웠다! 그리고 정말로 동기들과 멘토님들도 설문조사를 참여해주고 칭찬해줘서 뿌듯했다 🥳 마지막 한마디를 보여주는 페이지를 추가해서 수료식에 함께 보면 좋을 것 같다. 주말까지 제출해야하는 이력서와 포트폴리오를 끝내고 다음 주에 작업하려고 생각중이다.

 

 

😲 새롭게 배운 점

스타일링을 위해서 스타일드 컴포넌트에 props를 넘겨줄 때 불리언 타입은 속성으로 쓰일 수 없다는 워닝이 가끔 떴었는데 props 이름이 html 속성에 있는 이름과 같을 때 warning이 뜬다는 걸 알게 됐다.

 

firestore에 데이터 추가가 안돼서 2시간 정도를 낑낑댔는데 블로그를 돌아다니며 이 코드 저 코드를 아무리 따라해도 안됐다. 물론 검색결과에 firebase 공식 문서가 제일 먼저 나왔지만 번역기로 번역했는지 어떤게 내가 원하는 내용인지 모르겠어서 넘겼다. 그런데 결국은 공식문서를 보고 해결했다.🤦‍♀️ firebase가 업데이트를 진행해서 메소드들이 바뀐 것 같았는데 그게 얼마 안됐는지 최신 글 위주로 봐도 블로그들은 다 옛날 코드들이었고 이전 버전의 코드를 치고 있었으니 당연히 안되는 거였다. 공식 문서 코드를 넣으니 데이터가 바로 잘 들어갔다.....ㅎㅎ 공식 문서랑 블로그를 비교했을 때 공식 문서만 내용이 다르다면 공식 문서가 맞다고 따랐어야 했는데 내가 멍청했다....🤦‍♀️ 새로운 기술을 접할 때마다 공식 문서의 소중함을 매번 느끼는 것 같다.

 

 

🥲 아쉬운 점

최대한 반응형을 완벽하게 구현하려고 노력했으나 처음 스타일링에서 width에 제한을 주고 했더니 길쭉하지 않은 비율에서는 자꾸 레이아웃이 어그러졌다. 다음 주에 페이지를 추가하면서 고쳐봐야할 것 같다. 반응형은 경우의 수가 너무 많아서 어려운 것 같다...🫠

 

 

 

 

설문조사 2번째 회고

[토이프로젝트] JUSTCODE 6기 수료식 오프라인 참여 여부 설문조사2