본문 바로가기

전체 글93

최종 팀 프로젝트 Day4 오늘은 기능 분배를 하는 아주 중요한 날이였다. 사다리타기를 해서 순서대로 하고싶은 기능을 선점하도록 했다. 나는 마이페이지, 유저 상세 페이지, 메인페이지를 담당하게 됐다. 사실 다 재밌어보여서 어떤걸 할지 정말 고민스러웠다. 일단은 마이페이지에 다양한 컨텐츠가 많아서 여기서 최대한 기술적인 부분을 담아서 개발을 하면 될 것 같다. 얼마전 소통의 부재를 겪고 지금은 매끄럽게 진행되고 있다. 디자이너분도 아주 적극적으로 기획에 참여해주시기도 하고, 이제 개발만 잘 하면 될 것 같다. 떨리는 기능 분배 이후에는 api 설계, db 설계 수정을 했다. 최종적으로 db는 11개 정도가 되었다. 주말에는 팀원들이랑 프로젝트 셋팅하고 다음주부터는 개발을 시작하면 될 것 같다. 진짜 시작인 느낌. 화이팅. 2024. 3. 29.
[tailwind css] 반응형 및 color 셋팅 프로젝트를 진행하기 전에 먼저 세팅하면 좋은 tailwind 반응형과 color 셋팅이다. 반응형 셋팅 코드 모바일 퍼스트 버전 tailwind.config.ts /** @type {import('tailwindcss').Config} */ module.exports = { theme: { screens: { 'sm': '640px', // => @media (min-width: 640px) { ... } 'md': '768px', // => @media (min-width: 768px) { ... } 'lg': '1024px', // => @media (min-width: 1024px) { ... } 'xl': '1280px', // => @media (min-width: 1280px) { ... } .. 2024. 3. 29.
최종 팀 프로젝트 Day3 오늘은 소통의 부재를 느낀 아주 중요한 날이었다. 팀에 문제가 있었지만, 결과적으로는 잘 해결이 되었고, 와이어프레임과 결정되지 않았던 기능들도 정리하여 디자이너님께 전달했다. 원래 api 설계까지 오늘 마무리를 하려 했지만 못했다. 내일은 api 설계, 와이어프레임/DB 검토, 기능별 역할 분배를 하면 될 것 같다. 그리고 우리가 만들려고 하는 관련 서비스 레퍼런스를 몇 가지 찾아야 하고, 프로젝트 셋업에 들어가면 될 것 같다. 앞으로도 소통에 더 힘을 써야 할 것 같다. 2024. 3. 28.
[프로그래머스] 모의고사 아... 정말 요즘 오타 때문에 자꾸 코딩 테스트가 오래걸린다....... 아아악 제발 정신 차려... 문제 오늘은 프로그래머스의 모의고사를 풀었는데, 진짜 계속 안됐다. 문제 경우 1. 모의고사 문제가 수포자 답안보다 수가 많을 경우 / 42.9 처음에 안된 부분은 수포자가 찍는 답안의 수 배열보다 문제답안 배열의 수가 더 많을 때 다시 수포자 답안의 첫 번째 답안으로 돌아가야 하는 부분을 제대로 구현하지 못해서 통과를 못했다. 이 부분은 현재 비교할 번째인 i 를 수포자 답 배열의 수로 나눈 나머지의 값을 구해 그 값을 인덱스로 사용하여 수포자답안의 인덱스와 정답 답안(answers) 의 i 번째와 비교하도록 하였다. 이전에는 수포자 답 배열 length 와 i 가 같으면 i 를 0으로 초기상태로 돌.. 2024. 3. 28.
최종 팀 프로젝트 Day2 오늘은 어제 받은 피드백을 토대로 기획을 다시 다듬고, 변경된 기획에 대해 디자이너분과도 공유하는 시간을 가졌다. 그리고 기획을 토대로 사용할 db 설계를 마무리했다. 이번에 설계한 테이블을 보니 대략 10개 정도의 테이블이 만들어졌다. 그동안 짧게 진행했던 프로젝트에서 만들었던 테이블보다 수가 많아서 잘 파악하면서 개발해야 할 것 같다. 내일은 설계한 db를 다시 한번 검토하고, api 설계도 마무리할 예정이다. 최종 프로젝트이다 보니 이런저런 걱정이 많았는데 차근차근 마무리되고 다음 단계로 가는 것 같아서 다행이다. 남은 기간도 재밌게 보냈으면 좋겠다. 2024. 3. 27.
최종 팀 프로젝트 시작! 어제 7시부터 디자이너분과 최종 팀원들과 같이 팀 프로젝트가 시작됐다. 어제는 새로운 팀원들과 아이스브레이킹을 하고 오늘부터는 아이디어를 얘기하면서 제대로 기획에 돌입했다. 나는 범죄 관련 서비스를 만들고 싶었지만, 관련 api 가 없어서 포기했다. 여러 가지 아이디어가 있었는데 투표를 통해 음악 관련 서비스가 선정되었다. 우리 팀은 유저에게 나이, 성별, mbti 등의 성향을 기반으로 노래를 추천하고, 유저들끼리 서로 플레이리스트를 공유하는 서비스 + 메타버스를 구현하려고 했다. 프로젝트의 체크를 위해 튜터님께 조언을 구했는데, 여러 가지 피드백을 받았다. 피드백 프런트엔드 개발자로서 만들어봐야 하는 기술에 더 집중하라는 말씀을 들을 수 있었다. 전체 선택, 전체 해제 드래그 앤 드롭 이벤트 → 마이 .. 2024. 3. 26.
[supabase] insert, delete 북마크 추가/삭제 화장실 상세 페이지에서 상단 오른쪽에 즐겨찾기를 누르면 추가/삭제가 되는 기능을 구현하게 되었다. 즐겨찾기 한 화장실인지 체크하기 먼저 이미 즐겨찾기를 한 화장실인지 체크하는 로직이 필요했다. 즐겨찾기를 안 한 경우 - 하얀 별 표시 및 즐겨찾기 추가 기능 수행 즐겨찾기를 한 경우 - 노란 별 표시 및 즐겨찾기 삭제 기능 수행 유저가 북마크 한 화장실인지 체크 export const getBookmark = async (user_uid: string, id: number): Promise => { try { const { data, error } = await supabase .from('bookmark') .select('*') .eq('user_uid', user_uid) .eq('toilet_id'.. 2024. 3. 25.
[supabase] enabled / 나는 테이블 3개 조인이 필요한데... 문제 상황 즐겨 찾는 화장실 페이지에서 즐겨찾기 한 화장실의 리뷰 평점을 보여주는 작업을 진행했다. supabase에서 컬럼을 외래키로 걸면 자동으로 인식하고 조인하듯이 2개의 테이블에서 조회할 수 있는데, 여기서 문제가 발생했다. 일단 평점을 가져오기 위해서는 총 3개의 테이블이 필요했다. 1. 화장실 정보 테이블 : toilet_location 2. 즐겨 찾는 화장실 테이블 : bookmark 3. 리뷰 목록 데이터 테이블 : review_info supabase 공식 문서와 구글, 열심히 찾아다녔지만, 테이블 3개를 한 번에 조회하여 데이터를 가져오는 방법을 찾을 수 없었다.(내가 못 찾는 건가????/ 정말???) 튜터님께 도움을 요청해 enabled라는 옵션을 알게 됐다. 데이터 조회를 한 번의.. 2024. 3. 22.