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: 특정 비즈니스 로직에 종속되지..

문제상황 현재 프로젝트의 배포 환경은 3가지(dev, staging, production) process.env.NODE_ENV에 따라 해당 환경에 맞는 config값을 사용하고 있음 작업 시 빌드 스크립트에 따라 dev, staging, production으로 띄우면 각각 환경에 맞는 confing 값을 잘 불러옴 그러나 실제 배포된 staging에서 staging.config 값이 아닌 production.config 값을 셋팅함 staging 이라는 환경도 배포가 된 상황에서 아무런 셋팅이 없으면 production 상태이기 때문 ECS에 배포된 staging 애플리케이션의 환경 변수 구성을 어떻게 할 수 있을까? 해결 staging을 띄우는 빌드 스크립트에서 NODE_ENV=staging 값을 주..

현재 프로젝트에 사용 중인 Apollo Server 3에서 4 버전으로 마이그레이션을 진행했다. 마이그레이션 진행 이유 Apollor Server2와 3 버전이 2023년 10월 22일 부로 deprecated 된다는 소식을 접했다. 하지만 마이그레이션을 결심한 결정적 이유는 그것이 아니었다. 언젠가부터 Apollo Server의 sandbox가 보이지 않았고 어느 날 업무가 좀 여유로워서 그 부분을 해결하고자 했다. 그렇게 찾다 보니 Apollo Server3이 deprecated 된다는 것을 알았고 마이그레이션을 진행하기로 했다. 적용방법 현재 apollo-server 패키지를 사용하고 있다면 startStandaloneServer를 함수를 사용해야한다. 현재 apollo-server-express ..

추가하려는 동기 자주 사용하는 Spotify 사이트를 소스보기해서 본 적 있는데 JSON-LD이라는 스크립트가 적용되어 있는 것을 봤고 구조화된 데이터에 대한 방식과 효용에 대해 알아봤습니다. 현재 제가 운영하는 서비스의 상품상세 페이지는 SSR적용으로 SEO 메타 태그 적용이 잘 되고 있는 상태였지만 구조화된 데이터 적용은 적용되지 않은 상태입니다. Spotify 사이트처럼 구조화된 데이터를 적용해서 유저가 웹사이트와 더 많이 상호작용하도록 유도하고 싶어서 적용하고자 합니다. 구조화된 데이터란? 검색엔진이 해석하기 쉽게 웹 문서의 콘텐츠를 조직화하는 것을 말합니다. 왜 페이지에 구조화된 데이터를 추가할까요? 구조화된 데이터는 Google 검색결과에 리치 결과로 표시하도록 하기 위함입니다. 리치 결과란,..

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

이글은 Announcing TypeScript 5.1 Beta 글을 번역, 재정리한 글입니다. 4월 18일 TypeScript 5.1 의 베타 릴리스를 발표했습니다. 아래의 명령어로 베타 사용을 시작할 수 있습니다. $ npm install -D typescript@beta TypeScript 5.1의 새로운 기능 목록 한눈에 보기 Undefined를 리턴하는 함수에 대해 더 쉬운 암시적 리턴 Getter와 Setter에 관련 없는 타입 JSX 요소와 JSX 태그 타입 간 분리된 타입 체크 네임스페이스 JSX 속성 typeRoots는 Module Resolution에서 참조 JSX 태그용 링크된 커서 @param JSDoc 태그에 대한 스니펫 완성 최적화 브레이킹 체인지 1. Undefined를 리턴하는..

작업하던 중 last-child가 제대로 동작하지 않았습니다. 마지막 자식 아래에 다른 요소 태그가 존재하면 last-child를 사용할 수 없기 때문이었습니다. 아래와 같은 코드를 가정해 보겠습니다. 배송기간(물류센터) 배송지역 배송비 접기 아래의 스타일은 동작하지 않습니다. p:last-child { color:red; } 이럴 때 끝에서부터 선택하는 nth-last-of-type(1)나 마지막을 찾아주는 last-of-type()를 사용하면 동작합니다. p:nth-last-of-type(1) { color:red; } p:last-of-type { color:red; } 이것들은 똑같이 동작합니다.

해당 포스트는 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 주소는 우리가 액세스를 요청하는 웹사이트의 서버를 호스팅 하는 컴퓨터에 속합니다. 예를 들..