전체보기

[TanStack Query] v5 주요 변경 사항

얼마전, TanStack Query의 버전5가 정식 릴리즈 되었다. 주요 변경 사항에는 어떠한 것들이 있었는지 한번 알아보자. 참고로 이제 v5의 Typescript 최소 요구 버전은 4.7 / React의 최소 버전은 18.0 이다. 주요변경 단일 signature, 단일 객체 지원 useQuery와 몇 가지 함수들은 호출하는데 첫 번째 혹은, 두 번째 매개변수 등을 확인해야 하고 일관성이 없어 관리하기가 어려웠다. 이제는 객체 형식만 지원하도록 변경되었다. - useQuery(key, fn, options) + useQuery({ queryKey, queryFn, ...options }) - useInfiniteQuery(key, fn, options) + useInfiniteQuery({ query..

구조조정 당하고 3개월간 이직 준비한 썰

올해 2월 경 재직중이였던 회사에서 구조조정으로 인해 권고사직을 당했었다. 이로 인해 반강제적(?)으로 갑자기 취준생 신분이 되어 급하게 이직 준비를 했고, 결과적으로 정말 목표로 하던 회사에 이직을 성공하여 3개월동안 4년차 프론트엔드 개발자가 위기를 기회로 어떻게 만들었는지 썰을 풀어보고자 한다. 권고사직 지금도 그렇지만, 당시에도 여러 스타트업에서 경기침체와 투자 위축으로 구조조정 소식이 들리곤 했다. 유튜브에서는 "권고사직 당한 썰" 이라며 올라오는 vlog 가 유명세를 타고 울며 영상을 찍는 당사자들을 보며 설마 나에게도 저런일이 생길까 생각했었는데 나에게도 생겼다. 그런데 뭐 회사가 사정이 어려워지면 그럴수도 있다고 생각하긴 하는데... 좀 아쉬웠던건 사전에 낌새도 없이 당일 1시 통보, 5시..

나는 웹 성능 지표를 잘 알고 있었나?

요즘 Next.js 의 사용으로 렌더링 방식에 따른 FCP, LCP 등에 영향을 어떻게 미치는지와 웹 성능과 관련된 개념들을 더 깊게 알 필요가 생긴 것 같다. 때문에 웹 성능 최적화 지표에 대한 개념을 다시 정리해보고자 이렇게 글로 작성한다. FCP - First Contentful Paint FCP 매트릭은 First Contentful Paint의 약자로 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간을 측정한다. 이 메트릭에서 콘텐츠란 텍스트, 이미지(배경 이미지 포함), 요소 및 svg 요소를 뜻한다. 참고: https://w3c.github.io/paint-timing/#first-contentful-paint 위의 사진을 보면 두 번째 화면에서 최초 텍..

그래서 모노레포가 뭐지? (feat. yarn workspace)

요즘 Monorepo를 검색 해보면 여기저기서 도입해본 경험에 대한 관련 글들이 많이 나온다. 필자도 현재 회사에서 Yarn workspace, Yarn Berry를 활용한 모노레포를 사용해본 경험이 있는데 그 경험과 함께 모노레포 관련 개념들을 함께 설명해보려 글을 작성한다. 모노레포 소개 모노레포(Monorepo)란 여러 개의 프로젝트나 패키지를 하나의 저장소에서 관리하는 방식을 의미한다. 이 방식은 저장소를 공유함으로써 프로젝트 간의 협업, 의존성 관리, 코드 재사용 등을 쉽게 할 수 있는 장점이 있다. 모노레포 구조가 아니라면, 아마 대부분의 기업들은 우리가 늘상 써오던 멀티레포(폴리레포) 방식을 사용할 것 이다. 멀티레포(폴리레포) 멀티레포 구조는 폴리레포 구조라고도 불린다. 멀티레포 방식은 각..

모듈 시스템의 역사와 모듈 번들러 알아보기

Javascript 개발을 하면서 번들러는 빼놓을 수 없는 도구 중 하나이다. 현재 가장 많이 쓰고있는 Webpack부터 Rollup, Parcel, 그리고 최근 급부상중인 Vite, webpack보다 10배(?) 빠르다는 Turbopack까지 현재 다양한 도구들이 사용되고 있다. 나 또한 저 도구들 중 써본것도 있고, 안써본것이 더 많은데 이 글을 통해 먼저 모듈시스템, 모듈 번들러가 등장하게 된 배경, Webpack에 대해 조사한 장단점에 대해 정리해보려고 한다. 먼저 들어가기에 앞서, 이러한 Bundling tool 들이 왜 필요하게 되었는지 Javascript 모듈 시스템에 대한 배경지식을 쌓고 넘어가면 좋을 것 같다. 과거에는 스크립트를 직접 HTML 파일에 삽입하는 방식으로 개발했다. 이러한 ..

CSS 스펙 탐구하기

이 글은 사내 기술 블로그에 기고했던 https://tech.streami.co/state-of-css-by-deobi/ 글을 옮겨와 그대로 작성했습니다. 안녕하세요, 저는 스트리미 FE팀에서 이용자가 마주하는 고팍스의 인터페이스를 개발하는 프론트엔드 엔지니어 더비입니다. 이번 포스팅에서는 제가 지난 4분기 FE팀 기술 세미나에서 State of CSS라는 제목으로 발표했던 세션에 대해 소개할까 합니다. 세션 소개 세션 목차 1. 들어가며-이 주제를 선택한 이유는? 2. Subgrid 3. Writing Modes 4. CSS Logical Properties 5. Viewport-Percentage Length Units 6. blend-mode 7. Filters & Effects 8. backdro..

글또를 시작하게 되면서💪📖

1. 글또 지원 이번에 글또 8기에 지원하여 운 좋게 참여하게 되었다. 글또는 "글쓰는 또라이"의 줄임말로 6개월간 2주에 한번씩 블로그에 글을 쓰고 싶은 주제를 선정하고, 관련해서 정리하여 올려야 한다. 이 글은 그 첫번째 글로써 앞으로 어떻게 글또를 참여할 것인가 다짐하는 글이다. 글또는 아래와 같은 비전을 갖고 다양한 직군의 개발자들이 모여 글을 쓰는 방법을 배우고 서로 인사이트를 나누며 함께 성장할 수 있는 커뮤니티이기도 하다. 글을 작성하는 개발 직군분들이 모여서, 좋은 영향을 주고 서로 같이 자랄 수 있는 커뮤니티 개발자들의 성장을 지원하는 커뮤니티 각자의 직군에서 얻을 수 있는 내용을 토대로 글쓰기 진행 부가적으로 삶의 철학, 여러 고민을 나누는 커뮤니티 나는 현재 굿닥 개발자이신 오원종 님..

회고라는 걸 처음 써보는 2022년 회고✏️

3년 차 프론트엔드 개발자로 접어드는 올해가 되어서야 회고라는 것을 처음 써본다. 요즘은 개인 블로그에 각자가 배운 것, 경험한 것, 느낀 것들을 정리하며 1년을 되돌아보는 시간을 갖은, 회고 글을 많이들 쓰시는 모습을 봤다. 1년을 되돌아보며 잘한 것은 칭찬하고, 못한 것은 문제점을 파악하며 더 나은 2023년을 만들 수 있도록 의미 있는 회고가 되기를 바라며 첫 회고글을 작성해 본다. 회사🌆 1. NFT 마켓 프로젝트 React, NextJS, Typescript, MUI, emotion-css를 사용하여 개발한 2022년 초반의 프로젝트이다. 드디어 실무에서 사용해보고 싶었던 NextJS를 사용할 수 있는 프로젝트여서 가슴이 뛰고 정말 재밌었던 프로젝트였다. 물론 일정이 빠듯해 야근을 매일 하다가 ..