Frontend (20) 썸네일형 리스트형 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 맵.. [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.. [Sass] 다크 모드, 라이트 모드 구현하기 개요디자인 시스템 업데이트로 라이트모드가 추가되었다.현 프로젝트에서 sass를 사용하고 있고, 컬러테마는 다크테마 1개만 사용하고 있는데 여기에 라이트 테마를 추가해보자.추가로 라이트, 다크 모드 토글 기능도 구현해보자.진행라이트모드 파일 추가// src/constants/_colors-light.scss// BLUE$C_BLUE_10: #162b57;$C_BLUE_20: #1d3b75;$C_BLUE_30: #23468c;$C_BLUE_40: #2b55ab;$C_BLUE_50: #3366cc;$C_BLUE_60: #3b77ed;$C_BLUE_70: #548dff;$C_BLUE_80: #8ab1ff;$C_BLUE_90: #c9dbff;$C_BLUE_100: #e0ebff;..._theme.scss 파일 추.. [Storybook] 라이트모드, 다크모드 토글 기능 추가하기 개요회사에서 디자인 시스템을 업데이트 하면서 새로 추가된 다크모드, 라이트모드 기능을 스토리북에서도 테스트해보고 싶다.스토리북에서 다크모드, 라이트모드에 따라 컴포넌트 스타일이 변화되는 것을 눈으로 확인해보자.방법애드온 설치우선 스토리북에서 theme을 사용하기 위해 애드온을 설치한다.npm i -D @storybook/addon-themesmain.ts 파일 환경설정// .storybook/main.tsexport default { addons: ['@storybook/addon-themes'],};main.ts 파일에 addons에 설치한 라이브러리를 등록한다.preview.tsx 파일 환경설정import { withThemeByClassName } from '@storybook/addon-them.. "jsx-a11y/no-noninteractive-element-interactions" 에러 해결 개요React + TypeScript 프로젝트를 진행하던 중 li 태그에 onClick 속성을 추가하니 Eslint 에러가 발생했다.위 에러가 발생하는 이유와 해결 방법에 대해 알아보자.코드type RestaurantRowProps = { restaurant:Restaurant}function RestaurantRow({ restaurant }:RestaurantRowProps) { const [, cartStore] = useCartStore(); const handleClick = (food:Food) => () => { cartStore.addCart(food); }; return ( {restaurant.name} {resta.. [React] BrowserRouter vs HashRouter 비교 개요실무 프로젝트에서 라우팅 경로가 설정되지 않은 경로로 진입했을 경우 404에러를 발생하는 문제가 있었다.이를 해결하고자 404 에러를 발생하지 않는 방법을 찾기위해 디버깅을 시작했다.라우팅 경로가 설정되지 않은 경로로 진입시 에러를 발생시키는 이유는 BrowserRouter를 사용하기 때문이라는 이유를 알게되었다.그럼 BrowserRouter와 HashRouter가 서로 어떻게 다른지 궁금해졌다.BrowserRouterBrowserRouter는 브라우저 주소창 속 clean URL을 사용하는 현재 위치를 저장한다. 그리고 브라우저 내장 히스토리 스택을 이용하여 경로를 이동한다.새로고침하거나 URL로 직접 접근할 경우 경로를 찾지 못해 에러가 발생한다. (이를 해결하려면 서버에 추가적인 셋팅이 필요)H.. 정규표현식에 변수값 사용하기 개요Jest로 테스트 코드를 작성하던 중 객체 변수의 이름이 DOM에 존재하는지 확인하기 위해 정규표현식을 사용하려고 했다.하지만, 정규표현식이 들어갈 자리에 변수를 그대로 입력하면 변수명 그 자체를 찾게되어 내가 의도한 대로 동작하지 않았다. 방법const regExp = new RegExp(변수명) 결과describe('RestaurantTable 컴포넌트', () => { // given const { restaurants } = fixtures; beforeEach(() => { render(); }); // when context('RestaurantTable 컴포넌트가 렌더링되면', () => { it('restaurant의 menu의 .. 이전 1 2 3 다음
