neda의 블로그

react useSyncExternalStore를 사용하여 useMediaQuery 만들기 사용법 const StatusBar = () => { const isDark = useMediaQuery('(prefers-color-scheme: dark)') return ({isDark ? 'Dark Mode' : 'Light Mode'}) } 구현 // useMediaQuery.js import { useSyncExternalStore } from "react"; export function useMediaQuery(query) { const matches = useSyncExternalStore( (callback) => subscribe(query, callback), () => getSnapshot(q..

Kent C. Dodds의 Why I Won't Use Next.js 요약 Kent C. Dodds는 이번 next 14 발표와 함께 자신이 풀스택 웹개발에 nextjs를 사용하지 않고 remix를 더 선호하는 이유에 대한 글을 발행했다. 서론 처음 출시인 2020년부터 Remix를 사용해왔다. Remix가 Nextjs보다 뛰어난 사용자 경험을 만들 수있는 더 나은 도구라고 본다. 다만 Nextjs를 사용하는 것이 나쁘다는 것은 아니다. 단지 Remix를 사용하면 더 편할 것이라고 생각하는 것이다. 웹 플랫폼 Nextjs는 api를 직접 노출하지 않는다. 따라서 웹 플랫폼을 사용해야 하는 경우 웹 플랫폼 문서(예를 들면 MDN)가 아닌 Nextjs 문서를 보아야 한다. 이는 웹에 대한 공부보다 프레임워크..

nextjs 14 발표 후 server action 밈 모음 server actions는 server mutations을 nextjs에서 지원하기 위해 도입한 기능이다. 일반적으로 서버에서 db를 조작하기 위해서 form을 통해 데이터를 서버로 전송한다. 이때 server actions는 서버에서 해야 할 동작을 form 내부에 작성할 수 있도록 해준다. 하지만 "use server"라는 독특한 문법과 클라이언트 코드에 인라인으로 server 함수를 작성한다는 점이 마치 php, sql injection을 연상시켜 밈이 탄생했다. 발표 영상과 밈이 된 장면 HTML 삽입 미리보기할 수 없는 소스 밈 모음

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