프로젝트가 커질수록 가장 자주 발생하는 문제는 '이 파일은 어디에 둬야 하지?'라는 질문이다.기능이 늘어나면 컴포넌트, API, 훅, 타입이 여기저기 흩어지고, 작은 수정도 영향 범위를 예측하기 어려워진다. 이 글은 FSD(Feature-Sliced Design)를 이번 프로젝트에 맞춰 적용하면서 정리한 판단 기준과 폴더 구조를 기록한 글이다.*Processes 레이어가 deprecated 된 이후의 방식을 기준으로 설명한다. 0. 프로젝트 맥락 - 홈 화면이 가진 특성이 구조를 결정한다이번 프로젝트의 홈 화면은 대략 이런 형태이다.이 한 장의 화면만 봐도 '어디까지가 전역 골격이고, 어디부터가 기능이며, 무엇이 도메인 상태인지'가 갈린다.- 하단 탭은 단순 UI가 아니라 라우팅과 결합된 앱 골격이다.-..

최근 비동기 처리와 관련해서 Race Condition(경쟁 상태)이라는 용어를 처음 접하게 되었다.JS는 싱글 스레드 기반이다. 근데 왜 이러한 문제가 생기는지 궁금해졌고, Race Condition이 무엇인지, 어떤 상황에서 발생하는지 정리해 봤다. 1. Race Condition이란: 둘 이상의 비동기 작업이 같은 자원(= 상태)을 갱신하려고 할 때, 실행 순서에 따라 결과가 달라지는 문제 핵심은 순서 제어 불능 !! (= 비동기 작업의 순서를 확실히 제어 X)비동기 작업은 요청한 순서대로 끝나지 않는다. 따라서 먼저 보낸 요청의 응답이 나중에 보낸 요청보다 늦게 도착하면, 화면이나 데이터가 예상과 다른 상태를 보이게 된다.이런 상황이 바로 Race Condition이다. 2. JS는 싱글 스레드인..

이번 글에서는 기본 태그와 자주 쓰이는 요소들을 한번 살펴보겠습니다. 1. p 태그paragraph(문단)을 의미하는 태그자동으로 줄 바꿈이 적용되며, 문단 간 기본 여백이 존재합니다.이 문장은 하나의 문단여기는 새로운 문단 2. br 태그줄바꿈(line break) 태그문단이 아니라 줄만 바꿉니다.이것은줄바꿈 3. a 태그 (anchor)하이퍼링크를 만드는 태그href 속성으로 이동할 리소스 지정외부 링크(URL) 또는 내부 페이지 내 위치(#id) 가능합니다.외부 링크내부 이동경로 지정절대 경로: http://example.com/path/file.html상대 경로: ./file.html 또는 ../상위폴더/file.html 4. style 태그HTML 문서 내에서 CSS 정의 안에 배치하는 것이..

웹 개발을 시작한다면 가장 먼저 만나게 되는 언어가 HTML입니다.이번 글에서는 HTML의 기본 개념부터 브라우저가 해석하는 과정, 그리고 자주 실수하는 부분까지 이해하기 쉽게 정리해 보겠습니다. 1. HTML이란?HTML(Hyper Text Markup Language)은 웹 페이지의 구조와 의미를 표현하는 언어입니다.CSS는 스타일을, JavaScript는 동작을 담당하는 것과 달리 HTML은 페이지의 뼈대와 시맨틱을 담당합니다. - 뼈대 : 제목, 본문, 구역, 이미지, 링크 등 문서의 기본 구조- 시맨틱 : 요소 자체가 의미를 갖는 태그 ( = 독립적인 글, = 내비게이션) 왜 중요할까?→ 시맨틱 하게 작성된 HTML은 검색엔진, 스크린리더, 브라우저가 정확히 이해할 수 있어 접근성, 성능, S..

React에서 useContext는 전역적으로 값을 공유할 수 있게 해주는 중요한 도구입니다.본격적으로 useContext를 살펴보기 전에 React의 기본 개념부터 차근차근 알아보겠습니다. 0. React 기본 개념(1) 컴포넌트React 앱은 전부 컴포넌트로 구성됩니다.컴포넌트는 재사용 가능한 UI 조각으로 버튼, 헤더, 카드, 페이지 전체 등 다양한 크기로 만들 수 있습니다.function Button() { return 버튼;} (2) Props Props는 컴포넌트에 값을 전달하는 방식입니다.부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하며, HTML 태그의 속성과 유사합니다.function Hello({ name }) { return 안녕, {name}!;} // "안녕, ..

리액트 19 버전으로 업데이트되면서 새로 생긴 훅이 존재했는데요,그중 하나가 바로 useActionState 입니다 !! 이번 글에서는 useActionState에 대해 한번 살펴보겠습니다. 1. useActionState란?먼저 공식문서를 살펴보니, Action이라 불리는 이 친구는주로 비동기 요청(특히 폼 제출, 서버 호출 등)을 감싸는 함수를 의미합니다. useActionState는 이 Action을 감싸고 다음과 같은 역할을 수행합니다.- 반환값을 상태로 저장- 로딩 상태를 자동 관리 즉, 폼 제출 후 액션 함수가 반환한 결과가 곧 컴포넌트의 상태가 되고,로딩 상태도 isPending으로 자동 추적됩니다. 2. useActionState 사용 이유기존 방식 (useState)- 결과, 오류, 로..

리액트를 사용하다 보면, 상태가 변경될 때 불필요한 연산이 계속 실행되어 화면이 느려지는 경우가 있습니다.이때 유용하게 쓸 수 있는 도구가 바로 useMemo입니다 ! 1. useMemo란?값을 메모이제이션(memoization)해서 필요할 때만 다시 계산하도록 도와줍니다.쉽게 말해, "이 값은 변하지 않으면 다시 계산하지 말고, 이전 값을 그대로 가져다 써"라고 알려주는 도구입니다. useMemo가 왜 필요한가?함수형 컴포넌트는 상태가 변경되면 함수 전체가 다시 재렌더됩니다.이 과정에서 컴포넌트 안에 있는 모든 변수와 함수들이 다시 불러와지는데요, 이때, 렌더링마다 무거운 연산이 계속 실행되어 성능이 저하되는 문제가 발생하거나useEffect 의존성에 객체를 넣은 경우 값이 바뀌지 않아도 참조가 달라져..

리액트에서 함수를 사용할 때 그냥 쓰면 안 되고, useCallback으로 감싸야한다는 이야기를 한 번쯤 들어보셨을 겁니다.그런데 왜 그래야 하는지, 의존성 배열은 어떻게 설정해야 하는지 감이 잘 오지 않는 경우가 많습니다.이번 글에서는 간단한 예제를 통해 useCallback의 유무와 의존성 배열 차이가 렌더링에 어떤 영향을 주는지 살펴보겠습니다. 0. 함수 참조란useCallback에 대해 알아보기 전에 "함수 참조"에 대해 알아보겠습니다.자바스크립트에서는 함수는 객체로, 동일한 코드라도 매번 새로 만들게 되면 참조(=주소)가 달라집니다.const fn1 = () => {}; // 참조 Aconst fn2 = () => {}; // 참조 B (fn1과 다름)리액트는 props 변경 여부를 얕은 비교(..

자바스크립트에서 "클로저"는 어려운 개념이지만, 필수적으로 알아야 하는 핵심 개념입니다.클로저를 이해하면 함수형 프로그래밍, 이벤트 처리 등을 더욱 효과적으로 활용할 수 있습니다.이번 글에서는 클로저와 관련된 내용들과 함께 클로저에 대해 알아보도록 하겠습니다 ! 1. 스코프 (Scope) : 변수의 생명주기와 접근 범위변수가 어디서 접근 가능한지, 언제까지 살아있는지를 결정하는 것이 바로 스코프입니다. 다음과 같이 이름이 동일한 변수가 선언되었을 때,각각의 결과값은 어떤 x를 참조했을까요?var x = '전역변수';function f () { var x = '함수 스코프'; console.log(x);}f(); // ?console.log(x); // ?더보기f(); // "함..

리액트를 이용하다가 자주 만나는 훅 중 하나가 바로 useEffect입니다.이번에는 useEffect에 대해 알아보려고 하는데,그전에 먼저 부수 효과(side effect)에 대해 가볍게 살펴보겠습니다. 0. 부수 효과(side effect)란?리액트 컴포넌트는 기본적으로 상태(state)를 화면에 그리는 일이 주된 목적입니다. 하지만 UI를 그리는 것 외에도 이러한 부가적인 동작이 필요할 때가 있습니다.- 서버에서 데이터 가져오기(API 호출)- 브라우저 이벤트 등록/해제- 로컬스토리지나 쿠키에 값 저장 ...이처럼 UI 외부에 영향을 주거나, 외부로부터 데이터를 가져오는 일을 부수 효과라고 부릅니다.리액트에서는 이러한 부수 효과를 안전하게 다루기 위해 useEffect 훅을 제공합니다. 부수 효과를 ..