분류 전체보기 (43) 썸네일형 리스트형 [Next] react-query QueryClient 올바르게 관리하기 (w. App Router) React에서는 QueryClient를 싱글톤 패턴으로 관리하는 것이 일반적이지만, Next.js App Router환경에서는 다른 접근이 필요합니다. 이번 글에서는 왜 그런지, 그리고 어떻게 관리해야 하는지 자세히 알아보겠습니다! Next.js 서버의 Stateful 한 특성 이해하기먼저 Next.js 서버 환경의 특성을 이해해야 합니다. Stateless vs Stateful 서버Stateless 환경 (예: AWS Lambda):요청 A 들어옴 → [새 Lambda 인스턴스 생성] → 처리 → 인스턴스 종료요청 B 들어옴 → [새 Lambda 인스턴스 생성] → 처리 → 인스턴스 종료요청 C 들어옴 → [새 Lambda 인스턴스 생성] → 처리 → 인스턴스 종료stateless 한 환경에서는 각 .. AI와 함께 개발하며 성장하는 방법 멘토링을 통해 만난 대학생들의 고민감사한 기회를 얻어서 대학생 대상으로 프론트엔드 멘토링을 몇 차례 진행하며 많은 학생들의 고민을 들을 수 있었습니다. 그 중 가장 많이 듣는 고민은 "AI를 안 쓰자니 뒤처지는 것 같고, AI를 쓰자니 개발 실력이 늘지 않는 것 같다"는 딜레마였습니다. 이 고민을 저 또한 대학생 시절 비슷한 고민을 했기에,, 깊이 공감이 되었습니다. AI 에이전트가 없던 시절에도 했던 고민제가 대학생이던 시절에는 AI 에이전트가 없었고, 그 때는 스택오버플로우가 유일한 구원자였습니다. 버그를 만나면 에러 메시지를 그대로 구글에 검색하고, 스택오버플로우의 코드 블록을 복사해 붙여넣기를 반복했습니다. 어찌저찌 동작하는 코드는 만들었지만 늘 찜찜함이 남았습니다.🤔 "이 코드는 내 코드.. [Next] Next 살펴보기 저는 얼마 전까지 React로만 개발하다가 최근에 이직을 하며 Next를 처음 제대로 사용해 보게 되었어요. Vue를 사용하다가 React로 넘어왔을 때 만큼의 변화는 아니지만, Next가 버전이 올라가면서 큼직한 변화들이 많이 있었고 그 과정에서 버전별 히스토리가 남아있는 것 같더라구요. 특히 Next13 버전을 기점으로 App Router이 도입되면서 패러다임이 크게 변했기 때문에 이를 특히 주의해야 했습니다. 이러한 변화들을 인지하고 있어야 올바른 개발이 가능할 것 같아서 간략하게 Next의 히스토리와 개발할 때 주의해야할 점에 대해 정리해 보았습니다! Next는 왜 만들어졌을까?React만 사용할 때 겪는 몇 가지 문제점을 해결하기 위해 2016년 Vercel(당시 ZEIT)에서 Next를 만들.. 5년차 프론트엔드 개발자, 두 번째 이직 결심 | 즐겁게 일한다는 것 한 달 전, 2년 10개월 동안 다닌 삼쩜삼을 떠났습니다.지금은 다시 새로운 곳에서 열심히 적응하느라 바쁜 날들을 보내고 있지만,문득 삼쩜삼에서의 시간들이 떠올라 회고를 작성하게 되었어요! 왜 나는 그렇게 즐겁게 일할 수 있었을까?삼쩜삼에서의 생활을 돌이켜보니 저는 정말 즐겁게 다녔다는 생각이 들어요. 물론 종합소득세 시즌이 다가올때면 정말 바빠서 지치기도 했지만,그조차도 가끔은 희열(?)을 느끼며 즐겁게 일했던 순간들이 기억나요.이유가 뭘까 생각해보면, 가장 먼저 생각나는 건 단연 좋은 동료들 덕분이었어요. 평소에는 장난도 치고, 술도 마시고, 함께 여행도 다니면서 많이 친밀해졌어요.그렇게 재밌게 놀던 동료와 다음날 회사에서 프로페셔널하게 협업을 하다 보면 묘한(positive) 감정이 들며"아,.. [도서] 나만의 MCP 서버 만들기 with 커서 #협찬 출판사에서 도서를 제공받았습니다. 들어가며최근 여러 기술문서와 각종 서비스에서 MCP(Model Context Protocol)를 제공하기 시작했습니다.프론트엔드 개발자이다 보니 Figma MCP를 활용하여 React 코드를 생성하는 시도를 몇 번 해본 적이 있어요.이를 써보았을 때 "개발하는 방식이 조만간 많이 바뀌겠구나"를 크게 체감했어요. 한번 사용해보긴 했지만, 정작 MCP가 정확히 무엇인지 구체적으로 알지 못한 채로 사용했기 때문에 응용을 하기 어렵더라구요.그래서 MCP의 개념을 알고 활용하는 방법을 배우기 위해 이 책을 읽게 되었습니다. 이 책에서 얻을 수 있는 것들MCP의 핵심 개념과 동작 원리이 책을 통해서 크게 얻어간 것은 MCP가 무엇인지에 대한 탄탄한 기본기입니다.MCP s.. [CSS] transform 속성을 layer와 stacking context 관점에서 알아보기 [CSS] Stacking Context 쌓임 맥락 쉽게 이해하기Stacking Context 이란?HTML에서 가상의 z 축을 기준으로 쌓이는 순서를 형성하는 영역을 의미해요.stacking context를 그대로 번역하면 "쌓임 맥락"이라고 나오는데, 굉장히 낯선 용어처럼 느껴져요.하지devshelly.com 지난 글에서 stacking context가 어떤 의미인지 알아봤어요!특정 element를 다른 element보다 위에 그리고 싶을 때,z-index를 사용하여 화면에 그려지는 순서를 조절할 수 있습니다. 그런데 css 속성 중 `transform`을 사용할 때에도 다른 element보다 위에 그려지게 됩니다.그 이유는 stacking context가 생성되었기 때문이에요.얼핏 보아서는 화면에 .. [CSS] Stacking Context 쌓임 맥락 쉽게 이해하기 Stacking Context 이란?HTML에서 가상의 z 축을 기준으로 쌓이는 순서를 형성하는 영역을 의미해요.stacking context를 그대로 번역하면 "쌓임 맥락"이라고 나오는데, 굉장히 낯선 용어처럼 느껴져요.하지만 css의 속성 중 z-index를 사용해 보신 적 있다면, 이미 stacking context를 활용하고 계신 것입니다! DIV #1 z-index: 4; DIV #2 z-index: 3; DIV #3 z-index: 2; DIV #4 z-index: 1; 위 이미지에서 보이듯, z-index가 클수록 상위에 노출됩니다.DIV#1, DIV#2, DIV#3, DIV#4는 하나의 영역(context)에서 z-index를 기준으로 어떤 순서로 쌓일지(stacking).. [Next14] 검색 기능 만들기 with Supabase 기능 정의검색창에 검색어를 입력하면 `title` 또는 `location`에 검색어가 포함된 데이터를 노출시킨다.뒤로가기를 눌렀을 때, 이전 검색 결과로 이동한다.컴포넌트 구현검색창 코드"뒤로가기를 눌렀을 때, 이전 검색 결과로 이동한다."라는 기능을 구현하기 위해서,검색어를 입력했을 때 히스토리 스택이 추가되어야 합니다.따라서 검색어를 검색하면 url 쿼리를 추가하여 히스토리 스택을 쌓아봅시다. import { Input } from "@nextui-org/input";import { ChangeEvent, useState } from "react";interface SearchInputProps { onSubmit: (value: string) => void;}const SearchInput = .. 이전 1 2 3 4 ··· 6 다음
