Coding Planet

프로젝트 개요프로젝트 개요기상청 API를 활용하여 기상 데이터를 수집 및 가공한 후, 특정 산업 사용자에게 미세 기상 정보를 제공하는 웹앱 개발 프로젝트.급격한 기상 변동 시, 웹앱이 활성화되어 있지 않은 상황에서도 사용자에게 Push 알림을 통해 실시간 정보를 제공하는 기능 구현.기술 스택프론트엔드: Next.js v13, TailwindCSS백엔드: Spring, JPA데이터베이스: PostgreSQL프로젝트 기간5주참여 분야프론트엔드 공통 모듈 개발Next.js 환경 설정 및 구성Redux 환경 구현 및 상태 관리 로직 개발FCM회고Next.js 적응: 기본적인 리액트 지식만을 가지고 시작한 프로젝트였기 때문에 Next.js 프레임워크의 모듈 구조와 기능에 적응하는 데 시간이 필요했다.서버사이드 랜..

일반적으로 ScrollToTop 컴포넌트는 window 객체의 스크롤을 감지하여 구현한다. 하지만 특정 div 내에서만 스크롤이 발생하는 경우 window.pageYOffset은 항상 0을 반환하여 스크롤 위치를 정확히 파악할 수 없다. 무한 스크롤 게시판의 경우 맨 위로 가기 버튼이 필수적이므로 이 기능을 스크롤 컨테이너에서만 적용되도록 구현했다. 다만 예시코드에서는 무한 스크롤 부분은 코드의 가독성을 위해 제거하고 ScrollToTop 기능만 나와있다.   | 접근 방법1. 스크롤 가능한 컨테이너에 ref를 할당한다.2. 이 ref를 'ScrollToTop' 컴포넌트에 전달한다.3. 'ScrollToTop' 컴포넌트 내에서 해당 ref의 scrollTop 속성을 사용하여 스크롤 위치를 감지한다.  |..

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..