얼마 전 Microsoft는 악성 코드 문제로 인해 Visual Studio Marketplace에서 VSCode 확장 프로그램인 'Material Theme'과 'Material Theme Icons'를 제거했습니다. 저 역시 Material Theme의 다크 모드를 사용하고 있었는데, 갑작스럽게 삭제되어 불편함을 겪었습니다. 이에 따라 기존 테마를 대체할 만한 테마를 정리해보았습니다.   1. Material Theme Kit Microsoft에서 제공하는 테마로, Material, Material Night, Material Night Eighties 세 가지 버전이 있습니다.그중에서 Material Night Eighties가 기존에 사용하던 테마와 가장 유사했습니다. 하지만 개인적으로 빨간 색상..

프로젝트에서 React Query의 Hydration과 prefetchQuery를 활용하여 SSR(Server-Side Rendering)을 구현했다.https://new-development.tistory.com/13 React Query와 SSR: 서버 사이드 데이터 관리와 Hydration 활용현재 프로젝트는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)이 혼합된 애플리케이션이다.정적인 페이지: 데이터 변화가 적어 정적 콘텐츠로 제공 (e.g. 메인 화면)동적인 페이지: 데new-development.tistory.com  이 과정에서 팀원들과 다양한 의견을 나눴는데, 그중 fetchQuery에 대한 논의가 있었다.의견 1. "부모 컴포넌트에서 SSR을 통해 데이터를 패칭한 뒤, ..

실행 컨텍스트가 무엇이고, 어떠한 기능을 하는지 알아보자.    실행 컨텍스트실행 컨텍스트는 코드가 실행되는 환경이다. 함수 호출, 전역 코드 실행, eval() 실행 등 모든 실행 단위가 실행 컨텍스트에서 처리된다. 실행 컨텍스트는 소스코드를 실행하는 데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다.-자바스크립트 Deep Dive  구성요소   Call Stack자바스크립트 엔진은 단일 Call Stack을 사용해 실행 컨텍스트를 관리한다.각 함수가 호출될 때마다 새로운 실행 컨텍스트가 생성되고 Call Stack에 쌓인다. 1. 생성 단계실행 컨텍스트가 생성되며, 선언문만 실행해서 환경 레코드(Environment Record)에 기록한다. 2. 실행 단계선언문 외 나머지 코드..

오늘은 제어 컴포넌트와 비제어 컴포넌트에 대해 정리했다.  제어 컴포넌트React에서 컴포넌트 상태가 입력 필드 값을 제어한다.사용자의 입력에 따라 값이 변경될 때마다 컴포넌트의 상태로 업데이트된다.상태(state)와 onChange 이벤트 핸들러를 통해 값이 관리된다.값이 즉각적으로 렌더링에 반영된다.import { useState } from 'react';function ControlledComponent() { const [inputValue, setInputValue] = useState(""); const handleChange = (event) => { setInputValue(event.target.value); }; return ( 제어 컴포넌트 ..

오늘은 헷갈리는 개념인 클로저에 대해 정리해봤다.   클로저는 함수가 자신이 생성된 환경을 기억하는 특성이다.즉, 함수 안에서 선언된 변수들을 함수가 실행될 때마다 사용할 수 있게 만들어준다. 여기서 inner함수는 outer함수 내부에 정의되어 있다.이때 inner함수는 자신이 생성된 스코프, 즉 outer을 기억하고, outer함수의 호출이 완료된 이후에도 그 스코프에 접근할 수 있다. 아래 코드에서 outer에 10이 할당되며 inner를 반환한다. 이후 outer 함수는 종료한다.inner를 할당받은 fn에 5를 할당하면 inner(5)를 실행한다.inner에는 매개변수 x가 존재하지 않지만, 자신이 생성된 환경을 기억해 outer의 x를 사용할 수 있게 된다.function outer(x) { ..

이미지 압축의 필요성리뷰 작성 컴포넌트를 제작하며 최적화를 어떻게 할지 고민했다. 우선, 이미지 파일 개수 제한과 파일 크기 제한에 대한 기준을 설정했다. 리뷰 페이지가 인스타 피드 형식이기 때문에 이미지 파일 개수는 최대 5개로 제한하고, 파일 크기는 백엔드 개발자와 협의하여 임시로 10MB까지 업로드할 수 있도록 설정했다.  또한, 클라이언트 측에서 파일 크기를 줄이고 WebP 형식으로 변환하면 서버 저장 공간을 절약하고 전송 속도를 개선할 수 있다고 판단했다. 이를 통해 이미지를 불러올 때 더 가볍게 처리할 수 있어 사용자 경험을 크게 향상시킬 것으로 기대된다.  이미지 압축 라이브러리어떤 라이브러리를 사용할지 고민한 끝에 browser-image-compression을 선택했다. 이 라이브러리는 ..