소프트웨어 작업실

shared 레이어란?shared는 특정 페이지 하나만을 위한 것도 아니고, 앱 시작을 위한 전체 설정도 아닙니다.shared는 여러 페이지나 여러 로직에서 함께 쓸 수 있는 공통 자원입니다.예를 들면 이런 것들입니다.공통 UI 컴포넌트, 공통 유틸 함수, 공통 API 클라이언트, 공통 타입, 공통 상수, 공통 상태 저장소, 공통 훅즉, 프로젝트 전체에서 반복해서 쓰이는 것들이 shared 입니다.왜 필요한가요?이유는 중복 제거와 일관성 유지입니다.예를 들어 버튼을 페이지마다 다 따로 만들면 문제가 생깁니다.디자인이 페이지마다 달라집니다, 수정할 때 여러 파일을 전부 고쳐야 합니다, 코드가 중복됩니다, 규칙이 무너집니다하지만 shared/ui/Button.tsx 하나로 관리하면 프로젝트 전체에서 같은 버..

pages 레이어란?pages는 보통 라우트(URL) 단위의 화면입니다.예를 들면 이런 것들입니다.홈 화면, 로그인 화면, 회원가입 화면, 식당 목록 화면, 식당 상세 화면, 마이페이지즉 사용자가 브라우저에서 이동해서 보는 하나의 완성된 페이지입니다.왜 필요한가?앱에는 기능도 많고 공통 자원도 많지만, 사용자는 결국 화면을 봅니다.예를 들면 로그인 기능이 있다고 해도 사용자는authApi, authSessionStore, Button, Input이것을 보는 것이 아니라 로그인 페이지를 봅니다.그래서 프로젝트 안에는 실제 사용자 화면을 담당하는 계층이 필요합니다.그게 pages입니다.

App 레이어란?app 레이어는 앱 전체를 초기화하고 연결하고 공통 환경을 세팅하는 곳입니다.즉, 특정 화면 하나를 위한 것도 아니고, 특정 공통 버튼 하나를 위한 것도 아니고, 앱 전체가 공통으로 따라야 하는 규칙과 시작 구조가 들어갑니다.쉽게 말하면 이런 것입니다.앱 시작점, 전역 Provider, 전역 라우팅, 전역 스타일, 앱 초기화 로직, 앱 전체 레이아웃의 최상위 연결.즉 app은 앱의 운영 기반입니다.왜 따로 두나요?이유는 성격이 완전히 다르기 때문입니다.예를 들어 로그인 페이지, 식당 목록 페이지, 공통 Button, 공통 Input이런 것들은 기능 또는 화면 또는 재사용 자원입니다.그런데 BrowserRouter 연결, QueryClientProvider 연결, 전역 CSS import,..

FSD 란?FSD를 full로 다 쓰면 이렇게 갑니다.apppageswidgetsfeaturesentitiesshared그런데 모든 프로젝트가 처음부터 이 구조를 전부 다 써야 하는 것은 아닙니다.프로젝트 규모가 아직 크지 않거나, 기능 단위 분리가 아직 그렇게까지 필요하지 않다면, 보통 더 단순하게 줄여서 씁니다.그래서 보통 처음 프로젝트에서 apppagesshared이렇게 두는 것은 FSD의 생각은 가져가되, 구조를 현재 규모에 맞게 축소한 것입니다.왜 그렇게 하나요?이유는 크게 3가지입니다.기능이 아직 그렇게 많지 않기 때문입니다.features는 보통로그인좋아요댓글 작성북마크필터 적용검색정렬프로필 수정이런 식으로 사용자 행동 단위 기능이 많아질 때 의미가 커집니다.그런데 프로젝트가 아직 그 정도로..

Context 값이란?React의 Context 값는 props를 계속 아래로 넘기지 않고, 필요한 곳에서 바로 값을 꺼내 쓸 수 있게 해주는 기능입니다.여기서 Context 값 이라는 것은 그 Context 안에 들어 있는 실제 데이터입니다.예를 들면 이런 것 들입니다.현재 로그인한 사용자 정보다크모드 여부언어 설정토큰 정보공통 함수상태 변경 함수즉, Context에 담아서 공유하는 값 자체가 Context 값입니다.왜 필요한가요?보통 React는 부모가 자식에게 props로 값을 전달합니다.그런데 구조가 깊어지면 문제가 생깁니다.AppLayoutHeaderUserMenu예를 들어 UserMenu에서 사용자 정보를 써야 하는데, 그 값을 App → Layout → Header → UserMenu 식으로..

React에서 Provider란?NestJS에서는 클래스나 값을 컨테이너에 등록해주고, 필요한 곳에 주입해주는 대상을 Provider라고 합니다.@Injectable()export class UserService { }이 UserService는 Provider가 됩니다.그리고 컨트롤러에서 이렇게 받습니다.constructor(private readonly userService: UserService) { }즉, NestJS Projvider는 의존성 주입하기 위한 객체에 가깝습니다.반면 프론트 엔드 React의 Provider의 경우는 보통 Context 값을 하위 컴포넌트에 전달하는 래퍼 컴포넌트 입니다.예를 들면 이런 것입니다.ThemeProviderAuthProviderQueryClientProvi..

[BOJ 24445] 알고리즘 수업 - 너비 우선 탐색 2 - [그래프 이론, 그래프 탐색, 정렬]문제 링크https://www.acmicpc.net/problem/24445문제 요약무방향 그래프에서 시작 정점 $R$로부터 너비 우선 탐색(BFS)을 수행할 때, 인접 정점을 내림차순으로 방문하는 순서를 출력하는 문제입니다.접근 방법자료구조: std::vector (인접 리스트), std::queue (탐색용), int[] (방문 순서 저장)알고리즘: 너비 우선 탐색 (BFS)핵심 아이디어:인접 리스트를 구성한 후, 각 정점과 연결된 이웃 노드들을 sort(v.begin(), v.end(), greater())를 통해 내림차순으로 정렬합니다.큐를 이용해 순차적으로 정점을 방문하며, 방문할 때마다 카운트 변..

[BOJ 24444] 알고리즘 수업 - 너비 우선 탐색 1 - [그래프 탐색]문제 링크https://www.acmicpc.net/problem/24444문제 요약무방향 그래프에서 시작 정점 $R$로부터 너비 우선 탐색(BFS)을 수행하며, 각 정점의 방문 순서를 출력하는 문제입니다. 단, 인접 정점은 오름차순으로 방문해야 합니다.접근 방법자료구조: - vector graph[]: 그래프 연결 상태를 저장하는 인접 리스트queue: BFS 탐색을 위한 큐int visited[]: 각 정점의 방문 순서를 저장하는 배열알고리즘: 너비 우선 탐색 (BFS)핵심 아이디어: - 인접 리스트를 만든 후 각 정점별 연결된 노드들을 오름차순 정렬하여 문제의 조건을 충족합니다.시작 노드부터 방문 순서를 1씩 증가시키며 v..

[BOJ 24480] 알고리즘 수업 - 깊이 우선 탐색 2 - [그래프 이론, 탐색]문제 링크https://www.acmicpc.net/problem/24480문제 요약주어진 무방향 그래프에서 시작 정점으로부터 DFS를 수행하며 각 정점의 방문 순서를 출력하는 문제입니다. 단, 인접 정점 방문 시 내림차순으로 방문해야 합니다.접근 방법자료구조: std::vector adj[] (인접 리스트), int visited[] (방문 순서 저장 배열)알고리즘: 깊이 우선 탐색(DFS)핵심 아이디어: - 인접한 정점들을 내림차순으로 방문하기 위해 각 인접 리스트를 sort 함수와 greater()를 사용하여 정렬합니다.전역 변수 cnt를 활용해 방문할 때마다 순차적으로 번호를 매깁니다.풀이 코드#include #i..

**Q: import { useQuery } from '@tanstack/react-query';이 코드는 뭐하는 코드야?**선생님, 이 코드는 TanStack Query(구 React Query) 라이브러리에서 useQuery 훅을 가져오는 import 문입니다. 즉, 서버에서 데이터를 조회(GET)하고, 그 결과를 React 컴포넌트에서 쉽게 관리하기 위해 쓰는 기능입니다. ([TanStack][1])import { useQuery } from '@tanstack/react-query';쉽게 말하면 다음과 같습니다.WhatuseQuery는 비동기 데이터 조회용 훅입니다. API 호출 결과를 가져오고, 로딩 상태, 에러 상태, 성공 데이터를 함께 관리합니다. 공식 문서에서도 query는 고유 key에 ..