neda의 블로그

javascript url을 디코딩하여 %20을 공백으로 되돌리기 브라우저는 ASCII 문자들을 사용하여 URL을 사용하는데, 예외적으로 ASCII 문자가 아닌 문자들이 포함되어 있을 때가 있다. 이럴 때 브라우저는 비 ASCII 문자들을 적절하게 ASCII 문자 형식으로 변환하여 사용한다. 또한 URL에는 공백이 사용될 수 없다. Nextjs params는 인코딩된 값 Nextjs에서는 params 값을 인코딩된 그대로 내보낸다. 예를 들면 사용자는 'iron man'을 검색했지만 api 호출을 받은 서버는 'iron%2520man'이라는 요청을 받게 된다. 여기서 공백은 사용자가 'iron man'을 검색하여 'search/iron man' 페이지로 이동할 때 ' ' => '%20' 으로 변환된다. ..

nextjs 13 app router react-query에서 prefetch하여 hydrate하기 react query Provider 설정 Provider 컴포넌트를 클라이언트 컴포넌트로 만들어 루트 레이아웃에서 감싸주기 // /app/_components/Provider.tsx 'use client' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import React from 'react' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' type Props = { children: React.ReactNode } const Provider =..

렌더링에서 reflow, repaint 브라우저는 렌더링 단계에서 웹 페이지의 구조를 잡기 위해 reflow를 발생시키고, 시각적 업데이트 하기 위해 repaint를 발생시킨다. 리플로우 reflow는 렌더링 트리에서 노드의 크기와 위치를 다시 계산하여 레이아웃을 잡는 작업이다. 부모요소에 리플로우가 발생하면 DOM 노드의 구조에 따라서 관련있는 자식 요소에 리플로우가 발생할 수 있다. 리페인트보다 처리 비용이 높다. 리페인트 repaint는 화면에 변경사항이 발생하여 시각적으로 업데이트되어야 할 때 발생한다. 리플로우 후에 발생한다. 리플로우와 리페인트를 발생시키는 요인들 DOM 노드의 변경: 노드 추가, 추가 업데이트, 노드 삭제 등 DOM 노드의 노출 변경: display:none 속성을 통한 노출..

React에서 useImmer를 사용하여 쉽게 불변성 관리하기 use-immer 라이브러리 useImmer는 Immer 라이브러리를 통해 만들어진 React Hook이다 기본 사용법은 React의 내장 훅인 useState과 거의 비슷하다 useState가 "set + 상태 이름"을 세터 함수 이름으로 쓴다면 useImmer에서는 "update + 상태 이름"을 업데이트 함수 이름으로 사용한다. const [state,setState] = useState(initialState); const [state,updateState] = useImmer(initialState); use-immer로 상태 업데이트 하기 단일 값 업데이트 단일 값에 대한 업데이트는 useState와 동일하게 그대로 인자로 넣어 호..

항해 플러스 코육대 1회 총알 피하기가 아니라 추석 음식 피하기! 회고 추석 연휴 맛있게 명절 음식을 먹으며 휴대폰을 보고 있었는데 구글 디스커버에 "항해 플러스 코육대"에 대한 게시글이 보였다. 내일배움캠프를 수료했기 때문에 항해라는 단어를 보고 '팀스파르타'에서 하는 것이라는 걸 바로 알아챌 수 있었다. 코육대의 취지는 이번 추석 연휴 간 코딩 개발을 통해 개발 근육을 깨우고 특별한 선물까지 받을 수 있다고 한다. 이까지만 보고는 크게 할 마음이 없었지만, 종목들을 보니 게임이었다. 게임을 만들어 본 적은 없어서 갑자기 하고 싶다는 생각이 들었다. 특히나 요즘 계속 사용하고 있는 자바스크립트를 통해서 게임을 만들고 이를 웹에 배포하면 설치하지 않아도 누구나 웹 사이트에 접속하여 게임을 할 수 있어 흥..

프로그래밍에서 횡단관심사 프로그래밍에서 횡단 관심사(Cross-Cutting Concern)란 여러 클래스나 함수 등에 걸쳐 공통으로 적용되는 기능이나 로직 예를 들어, 로깅(logging), 인증(authentication), 트랜잭션 관리(transaction management), 에러 처리(error handling) 등은 다양한 컴포넌트나 서비스에서 공통적으로 필요로 하는 기능입니다. 주요 비즈니스 로직과는 별개로 동작하지만, 시스템 전체에 걸쳐 중요한 역할 횡단 관심사(=Aspect)를 각각의 비즈니스 로직 코드와 분리하여 작성 관심 지향 프로그래밍 관심 지향 프로그래밍(Aspect-Oriented Programming, AOP)은 위에서 말한 횡단 관심사를 분리하고 모듈화하는데 사용되는 프로..

Console API 웹 개발을 하거나 자바스크립트에서 값을 출력하기 위해서 console.log()를 자주 사용한다. console.log가 값을 출력하는 가장 대표적인 메서드지만, Console API에는 이 외에도 다양한 메서드가 존재한다. 다양한 메서드를 사용하여 더 효율적으로 디버깅을 하기 위해서 console API에 대해 알아둘 필요가 있다. console객체는 브라우저의 디버깅 콘솔에 접근할 수 있는 메서드를 제공한다 console 객체는 아무 전역 객체에서나 접근할 수 있다 assert() 주어진 가정이 거짓인 경우 콘솔에 오류 메시지를 출력 (참인 경우, 아무것도 하지 않음) console.assert(assertion, obj1 [, obj2, ..., objN]); console.a..

최종 프로젝트 종료와 코드 리뷰 회고 18일 저녁 최종 프로젝트 발표가 끝나고 오늘 수료식만이 남게 되었습니다.4.5주라는 기간 동안 기획부터 디자이너와 디자인 협업, Supabase를 통한 백엔드 구현, React를 활용한 프론트엔드 구현까지 많은 일이 있었습니다. 이 글에서는 최종 프로젝트에서 있던 코드 리뷰를 통해 코드를 개선한 코드들에 대해 알아보겠습니다. 코드리뷰 코드리뷰란 코드리뷰는 코드 작성자가 아닌 팀원, 동료가 코드를 검토하고 피드백하는 행위를 말합니다. 코드리뷰는 버그를 발견하고, 코드의 품질을 높이는 데 도움을 줄 수 있습니다. 하나의 프로젝트 내에서 코드의 일관성을 유지하는 데 도움을 줄 수 있습니다. 코드리뷰 필요성 현재 프론트엔드에는 eslint, prettier 등을 통해 코드..

230617 최종프로젝트 2차 버그 및 에러 수집·개선 팀장님의 권유로 프로젝트를 마무리하기 전에 2차로 다시 한 번 피드백을 받기로 했다. 앞서 9월 6일 1차로 유저 테스트를 진행했다.하지만 생각보다 너무 빨리 올린 것도 있고 밤 10시에 올리는 바람에 사람들의 관심을 제대로 받지 못했다. 이번에는 낮에 다시 올렸고 다양한 사람들로 부터 피드백을 받을 수 있었다. 대체로 만족도 부분에서는 다들 후하게 점수를 주셨다. 분명 좋은 점수를 받기에는 부족함이 많은 프로젝트라 생각하는데 다들 너무 착하신 것 같다. 이번에도 불편사항이나 에러를 위주로 피드백을 모아서 개선을 진행했다. 1차, 2차 테스트에서 발견하고 개선한 사항은 총 74개였다. 단순한 CSS 버그부터 API 호출을 계속 할 수 있는 치명적인 ..

리액트에서 webp로 변환하여 이미지 최적화 file 입력 → URL.createObjectURL(file) → url string url string → react-cropper → base64 string base 64 string → react-image-file-resizer → File object File object → upload supabase → getPublicUrl→ url string