본 글은 React Query 공식 문서 중 SSR 페이지를 한글 번역한 것이며, Using Next.js 챕터까지를 다루고 있습니다. React Query는 서버에서 데이터를 prefetch해와 queryClient에 넘겨주는 것에 있어 두 가지 방식을 지원한다. 직접 데이터를 prefetch해와서 initialData로 넘겨주는 것 간단한 케이스를 위한 빠른 설정이 가능하다. 몇 가지 주의 사항이 있다. 서버에서 query를 prefetch하고, 그 cache를 dehydrate해서 클라이언트에 그것을 rehydrate하는 것 약간 더 많은 설정이 필요하다. 💡 dehydrate와 hydrate SSR에서 hydration의 개념을 먼저 살펴보자. 서버 사이드에서 먼저 정적인 페이지(HTML)를 렌..

이 글은 나의 취업 준비 과정에 대한 글이다. 취업 준비를 시작할 때만 해도 나는 꽤 잘났으며 누구보다 빠르게 원하는 회사에 취업할 수 있을 것이라 생각했다. 하지만 원하는 회사로 취업하기까지 1년 반이라는 긴 시간이 걸렸고, 그동안 정말 많은 고민들을 했다. 힘든 시간이었지만 그 고민들로 인해 나는 눈에 띄게 성장하고 달라졌기 때문에 그 과정을 공유하는 것은 아주 의미있는 일이 아닐까 싶다. 이 글은 매우 길다. 따라서 시간을 두고 친구의 옛날 이야기 들어주듯 읽어줬으면 한다. 이 글이 취업 준비 과정에서 어려움을 겪고 있는 모든 분들에게 작은 도움이 되었으면 한다. 😆 나는 전공자(컴퓨터공학과)이며 현재 우아한형제들 선물하기팀에서 웹 프론트엔드 개발을 하고 있다. 취업 전까지의 웹 개발 관련 경험을 ..

validation이나 폼과 관련된 여러가지 기능을 구현하다보면 정규식이 쓰일 때가 정말 많다. 그럴 때마다 구글링으로 내가 원하는 패턴의 정규식을 한 번 찾아보고, 찾은 다음엔 알맞은 정규식인지 확인하기 위해 정규식 레퍼런스를 찾아보고, 그런 다음엔 잘 동작하는지 테스트 코드를 짜보고, 테스트에 통과하지 않는 케이스일 경우 왜 그런지 이해하기 위해 또 찾아보고,,,, 이런 과정을 거친다. 이 과정을 조금 줄여보고자, 그리고 정규식에 더 익숙해지고자 이 글을 쓴다. 그리고 다음부터는 이 글만을 최대한 참고하면서 구현해보려 한다. 가능하려나,,,,? 🤣 정규 표현식(Regular Expression)은 문자열의 패턴을 표현하기 위한 도구이다. 정규 표현식을 사용하면 문자열 안에서 특정 패턴을 가지는 문자열..

본 글은 2020년에 작성된 글입니다. Lint란 실보푸라기를 의미한다. 보푸라기가 많은 옷은 보기 좋지 않고, 오래 입기 힘들 것이다. 하지만 입을 수는 있겠지. 프로그래밍에서도 이런 보푸라기가 있다. 흔히들 '더러운 코드'라고 말한다. 하지만 동작은 하겠지. 당장은 동작하지만 에러투성이로 더러운 코드보다 여러 사람들이 읽기 쉽고, 오래 유지보수할 수 있고, 재사용성이나 확장성이 좋은 코드를 작성하는 것이 더 중요하다. 이 부분을 잡아주기 위해 코드의 오류, 코드 스타일 등을 점검하는 것을 린트(Lint) 또는 린터(Linter)라고 부른다. 이를 사용하면 코드의 가독성을 높이는 것 뿐만 아니라 동적 언어의 특성인 런타임 버그를 예방할 수 있다. 그럼 ESLint는 뭘까? ESLint란 ES(EcmaS..

우리는 Webpack이 왜 필요할까? 본 글은 2020년에 작성된 글입니다. 프론트엔드 개발 중이라면 Webpack이라는 기술에 대해 필수적으로 마주치게 된다. 이번 포스팅은 Webpack이 무엇인지, 왜 필요한지에 대해 찬찬히 알아보려한다. W seogeurim.tistory.com 지난 포스팅에서 Webpack이 무엇이며 왜 쓰는지에 대해 알아보았다. 다시 한 번 그 내용을 정리하자면 다음과 같다. Webpack은 모듈 번들러이다. 프로젝트 규모가 커지고 JavaScript가 발전(모듈 시스템)하면서 요청하는 파일들이 많아졌다. 그 많은 파일들을 모듈 번들러가 합쳐서 요청하는 파일의 수를 줄일 수 있다. 번들(합쳐진 파일)이 너무 커진다면 초기 로딩 속도가 느려지는 문제가 발생할 수 있고, 청크, 캐..