README 내용 중 일부 내용을 가져왔다.
👨🏫 프로젝트 소개
- 주제 : 워케이션(Work + vacation의 합성어로, 일을 하면서 휴가를 동시에 즐기는 근무 형태)
- 내용 : “여기가 일하면서 쉬거나 놀기 좋더라~” 자랑과 공유를 동시에 할 수 있고, ‘좋아요’ 버튼을 눌러 놓은 게시물만 따로 볼 수 있다.
Oreo 소개
팀원 소개에 팀장/팀원, MBTI, Github링크, 블로그 주소를 썼다.
발표 후에 팀원들의 역할을 적어주면 좋다고 하여 추가했다.
나는 디테일페이지(모달), 피드 작성 폼 부분을 맡았다.
해당 내용은 뉴스피드 만들기 (2), (3)을 참고 바랍니다.
프로젝트 계기
- 디지털 기술의 발전으로 인해 업무 환경의 영향을 덜 받기 때문에 '디지털 노마드' 문화가 생겨남.
- 코로나 확산으로 인해 원격근무가 늘고, 탄력적인 업무 형태의 필요성이 생김.
- 사회구성원들이 일과 삶의 균형을 중시하기 시작함.
위처럼 사회가 변화하면서 일과 휴가를 동시에 즐기는 근무형태로 '워케이션(Workation)'이 트렌드라는 것을 알게 되었습니다. 이를 즐기는 사람들이 어떤 장소에서 일하기 좋았는지 공유할 수 있으면 좋을 것 같아 만들게 되었습니다.
💜 주요기능
1. Supabase를 활용한 CRUD
펼쳐보기
- Create : 로그인한 유저는 메인페이지 오른쪽 아래에 나타나는 '작성' 버튼을 클릭하여 게시물을 작성할 수 있다.
- Read : 작성 후 '업로드하기' 버튼을 클릭하면 메인페이지에 피드에 보여지고, 로그인한 유저가 작성한 게시물만 마이페이지에서 확인할 수 있다.
- Update : 마이페이지에서 로그인한 유저의 게시물을 클릭하면 제목과 내용, (이미지)를 수정할 수 있다.
- Delete : 마이페이지에서 로그인한 유저의 게시물을 클릭하면 게시물을 삭제할 수 있는 버튼이 있다.
2. Supabase를 활용한 로그인, 회원 가입
펼쳐보기- Login : 메인페이지 오른쪽 상단에 있는 '로그인' 버튼을 통해 로그인을 할 수 있으며 계정 정보를 전역 상태로 관리한다.
- Register : 메인페이지 오른쪽 상단에 있는 '회원가입' 버튼을 통해 가입할 수 있으며 계정 정보가 데이터베이스에 저장된다.
3. 무한스크롤 기능
- intersectionObserver API 로 구현
- 피드섹션 최하단 observe 구역 감지 시 다음 페이지를 렌더링한다.
- 피드의 끝까지 스크롤하여 다음 페이지로 넘길 수 있다.
4. memo, useMemo, useCallback 을 이용한 렌더링 최적화 적용
5. 캐러셀
펼쳐보기
6. 커스텀 훅을 이용한 모달 사용
펼쳐보기- 모달 라이브러리를 사용하지 않고 직접 코딩했다.
- 쓰이는 곳이 많아 커스텀 훅을 만들어 코드를 재사용할 수 있게 되었다.
⏲️ 개발기간
- 2024.08.28(수) ~ 2024.09.03(수)
👊 Trouble Shooting
1. 로그인 세션관리
- 기존 접근 방법 : 초기 실행 시에만 세션 관리를 통해 전역상태를 관리했다.
- 문제 : 초기에만 실행하므로, 다른 페이지에서 새로고침하면 세션이 증발함.
- 해결방법 : 커스텀 훅을 사용해 다른 페이지에서도 독립적인 세션관리를 통해 로그인 상태를 유지함
2. 무한스크롤
- 기존 접근 방법 : 피드 최하단에 observer 감지 = 페이지 추가
- 문제 : 피드 데이터가 아직 생기기 전에 observer를 감지 / 출력 메시지에 의해 observer 구역이 뷰포트 안밖을 미친듯이 왔다갔다 함.
- 해결방법 : 로딩 State에 따라 observer가 트리거 되지 않도록 함.
3. 수파베이스
- 기존 접근 방법 :
- 문제 : 테이블에 publicUrl 값이 null로 들어감.
- 해결방법 : formData부터 콘솔을 한 단계씩 깊게 입력해보면서 undefine 값이 나오는 부분을 찾았다.
❤️ 소감 한 마디
맡은 부분이 너무 어렵고 힘들었는데 포기하지 않도록 잘 이끌어주시고, 모르는 부분 설명도 계속해서 해주셔서 고맙습니다. 끝까지 해낸 사실이 참으로 뿌듯합니다.
끝자락에 팀원 한 분이 캠프를 하차하셨지만 이번 팀원들 진짜 불평, 불만 하나 없이 끝까지 역할 분담해서 발표까지 완벽하게 마칠 수 있었다.
🧠 KPT 회고
Keep - 현재 만족하고 있는 부분
- 분업이 잘 된다.
- 조원을 반긴다.(아침인사, 오전 스크럼 때 기분 체크)
- 불평불만이 없다.
- 팀원들한테 시간을 아끼지 않는다.
- 튜터님께 질문하기 전에 팀원과 함께 해결을 시도해본다.
→ 튜터님께 갈 때에도 다함께 가서 조언구함
Problem - 불편하게 느끼는 부분
ㄴ '불편'이라는 글자가 불편하게 느껴질 정도로 없었는데 최대한 생각해본 게 이 정도..?
- 다들 잠을 안 주무신다……
- 오전 스크럼 내용은 잘 기억이 나는데 저녁 스크럼 내용 기억이 잘 안난다.
Try - Problem에 대한 해결책, 당장 실행 가능한 것
- 새벽 1시 전엔 잠자기… 3시..불가… 다음날 너무 힘듦….
- 오전/오후 상관없이 스크럼 할 때 간단하게라도 기록 남기기
👨🏻🏫 튜터님 피드백
24.07.15 프론트엔드 개발 첫 걸음
깔끔 한 포스트 잘 봤수영 !!! 잠을 안주신다 ...라니ㅣ . . .