minguri brain is busy

Feature-Sliced Design이란? 우선 FSD의 레이어(layer), 슬라이스(slice), 세그먼트(segment)의 세 개념을 살펴봐야한다. Layers app: 로직 초기화. provider, router, 전역 스타일, 전역 타입 선언등이 여기에서 정의됨. processes(optional): 여러 페이지에 걸쳐 있는 프로세스를 처리한다.(deprecated됨) pages: 애플리케이션의 페이지 포함 widgets: 페이지에 사용되는 독립적인 UI 컴포넌트 features(optional): 비즈니스 가치를 전달하는 사용자 시나리오와 기능을 다룸 entities(optional): 비즈니스 엔티티를 나타낸다. 사용자, 리뷰, 댓글등이 포함됨. shared: 특정 비즈니스 로직에 종속되지..

npm // npm 모듈 버전 확인 npm show [모듈명] version // npm 모듈 개별 업데이트 npm update [모듈명] // 설치된 모듈 한번에 업데이트 npm install -g npm-check-updates yarn // yarn 모듈 개별 업데이트 yarn upgrade [모듈명] // 설치된 모듈 한번에 업데이트 yarn upgrade

해당 포스트는 What happens when you type a URL in the browser and press enter? 글을 참고하여 번역, 정리한 글입니다. maps.google.com에 액세스 한다고 가정하고 그 과정을 살펴봅시다. 1. 브라우저 주소 표시줄에 maps.google.com을 입력합니다. 2. 브라우저는 DNS 레코드의 캐시를 확인하여 maps.google.com의 해당 IP 주소를 찾습니다.DNS(Domain Name System)는 웹 사이트의 이름(URL)과 연결된 특정 IP 주소를 유지 관리하는 데이터베이스입니다. 인터넷의 모든 URL은 고유한 IP 주소가 할당되어있습니다. IP 주소는 우리가 액세스를 요청하는 웹사이트의 서버를 호스팅 하는 컴퓨터에 속합니다. 예를 들..

매번 nvm use 를 사용해주는게 상당히 귀찮아서 찾게된 스크립트이다. zsh에 넣어 .nvmrc 파일이 포함된 디렉토리에 들어갈 때마다 nvm use를 자동으로 호출하도록 한다. $ vim ~/.zshrc 아래 스크립트 입력 # place this after nvm initialization! autoload -U add-zsh-hook load-nvmrc() { local node_version="$(nvm version)" local nvmrc_path="$(nvm_find_nvmrc)" if [ -n "$nvmrc_path" ]; then local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")") if [ "$nvmrc_node_versi..

이 글에서는 Cam Jackson의 Micro Frontends 번역 글을 보고 내가 쉽게 보려고 요점만 정리해봤다. 스타일링 CSS는 모듈시스템, 네임스페이스 또는 캡슐화가 없는 본질적으로 전역적이고 상속되며 계단식이다. 예시: 두개의 마이크로 프론트엔드 앱에 스타일시트에 각 h2 { color: black; }, h2 { color: blue; }가 있다면 충돌 그래서 지금까지 개발된 CSS를 보다 쉽게 관리할 수 있는 접근법 BEM: 엄격한 명명 규칙 사용 SASS: 셀렉터를 감싸(nesting) 네임스페이스 같은 형태로 사용 CSS 모듈: 모든 스타일을 프로그래밍 방식으로 적용 CSS-in-JS 라이브러리: 모든 스타일을 프로그래밍 방식으로 적용 shadow DOM: 좀더 플랫폼기반 접근 방식 서..

이 글에서는 Cam Jackson의 Micro Frontends 번역 글을 보고 내가 쉽게 보려고 요점만 정리해봤다. 통합 접근 방식 느슨한 정의를 감안할 때 마이크로 프론트엔드라고 부를 수 있는 많은 접근 방식이 있다. 일반적으로 애플리케이션의 각 페이지에 대한 마이크로 프론트엔드가 있고 컨테이너 애플리케이션이 있다. 렌더링 구성 헤더나 푸터 같은 일반적인 페이지 요소 렌더링한다. 인증이나 네비게이션같은 교차적 문제를 해결한다. 여러 마이크로 프론트엔드를 페이지로 가져오고 각 마이크로 프론트엔드에게 언제 어디서 렌더링 할지 알려준다. 방법 1. 서버사이드 템플릿 구성 방식 여러 템플릿 또는 프래그먼트에서 서버의 HTML을 렌더링 한다. 페이지의 공통 요소를 포함하고 있는 index.html이 있고, 서..

이 글에서는 Cam Jackson의 Micro Frontends 번역 글을 보고 내가 쉽게 보려고 요점만 정리해봤다. Micro Frontends의 정의 프론트엔드의 단일 구조를 개별적으로 개발, 테스트 및 배포 할 수 있는 작고 간단한 덩어리로 분해하는 패턴이 나타나고 있으며 이것은 고객에게 단일 응집력있는 제품으로 나타납니다. 우리는 이 기법을 Micro-Frontends 라고 부르며 , 다음과 같이 정의합니다. 독립적으로 제공 가능한 프론트엔드 애플리케이션들로 더 큰 하나의 전체 어플리케이션을 구성하는 아키텍처 스타일 장점 더 작고, 응집력 있고 유지보수가 쉬운 코드 베이스 이전보다 더 많은 분할, 증가 방식으로 일부씩 나누어 업그레이드, 업데이트 또는 재작성 할 수 있음 단점 dependeny의 ..