본문 바로가기

분류 전체보기95

var, let, const의 5가지 차이점 (재선언, 재할당, 스코프, 호이스팅, 전역 객체) JavaScript에서 var, let, const 키워드를 이용하여 변수를 선언할 수 있다. 기존에는 var 키워드가 유일한 변수 선언 키워드였다. 하지만 var 키워드에는 여러 문제점을 가지고 있었고, 이를 해결하기 위해서 ES6(ECMAScript2015)에서 let과 const 키워드가 도입되었다. 오늘은 var 키워드의 문제점을 살펴보면서 let과 const 키워드에서는 어떻게 달라졌는지 차이점에 대해 알아보도록 하겠다!  1. 재선언재선언이란 동일한 스코프 내에서 동일한 이름의 변수를 다시 선언하는 것을 의미한다. var user = { firstName: "Gil-dong", lastName: "Hong" };var user = { name: "Hong Gil-dong" };console.l.. 2025. 2. 11.
React 프로젝트 이벤트 위임을 통한 리렌더링 최적화 오늘은 React 프로젝트에서 이벤트 위임을 통해 렌더링 최적화를 하였고 성능 개선하였는지 말해보겠다.  이벤트 위임이란?자신의 이벤트를 상위 또는 하위의 요소에 위임하는 것이다.주로 하위 요소 각각에 이벤트 핸들러를 붙이는 대신, 그들의 부모 요소에 하나의 이벤트 핸들러를 붙여서 하위 요소들의 이벤트를 관리한다.이렇게 하위 요소의 이벤트가 상위 요소로 퍼지는 방식은 이벤트 버블링(Event Bubbling)을 이용한 개념이다. 반대로 상위 요소의 이벤트를 하위로 위임하여 하위 요소에서 이벤트를 관리할 수도 있다.이처럼 상위 요소의 이벤트가 하위 요소로 퍼지는 방식이 이벤트 캡쳐링(Event Capturing)이라고 한다. 따라서 하나의 자신을 대신할 요소가 "대표자" 역할을 하면서 연관된 요소들의 이벤.. 2025. 2. 10.
프론트엔드 프로젝트 구조를 위한 디자인 패턴 알아보기 (Atomic Design Pattern, Feature-Sliced Design) 프론트엔드 프로젝트를 진행할 때, 가장 먼저 고민해야할 것 중 하나는 "어떤 폴더 구조를 사용할 것인가?" 이다.프로젝트 구조를 잘 설계하면 유지보수성과 확장성이 높아지며, 개발 생산성에도 큰 영향을 미친다.이번 글에서는 2 가지 프론트엔드 아키택처 패턴을 살펴보며, 각 방식이 언제 적합한지 알아보겠다!  1. Atomic Design PatternAtomic Design은 화학의 원자(Atom) 개념에서 영감을 받은 디자인 시스템이다.쪼개지지 않는 최소 단위인 원자부터, 원자가 모여 만들어지는 분자, 분자가 결합되어 유기체가 생성된고, 유기체들이 모여서 하나의 템플릿을 구성하게 되며, 이 템플릿에 데이터가 결합되면서 페이지가 완성되는 흐름을 가진다. 원자 (Atoms) : 더 이상 분해할 수 없는 최소.. 2025. 2. 5.
자연스러운 UX: 뒤로 가기에서 스크롤 위치 유지하기 웹 애플리케이션을 사용하다보면 리스트 페이지에서 특정 아이템의 상세 페이지로 이동했다가 다시 돌아올 때, 스크롤 위치가 맨 위로 초기화되는 경험을 하곤한다. 이는 사용자 경험을 지해하는 요소 중 하나로, 오늘은 React-router-dom과 window.scrollTo 메서드를 활용해 이 문제를 해결한 방법에 대해 작성해보겠다! 상황 구성하기먼저 세로 스크롤이 긴 / 페이지와 특정 아이템의 상세 내용을 볼 수 있는 /item가 있다고 하자.// Home.tsximport { Link } from "react-router-dom";export default function Home() { const items = Array.from({ length: 30 }, (_, i) => i); return (.. 2025. 2. 4.
바닐라 JS에서 알아보는 useEffect 동작 원리 및 간단한 구현 useEffect는 React의 핵심 Hook 중 하나로, 컴포넌트의 부수 효과(side effect)를 관리한다.이번 글에서는 바닐라 자바스크립트로 useEffect를 구현해보면서, 동작 원리에 대해 알아보려고 한다. 이번 글은 바닐라 JS에서 알아보는 useState 동작 원리 및 간단한 구현 에서 코드가 이어진다.아직 보지 않았다면 한 번 읽어주길 바란다! :)   useEffect의 기본 인터페이스useEffect를 구현하기에 앞서 인자 및 반환 값 그리고 기능을 정리해보자.useEffect(setup, dependencies);매개변수setup(설정) : Effect의 로직이 포함된 함수.설정 함수는 선택적으로 cleanup(정리) 함수를 반환할 수 있다.React는 컴포넌트가 DOM에 추가된 .. 2025. 2. 3.
Vite + React + TS 프로젝트에서 절대 경로 설정하기 오늘은 Vite + React + TS 프로젝트에서 절대 경로를 설정하는 방법에 대해서 알아보겠다  Alias 설정Alias는 프로젝트 내에서 특정 경로를 짧고 간단하게 표현하기 위해 사용하는 별칭이다.예를 들어, '../../components/Button' 같은 상대 경로 대신 '@/components/Button' 같은 간단한 경로를 사용할 수 있다. Vite TypeScript 기반 프로젝트에서 절대 경로를 설정한다면 다음 두 가지 주요 파일을 수정해야한다. 1. vite.config.tsVite 설정 파일을 관리하기에 앞서 @types/node 패키지를 설치해주어야한다.@types/node 패키지는 Node.js의 기본 모듈 (path, fs 등)에 대한 타입 정의를 제공하는 패키지로, 절대 경.. 2025. 2. 3.

티스토리툴바