실습은 따라 하고 있었지만 "지금 내가 무엇을 만들고 있는지" 제대로 이해하지 못하는 순간도 있었다.특히 JSP와 Servlet의 관계, 그리고 Spring Boot 강의를 찾아보니 등장하는 JPA까지 모두 비슷한 기술처럼 느껴졌다.그래서 이번 기회에 각 기술의 역할과 관계를 정리해 보려고 한다.웹 서비스는 대략 이런 흐름으로 동작한다.사용자가 요청을 보내면 Servlet이 받아 처리하고, 필요한 데이터를 DB에서 가져온 뒤, JSP가 화면을 만들어 사용자에게 돌려준다. 1. Servlet이란?Servlet은 웹 요청을 처리하는 Java 프로그램이다. 사용자가 URL에 접속하거나 버튼을 누르면 가장 먼저 요청을 받아 처리하는 역할을 담당한다. 사용자와 서버 사이의 '중간 관리자'라고 할 수 있다. @W..

이번에 알게된 지인분이 카톡을 보내왔다.이전에 같이 일했던 개발자분이 세미나를 많이 다녀오시기도 했고, 새싹에서 팀을 했던 분도 컨퍼런스 스태프로도 다녀오셔서 나도 개발자 행사에 관심을 가지고 있던 찰나에,참여형 세미나라고 해서 긴장을 좀했지만 바로 신청을했다.요즘 개발자에게 AI란 프로젝트 처음부터 끝까지 함께하는 동반자이자, 어쩌면 경쟁자이다.프론트엔드 개발자가 되고싶었는데 프론트단은 AI가 거의 완전히 대체될 수 있다고 하지말라는 말을 들어서 고민하던 차에 다른 사람들의 생각도 듣고싶어졌다. 선착순이라고 했는데 신청한 지 몇시간 채 지나지 않아 연락이 왔다.문자로 온 사전 질문들을 노션에 정리해갔다.사전발제Q.지난 1년을 돌아 봤을 때 1년뒤, 그리고 3년뒤 우리는 어떻게 일하고 있을까요 ? 3년..

요즘 냉장고 재료 관리 프로젝트를 진행 중이다.냉장고에 있는 재료를 등록하고, 수정하고, 삭제할 수 있는 CRUD API를 Next.js(App Router) 기반으로 구현하고 있는데, 생각지도 못한 에러를 마주했다. 요청은 정상적으로 처리됐지만 서버 콘솔에 계속 에러 로그가 찍히는 문제였다. ingredients CRUD API 개발 중:POST: 재료 추가GET: 재료 조회PATCH: 재료 수정DELETE: 재료 삭제특히 PATCH와 DELETE 요청은 클라이언트 측에서 정상적으로 200 응답을 반환했지만, 서버 로그에는 에러 메시지가 남았다.발생 오류Error: Route "/api/ingredients/[id]" used params.id. params should be awaited before..

📋렌더링 파이프라인?브라우저가 html, css, javascript같은 리소스를 처리하여 화면에 웹 페이지를 렌더링한다. 이 과정을 렌더링 파이프라인(Rendering Pipeline) 이라고 한다. 렌더링 파이프라인 과정1. DOM 생성 (Parsing HTML → DOM Tree)브라우저는 서버에서 HTML 파일을 전달받으면 이를 바이트 → 문자 → 토큰 → 노드 로 변환한다. 변환된 노드들은 서로 연결되어 DOM Tree(Document Object Model) 를 구성하게 된다. DOM은 문서의 구조를 나타내는 트리로, 각 태그가 노드 형태로 존재한다.2. CSSOM 생성 (Parsing CSS → CSSOM Tree)CSS 파일 역시 파싱 과정을 거쳐 선택자와 선언으로 나뉘게 된. 이 정보들..

리액트의 성능을 좌우하는 핵심은 리렌더링(Rendering)이다. 컴포넌트가 자주 리렌더링되면 화면을 구성하는 비용이 커지고 앱이 느려진다. 리액트 성능의 최적화는 크게 두가지 방법으로 나눌 수 있을 것 같다. 📋불필요한 리렌더링 방지props가 바뀌지 않았다면 컴포넌트를 리렌더링 하지 않도록 React.memo 메모제이션한다.import React, { memo } from "react";const Child = ({ value }) => { console.log("렌더링됨"); return {value};};export default memo(Child); // props 변경 없으면 재렌더링 X useCallback 은 함수를 메모제이션하여 불필요한 함수 재생성을 방지하고 useMemo는 값..

📦Controlled Component란?React state 가 입력값을 직접 관리하는 컴포넌트를 말한다. 입력요소의 값 value를 onChange 이벤트 핸들러로 업데이트한다. state 로 관리되므로 유효성 검사나 조건부 렌더링, 복잡한 폼 로직에 유리하다.import { useState } from "react";function ControlledInput() { const [value, setValue] = useState(""); return ( setValue(e.target.value)} /> );}📦Uncontrolled Component란?state가 아닌 DOM 자체가 입력값을 관리하여 리액트는 제어하지않는다. useRef를 사용해 참조객체 ref를 사용해 D..

수업을 듣다가 db 관련 설명에서 포크란 용어가 나왔다. MariaDB가 MySQL을 포크(Fork) 해서 만들어졌다나 뭐라나.이때 갑자기 모르는 단어가 나와서 꽂혔는지 궁금해서 찾아보게되었다.📄 포크(Fork)란?포크는 기존 프로젝트의 소스코드를 내 계정으로 가져와 독립적으로 개발할 수 있게 하는 것이다.그냥 복사(copy)랑 비슷해 보이지만, 중요한 차이가 있다.포크는 단순히 파일만 복제하는 게 아니라, 원본과의 연결을 유지한다는 점이 핵심이다.그래서 내가 수정한 내용을 원본 프로젝트에 다시 제안할 수 있다.이 과정을 우리는 흔히 풀 리퀘스트(Pull Request)라고 부른다. 📄 클론(Clone)이란?클론은 GitHub 같은 원격 저장소에 있는 프로젝트를 내 컴퓨터(로컬)로 내려받는 것이다.명..

곧 팀프로젝트를 할 예정인데 협업 과정에서 버전 관리가 필수라는 이야기를 많이 들었다. 여러 명이 동시에 코드를 수정하다 보면누가 어떤 부분을 수정했는지 알 수 없거나이전 버전으로 되돌리고 싶은데 방법이 없는 상황이런 문제가 자주 생긴다고 한다.그래서 프로젝트를 시작하기 전에 Git과 GitHub를 미리 익혀두면,협업 속도가 빨라지고코드 충돌을 줄이고불필요한 시간 낭비를 막을 수 있다고 판단했다. 그래서 나도 깃과 깃허브를 공부하고자 한다.1. 버젼관리란? 버전 관리(Version Control) 는 파일의 변경 이력을 저장하고, 필요할 때 과거 상태로 돌아갈 수 있는 시스템.마치 게임 저장·로드 기능처럼, 코드의 발전 과정을 안전하게 기록하는 것.대표적인 도구: Git, SVN 등 2. 깃(Git)과 ..