분류 전체보기 (213) 썸네일형 리스트형 FormData 형식으로 multipart 데이터 PUT 요청하기 개요프로젝트를 진행하면서 브라우저에서 엑셀 파일을 업로드하고 수정한 엑셀 파일 및 데이터를 BE로 보내는 과정에서JSON 형식이 아닌 formData 형식으로 보내야했다. 코드- formData 객체를 생성 후 append를 사용하여 key, value를 추가해준다.- formData 객체를 console.log 호출 시 `{}`만 출력된다.- `for ... of` 문으로 출력해야 console 창에서 확인이 가능하다.- multipart 형식으로 보내야하는 File은 input 창에 업로드되거나 drop 된 원본 파일을 그대로 보내줘야 한다. 위 코드에서는 Jotai 상태값으로 관리해주었다. [R3F] 3D 객체 겹쳐보이는 이슈 z-fighting 해결하기 문제R3F 라이브러리를 사용하여 3D 맵을 구현하던 중 시점에 따라 3D 객체의 색상이 다르게 보이는 이슈 발견기본 색상은 회색인데 시점 변경 시 바닥면이 검정색으로 보이는 이슈가 있다.원인 파악1. 빛의 노출빛의 노출 정도에 따라 3D 객체의 색상이 다르게 보이는 문제인줄 알고, 빛의 노출에 관계없이 색상을 렌더링하는 을 사용했다.아예 를 제거하여 빛을 제거해보았지만 동일한 이슈가 발생했다.결국 빛의 노출이 원인이 아니라고 생각이 들어 다른 방법으로 생각해보았다.2. Canvas 설정값 수정3D 객체를 띄워주는 Scene 역할을 하는 Canvas의 기본설정을 바꿔보았다.Linear, RenderSide 등 렌더링 방식을 수정해보았지만 문제는 해결되지 않았다.3. 바닥면과의 겹치는 부분 노출 방식3D 맵.. [flutter] 안드로이드 스튜디오 빌드 오류 flutter로 앱을 만드는 중에 XCode와 IOS Simulator를 통해 IOS 환경에서 테스트 빌드는 잘 실행되어 UI도 확인하고 기능도 테스트해볼 수 있었다.이제 android 환경에서도 테스트 해보기 위해 android studio 설치해서 테스트 빌드 실행하는 순간...!에러가 발생했다...에러가 한두개가 아니니 단계별로 에러의 원인과 해결방법을 기록해두려고 한다.1. settings.gradle의 plugins 블록 위치 오류FAILURE: Build failed with an exception.\* Where:Settings file '/Users/yiju/dev/shifter/android/settings.gradle' line: 28\* What went wrong:Could not .. 비전공자 주니어 FE 개발자의 2024 - 4분기 회고 2024년도의 마지막 회고를 2025년 1월에 작성하게 될줄야..시간이 너무 빨리 지나가기도 하고 약속, 회사 업무, 이사 준비, 대출, 사이드 프로젝트 등 해야할 것들이 너무 많아서늦게나마 2024년도 회고를 작성해보려고 한다.👍 Likedcursor를 통해 업무 관련 코드에도 개발 향상성을 높이고 일관된 코드를 작성할 수 있어서 좋았다.풀무원 프로젝트를 디벨롭하여 운영에 배포할 수 있어서 좋았다.이메일 템플릿을 여러개 만들어보면서 이를 템플릿화 할 수 있어서 좋았다.📘 Learned디자인 시스템의 폰트를 'Pretendard'로 수정하면서 기존 폰트를 제거하고 적용하는 것을 배웠다.엑셀 파일을 업로드하고 다운로드 하는 행동을 플랫폼에 추가하는 것을 배웠다.😅 Lacked업무시 기획자와 어떻게 소.. [외주] 버디망고 프로젝트 회고 프로젝트 기간- 2024.11.5 ~ 2024.12.10 (5주)실 개발 일수: 17일 (깃헙 로그 기준)3L 회고👍 Likedcursor AI를 사용하여 개발 생산성을 높일 수 있어 좋았다.Next, TailwindCss, Supabase, Vercel 조합으로 쉽고 빠르게 클라이언트, 어드민 페이지 개발할 수 있어서 좋았다.Next를 사용하면서 서버사이드 렌더링, 클라이언트 사이드 렌더링의 장단점을 구별하여 적절하게 사용하고 서버가 어떤 역할을 하는지에 대해 더 깊게 알게될 수 있어서 좋았다.📘 Learnedsupabase 타입을 그대로 불러와서 프로젝트에서 사용할 수 있는 sync 명령어를 배워서 앞으로 유용하게 사용할 것 같다.PostgreSQL 기반의 데이터베이스를 설계하고 해당 테이블에 접.. [React] SPA에서 페이지 이탈 감지하기 SPA 방식에서 페이지 이탈 감지하기React를 사용하여 SPA의 router를 관리하기 위한 라이브러리로 React-router-dom을 많이 사용한다.이번에는 SPA 에서 React-router-dom에서 제공하는 useBlocker를 활용하여 페이지 이탈을 감지하고 이를 유저에게 다이얼로그로 알려주는 코드를 작성해보려고 한다.준비물React-router-dom V6 설치npm install react-router-dom@6v6 부터 useBlocker를 사용할 수 있다.상황유저가 입력값을 수정할 수 있는 페이지가 존재한다.유저가 입력값을 수정한 이후 "임시저장"을 하지 않은 상태로 현재 페이지를 이탈할 경우, 다이얼로그를 띄워 알림을 준다.접근 방법유저가 입력값을 수정했다는 상태값 선언functio.. [Leetcode] 433. Minimum Genetic Mutation - JS https://leetcode.com/problems/snakes-and-ladders/description/?envType=study-plan-v2&envId=top-interview-150 1. 문제 분석문제분석--------------------유전자 문자열은 'A', 'C', 'G' 및 'T' 중에서 선택할 수 있는 8자의 긴 문자열로 표시될 수 있습니다.유전자 문자열 startGene에서 유전자 문자열 endGene으로의 돌연변이를 조사해야 한다고 가정합니다. 여기서 하나의 돌연변이는 유전자 문자열에서 변경된 단일 문자로 정의됩니다.예를 들어 "AACCGGTT" --> "AACCGGTA"는 하나의 돌연변이입니다.유효한 유전자 돌연변이를 모두 기록하는 유전자 은행도 있습니다.유효한 유전자 스트링이.. [Leetcode] 909. Snakes and Ladders - JS https://leetcode.com/problems/snakes-and-ladders/description/?envType=study-plan-v2&envId=top-interview-150 1. 문제 분석문제분석--------------------n x n 보드가 주어지고, 보드 왼쪽 하단에서 시작하여 각 행의 방향을 번갈아 가며 cell을 이동할 때n^2에 도달하는 최소 주사위 횟수를 반환하라. 만약 불가능하다면 -1을 반환하라.주사위를 던질 때 현재 위치에서 1~6까지 이동할 수 있고 만약 최대로 이동할 수 있는 위치가 n^2을 넘을 순 없다.즉, [curr + 1, min(curr + 6, n^2]이 이동가능한 범위이다.주사위 굴림 당 최대 한 번만 뱀이나 사다리를 가져갈 수 있습니다.뱀이나 사.. 이전 1 2 3 4 ··· 27 다음
