프로젝트 (19) 썸네일형 리스트형 [poompoom] FSD 디렉토리 구조 적용 중, 역할 기준 폴더에 관하여 ✅ atoms/, molecules/, organisms/ 구조의 배경이건 Atomic Design 패턴에 기반한 UI 계층 구조입니다.계층설명예시atoms가장 작은 단위의 UIButton, Input, Labelmolecules2개 이상의 atom 조합Input + Labelorganisms섹션 단위 구성 요소Header, Footer, Form ➡️ 이 구조는 UI 재사용성, 디자인 시스템 구성에 유리하지만➡️ 실제 비즈니스 로직과 도메인 흐름과는 분리되어 있어서, 복잡해질 수 있습니다. ✅ FSD에서 이걸 어떻게 해결하나?FSD는 UI 계층보다 **도메인 관심사(domain-centric)**를 기준으로 나눕니다.범위위치예시특정 feature 안에서만 쓰임features/review/ui/Butt.. [프로젝트 회고] STDev 해커톤 1. 피그마 SVG Export할 때는 Frame으로 감싸주고, 바로 밑에 하나의 벡터 이미지가 존재하도록. 2. Vite에서 SVG 사용할 때, 로컬에서는 잘 되는데 배포 환경에서 안되는 경우. import { ReactComponent as Logo } from './logo.svg'; // 이건 CRA 방식 Vite는 기본적으로 CRA 방식을 지원하지 않으므로 vite-plugin-svgr를 설치해야 합니다.npm install vite-plugin-svgr// vite.config.ts or vite.config.jsimport { defineConfig } from 'vite';import svgr from 'vite-plugin-svgr';import react from '@vitejs/plu.. [포트폴리오] poompoom 개선 ✅ 프로젝트 도중 발생한 애로사항1. container/presenter/styles 구조 적용에 대한 애로사항1-1. 파일 구조 불일치 문제 발생1-2. 3가지 그룹으로 분리하기 애매한 컴포넌트 발생( 작은 컴포넌트에선 과도한 분리가 부담 )1-3. 파일 이름이 길고 반복됨.=> 관심사의 분리(SoC: Separation of Concerns)라는 목적은 분명히 장점이 있으나, Presenter는 Container 없이도 다양한 페이지에서 재사용 가능하다는 등 재사용성과 작업 기한에 무리가 있어, PostCard/Container.tsx 같이 역할을 구분하여 개선하였다. 2. 폴더 구조가 중구난방이어서 이해하기 어려운 애로사항=> 도메인 기준으로 폴더를 분리하여 FSD 방식으로 구조화하였다. 3. ✅.. [PBL] TS 타입 정의 궁금증 naver.map의 타입 정의를 하는데 의문이 생김. 네이버 지도 script를 가져올 때 문제가 발생한다면, 인스턴스를 생성하기 전부터 이미 오류가 발생하지 않나?따라서 오류 검증이 충분히 된 상태인데, 굳이 map인스턴스의 타입을 null 허용해야 하는지 궁금증이 생김. interface MapContextType { map: naver.maps.Map | null; // 지도 인스턴스 객체 userCity: string; // 사용자 시도별 위치를 저장할 상태 userCoordinates: { latitude: number; longitude: number } | null; // 사용자 좌표 상태 setMapInstance: (mapInstance: naver.maps.Map) => void.. [PBL] npx와 npm 차이 왜 npx create-react-app my-app이라고 작성해야 할까? 우선 npx는 npm내부의 유틸리티이다. npm이 더 큰 개념. npm안에 npx가 존재한다. npx는 주로 한번만 실행할 명령어 or 전역 설치 없이 즉석에서 바로 실행할 패키지를 다룰 때 사용한다.=> node_modules 설치 없이 사용할 명령어에 사용하는 것. npm create-react-app my-app를 하려면, create-react-app이라는 패키지를 사용해야하므로npm install -g create-react-app으로 패키지의 전역 설치가 우선되어야만 한다. 이런 번거로움을 해결하기 위해, 전역 설치가 불필요한 npx를 사용하는 것!!! [PBL] 트러블슈팅 ESLint 9.0.0 ESlint 세팅 끝나고 제대로 됐는지 확인하려고// 좀 더 일반적인 방법. 재귀적으로 탐색.eslint src/ --ext .js,.jsx,.ts,.tsx// 세밀한 분석 가능. Glob 방식.eslint "src/**/*.{js,jsx,ts,tsx}"위의 명령어 실행함. 그런데 ESLint v9.0.0 이상부터는 eslint.config.js만 지원이 된다고 한다...!!! ICT때의 절망을 느끼지 않기 위해 빠르게 다운그레이드함."eslint": "^8.0.0", [PBL] .editorconfig vs .prettierrc.js vs .eslintrc.js .editorconfig : 다양한 개발환경, 에디터(IDE)에서의 파일 형식 일관성 유지. 에러나 경고를 표시하지 않음. 모든 파일 형식 지원(언어 무관) .prettierrc.js : 줄바꿈, 들여쓰기, 괄호 위치, 세미콜론 등 매우 구체적인 코드 스타일 적용 .eslintrc.js : 문법 오류, 코드 스타일 등 코드의 품질 및 스타일 관리. [PBL] 템플릿 vs 보일러플레이트 Vite는 템플릿이다. XVite는 템플릿의 성격을 가진다. O=> Vite는 개발 도구고, 템플릿은 단순히 기본 구조를 제공한다는 개념일 뿐이다. 기본 CRA는 public/, src/를 생성하기에 보일러플레이트의 성격을 가짐.But, --template 옵션을 통해 프로젝트 생성할 때 여러 커스터마이징 가능하기에 템플릿 성격도 가지고 있음. 이전 1 2 3 다음
