til45 [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. 최종 팀 프로젝트 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. supabase 테이블 조인하여 조회 / 삭제 오늘은 즐겨 찾는 화장실 페이지 작업을 진행했다. 마음에 드는 화장실을 북마크 해둔 것을 볼 수 있는 화면인데, 그러기 위해서는 두 가지의 테이블이 필요했다. 화장실 정보를 가지고 있는 toilet_location 테이블과 유저 별 북마크 정보를 가지고 있는 bookmark 테이블이다. 두 테이블의 정보는 아래와 같다. bookmark 컬럼명 타입 설명 bookmark_id int [pk] 북마크 아이디 toilet_id int [fk] 화장실 아이디 user_id varchar 유저 아이디 toilet_location 컬럼명 타입 설명 toilet_id int [pk] 화장실 아이디 toilet_name varchar 화장실 이름 toilet_address varchar 화장실 주소 toilet_ope.. 2024. 3. 21. geolocation, kakao 로컬 rest api 활용 오늘은 geolocation과 kakao rest api 키를 활용하여 유저의 위도/경로 위치 정보를 가져와서 헤더에 보여주는 작업을 했다. 이번에 geolocation을 처음 사용해 봐서 아직은 기본적인 기능만 구현했다. 먼저 유저 위치 정보를 가져오는 함수를 만들었다. //현재 좌표 가져오기 const handleGetCurrentPosition = () => { navigator.geolocation.getCurrentPosition((position) => { console.log('현재 좌표 : ', position.coords.latitude, position.coords.longitude); setLocation({ lat: position.coords.latitude, lng: positi.. 2024. 3. 20. 이전 1 2 3 4 5 6 다음
