이번 프로젝트는 거창한 아이디어에서 출발하지 않았다.오히려 아주 현실적인 이유에서 시작했다. React Native를 제대로 익히고 싶었다.문서만 읽는 방식은 금방 한계가 왔다.결국 내 기준에서는, 실제 제품처럼 끝까지 만들어보는 게 가장 빠른 학습 방법이었다.그래서

이제 성능 최적화 할 차례 정글동선 만큼 전체적인 흐름의 최적화도 중요하다.. 지난번에 GPT한테 블로그 보강 ToDo를 정리해달라고 했고, SEO 작업을 먼저 마무리한 뒤 이번엔 성능 개선 단계로 넘어왔다. 이번 목표는 명확했다. 성능 최적화를 통해, 배포된 웹

React와 Next.js로 사이드 프로젝트를 여러 번 만들었다.기능을 구현하고, 페이지를 만들고, 필요한 라이브러리를 붙이는 데에는 이제 어느 정도 익숙해졌다.그런데 익숙하게 쓴다는 것과 정확히 이해하고 있다는 것은 다른 문제였다.예를 들어 state가 왜 이렇게 반

이제 뭐하지? > 사이드 프로젝트 끝났는데 이제 진짜 뭐하지.. 진짜 할게없다.. 사이드프로젝트 블로그를 어느 정도 완성하고 나니까, 새로운 일을 벌리는것보단, 이제는 “여기서 뭘 더 보강하고 싶은데..” 라는 생각이 들었다. 혼자 정해보려다가 반쯤 장난으로 G

들어가며 1편에서 다루고 싶었던 내용을 적다 보니 생각보다 글이 길어져, 이어서 2편을 작성하게 되었다. 이번 편 역시 같은 흐름으로, 블로그를 개발하면서 사용했던 기술과 직접 해결했던 문제들을 중심으로 정리해보려고 한다. 어떻게 이미지를 업로드할 것인가? Clo

들어가기전에 알고리즘 문제를 풀다 보면 처음엔 DP나 이분탐색처럼 “뭔가 거창한 로직”이 필요할 것 같았는데, 의외로 지금 당장 가장 좋은 선택을 하는 것만으로 풀리는 문제들도 꽤 많았다. 이런 유형이 바로 그리디(Greedy) 이다. 처음에는 나도 그리디를 보면

들어가기전에 알고리즘 문제를 풀다 보면 을 사용하는 문제를 정말 자주 접하게 된다. 처음에는 “괄호 검사할 때 쓰는 자료구조” 정도로만 생각했는데, 문제를 많이 풀어보니 스택은 훨씬 더 다양한 방식으로 등장했다. 이번 글에서는 코딩 테스트에서 자주 등장하는 스택 패턴

Umami는 오픈소스로 제공되는 웹 분석(Analytics) 도구다. 웹사이트에 방문자 수, 페이지 조회 수, 유입 경로 같은 기본적인 트래픽 데이터를 수집해서 대시보드 형태로 보여준다.상용 분석 서비스들과 달리 구조가 단순하고 가벼워서, 복잡한 마케팅 분석보다는 “내

자동완성 입력에서 생긴 문제 사이드 프로젝트로 블로그를 만들던중에 태그 자동완성 기능이 있었는데, 태그 자동완성을 붙이다보니 타이핑할 때마다 쿼리가 너무 많이 날라가 문제가 생겼다. 1. 기존 문제 컴포넌트인 TagInput은 컨트롤드 인풋이고, 입력이 바뀔 때마다

최근 Vercel에 배포해 둔 웹사이트를 업데이트하던 중,대시보드에서 다음과 같은 경고 메시지를 확인했다.Error: Vulnerable version of Next.js detected, please update immediatelyLearn More: https&#

알고리즘 문제를 풀다 보면 슬라이딩 윈도우(Sliding Window) 라는 표현을 정말 자주 접하게 된다.특히 연속된 구간을 다루는 문제에서 압도적으로 자주 등장하는 핵심 테크닉이며, 실제 코딩 테스트에서도 빈출되는 알고리즘이다.이번 글에서는 슬라이딩 윈도우의 기본

시작하기까지의 이야기 1. 이유 처음에는 블로그 자체에 큰 관심이 없었고, 회사 일과 사이드 프로젝트를 함께 진행하는 것도 솔직히 꽤 귀찮게 느껴졌다. 그러다 이직 준비를 하면서 여러 채용 공고를 살펴보니, 잘 정리된 기술 블로그가 생각보다 큰 가산점으로 작용한다는 걸

지금까지 여러 사이드 프로젝트를 진행했지만, Jest는 한 번도 제대로 사용해본 적이 없다. 처음에는 Jest 자체를 잘 몰랐고, 또 프로젝트가 어느 정도 완성된 상태에서 테스트 환경을 뒤늦게 도입하기가 너무 번거롭게 느껴졌기 때문이다. 하지만 채용 공고나 다양한 오픈

인트로 전편에선 컨버터를 만들기 위한 세팅작업을 하다가 끝이났다. 크롬익스텐션 환경이 처음이기에 생각보다 오래걸렸고 예상치 못한 문제들이 많았다. 이번글에선 엘리먼트의 css를 테일윈드로 변환하는 과정을 글로 정리하려고 한다 과정 1.

크롬익스텐션 만들어보기(1) 챕터를 시작하기전에 프로젝트를 이미 어느정도 구성해둔 상태였다. 1~2일 마다 진행과정과 어려움을 쓰려고했는데 현생에 치이고 너무 게으른 관계로 게속 미루다 미루다.. 이제서야 내용을 정리하려한다.챕터1에서 작성한 내용처럼 엘리먼트의 css

사이드 프로젝트를 여러 개 진행하다 보니 항상 Tailwind CSS를 사용하게 되었다. 많이 쓰다 보니 손에 익기도 했고 더 잘 활용하고 싶어서 프로젝트마다 도입했는데,문제는 CSS 자체보다 UI 작업이었다. 디자인 지식이 전무하다 보니 다른 사이트 UI를 참고하게

1.서론 React Query와 Next.js를 기반으로 블로그 프로젝트를 진행하며 이제 마무리 단계에 들어섰다. 최근에는 SEO 최적화 과정에서 더 효율적으로 활용할 수 있는 방법을 고민하다가 ISR을 도입하기로 했다. > ISR(Incremental Static

Intro (문제 발생) 사이드 프로젝트 진행하다가 발생한 문제는 아니고 문득 GPT에게 이것저것 질문을 하던중 usememo,usecallback,React.memo를 이용한 렌더링 최적화 주제가 나왔었다 아차 싶었다.. 내가 데이터를 받아서 컴포넌트를 뿌려줄때 해

Intro (문제 발생) 지난번에 이어 사이드 프로젝트를 원활하게 진행하던중 한가지 놓치고 있던 부분이 있었다. 무한 스크롤을 useInfiniteQuery사용해 구현하던중 만약 API로부터 받아올수 없으면 어떻게 해야할까? 라는 점이다.. Outcome (결과