minguri brain is busy

문제상황 현재 프로젝트의 배포 환경은 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 검색결과에 리치 결과로 표시하도록 하기 위함입니다. 리치 결과란,..

이글은 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; } 이것들은 똑같이 동작합니다.

cookie에 set을 할 때 로컬에서는 잘 읽었는데, 운영에서 값이 안가져와지는 현상이 있었다. sameSite 옵션 설정으로 다른 도메인으로 전달 가능하게 해봤으나 되지 않았다. Cookies.set('key', value, { sameSite: 'None' }); 결론 부터 이야기하자면, 현재 내가 운영중인 서비스는 마이크로 아키텍쳐 서비스로 각 모듈별로 서브도메인이 다른 도메인 네임을 갖고있다. ex) home.myservice.com, store.myservice.com.. 로컬에서는 localhost 라는 같은 도메인을 가졌기때문에 모듈간 이동 시에도 쿠키값이 전달이 되었던 것이고 운영에서는 서브도메인이 달라지며 전달이 되지 않았던 것이다. sameSite와 secure 옵션을 설정하고, 운영..

window.addEventListener(event, callback, true); 뒤에 true 인자 넣어주면 간단하게 해결된다.

무한 스크롤 리스트에는 뒤로가기를 갔다가 보던 위치를 기억해주는 기능은 UX적으로 필수적이다. 다른 페이지에 갔다가 뒤로가기로 페이지에 돌아올 경우, 더보기로 새로 로드된 데이터는 초기화되고 없으므로 실제로 보던 위치로 돌아가지 못하는 문제가 있다. sessionStorage를 사용해서 해결한 방법을 적고자한다. 우선 리스트에서 상품을 클릭할때 sessionStorage에 현재 스크롤 위치와 로드한 데이터를 저장한다. // ProductItem.tsx const handleProductClick = async () => { await setScrollDataInStorage(); handleChangeLocation(`${publicRuntimeConfig.config.productHost}/produc..