199.91.42.6

이번주에 내가 준비한 아티클은 바로 "FE 개발자가 알아야 할 '캐싱' 개념 정리"이다. 아무래도 프론트엔드 개발을 하다보면 이 '캐싱'이라는 개념을 언젠가 한번쯤은 마주하게 되고,또 나의 고급 프로젝트에서도 이 '캐싱' 개념을 활용하여 페이지의 로딩 속도를 빠르게 향상시킨 경험이 있어서,이 '캐싱'이라는 개념에 대해 관심이 생겨서 더 깊게 알고 싶어 해당 아티클을 선정하게 되었다.  원문 아티클 내용의 핵심을 요약하면서, 프론트엔드 개발자가 알아야 할 웹 캐싱의 여러 종류와 각각의 개념에 대해 살펴보려 한다. 아티클의 주요 내용을 요약하면 다음과 같다:  캐싱의 기본 개념웹사이트 성능을 최적화하기 위해 캐싱은 매우 중요한 개념이다.캐싱은 데이터를 한 번 받아온 후 필요한 경우 빠르게 불러와 사용할 수 ..

최근에 프론트엔드 부트캠프를 수료한 사람들끼리IT/기술 아티클을 소개하는 'Paper Coding'이라는 스터디에 새로 가입했다!유익한 인사이트를 얻을 수 있으리라 기대하며 이 스터디에 들어온 만큼, 앞으로 열심히 해보려한다! 이번주에 내가 준비한 아티클은 바로 "2024 프론트엔드 기술 스택 트렌드 이야기"이다.스터디원들 모두 프론트엔드 개발에 흥미가 있고, 또 프론트엔드 개발 특성상 프론트엔드 기술의 트렌드에 밝으면 경쟁력을 갖출 수 있을 뿐만 아니라, 요즘 프론트엔드 개발의 동향도 잘 파악할 수 있어서 프론트엔드 개발의 미래를 예측하고 또 그 미래를 대비할 수 있기 떄문에 이 아티클을 선정하게 되었다!   원문 아티클의 길이가 꽤나 긴데, 원문 아티클 내용의 핵심을 요약하면서, 프론트엔드 개발자가 ..

~~~ 2주차 주간 회고 및 공부 회고 (TMI 주의) ~~~7월 둘째주는 정말...해야할 것들이 갑자기 쏟아져서 정신이 혼미한(?) 한주였다.🔥💫🫠이력서도 쓰고 수정해야하고 / 타 프로젝트에서 이슈 터진 거 해결하고 / 또다른 스터디도 새로 가입하고 시간 맞추고 / 코테 문제도 매일매일 하루에 하나씩 풀고 / 커리어 멘토링도 듣고 / 외부 강연도 들으러 다녀오고(좋은 기회 주셔서 감사합니다 한빛앤🙇🏻‍♀️!!) 등등등...~~여기에 더해서 혼공네트워크 스터디까지 소화하면서 블로그 관리중..,,!! 써놓고 보니 정말 바빴구만요..~~ 앞서 말했던 것처럼 이번주에는 갑자기 이것저것 해야할 일이 늘어났어서 정신이 없었어서,💦전에 혼공스터디 9기에 참여했을 때만큼 내용은 상세하게 정리를 못했을지라도..

ㅎㅏ...혼공 스터디,,... 넘나 오랜만인 것...⭐(아련사실 재작년에 혼공컴운 스터디(9기)를 얼레벌레 마친 뒤로, 혼공족 스터디와 족장님에게 정이 들어버린 나는...그 다음해에 혼공 SQL과 혼공 자바스크립트 무려 두권을 아주 호기롭게 도전했다가 중간에 지쳐버려서 중도 포기ㅠㅋㅋㅋ를 한 전적이 있어서 그런지...(역시 두권은 안된다^^)그래서 혼공스터디에 아쉬움과 애정과..하여튼 그런 복잡미묘한 감정이 남아있었고... 게다가 혼공 네트워크 신간이 나온 소식을 알자마자 개인적으로 냅다 구입해서 안그래도 쫌쫌따리로 조금씩 공부하고 있었는데...때마침!!!!  혼공 스터디 12기 모집 공고를 보자마자 아주 기가막힌 타이밍이라고 생각되어서 바로 지원을 했다지요~~ 아무래도 네트워크를 다루는 책이다보니 컴퓨..

[ 문제 발생 배경 ]프로젝트에서 글로벌 내비게이션 바(GnB)의 검색 기능을 구현하던 중, 페이지를 이동해도 검색바에 입력된 검색어가 유지되는 문제가 발생했다. 이는 사용자 경험 측면에서 바람직하지 않았기 때문에, 페이지 이동 시 검색어를 초기화하여 사용자에게 일관된 검색 환경을 제공하고자 했다.GnB에서의 검색바 컴포넌트에서는 react-hook-form을 사용하여 폼 상태를 관리하고 있었다. 때문에 GnB의 검색바인 GnbSearch 컴포넌트는 비제어 컴포넌트로 구현되어 있었고, 그래서 페이지 이동 후에도 입력된 검색어가 유지되는 문제가 발생했다.  [ 해결 과정 ] 문제를 해결하기 위해 멘토님께 조언을 구한 결과, 상태 관리 로직을 개선하기로 결정했다. 우선 검색어 상태를 zustand로 관리하여..

최근에 고급 프로젝트를 진행하면서, 백엔드 응답 데이터를 내가 만든 컴포넌트에 맞춰서 변경해야하는 순간이 찾아왔다...!!해당 순간이 찾아온 계기는.,,,.,,.프로젝트의 홈 화면에서 사용자 리뷰어 랭킹을 보여주는 기능을 구현하던 중, 몇 가지 최적화 문제와 코드 중복 문제를 발견하게 되면서부터이다.  [ 문제 발생 배경 ]이 문제는 다음과 같은 배경에서 발생했다.1. 백엔드 응답 데이터 형식과 컴포넌트 데이터 형식의 불일치 :    - 현재 백엔드에서 전달되는 랭킹 데이터는 아래와 같이 특정한 형식으로 제공된다. [ { "id": 120, "nickname": "kuromiiiiiiiiiiiiiiii", "descri..

이번에 우리 프로젝트에서 페이지의 UI 작업을 마치고 이제 본격적으로 API 연동 작업을 시작하기에 앞서,우리 팀은 Tanstack query와 Next.js의 App router를 모두 처음 써보기 때문에 고민의 시간을 가졌다.어떤 고민이었냐면, 바로 Next.js를 Next.js답게 써보고 싶은 마음과 Tanstack query(=리액트 쿼리)를 그냥 Fetch로 사용하는것과 다르게 Tanstack query만의 이점을 살리고 싶었다. Next.js로는 RSC 즉 리액트 서버 컴포넌트를 잘 활용하고 싶었고, Tanstack query로는 캐싱, 무한 스크롤, Optimistic Updates를 잘 사용하고 싶었다. 암튼 요약하자면 우리 프로젝트는 Next.js의 App Router 환경에서, 서버 상..

이번에 하는 고급 프로젝트에서 상태 관리를 Zustand를 이용해서 하기로 했어서, Zustand가 어떤 넘인지 감을 잡기 위해 간단히 글을 써본다. Zustand는 React 상태 관리를 위한 경량 라이브러리로, 사용하기 쉽고 빠르며, 최소한의 보일러플레이트로 설계되었다. Redux와 같은 상태 관리 라이브러리에 비해 간단하면서도 강력한 기능을 제공한다! 이제 Zustand의 주요 개념과 사용 방법을 살펴보려한다. Zustand의 주요 개념 스토어(store): Zustand의 핵심은 스토어다. 스토어는 전역 상태를 보관하고 관리한다. 모든 상태와 액션은 스토어를 통해 이루어진다.미들웨어(Middleware): 미들웨어를 통해 상태 변경을 가로채고 추가 로직을 삽입할 수 있다. 예를 들어, 로깅이나 상..

최근에 참여하고 있는 코드잇 스프린트 부트캠프에서 고급 프로젝트가 시작되었다!아무래도 그동안 진행했던 약 2주간의 짧은 기초 프로젝트나 중급 프로젝트보다약 2.5배 정도 긴 5~6주의 프로젝트 기간이 주어져서, 우리팀은 그동안 써보고 싶었던 기술 스택을 마음껏 써보기로 하였다! 예를 들면 Next.js의 app router나, React Query, Zustand, StoryBook, yarn, Suspense, react-hook-form, Tailwindcss, 등등...그 중에서 이번 글에서는 React Query의 Suspense와 Error Boundary를 사용하는 것과, 이를 Next.js의 App router에 적용하는 것에 대해 알아보려 한다.   React Query에서 suspense..

때는 4학년 막학기 종강이 다가오던... 취준을 조금 찍먹하면서 장렬한 서탈과 면탈을 마주한 차디찬 작년 12월 연말......내가 원하는 직무인 프론트엔드 개발에 대한 기술도 못 다룬 채로, 이대로 졸업할 수 없었던 나는!!!!!!!!!!마지막 기말시험을 준비하면서 부랴부랴 여러 국비 교육과 부트캠프를 알아보다가,ㅋㄷㅇ 프론트엔드 부트캠프가 제일 커리큘럼이 트렌디하고 최신 기술 스택들이 많다고 개인적으로 느꼈어서, '옳다구나 여기구나 내 6개월을 불태울 곳~^^'하고 ㅋㄷㅇ FE 부트캠프에 지원하고 영혼을 갈아서 서류와 면접에 임한 결과 4기로 합격하게 되었따...~ (feat. 졸업유예^^) 교수님께서 말씀하셨었지 합격은 곧 새로운 시작이라고,,~~아무래도 6개월 동안 프론트엔드와 개발에 관한 전반적..