전체 글

이전에도 언급한 적이 있지만 React Query는 정말 좋은 비동기 처리 라이브러리이다. 하지만 Suspense와의 연동성이 좋지 않아 최근에는 자주 사용하지 않고 있었다. 저번 달에 React Query v5가 출시되었다. 이 버전에는 Suspense와의 연동은 물론이고 Next.js의 Streaming과의 연동성도 매우 좋아졌다. 이번 글에서는 React Query v5의 주요 변경점과 함께 Next.js과는 어떻게 연결 지어야 하는지 다뤄보려고 한다. One Function One Parameter React Query에 있는 모든 Hook, Method들은 이제 하나의 Parameter를 갖게된다. 여러 개의 Parameter를 갖던 경우에는 Object 형태로 받을 수 있게 바뀌었다. 이 부분..

Next.js 13이 나온 지 얼마 되지 않은 것 같은데 Next.js 14가 출시했다. 바뀐 내용은 아래와 같다. 1. Turbopack 2. Server Actions (안정화) 3. 부분 Prerendering Turbopack https://areweturboyet.com/ Are We Turbo Yet? No 91.1% of next dev tests are passing though✅ areweturboyet.com 큰 내용은 없고 Turbopack의 진행상황을 공유해 줬는데, 위 사이트에서 Turbopack의 테스트 코드 통과율을 확인할 수 있는데 현재 대부분의 테스트 코드를 통과한 상태인데 100% 통과하면 안정화 버전으로 이동된다고 한다. Server Actions (안정화) https:..

어쩌다 보니 10월도 끝나가고, 이제 25살까지 60일 조금 넘게 남았다. 10월에 뭘 했지 하고 캘린더와 깃허브를 돌아보고 있는데, 역시 10월에 가장 큰 이벤트는 중간고사였다. 중간고사 암호학, 딥러닝과 같은 과목을 수강하고 있다고 전에 올린 적이 있는데 중간고사에는 이 과목들 시험을 보았다. 처음에는 암호학이 여러 가지 수학적인 부분들도 많이 담겨 있어 어려웠지만, 지금 느끼는 암호학은 현대 알고리즘의 결정체가 아닐까 라는 생각을 하고 있다. 언뜻 보면 보안 쪽 업무를 하는 사람에게만 필요한 전공지식으로 생각될 수 있을 것 같은데, 수업을 듣고 직접 암호학 알고리즘을 구현하다 보면 암호학은 수학을 기초로 한 아름다운 알고리즘과 비트 연산을 기반으로 한 성능 최적화도 함께 배울 수 있는 과목임을 알 ..

개요 Next.js 13의 구조에 대한 좋은 글을 읽어서 이 글을 내 생각과 함께 같이 정리해보려고 한다. 원문의 제목은 'Component Patterns in Next.js 13'인데, 이 글에서는 Next.js 13에 도입된 Server Component를 어떻게 사용하는 게 좋은 지에 대해 다루고 있다 Server Component? https://bysxx.tistory.com/18 먼저 Server Component에 대한 내용은 위 글에서 확인할 수 있는데, 간단히 요약하면 event handler나 hook과 같은 기능이 없는 컴포넌트를 개발할 때 사용할 수 있는 기능으로 번들 사이즈를 크게 줄일 수 있는데 이렇게 되면 UX에서 매우 중요한 요소인 초기 로딩 속도를 줄일 수 있게 된다. N..

9월 13일에 Next.js의 13.5 버전이 출시되었다. 사실 지금 13.5.4까지 나와있고 지금 다루기에는 조금 늦은 감이 있지만, 몇 주정도 토이 프로젝트에 적용해서 써보았는데 실제 체감되는 점도 좋은 정보가 될 수 있을 것 같아 바뀐 점과 함께 적어보려고 한다. 업데이트 방법 버전 업데이트를 위해서는 아래 커맨드를 입력하면 된다. npm i next@latest react@latest react-dom@latest eslint-config-next@latest 개발자 경험 향상 - 로컬 서버를 실행 속도 22% 향상 - HMR 속도 25% 향상 로컬 서버 속도 먼저 Next 13.5.4에서 로컬 서버 실행 속도를 체크해 보면 이 정도로 나오는데, 이전 버전에는 서버 실행 속도가 나오지 않지만 같은..

광안리 바다를 보며 9월을 돌아보고 글을 적어보려고 한다. 이게 얼마 만에 갖는 여유인 지 모르겠다. 개강 9월 초에는 개강을 하여 다양한 수업들과 함께 그렇게 바쁘진 않게 시간을 보내고 있었다. 딥러닝, 시스템 프로그래밍, 암호학 등등 다양한 수업이 있는데 암호학이 정말 어렵다.. 암호학과 딥러닝은 웹 개발자인 내가 쉽게 접하기 어려운 분야였는데 아마 다른 웹 개발자들도 비슷할 것 같다고 생각한다. 그래서 기말고사를 끝내고 나서 웹 개발자에게 도움이 될만한 부분이 있다면 적어보려고 한다. CS 공부를 혼자 하다가 복학을 하고 나서 교수님에게 수업을 들으며 공부를 하면서 느낀 점이 많은데, 그중에 가장 크게 느낀 점은 공부하기에 훨씬 수월하고 체계가 쉽게 잡힌다는 점인 것 같다. 혼자서 전공 지식을 공부..

"만드는 사람이 수고로우면 쓰는 사람이 편하고, 만드는 사람이 편하면 쓰는 사람이 수고롭다." 예전에 배달의 민족에서 이러한 문구가 회사 여기저기 붙여있다는 글을 봤었는데, 그때부터 가장 좋아하는 문구가 되었고 개발을 할 때 가지는 마음가짐이 되었다. 특히 프론트엔드 개발자들은 유저들과 가장 가까운 부분을 개발하게 된다. 그렇기 때문에 프론트엔드 개발자들에게 cs나 프레임워크에 대한 공부만큼이나 UX에 대한 공부도 필요하다고 생각한다. 그래서 오늘은 몇 가지 예시와 함께 UX의 중요성에 대해 적어보려고 한다. 어떤 UX 지식이 유저들의 수고로움을 줄일 수 있을까? 로딩 로딩 시간을 짧게 만드는 것이 가장 좋겠지만, 기술적인 문제로 로딩 시간을 더 줄일 방법이 없을 수도 있다. 이러한 경우 적절한 방법을 ..

어제 양재역 엘타워에서 진행한 MongoDB.local Seoul 2023을 다녀왔다. MongoDB Korea에서 설명해 주는 MongoDB 7.0, 그리고 대기업에서 MongoDB를 어떻게 활용하는지가 궁금해 참석하게 되었다. 필자는 MongoDB에 대한 깊은 이해를 가지고 있지 않다. 다행히 그래도 전반적으로 다 이해할 수 있을 만큼 설명을 잘해주셨다. 입장 8시 반쯤 도착해서 컨퍼런스 시작까지 시간이 남아 몇몇 IT 기업들의 부스를 다니며 굿즈를 받았다. 두 기업 모두 굿즈를 인질 삼아 aws와 구글 클라우드에 대한 설문 조사를 진행했다. aws에서는 장패드, 구글에서는 티셔츠를 주었다. (+ 커피와 쿠키를 주셨는데 커피가 엄청 맛있었음) 발표 시작 먼저 MongoDB의 CPO 분이 나와서 영어로..

아스날이 어제 풀럼과 비겨 매우 기분이 좋지 않은 상태에서 8월 회고를 적어보려고 한다... 백엔드 8월 동안은 프론트엔드보다는 백엔드 코드를 주로 다루고 공부하였다. 백엔드를 공부해 보기를 잘했다고 생각한다. 사실 프론트엔드만 하고 있을 때는 백엔드의 고충을 몰랐다. 협업을 할 때 백엔드에서 딜레이가 생기면 "그냥 리소스만 전달해 주면 되는데 왜 오래 걸리지?"라는 생각을 했던 것 같다. 하지만, 직접 개발을 해보니 성능을 고려하려 하면 다양한 제약이 걸리고, 확장성을 위해 적절한 구현 방향을 선택하는 게 매우 중요하구나라는 점을 느꼈다. 예를 들어 특정 가게에 유저가 리뷰 및 별점을 달 수 있고 별점의 평균을 보여주는 기능을 구현하려고 했는데, 정말 다양한 구현 방향이 있었고 선택하는데 많은 고민을 ..

리액트는 매우 자유로운 라이브러리로 꼽힌다. 그렇기 때문에 리액트가 나온 이후로 다양한 패턴들이 등장하였고 연구되고 있다. 다양한 패턴들이 있지만, 최근 많이 사용하고 있는 패턴인 Compound Components Pattern에 대해 소개해보려고 한다. 예시 import type { ReactNode } from 'react'; import Buttons from './Buttons'; import Comment from './Comment'; import Title from './Title'; interface Props { children: ReactNode; } const Post = ({ children }: Props) => { return {children}; }; Post.Title = ..