써치킴의 우당탕탕 개발 블로그

Vite는 Node.js의 process.env를 통해 환경변수에 접근하는 방식과 달리 기본적으로 .env 파일을 읽어오지 않는다.⇒ vite.config.ts 파일에서 process.env 객체를 사용할 수는 있지만, 사용자가 정의한 .env 파일에 포함된 환경변수는 사용할 수 없다. 환경변수를 사용해야 하는 경우, loadEnv 헬퍼를 사용export default ({ mode }) => { // 현재 작업 디렉터리의 `mode`를 기반으로 env 파일을 불러옴 // 세 번째 매개변수를 ''로 설정하면 `VITE_` 접두사에 관계없이 모든 환경 변수를 불러옴 const env = loadEnv(mode, process.cwd(), ''); return defineConfig({..

tscofig.json, vite.config.ts 파일에서 설정tsconfig.jsoncompilerOptions > baseUrl 설정 ⇒ baseUrl은 생략 가능타입스크립트가 코드 상에서 import 경로를 해석할 때 설정한 경로를 기준으로 찾는다."baseUrl": "./src"baseUrl을 설정하지 않으면, tsconfig 파일을 기준으로 하여 탐색⇒ 현재 프로젝트는 tsconfig 파일의 위치가 프로젝트 최상위에 있기 때문에 baseUrl 생략compilerOptions > paths 설정타입스크립트가 코드 상에서 import 경로를 해석할 때 설정한 경로로 매핑하여 이해한다."paths": { "@/*": [ "./src/*", ], "@app/*": [ "./src/app/*",..

src : JavaScript 또는 TypeScript 코드 작성public : 정적 파일과 리소스를 작성, 자동으로 만들어지지 않으므로 직접 작성dist : 빌드 후 생성된 산출물이 저장되는 디렉터리vite.config.ts : Vite 설정 파일, Vite가 어떻게 동작할지 정의 (빌드 경로, 플러그인 설정 등)tsconfig.json : TypeScript 설정, TypeScript의 컴파일 옵션을 설정 ⇒ TypeScript 코드가 어떻게 JavsScript로 변환될지 정의package.json : Node.js에서 ES 모듈을 사용할 수 있도록 설정

robot.txt웹사이트에 웹 크롤러같은 로봇들의 접근을 제어하기 위한 규약웹사이트에서 크롤링하며 정보를 수집하는 검색엔진 크롤러(or 검색로봇)가 액세스하거나 정보수집을 해도 되는 페이지가 무엇인지, 안되는 페이지가 무엇인지 알려주는 역할을 하는 txt 파일크롤링웹페이지의 내용을 가져오는 것. 스크래핑(Scraping)이라고도 한다.robot.txt 작성[기본 형식]User-agent: *Disallow: /forbidden/User-agent: robots.txt에서 지정하는 크롤링 규칙이 적용되어야 할 크롤러를 지정Allow: 크롤링을 허용할 경로 (/ 부터의 상대 경로).Disallow: 크롤링을 제한할 경로 (/ 부터의 상대 경로).Sitemap: 사이트맵이 위치한 경로의 전체 URL (http..

Vite프랑스어로 빠르다를 의미하고, 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구네이티브 ES Module을 넘어 다양한 기능을 제공한다.번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 최적화된 정적 리소스들을 배포할 수 있고, 미리 정의된 설정을 제공한다.CRA vs Vite1. CRA는 webpack으로 번들링해서 코드가 바뀌면 모든 자바스크립트 코드를 새로 번들링한다.→ 앱이 커질수록 HMR(Hot Module Reloading)이 느려진다.Vite는 esbuild를 이용해서 변경된 부분만 새로 번들링한다.→ Vite도 첫 번째 실행해서 전체를 한번 번들링하고 그 이후로는 변경된 부분만 새로 번들링 2. webpack은 Nodejs로 만들어졌고,..

공통점기본적으로 JavaScript 언어 (TypeScript도 지원)차이점1. React는 웹에서 동작, React Native는 iOS와 AOS와 같은 모바일 환경에 맞춰 동작React로 앱을 만드는 경우는 React로 만든 웹사이트를 Webview로 띄우는 방법으로 앱을 만든다.React Native로 앱을 만드는 경우 React Native가 네이티브 코드가 되는 것이다. 2. React는 DOM을 조작하는 방식으로 UI를 업데이트하고,React Native는 DOM을 조작하지 않고 Javascript와 네이티브 모듈을 사용하여 네이티브 UI 구성 요소를 조작한다.React Native는 네이티브 UI 구성 요소를 사용하여 UI를 렌더링하는데, 이러한 네이티브 UI 구성요소는 React Nativ..

Git Flow다양한 branch를 관리하고 통합하기 위한 전략 중 하나이다.항상 존재하는 메인 브랜치(Main branch)는 master와 develop이며, 필요에 따라 생성하는 브랜치인  feature, hotfix, release 가 있다.merge되면 보조 브랜치인 feature, release, hotfix는 삭제된다. feature > develop > release > hotfix > master 순서로 앞에서 뒤로 진행된다.release / hotfix 브런치의 경우, develop 브런치의 오른쪽에 존재하기 때문에 모두 develop 브런치도 머지를 하도록 구성되었다. 개발자는 각 작업에 따라 feature 브런치를 만들고 develop 브런치에 merge하는 순서로 진행해 작업을 분..

FSD(Feature-Sliced Design)애플리케이션을 Feature(기능) 단위로 조직화하여 관리하는 방법을 말하며 layer, slice, segment의 총 3depth로 이루어져 있다. Layers7가지의 폴더로 구성하면 되고, 각 폴더마다 서로의 역할이 있어서 폴더별로 구분해서 관리해야 한다(app, pages, widgets, features, entities, shared)app: 애플리케이션 로직 초기화 및 글로벌 설정(정의), 애플리케이션의 진입점 역할processes: 복잡한 비즈니스 프로세스 관리 (선택적)pages: 라우팅 가능한 화면 정의widgets: 재사용 가능한 UI 블록, 독립적features: 사용자 시나리오와 비즈니스 기능을 다룸, 선택적 레이어entities: 도..

Presentation & Container 패턴컴포넌트에서 로직과 프리젠테이션을 분리하여 조금 더 관리하기 쉽고 재사용하기 용이하게 만드는 패턴Presentation  UI에 표시할 요소를 만드는 부분이라고 보면 된다(render). 사용자가 직접 보고 조작하는 컴포넌트.UI가 정의되는 곳이며, 컨테이너에서 props를 통해 데이터를 전달받는다. 주요 기능은 전달받은 데이터를 화면에 렌더링하는 것이며, 이를 위한 스타일 시트를 포함한다.Container컴포넌트의 로직에 관한 대부분의 것들을 다루며 API 호출, state 관리, 데이터 조작, 이벤트 처리 작업 등을 한다.활용Presentation & container 패턴을 적용하지 않은 코드function SearchForm() { // state..

아토믹 디자인 패턴컴포넌트를 원자(Atoms), 분자(Molecules), 유기체(Organisms), 템플릿(Templates), 페이지(Pages)의 레벨로 나누어 관리하는 방법론이다. 컴포넌트를 5개의 레벨에 나누어 잘게 쪼개고 결합함으로써 컴포넌트의 재사용성을 향상시킨다.원자 (Atoms)Atomic Design Pattern에서 가장 작은 컴포넌트 단위 (더 이상 쪼갤 수 없는 최소 단위)대표적인 원자 컴포넌트로는 Label, Text, Input Field, Button, Icon 등이 있다.분자 (Molecules)원자 컴포넌트 다음 단계로 하나의 단위로 동작하는 컴포넌트들의 단순한 그룹.원자가 모여서 만들어지며, 최소 1가지 기능을 수행한다. Input Form, Navigation, Ca..