React로 개발한 프로젝트를 최종 사용자에게 배포하려면 개발 모드가 아닌 "Production 모드"로 빌드하는 과정이 필요하다. 이 글에서는 mini-blog 프로젝트를 기준으로 production 빌드를 실행하고 로컬 서버에서 확인한 전체 과정을 정리한다.1. Production 빌드란?React 개발 환경에서는 기본적으로 개발 서버(npm start)를 통해 프로젝트를 실행한다. 그러나 실제 배포 환경에서는 다음과 같은 이유로 production 빌드가 필요하다:코드를 압축하고 최적화하여 파일 크기를 줄인다불필요한 개발 도구와 로그를 제거한다브라우저에서 더 빠르게 로딩되도록 번들링한다HTML, CSS, JS 등 정적 파일 형태로 결과물을 만들어낸다2. 빌드 명령어 실행아래 명령어를 프로젝트 루트에..

스프링과 트랜잭션 문제 해결 정리이 글은 인프런 김영한님의 "스프링 DB 1편 - 데이터 접근 핵심 원리" 강의를 수강하고 정리한 내용이다. 이번 글에서는 JDBC 트랜잭션을 시작으로, 트랜잭션 추상화, 트랜잭션 매니저, 트랜잭션 템플릿, 그리고 AOP 기반 선언적 트랜잭션 관리 방식까지 스프링이 제공하는 다양한 트랜잭션 처리 기법들을 실무 흐름에 맞춰 정리한다.1. 트랜잭션을 서비스 계층에서 직접 관리할 때의 문제점MemberServiceV2에서는 서비스 계층에서 다음과 같이 JDBC 트랜잭션을 직접 제어한다:Connection con = dataSource.getConnection();con.setAutoCommit(false);try { // 비즈니스 로직 con.commit();} ca..

이번에는 리액트 컴포넌트 설계 철학 중 하나인 합성(Composition) 과 상속(Inheritance) 에 대한 개념과 함께, Context API 를 통한 전역 상태 관리 방법까지 정리해보았다. Composition vs Inheritance리액트는 상속보다 합성을 권장한다. 다시 말해, 하나의 컴포넌트를 확장하기 위해 상속하는 방식보다는 여러 개의 컴포넌트를 조합해서 더 복잡한 UI를 구성하는 방식을 지향한다.Composition (합성)합성은 컴포넌트를 props.children 또는 특정 props를 통해 다른 컴포넌트 내부에 포함시키는 방식이다.function Card(props) { return {props.children};}function Welcome() { return ( ..

[Spring DB] 트랜잭션 이해 정리이 글은 인프런 김영한님의 "스프링 DB 1편 - 데이터 접근 핵심 원리" 강의를 수강하고 정리한 내용이다. 이번 글에서는 트랜잭션의 기본 개념부터 데이터베이스 락, 트랜잭션 적용 예제까지 전반적인 흐름을 단계적으로 정리한다.1. 트랜잭션이 필요한 이유애플리케이션이 파일 대신 데이터베이스에 데이터를 저장하는 가장 큰 이유 중 하나는 데이터베이스가 트랜잭션(Transaction)을 지원하기 때문이다.예를 들어 A 계좌에서 B 계좌로 5,000원을 송금한다고 할 때 다음과 같은 작업이 수행되어야 한다:A의 잔고 -5,000B의 잔고 +5,000이 두 작업은 하나의 단위로 묶여야 한다. 둘 중 하나라도 실패하면 전체 작업이 실패한 것으로 간주하고 이전 상태로 되돌려야 한..

정보처리기사 필기시험을 준비하면서, 인터넷에는 전공자라면 하루, 3일 만에 합격할 수 있다는 이야기가 많았다. 하지만 실제로 얼마나 공부해야 하는지는 사람마다 다를 수 있겠다는 생각이 들었고, 나 역시 궁금했다. 그래서 직접 시험을 준비하면서 하루하루의 공부 기록을 남기기로 했다. 나는 벼락치기 스타일보다는, 시험 전부터 차근차근 계획에서 접근하는 편이다. 그리고 완벽하게 다 알고 치르기보다는, 마치 수박 겉핥기처럼 표면부터 반복적으로 핥으며 점차 익숙해지는 방식이다. 수박 겉핥기 한 500번해서 수박 없애버린다는 마인드이다. 아 참고로 나는 3-1까지 전공 수강하고 휴학 중이다. 시험 개요 정리정보처리기사 필기시험은 총 5과목으로 이루어지며, 각 과목당 20문제, 총 100문제가 출제된다. 시험 시..

이번 글에서는 리액트에서 사용자 입력을 처리하는 핵심 기능인 폼(Form) 과 컴포넌트 간 상태를 공유하는 방식인 상태 끌어올리기(Lifting State Up), 공유 상태(Shared State) 개념까지 정리해보았다. 실제 프로젝트에서는 사용자 입력과 컴포넌트 간 데이터 흐름이 필수적이기 때문에 꼭 익혀야 할 개념들이다.Form과 Controlled Component리액트에서의 폼 처리는 일반 HTML 방식과 다르게, 입력값을 상태(state) 로 관리하는 것이 특징이다. 이 방식을 Controlled Component라고 한다.function NameForm() { const [name, setName] = useState(""); const handleChange = (e) => { s..

[Spring DB] 커넥션 풀과 DataSource 이해이 글은 인프런 김영한님의 "스프링 DB 1편 - 데이터 접근 핵심 원리" 강의를 수강하고 정리한 내용이다. 이번 정리에서는 데이터베이스 커넥션의 비효율을 해결하기 위한 커넥션 풀과, 커넥션 획득 방식을 추상화하는 DataSource 인터페이스의 역할과 이점을 다룬다. 실제 코드 예제를 통해 DriverManager, DriverManagerDataSource, HikariCP 커넥션 풀 적용 방식도 함께 살펴본다.1. 커넥션 풀의 필요성커넥션을 매번 새로 만드는 비용커넥션 획득 과정은 TCP/IP 연결, 인증, 세션 생성 등 복잡하고 비용이 크다.특히 SQL 실행 시간 외에 커넥션 생성 시간이 추가되어 응답 지연이 발생한다.이러한 반복은 시스템 ..

이번 글에서는 리액트에서 여러 개의 데이터를 반복적으로 렌더링할 때 사용하는 리스트와 key 개념에 대해 정리해보았다. 실제 UI에서는 목록 형태로 데이터를 표현하는 일이 많기 때문에 리스트 렌더링을 잘 이해하고 있어야 한다.List와 KeyReact에서 리스트(List) 는 배열 형태의 데이터를 이용해 여러 컴포넌트를 반복적으로 렌더링하는 방식이다. 이때 중요한 것이 바로 key 속성이다.const numbers = [1, 2, 3, 4, 5];const listItems = numbers.map((number) => {number});이렇게 작성하면 listItems에는 태그 5개가 담긴 배열이 된다. 이 배열을 JSX 안에서 그대로 렌더링하면 된다.return {listItems};여러 개의 Co..

[Spring] DB JDBC 이해 정리이 글은 인프런 김영한님의 "스프링 DB 1편 - 데이터 접근 핵심 원리" 강의를 수강하고 정리한 내용이다. 이번 정리에서는 JDBC의 등장 배경부터 실제 데이터베이스 연결과 CRUD 구현까지, JDBC를 활용한 데이터 접근의 전반적인 흐름을 다룬다. 또한 JDBC의 한계와 이를 보완하는 최신 기술까지 정리한다.1. JDBC 등장 배경과 개요데이터베이스 연결 문제애플리케이션이 데이터베이스와 통신하려면 다음과 같은 과정을 거쳐야 한다:커넥션 연결 (주로 TCP/IP)SQL 전달결과 응답 수신하지만 데이터베이스 종류마다 위 과정이 다르게 구현되어 있어 다음과 같은 문제가 발생한다:DB 변경 시 코드 수정 필요개발자가 DB마다 다른 API와 연결 방법을 학습해야 함이 문..

이번에는 리액트에서 사용자 인터랙션을 다루는 핵심 기능인 이벤트 처리(Handling Events) 와 UI를 상황에 따라 다르게 표현하는 조건부 렌더링(Conditional Rendering) 에 대해 정리했다. 실제로 버튼 클릭, 입력값 변경 등 사용자와 상호작용할 때 매우 자주 사용하는 개념들이다.Handling Events - 이벤트 처리Event의 정의 및 다루기이벤트(Event)는 사용자로부터 발생하는 상호작용을 의미한다. 예를 들어 버튼 클릭, 키보드 입력, 마우스 이동 등이 모두 이벤트에 해당된다.리액트에서는 DOM 이벤트를 처리할 때 HTML과 약간 다른 방식으로 이벤트 핸들러를 설정한다.camelCase를 사용한다 (예: onClick, onChange)문자열이 아닌 함수를 핸들러로 전..