Coding Planet

import { ArgumentsHost, Catch, ExceptionFilter, HttpException } from '@nestjs/common';import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';@Catch()export class PrismaClientExceptionFilter implements ExceptionFilter { catch(exception: unknown, host: ArgumentsHost) { const ctx = host.switchToHttp(); const response = ctx.getResponse(); const request..

문제 상황 설명최근 프로젝트에서 AJAX를 사용하여 서버로부터 파일을 다운로드할 때 한글 파일명이 깨지는 현상을 겪었다. 동일한 파일 다운로드 기능을 form 제출 방식으로 구현했을 때는 이러한 문제가 발생하지 않았다.882ECA99EEB84A7ECB18FEDB5B3%84_240715-240726.xlsx -> 이런식으로 한글 깨짐 원인 분석AJAX와 form 제출 방식의 차이점Form 제출 방식: 브라우저가 기본적으로 제공하는 다운로드 기능을 활용한다. 브라우저는 Content-Disposition 헤더를 자동으로 처리하고, 파일명 인코딩을 알아서 처리한다. 따라서 Form 형식의 파일다운로드에서는 파일명이 제대로 출력됬다.AJAX 방식: XMLHttpRequest 또는 Fetch API를 사용하여 비..

사이드 바로 자세한 일정나오는거 너무 불편...  테스크 디테일에 들어가서 설정( · · · ) 선택 후 알림창의 이슈열기 선택   편안...    -> 백로그나 타임라인에서는 아직 안됨....

현재 회사에서 동기와 스터디를 하고 있다. react로 pwa를 구현하는 중인데 환경설정에서 에러가 많이 나서 바로 동기와 공유하고 있는 git repository에 올리기가 애매했다.  commit을 해두는 방법, stash를 해놓은 방법도 있지만 제대로 구현되지 않은 작업을 commit하기도 그렇고 stack에 임시로  stash 하기도 싫었다. 그래서 git에 내 private repository를 하나 파 놓고 관리하기로 했다.  1. 현재 연결된 원격 레파지토리 확인 : git remote -v  2. 새로운 원격 레파지토리 등: git remote add     3. 연결 확인: git remote -v내가 지정한 sharon-boilerplate 별명으로 원격 저장소가 생성되었다.  4. p..

PWA 구현시 create-app-react로 생성하지않아 아래와 같은 폴더 구조를 가지고 있지 않았다. 그래서 루트에 public 폴더를 생성하고 하위에 서비스 워커 설정을 위한 js를 추가했다. service-worker.js 를 제대로 설정하고, indext.html에 아래와 같이 serviceWorker를활성화 하는 코트를 넣었는데도 브라우저에서 스크립트를 찾지 못하는 오류가 났다.const registerServiceWorker = async () => { if ('serviceWorker' in navigator) { try { const registration = await navigator.serviceWorker.register( '/service-worker..

redux-persist 상태를 유지함으로써 페이지를 새로고침하거나 탐색할 때도 사용자 설정이나 임시 데이터(예: 폼 입력 내용)를 유지할 수 있다. 또한 백엔드 서버와의 통신을 줄여주어 사용자 경험을 크게 향상시킨다.보통 로컬스토리지에 저장하게 된다. 다만 이런 클라이언트상의 저장은 문제가 있으므로 보안이 요구되는 데이터 보다는 임시데이터 위주로 저장한다.   설치yarn add redux-persist  환경설정store.js는 Redux 스토어를 생성하고 설정하는 파일이다. 여기에 persistConfig를 포함시켜 저장소와 관련된 모든 설정을 한 곳에서 관리하는 것이 좋.스토어 생성 과정에서 persistReducer와 함께 persistConfig를 사용하여 일관된 상태 저장 및 복원을 보장한다..

const mapStateToProps = state => { const weatherData = state.home.weatherData || {}; return { temperature: weatherData.temperature, humidity: weatherData.humidity, windSpeed: weatherData.wind_speed, description: weatherData.description, };};   const weatherData = state.home.weatherData || {};이 구문은 JavaScript에서 흔히 사용하는 단축 평가(Short-circuit Evaluation) 문법이다.이 표현식은 state.home.weatherD..

redux-saga는 Redux에서 비동기 작업(예: API 호출)을 더 쉽게 관리할 수 있게 해주는 미들웨어이다. redux-saga는 제너레이터 함수(generator function)를 사용하여 비동기 로직을 작성할 수 있으며, 이를 통해 코드의 가독성과 유지보수성을 높일 수 있다. 아래 코드를 예시로, redux-saga가 어떤 역할을 하는지 설명하겠다.import { call, put, takeLatest, all } from 'redux-saga/effects';import axios from 'axios';import { fetchWeatherSuccess, fetchWeatherFailure } from './config/action';import { FETCH_WEATHER_REQUEST..