개발기록창고

taskgrow 프로젝트에서 할 일 리스트를 유저가 중요도에 따라 자유롭게 순서를 변환할 수 있도록 UX 개선이 필요하다. 불필요한 리렌더링을 줄이기 위해 useRef를 사용해서 구현했다. 순서를 바꾸는 구현에 있어 생각이 많았다. 단순한 것이지만 드래그라 쉽게 변경 가능함 -> 많은 요청 으로 유저가 최종적으로 수정을 마친 후 한 번만 요청을 보낼 수 있도록 생각을 해보았지만.. 클라이언트에서 순서 저장해두고 있다가 해당 테스크를 벗어나면 변경된 order 서버에 요청 -> 순서 옮기고 브라우저 창을 닫으면 적용 안됨 순서 변경 버튼 생성 -> 버튼 클릭 후 자유롭게 순서 변경 가능 -> 확인 버튼 클릭시 변경된 order 서버에 요청 -> 유저 번거로움 와 같은 문제로 딱히 좋은 방법이 떠오르지 않았..

공공데이터 API를 이용하여 추천 레시피를 개발하다가 오류를 발견했다. 찜한 목록에서 각각의 레시피를 불러올 때 제대로 불러오지 않는 현상이 발생했다. (그간 1~2개로만 테스트를 해봤을 때는 잘 떠서 오류를 확인을 못했었다.) 3개의 레시피를 불러와야하는데 현재 2개의 레시피만 불러오고 있다. 네트워크를 확인해보니 불러와지지 않은 레시피는 CORS 오류가 뜬 것을 확인할 수 있다. 그런데 공공데이터 API는 인증키만 필요할 뿐 오픈되어있기 때문에 CORS 오류가 일어날 일이 없는데.. 왜 발생하는지 의문이 들었다. 우선 CORS를 해결하기위해 기본적으로 백엔드에서 처리하는 것이 바람직하지만 공공데이터이므로 프론트에서 임시로 처리하기 위해 Proxy설정을 할 수 있다. vite.config.ts에서 Pr..

로컬 환경에서 favicon이 제대로 적응되는 것을 보고 배포했으나 실제 배포된 서비스에서는 favicon이 보이지 않는 현상이 발생했다. 문제를 찾기 위해서는 우선 네트워크 상에서 제대로 favicon 아이콘을 불러왔는지 확인을 해야한다. favicon 아이콘을 응답으로 받아야하는데 기본적인 index.html이 응답이 된 것을 볼 수 있다. 현 프로젝트에서 public안에 favicon이 있고 index.html은 최상단에 위치해있다. 하지만 실제 배포됐을 때 favicon 경로 처리가 제대로 되지 않아서 찾을 수 없기에 기본 index.html을 응답값으로 내놓는 것이다. 따로 세세하게(?) 경로 지정을 해 줄 필요 없이 Vite라는 번들러가 알아서 /favicon으로 경로 설정하면 public 안..

Taskgrow라는 뽀모도로 프로젝트에서 UX를 개선하기 위한 작업을 시작했다. 현 서비스는 뽀모도로(타이머를 활용해서 25분간 집중해서 일하고, 5분간 휴식하는 기법)를 제공하고 있다. 페이지에서 타이머 시작을 클릭해놓고 다른 페이지에서 작업을 진행할 때 몇 분이 남았는지 매번 확인하기 위해서는 페이지를 방문해야하는 불편함이 있다. 이를 해결하기 위해 HTML title에 남은 시간을 표시하고 favicon은 시간의 흐름에 따라 시간의 흐름을 보여주면 1. 유저가 굳이 페이지를 클릭후 남은 시간을 확인할 필요없이 title로 남은 시간 확인 가능 2. favicon으로 시각적으로도 어느정도 흘렀는지 체크 가능 UX 개선이 가능했다. 항상 정적으로 만들다가 동적으로 처음 만들어보는 거라서 어렵지 않을까 ..

냉장고의 이미지를 가져오는데 늦게 뜨는 현상이 발생한다. 해당 이미지를 불러오는 코드는 export const getFoodImage = async (image: string) => { const storage = getStorage(app); const imageRef = ref(storage, `cart/${image}`); return await getDownloadURL(imageRef); }; 처음에 데이터를 가져올 때 이미지 url이 저장되어 있지 않고 위와 같이 파일명이 저장되어있는데 storage에 저장된 사진 파일을 불러온다. 정리해서 이미지 url이 저장되어있지 않으므로 바로 이미지를 불러오는 게 아닌 다시 firebase에 요청해서 가져오므로 한 번 더 거치기 때문에 HTTP/2 in..

네트워크에 대해 큰 부분만 간략적으로 알고 있었는데 이 책을 통해 자세히 알 수 있었다. 면접 질문으로 자주 보았던 “브라우저에서 www.google.com으로 이동할 때 발생하는 과정을 설명해보아라” 이 부분에 대한 내용이 첫장에 있었는데 단순 암기가 아니라 그 과정이 하나하나 어떻게 발생되는지 알 수 있었다. 제일 기억에 남는 부분은 직접 경험했던 부분들의 이론을 책에서 알게 된 것이다. 인터넷을 사용하다보면 추천 광고에 내가 이전에 검색하거나 봤던 내역들을 기반으로 광고가 떠서 어떤 원리로 작동하는지 궁금했었는데 책에서 서드파티 쿠키에 대한 내용을 보고 그 원리를 이해하게 되었다. 프로젝트를 하면서 이미지 렌더링이 늦게 뜨는 현상이 발생했는데 평소에는 두리뭉실하게 네트워크 상에서 지연이 됐나보네라고..

토이 프로젝트를 만들면서 레시피에 대한 공공데이터 API가 필요하여 공공데이터활용에서 제공하는 Open API를 가져오려고 한다. 1. Open API 신청하기 https://www.foodsafetykorea.go.kr/apiMain.do 식품안전나라 공공데이터 검색 식품의약품안전처 및 연계기관에서 개방하는 데이터를 검색할 수 있습니다. 검색어를 입력하세요. --> 검색 www.foodsafetykorea.go.kr 여기서 원하는 데이터를 검색하고 해당 데이터에 Open API 이용 신청을 하면 된다. 요청주소, 요청인자, 출력항목이 나와있어서 처음 Open API를 사용해보는 나도 쉽게 이용할 수 있었다. 제공해주는 데이터가 많기 때문에 그 중 내가 필요한 데이터만 가져오기 위해 JSON형식으로 가져..

프로젝트에서 공공API를 통해 레시피를 가져오는데 데이터가 이런식으로 되어있었다. MANUAL01 ~ MANUAL20까지 Key가 존재한다는 것은 알고 있으나 해당 메뉴에 메뉴얼이 몇 개 있는지는 모르는 상태이므로 우선 01부터 20까지 하나하나 확인해주는 코드를 작성했다. import type { RecipeData } from "@/types/recipe.types"; const manualFilter = (recipe: RecipeData) => { const manuals = []; for (let i = 1; i { const manuals = []; for (let i = 1; i

https://www.acmicpc.net/problem/2579 2579번: 계단 오르기 계단 오르기 게임은 계단 아래 시작점부터 계단 꼭대기에 위치한 도착점까지 가는 게임이다. 과 같이 각각의 계단에는 일정한 점수가 쓰여 있는데 계단을 밟으면 그 계단에 쓰여 있는 점 www.acmicpc.net 문제 계단 오르기 게임은 계단 아래 시작점부터 계단 꼭대기에 위치한 도착점까지 가는 게임이다. 과 같이 각각의 계단에는 일정한 점수가 쓰여 있는데 계단을 밟으면 그 계단에 쓰여 있는 점수를 얻게 된다. 예를 들어 와 같이 시작점에서부터 첫 번째, 두 번째, 네 번째, 여섯 번째 계단을 밟아 도착점에 도달하면 총 점수는 10 + 20 + 25 + 20 = 75점이 된다. 계단 오르는 데는 다음과 같은 규칙이 있..

처음 설계할 때 전역 상태 관리에 쓰일 만한 게 유저정보, 선택 카테고리 정도였지만 프롭스 드릴링 현상으로 상태 관리 도구가 필요했다. 굳이 무겁고 보일러 플레이트가 있는 redux나 다른 도구를 사용하기보다는 간단하고 이번기회에 사용해볼겸 Context API를 선택하였다. 유저 상태 관리랑 카테고리 상태 관리를 분리하였는데 Context API의 단점인 Provider로 감싼 자식 컴포넌트들이 상태값이 변경될 때 리렌더링이 된다는 것이다. 불필요한 리렌더링을 없애기 위해 유저 로그인 정보만 Context API로 관리하고 나머지 상태 관리는 Zustand로 관리하는 것으로 변경하였다. 많은 전역 상태 관리 도구 중에서 Zustand를 선택한 이유는 짧은 러닝 커브와 간편하기 때문에 골랐다.