Next.js와 Supabase로 이벤트 초대장 애플리케이션 만들기이벤트를 생성하면 그 이벤트에 대한 초대장을 만들어주고 공유할 수 있는 서비스를 개인 프로젝트로 진행하고 있다. 단순 초대장 생성 기능뿐 아니라 내 위치 기반으로 주변의 이벤트들을 확인하고 참가할 수 있는 기능도 차차 추가해 보려고 한다. 이벤트 생성 기능과 관련 이미지를 업로드할 수 있는 기능을 구현했다. 프론트엔드에는 Next.js, 백엔드에는 Supabase를 사용하면서 S3와 CloudFront로 이미지를 호스팅하는 방식을 적용해봤다. 이 과정에 대해서 기록해 보려고 한다.Supabase에서 이벤트 테이블 만들기먼저, 이벤트 데이터를 저장할 event 테이블을 Supabase에서 만들었다. 테이블은 간단히, 이벤트 제목, 날짜 및 ..
최근 새로운 프로젝트 본격 진행에 앞서 커밋 린트(commit lint)를 설정하는 작업을 진행했다. 처음에는 간단히 끝날 줄 알았지만, 예상치 못한 문제들이 발생하며 생각보다 많은 시간을 소모하게 되었다. 하지만 배운 점들도 많아 기록해두려 한다.커밋 린트의 필요성 커밋 린트는 커밋 메시지의 형식을 검증하여 일관성을 유지하는 도구다. 이번 프로젝트에서는 하나의 레포에 프론트엔드와 백엔드 코드를 공유하면서 사용하기로 했는데, 이에 따라 커밋 메시지에 (front)와 같은 구분을 추가해야 했다. 그런데 이 규칙을 자주 잊어버리는 일이 발생했다. 이런 문제를 해결하기 위해 커밋 메시지의 형식을 강제할 필요성을 느끼고, commitlint를 도입하기로 결정했다.패키지 설치 및 초기 설정프로젝트의 package..
무엇을 했나 페이지 prev, next 버튼 기능 추가 내가 좋아요한 글 페이지 추가 어려웠던 점 prev, next 로직 짜는 것이 생각보다 어려웠다. startPage와 endPage를 변수로 두고 하는 로직을 참고해서 하니 그 다음 로직들은 비교적 수월하게 짤 수 있었다. 참고한 자료는 https://jithilmt.medium.com/logic-of-building-a-pagination-ui-component-a-thought-process-f057ee2d487e 좀 더 일찍 끝냈어야 하는 것을 너무 질질 끌고 있는 것 같다. 사실 남은 기능들 마음 먹고 하면 금방 할텐데 너무 자잘한 것들이 남아서 능률이 떨어지는 느낌이다.. 이래서 한번 할 때 제대로 해야 하는데 ㅇ
무엇을 했나 어바웃 페이지 새로 알게 된 것 대신 태그를 쓰면 줄바꿈과 띄어쓰기를 보존해서 내용을 보여줄 수 있다. white-spacing: pre-wrap를 써서 래핑을 해준다. 그런데 띄어쓰기 간격이 너무 넓어져서 어떻게 처리해 줘야 할지 고민.. word-spacing으로 마이너스값을 줬는데도 컴마 뒤 공간 같은 곳이 너무 넓다. 남은 것 페이지네이션 prev, next 메인페이지 꾸미기 로고 처리 반응형 css 적용 내브바 기능 추가 광고 만들기 유저 id값 받아올 수 있나? 후원하기
무엇을 했나 게시글/댓글 좋아요 기능 댓글 수정/삭제 기능 마이페이지 기능 일부 게시글/댓글 좋아요 기능을 만들었다. 좋아요 눌렀을 때 처리해주는 서버를 짜는 데 애를 꽤나 먹었는데 일단 돌아가도록 짜는 데 집중하다 보니 코드가 지저분하고 네이밍이 일관성이 하나도 없다.. 일단 완성 끝나면 리팩터를 좀 더 해야 할 것 같다. 지금 스크린샷 추가하면서 봤는데 댓글은 새 댓글을 추가하면 맨 밑에 추가되지 않나.. 이것도 손봐야겠다. 갈수록 일지가 성의가 없어진다 ㅇ
무엇을 했나 몽고db에 유저 정보 저장 기능 어제 알아낸 adapter를 사용해 몽고db에 유저 정보를 저장하는 데 성공했다. 그냥 원래 있던 nextauth 설정에 adapter만 추가해 주면 되는 간단한 거였는데 아예 새로운 거라고 생각해서 한참을 헤맸다.. 어댑터를 적용하니 유저가 로그인을 하면 자동으로 몽고db에 유저 정보가 추가된다.
무엇을 했나 댓글 추가 기능 구현 앞으로 할 것 게시글과 댓글 좋아요 기능 구현만 하면 주요 기능들은 얼추 끝이 나는데 이 작업이 상당히 어려워 보인다.. 단순히 좋아요를 눌렀을 때 좋아요 수만 올라가는 거라면 단순하겠지만, 유저마다 한번만 좋아요를 누를 수 있게 하고 좋아요 누른 글을 모아볼 수 있게 하려면 유저마다 좋아요 누른 게시글들의 데이터를 저장을 해야 하기 때문에 인증 데이터와 게시글 데이터를 함께 사용할 수 있어야 한다.. next-auth에서 어댑터라는 기능을 제공한다고 하는데 이것을 내가 원하는 기능을 구현하는 데 사용될 수 있을지 없을지 감조차 오지 않는다. 일단은 인증 관련 데이터는 민감한 정보이기 때문에 안전하게 데이터베이스와 데이터를 주고받을 수 있도록 지원하는 기능인 것 같은데,..
무엇을 했나 글 목록, 글 작성, 글 내용 페이지 스타일링 글 작성, 글 수정 페이지에서 폼 컴포넌트 분리 시행착오/새로 알게 된 것 delete 후에 refresh 안되는 현상 글 delete 하고 나서 리다이렉트는 되는데 지운 게 반영이 안되고 새로고침해야 반영이 됐다. window.location으로 강제로 페이지 이동해서 임시 해결.. 근데 이게 맞나? 깃허브 문의란에 보면 이것이 정상이라고 함.. https://github.com/vercel/next.js/issues/26270 폰트어썸 크기 조절 원래 하던 대로 size 속성만 주니까 크기가 안 바뀌었다. 검색해 보니 css를 수동(?)으로 임포트해와야 한다고 한다. import "@fortawesome/fontawesome-svg-core/..
