본문 바로가기

TIL26

[프로그래머스] 모의고사 아... 정말 요즘 오타 때문에 자꾸 코딩 테스트가 오래걸린다....... 아아악 제발 정신 차려... 문제 오늘은 프로그래머스의 모의고사를 풀었는데, 진짜 계속 안됐다. 문제 경우 1. 모의고사 문제가 수포자 답안보다 수가 많을 경우 / 42.9 처음에 안된 부분은 수포자가 찍는 답안의 수 배열보다 문제답안 배열의 수가 더 많을 때 다시 수포자 답안의 첫 번째 답안으로 돌아가야 하는 부분을 제대로 구현하지 못해서 통과를 못했다. 이 부분은 현재 비교할 번째인 i 를 수포자 답 배열의 수로 나눈 나머지의 값을 구해 그 값을 인덱스로 사용하여 수포자답안의 인덱스와 정답 답안(answers) 의 i 번째와 비교하도록 하였다. 이전에는 수포자 답 배열 length 와 i 가 같으면 i 를 0으로 초기상태로 돌.. 2024. 3. 28.
[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 테이블 조인하여 조회 / 삭제 오늘은 즐겨 찾는 화장실 페이지 작업을 진행했다. 마음에 드는 화장실을 북마크 해둔 것을 볼 수 있는 화면인데, 그러기 위해서는 두 가지의 테이블이 필요했다. 화장실 정보를 가지고 있는 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.
[프로그래머스] 문자열 다루기 기본 / 오타 때문에... 오래걸린 코딩 테스트 문제 - 문자열 다루기 기본 계속 통과를 못해서 며칠 동안 미뤄뒀던 문제를 오늘 다시 풀어보았다. 분명 다 맞는 것 같은데 왜 계속 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.