분류 전체보기

웹 성능이 중요한 이유웹 성능은 브라우저 주소창에 도메인을 입력하고, 실제로 해당 사이트가 로딩되어 내용을 볼 수 있을 때까지의 시간. 즉 웹 로딩 시간을 의미한다.따라서, 웹 성능이 좋다는 것은 웹 로딩 시간이 짧아 빠르게 콘텐츠를 볼 수 있다는 것을 의미하고, 성능이 좋지 않다면 사용자가 만족할 수 없어 기다리지 않고 이탈할 수 있는 원인이 된다. 실제로 월마트 웹사이트에서 조사한 결과, 평균 로딩 시간을 1초 줄이면 구매율이 약 2% 증가한다는 통계가 있다. 로딩이 0-2초 내에 완료되었을 때 구매율이 가장 높았고, 그 이후부터 점점 떨어지게 되었다.직접적으로 물건을 판매하는 웹 서비스가 아니더라도, 기업 이미지에 부정적 영향을 줄 수 있고 선입견을 갖게할 수 있다. 그렇다면, 사용자들이 이탈하지 ..

2024 회고벌써 글또 5회차 제출이 되었고, 첫 글 제출 10월 8일에서 2달하고도 2주가 지났습니다.거의 글또 시작과 함께 퇴사를 하고 여러 가지 활동(면접보러다기니, 재직자 커피챗, 알고리즘 풀기, 혼자 사이드 프로젝트하기, 취미 피아노, 운동 등)을 하며 이런 저런 일들이 있었는데요,돌아보니 꽤 재밌는 일들도 많아 몇 가지를 정리해보려고 합니다. 내향인의 커피챗, 경력 면접에서 느낀 점퇴사 쯔음엔 기력이 쇠하여.. 회사와 동시에 면접보러다닐 엄두를 못냈었는데,퇴사하고서는 좀 쉬고난 뒤에 본격적으로 이력서도 고쳐가며 몇 군데 회사에 지원하여 면접 기회를 얻을 수 있었습니다.프로덕트와 동료, 조직 문화를 먼저 알아가면 좋지않을까 해서, 입사 전에 이런 점들을 알아보기 위해 일부 전형에 합격한 곳의 재..

TypeScript, Nestjs, typeorm, postgres, swagger, aws 2024.11.26JWT 토큰을 발급했는데 인증이 안됨. 401 에러- 토큰 발급시간을 환경변수에서 가져올때 parseInt()로 가져와서 `1h`이 `1`로 적용되고있었음. 1초짜리 토큰을 발급한 사람이 있다..? GET /me API만들었는데 `ERROR [ExceptionsHandler] invalid input syntax for type integer: "me"`- QueryFailedError: invalid input syntax for type integer: "me"- 같은 도메인에서 `/:id` 처럼 인티저를 받는 라우터가 /me보다 상위에 있을 때 발생. 해당 파일에서 라우트 순서가 /me가 ..

이거 누가설치했어..?JS로 개발을 할 때, 여러 패키지들을 사용해서 개발하게 됩니다. 이때 패키지들을 다운로드하고, 버전을 관리하고, 수많은 패키지들의 복잡한 의존성을 편리하게 관리하기 위해 패키지 매니저를 사용하게 됩니다.기능 개발에 초점을 맞추어 구성하고만 넘어갔던 패키지 매니징에 대해 알아보게 되는 계기가 생겼습니다.잘 사용하던 라이브러리가 알고보니 package.json에 없었고, 설치한적이 없는 라이브러리였던 것이었습니다.이 이슈는 사용중이던 Storybook을 v8로 업데이트하면서 yarn v1에서 최신 버전으로 업데이트를 권장했기 때문에, yarn classic(v1)에서 yarn berry로 업그레이드하면서 발생하였습니다.yarn의 문제점 중 하나이던 유령 의존성에 의해 설치되었던 라이브..

Vanilla-extract만든 design system의 번들 사이즈가 너무 커요!CSS-in-TS 와 zero-runtime css 컨셉을 채택한 vanilla-extract css(이하 VE로 줄임!)로 NPM 라이브러리를 만들어 배포하였다. 사내 디자인 시스템을 만든 작업이었다. VE는 제로 런타임을 위해서 빌드 타임에 코드로 정의한 css와 타입정의를 뽑아주게 된다. 이 css와 타입을 라이브러리에 같이 shipping하도록 제작했다. 처음 라이브러리를 만들때에는 없는것보단 낫겠지 하는 심정으로 이것저것 필요해보이는 디자인 토큰과 기능들을 넣었다. 하지만 결론적으로 이런 접근 방식으로 큰 코를 다치게 되는데... 설정 살펴보기어느날 빌드를 하다가 바벨의 불평을 마주치게 되었다.\[BABEL\] ..

Next.js publicRuntimeConfig 사용 배경내가 진행한 프로젝트는 Docker를 사용해 배포하는 Next.js 기반의 어플리케이션이다. 도커 이미지를 빌드하는 시점에 알 수 없는 몇 가지 환경 변수들을 런타임에 주입해야하는 요구사항이 있었다.온프레미스 환경에 설치되어야하는 프로젝트 특성 상,개발하는 시점에는 알 수 없고 설치하는 시점에 결정하게되는 서비스의 설정들과 API 엔드포인트에 사용되는 IP 주소와 같은 변수들을 도커 컴포즈의 환경변수로 작성하여 관리되고 있다.도커 컴포즈의 환경 변수 중 프론트엔드 도커 이미지에 필요한 변수들을 컨테이너 실행 시점에 주입하여 주는 방식으로 서비스를 설계했다.즉, 한번의 이미지 빌드로 여러 환경에서 실행할 컨테이너를 생성하는 방식이다. 기존에 Nex..