분류 전체보기 (41) 썸네일형 리스트형 [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 = .. 대학교 학생회 활동이 스펙에 도움이 될까? | 전 부총학생회장, 현 개발자 학생회 활동을 시작하게 된 이유어릴 때부터 사람들에게 관심받는 것,함께 어울리며 소속감을 느끼는 것을 좋아했어요. 그래서인지 중고등학생 때부터 자연스럽게 학급임원이나 학생회 활동에 참여했습니다.대학교에 들어가서도 흐름이 이어져서2학년 때는 과학생회의 집부로 활동을 시작하게 됐어요. 고등학교 때와 비교했을 때,대학교 학생회는 훨씬 큰 규모의 다양한 행사를 기획하고 준비하더라구요. 과정이 쉽진 않았지만,친구들과 열심히 준비한 행사를 성공적으로 마무리했을 때의 뿌듯함이 너무나 좋았습니다. 학생회 활동으로부터 얻은 성취감이 제게 많은 긍정적인 에너지를 주었고,그 에너지가 활동을 더 열심히 하게 만드는 원동력이 되었습니다.꾸준히 활동을 열심히 하다 보니, 감사하게도 4학년땐 부총학생회장을 맡게 되었습니다.저도 .. FECONF2024 후기 | 컨퍼런스를 오프라인으로 참석해야하는 이유 첫 FECONF 방문FECONF는 2017년부터 매년 열리는 프론트앤드 기술 컨퍼런스입니다.작년에 티켓팅을 시도했는데 정말 몇 초만에 티켓이 매진될 정도로 인기가 많더라구요.역시 올해에도 클릭 한번 잘못하면 티켓을 구매할 수 없게 될 정도로 빠르게 매진되었습니다. FECONF 말고도 대부분의 컨퍼런스는 세션 내용이 유튜브 영상으로 올라와서"굳이 오프라인으로 가야 하나?🤔"라는 생각이 있었어요. 그런데 티켓은 빠르게 매진되니까왜 사람들은 오프라인으로 참석하는지 궁금증도 있었습니다. 올해는 마침 모교에서 컨퍼런스가 열리기도 하고 친한 동생이 티켓을 양도해 준다고 하더라고요.(티켓팅은 실패했습니다...) 그래서 이번 기회에 오프라인 컨퍼런스는 뭐가 다른지 알아보자는 마음으로FECONF2024에 방문했습니다.. 이전 1 2 3 4 ··· 6 다음
