개발 (28) 썸네일형 리스트형 [바이브코딩을 위한 개발 용어] (1) Git, Commit, Push, Pull 이런 경험, 있으신가요?기획서나 제안서를 여러 번 고치다 보면, 어느 순간 파일이 이렇게 쌓여 있죠. 제안서_최종제안서_최종_v2제안서_진짜진짜최종분명 전부 내가 만든 파일인데, 막상 열어 보려고 하면 "어? 진짜 최신이 뭐였더라?" 하고 멈칫하게 돼요. 또, 여러 명이서 일할 때 내가 한참 공들여 작업한 문서를 수정했는데, 다른 사람이 동시에 수정하는 바람에 내 수정사항이 통째로 날라가기도 합니다. 🫠 이건 비개발 직군만 겪는 일이 아니에요. 개발도 결국엔 '코드'가 적힌 문서 파일을 함께 작성해 나가는 일입니다. 그래서 개발할 때에도 똑같은 문제를 겪어요. 예를 들어 개발자 A가 새 기능을 만들어서 코드 파일을 B에게 넘기면 B는 그 파일을 받아서 버그를 고칩니다. 이렇게 주고받다 보면 결국 누가 .. GPT가 엉뚱한 답변을 만드는 이유와 해결 방법 [#2 언제나 어디에나 뉴비는 있다] 지난 글에서는 LLM이 무엇인지,그리고 ChatGPT가 어떻게 우리의 말을 이해하는지 알아봤습니다. GPT가 제 말을 어떻게 이해하나요? - [#1 언제나 어디에나 뉴비는 있다]요즘 회사에서 Claude, Chat GPT 같은 AI 많이 쓰잖아요.근데 쓰다 보면 한 번쯤 이런 생각 들지 않나요? “이거 어떻게 알아서 해주는 거지?”“얘가 진짜 내 말을 이해하는 건가?” 얼핏 보면 무슨devshelly.com LLM 발전하고 있다고는 하는데 여전히 엉뚱해요.요즘 ChatGPT나 Claude를 보면, 매주 새로운 모델이 나올 정도로굉장히 빠른 속도로 발전하고 있어요.🥵 그럼에도 불구하고,엉뚱한 답변을 하거나 같은 질문인데도 답이 달라지거나심지어 틀린 정보를 말하기도 합니다. 그 이유는 지난 글에서 살펴보.. GPT가 제 말을 어떻게 이해하나요? - [#1 언제나 어디에나 뉴비는 있다] 요즘 회사에서 Claude, Chat GPT 같은 AI 많이 쓰잖아요.근데 쓰다 보면 한 번쯤 이런 생각 들지 않나요? “이거 어떻게 알아서 해주는 거지?”“얘가 진짜 내 말을 이해하는 건가?” 얼핏 보면 무슨 마법처럼 느껴지는데,이 과정을 조금만 뜯어보면 생각보다 단순합니다! 이제는 AI 시대..?AI, 인공지능, 이 단어는 다들 익숙하시죠?AI는 과학자들이 사람처럼 생각하는 기계를 만들기 위해 정말 오래전부터 연구해 온 분야입니다. 그 중에서 대표적으로 아래와 같은 기술이 있어요- 로보틱스 : 사람처럼 움직이는 기술 (= 육체🏋️)- TTS : 사람처럼 음성을 만들어내는 기술 (= 목소리🗣️)- OCR : 사람처럼 형상을 인식하는 기술 (= 눈👀)- LLM : 사람처럼 말을 이해하고 문장을 생성.. [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 한 환경에서는 각 .. [Next] Next 살펴보기 저는 얼마 전까지 React로만 개발하다가 최근에 이직을 하며 Next를 처음 제대로 사용해 보게 되었어요. Vue를 사용하다가 React로 넘어왔을 때 만큼의 변화는 아니지만, Next가 버전이 올라가면서 큼직한 변화들이 많이 있었고 그 과정에서 버전별 히스토리가 남아있는 것 같더라구요. 특히 Next13 버전을 기점으로 App Router이 도입되면서 패러다임이 크게 변했기 때문에 이를 특히 주의해야 했습니다. 이러한 변화들을 인지하고 있어야 올바른 개발이 가능할 것 같아서 간략하게 Next의 히스토리와 개발할 때 주의해야할 점에 대해 정리해 보았습니다! Next는 왜 만들어졌을까?React만 사용할 때 겪는 몇 가지 문제점을 해결하기 위해 2016년 Vercel(당시 ZEIT)에서 Next를 만들.. [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 다음
