전체 글93 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. Zustand 이번 팀 프로젝트에서 상태 관리 라이브러리로 zustand를, 사용하게 됐다. Zustand 가 redux 와 같이 flux 패턴이라서 redux에 대한 이해가 있다면 비교적 쉽게 배울 수 있다고 한다. 모듈이 가볍다. 문법 및 사용법이 간단하다. Flux 패턴이란? 데이터를 중앙 집중형 저장소에 저장하고 action을 통해 데이터를 조작하는 패턴이다. Zustand 사용하기 create() 함수로 store를 생성한다. 그러고 사용할 컴포넌트에서 useMemoStore() 로 불러와서 구조분해할당으로 필요한걸 꺼내서 사용한다. 요즘 너무 복붙을 많이 하는 것 같아서 오랜만에 손코딩 2024. 3. 19. 새로운 팀 프로젝트 시작! 오늘부터 새로운 팀프로젝트가 시작됐다. 우리 팀은 화장실 위치를 찾아주는 아주 유용하고 재밌는 프로젝트를 기획했다. 재미있고 해보고 싶은 기능을 구현해 보자는 실험실 모토로 시작했는데, 결론적으로 하나에 더 집중해서 만들어보는 쪽으로 결정이 됐고, 그중 하나인 화장실 프로젝트가 선정되었다. 화장실 위치 및 이 화장실이 어떤지 리뷰를 작성할 수 있도록 하는 프로젝트여서 위치 데이터가 중요했는데, 전국 화장실 위치가 있는 데이터와 시별로 따로 나뉜 데이터 중 어떤 데이터를 사용해서 구현하는 것이 중요할지가 오늘의 중요한 포인트였다. 전국 화장실 위치 데이터와 도시별 화장실 위치 데이터는 각각 장단점이 있었다. 전국 데이터는 도시 별로 나뉜 데이터보다 통일성이 있기 때문에 데이터 관리가 비교적 쉬웠지만, 도시.. 2024. 3. 18. route handlers next.js 는 풀스택을 지원하는데, route hander는 API 요청에 대한 내용을 작성하여 백엔드 로직을 수행한다. app 디렉토리 하위에 route.js(ts) 파일을 만나면 next.js 는 route handlers로 인식한다. 보통 app/api/ 의 경로에 폴더별로 구분하여 구성한다. 아래는 todo list를 만들면서 작성한 route 파일과 폴더 구조이다. route 파일 안의 함수명은 POST, GET, PUT, DELETE 등의 메소드 이름으로 대문자 형식으로 만들어야 컴포넌트에서 보낸 요청이 연결된다. app/api/todos/route.ts export async function GET(request: Request) { try { const response = await f.. 2024. 3. 15. next.js 기초 이번주부터 nextjs에 돌입했다. nextjs의 기초적인 내용을 다뤄보자. next.js란? next.js는 react.js 기반으로 만들어진 프레임워크이다. 풀스택 개발이 가능하여 백엔드 + 프런트엔드 배포를 하나로 할 수 있다. vercel에서 만들어서 배포도 vercel로 하면 편하게 할 수 있다. 제일 큰 변화가 2022 v13 버전인데 이때, 앱 라우팅 기술이 나왔다. fetch 함수가 next.js에서 기능이 확장되며 여러 옵션을 지원하는데, 렌더링 4가지 방식과 관련이 있다. 4가지의 렌더링 방식을 지원한다. (SSR, ISR, SSG, CSR) 기본적으로 코드 스플리팅을 지원한다. route handler 기술로 백엔드 개발이 가능하다. 앱 라우팅 app 폴더 하위의 폴더명을 기반으로 자.. 2024. 3. 13. [프로그래머스] 문자열 다루기 기본 / 오타 때문에... 오래걸린 코딩 테스트 문제 - 문자열 다루기 기본 계속 통과를 못해서 며칠 동안 미뤄뒀던 문제를 오늘 다시 풀어보았다. 분명 다 맞는 것 같은데 왜 계속 4개의 실패 케이스가 나오는지 도통 이해가 되지 않았다. 그러던 중 6글자의 숫자로 이루어진 true가 나와야 하는 테스트 케이스가 없는 걸 확인하고 추가했더니 이게 계속 false로 나오면서 통과가 되지 않았다. 로직은 맞는데... 하면서 계속 보다가... 오타를 발견했다 ㅋㅋㅋ 하... ㅋㅋ 기존 코드 function solution(s) { const str = s.replace(/ /g, ''); let answer = false; if(str.length == 4 || str.legth == 6){ for(let i = 0; i < str.length; i++){ .. 2024. 3. 13. [typescript] 빌드에 대하여 typescript 강의를 다시 보고있는데, 문득 왜 react + typescript 는 컴파일을 하지 않았는데 vercel에 배포가 가능한건지 궁금했다. (역시 복습하니까 같은 강의를 봐도 좀 더 들리는 것 같다) 기초를 처음 배울 때 typescript 는 컴파일을 돌려서 js 파일을 만들었는데, 이번에 작업한 프로젝트는 컴파일된 js 파일이 보이지 않았다. 너무 기초적일 수 있는 질문이지만,,,, 궁금해서 튜터님을 찾아갔다. ts 는 npm run build 명령어로 컴파일해서 js를 만드는거로 알고있는데, 어떻게 빌드하지 않고 vercel 에 배포가 가능한지 여쭤봤다. 답변은 vercel이 빌드를 하고 배포하는 것이였다. 또한, 지금 프로젝트에 빌드된 js 가 보이지 않는 것은 내가 프로젝트에서.. 2024. 3. 7. 이전 1 2 3 4 5 6 7 8 ··· 12 다음
