[Engineering] Vibe Coding: AI와 함께 프로덕션 레벨의 코드를 배포하는 실전 방법론 Andrej Karpathy가 처음 언급했을 때만 해도 'Vibe Coding(바이브 코딩)'은 그저 밈(Meme)처럼 보였습니다. "그냥 AI한테 맡기고 즐긴다"는 개념은 개발자들의 판타지처럼 들렸으니까요. 하지만 Claude Sonnet 3.7과 같은 모델이 등장하며 이것은 현실이 되었습니다.Julep 엔지니어링 팀은 실제로 Claude를 활용해 매일 프로덕션 코드를 배포하고 있습니다. 우리는 이 과정에서 "제대로 된 가이드레일 없이는 AI 코딩이 '열정만 넘치는 인턴과의 두더지 잡기 게임'이 된다"는 사실을 깨달았습니다.본 포스팅에서는 단순한 생산성 향상을 넘어, 팀 전체의 엔지니어링 퀄리티를 ..

정렬 개념 1) 버블 정렬두개씩 비교하여 큰값을 뒤로 '밀어내어' 오름차순으로 정렬 (맨뒤부터 큰 수가 확정)항목설명시간복잡도O(n²)공간복잡도O(1)장점구현이 가장 단순함단점느림 (이미 정렬된 배열에도 비교 계속함)안정성✅ 안정 정렬 (Stable Sort) function bubbleSort (arr) { for(let i=0; i arr[j+1]) { [arr[j], arr[j+1]] = [arr[j+1], arr[j]]; } } }}console.log(bubbleSort([5,3,8,4,2])); 2) 선택 정렬가장 작은 값을 찾아서 앞으로 옮기는 정렬 (맨앞부터 작은값이 확정) function selectionSort (ar..

스택 / 큐 개념🔹 Stack (스택)LIFO (Last In, First Out) — 마지막에 들어온 게 먼저 나간다 사용 예시브라우저 뒤로가기 / 앞으로가기함수 호출(콜 스택)괄호 짝 검사되돌리기(Undo) 기능 예제 코드const stack = [];stack.push(1);stack.push(2);stack.push(3);console.log(stack.pop()); // 3 ex. 괄호 짝 검사const isValid = (s) => { const stack = []; for (let x of s) { if (x === '(') stack.push(x); else { if (!stack.length) return 'NO'; stack.pop(); } }..

자바스크립트 Map과 Hash 개념 1. Map이란?Map은 키-값(key-value) 쌍을 저장하는 자료구조입니다.Object와 비슷하지만 다음과 같은 차이가 있습니다. 키 타입 제한 없음: 문자열, 숫자, 불리언, 객체, 함수, NaN 등 모두 가능합니다.삽입 순서 보장: 반복문(for...of, forEach) 사용 시 입력한 순서대로 순회합니다.성능 최적화: 대량 삽입/삭제 시 안정적인 O(1) 접근 성능을 제공합니다.편리한 메서드 제공: .set(), .get(), .has(), .delete(), .clear() 등의 메서드를 지원합니다. 2. 내부 구조 — 해시 테이블(Hash Table)Map은 내부적으로 해시 테이블을 사용하여 동작합니다.키를 해시 함수에 넣어 해시값을 계산합니다.해시값..

투 포인터 / 슬라이딩 윈도우 개념 및 비교 2️⃣ Two pointer✅ 투 포인터란?두 개의 포인터를 이용해 문제를 해결하는 알고리즘 기법.주로 정렬된 배열에서 사용되며, 정렬, 합 비교, 구간 탐색, 슬라이딩 윈도우 등 다양한 문제에 활용됨.시간 복잡도를 획기적으로 줄일 수 있는 최적화 기법사용 조건예시 문제정렬된 배열(또는 리스트)정렬된 두 배열 병합, 두 수의 합 찾기 등구간 합 또는 조건 충족 구간 찾기연속 부분합, 특정 합을 가지는 쌍 찾기 등 ✅ 작동 방식pointer1, pointer2 두 포인터를 각 배열의 시작 위치에 놓고각각의 현재 값을 비교해 더 작은 값을 결과에 추가하고, 해당 포인터를 오른쪽으로 이동어느 한 쪽이 끝나면, 나머지 배열의 나머지 원소를 전부 결과..

RAM / 논리 주소와 물리 주소Chapter6. 메모리와 캐시 메모리 - RAM의 특징과 종류 - 논리 주소와 물리 주소의 차이 - 논리 주소를 물리 주소로 변환하는 방법 - 캐시 메모리와 저장 장치 계층 구조의 개념 1. RAM의 특징과 종류 RAM(Random Access Memory)은 컴퓨터가 작업할 때 잠시 빌려 쓰는 작업 공간이다. 이를 이해하기 쉽게 책상에 비유할 수 있다. 책장은 하드디스크나 SSD처럼 많은 책(데이터)을 보관할 수 있지만, 책을 꺼내 쓰려면 시간이 걸린다.반면 책상은 바로 앞에 펼쳐진 공간이어서 필요한 책을 꺼내 올려두면 즉시 참고할 수 있다. 책상이 넓을수록 여러 권을 동시에 펼쳐두고 비교하거나 빠르게 작업할 수 있고, 책상이 좁으면 책을 하나씩 올렸다 내렸..

혼자 공부하는 컴퓨터 구조 + 운영체제Chapter 04. CPU의 작동 원리Chapter 05. CPU 성능 향상 기법 🟥 CPU의 구성요소 CPU : 메모리에 저장된 명령어를 읽어들이고, 해석하고, 실행하는 장치이며 ALU, 제어장치, 레지스터로 구성되어 있다.계산을 담당하는 ALU명령어를 읽어들이고 해석하는 제어장치작은 임시 저장 장치인 레지스터 ALU 레지스터를 통해 "피연산자"를 받아들이고, 제어장치로부터 수행할 연산을 알려주는 "제어 신호"를 받아들여 다양한 연산을 수행한다.연산을 수행한 결과는 특정 숫자, 문자, 혹은 메모리 주소가 될 수 있다. 그리고 이 결과값은 바로 메모리에 저장되지 않고 일시적으로 레지스터에 저장된다. (CPU가 메모리에 접근하는 속도가 레지스터에 접근하는 것..

혼자 공부하는 컴퓨터 구조 + 운영체제 🔴 컴퓨터 구조를 알아야 하는 이유많은 유저가 사용하는 프로그램은 필히 성능, 용량, 비용 문제가 발생한다.이러한 문제를 해결하기 위해서는 단순 프로그래밍 언어의 문법말고, 컴퓨터 구조를 이해하여야만 성능, 용량, 비용을 고려하여 개발할 수 있다. 🔴 컴퓨터 구조의 큰 그림컴퓨터 구조는 크게 컴퓨터가 이해하는 정보와 4가지 핵심 부품으로 나눌 수 있다.컴퓨터가 이해하는 정보는 1.데이터 2.명령어 두 가지가 있고,네 가지 핵심 부품은 :중앙처리장치 = CPU (Central Processing Unit) : 메모리에 저장된 명령어를 읽어 들이고, 해석하고, 실행주기억장치 = (main) Memory : 현재 실행되는 프로그램의 명령어와 데이터를 저장보조기억장치 ..

성능최적화 / lighthouse performance 점수개선 웹 개발을 하다 보면, 어느 순간 “이 속도 괜찮은거 맞나?” 싶은 타이밍이 찾아옵니다.Lighthouse 점수, 로딩 속도, JS 번들 크기 같은 수치들이 성능을 판단하는 기준처럼 느껴지지만,사실 진짜 중요한 건 숫자가 아니라 사용자가 얼마나 ‘빠르다’고 느끼느냐입니다. 3Days+ 프로젝트를 개발하면서도 이걸 뼈저리게 느꼈습니다.서버에서 데이터를 받아오고, 클라이언트에서 처리하는 사이 아주 짧은 지연이 생겼고,사용자는 아무 말도 하지 않았지만, 왠지 모르게 “조금 느린데?”라는 느낌이 남는 구조였습니다. “점수 말고 속도, 숫자 말고 감각”그래서 이번 성능 최적화의 목표는 단순히 Lighthouse 점수를 100점 맞추는 게 아니었습니..

https://3daysplus.vercel.app/ 3Days+3일을 반복하면 습관이 된다. 루틴과 할 일을 꾸준히 기록해보세요.3daysplus.vercel.app 프론트엔드 사이드 프로젝트 - 검색엔진 최적화 및 웹 접근성 및 실전정리 (Lighthouse) [Lighthouse 점수 의미]Performance = 빠름, SEO = 노출, Accessibility = 모두를 위한 UX, Best Practices = 안전하고 깔끔한 웹.Performance페이지 로딩 속도, 반응성, 사용자 체감 속도사용자 경험 (UX)에 직결. 느린 웹은 이탈률 급증SEO검색엔진이 페이지를 잘 인식할 수 있는 구조검색 결과 노출 & 유입량 증대Accessibility시각/청각/운동 장애인을 위한 웹 접근성 수준..

🚀 3Days+ | 반복을 통한 습관 형성을 위한 웹"작심삼일(3일)을 반복하면 습관이 된다" 일정, 루틴 추적, 뉴스 요약을 한곳에서 관리하는 All-in-One 습관 형성 웹서비스 목표: 기록에만 그치지 않고 '지속' 가능한 습관을 형성하도록 돕는 것핵심 가치: 간결한 기록, 직관적인 시각화, 자연스러운 정보 습득(뉴스) 루틴화 https://3daysplus.vercel.app/ 3Days+3일을 반복하면 습관이 된다. 루틴과 할 일을 꾸준히 기록해보세요.3daysplus.vercel.app 핵심 기능 및 흐름 🎛️ 메인 - Dashboard page오늘 하루를 한눈에 확인할 수 있는 메인 페이지✅ 오늘의 날씨 & 옷차림 추천 - 실시간 날씨 API 기반 현재 습도, 온도 ..

Next.js / React / JavaScript / TypeScript / CS / 자료구조 빨간색 - 자주 질문받음주황색 - 2~3회 초록색 - 1회 1) Next.js - App router https://nextjs.org/docs/app/getting-started/server-and-client-components#how-do-server-and-client-components-work-in-nextjs Getting Started: Server and Client Components | Next.jsLearn how you can use React Server and Client Components to render parts of your application on the serve..