super.SHY();

🚀 React 프로젝트 GitHub Pages 배포 가이드핵심 요약: gh-pages 패키지를 사용하여 특정 프로젝트의 빌드 파일을 별도 브랜치에 자동으로 푸시하고 배포하는 최적화 프로세스 1. gh-pages 패키지 개념 및 역할패키지 정의: dist나 build 폴더의 결과물을 gh-pages 브랜치로 자동 업로드하는 배포 도우미 툴작동 원리: npm run deploy 실행 시 빌드 폴더 생성 및 브랜치 푸시 후 GitHub Pages를 통한 호스팅 연동2. 단계별 환경 설정패키지 설치: 프로젝트 루트 경로에서 개발 의존성으로 추가Bashnpm install --save-dev gh-pagespackage.json 스크립트 구성: 빌드와 배포를 한 번에 처리하는 자동화 설정"predeploy": ..

🍃 Spring: 페이징 처리 및 동적 쿼리데이터가 많아질수록 서버 부하를 줄이기 위해 데이터를 쪼개서 가져오는 페이징(Pagination)과 검색 조건에 따라 SQL이 변하는 동적 쿼리가 핵심1. 페이징 처리 (Paging)Criteria: 페이지 번호(pageNum)와 한 페이지당 보여줄 개수(amount)를 전달하는 객체PageDTO: 화면에 페이지 번호(1~10)를 출력하기 위해 시작 번호, 끝 번호, 이전/다음 버튼 유무 등을 계산하는 객체2. 주요 어노테이션 정리어노테이션용도설명@RequestMapping클래스 레벨 매핑컨트롤러 전체의 기본 URL 경로 설정@PathVariable경로 변수/board/10 처럼 URL 경로에 포함된 값 추출@RequestParam쿼리 파라미터?id=seren..

⚛️ React 핵심 기초 문법리액트 개발의 근간이 되는 현대 자바스크립트 문법 요약변수와 상수:const: 재할당이 불가능한 상수. 컴포넌트나 함수 정의 시 주로 사용let: 재할당이 가능한 변수. 값이 변해야 하는 로직에 사용화살표 함수 (=>): 익명 함수를 간결하게 표현하는 ES6 문법. 리액트 컴포넌트 선언 시 표준으로 사용스프레드 연산자 (...): 배열이나 객체의 요소를 개별적으로 펼치는 기법. 불변성을 유지하며 상태(State)를 업데이트할 때 필수적임🧱 React 3대 핵심 개념리액트를 지탱하는 가장 중요한 구조적 개념컴포넌트(Component): UI를 구성하는 독립적이고 재사용 가능한 최소 단위. '레고 블록'에 비유됨State(상태): 컴포넌트 내부에서 관리되는 '기억'. 값이 변..

1. Spring CRUD 프로젝트 표준 진행 순서현업 실무에서 권장하는 데이터베이스 중심의 개발 흐름입니다.MySQL 테이블 생성: 요구사항에 맞는 스키마 설계 (simple_todo)DTO/VO 클래스 설계: 데이터 이동을 위한 객체 작성 (Lombok 활용)Mapper 인터페이스 & XML 작성: SQL 쿼리와 자바 메서드 매핑단계별 테스트 수행: 단위 테스트 → 통합 테스트로 검증 확장Service 계층 구현: 비즈니스 로직 작성Controller & View 연동: 사용자 요청 처리 및 화면 구성2. 데이터 모델 및 매퍼 설계🗄️ MySQL 테이블 구조 (simple_todo)CREATE TABLE simple_todo ( id INT AUTO_INCREMENT PRIMARY KEY, ..

🏗️ Apache Maven 표준 디렉터리 구조Maven은 프로젝트의 일관성을 위해 정해진 폴더 구조를 따름디렉터리 이름용도 및 목적프로젝트 홈pom.xml 파일 및 모든 하위 디렉터리 포함src/main/java프로젝트의 실제 자바 소스 코드 (.java)src/main/resources설정 파일, 프로퍼티 파일 등 실행 시 필요한 리소스src/test/javaJUnit, TestNG 등 단위 테스트를 위한 자바 소스 코드src/test/resources테스트 실행 시에만 필요한 리소스 파일🎨 Front-end: Bootstrap & JSP 연동1. Bootstrap 및 레이아웃 설정CDN 도입: 별도 설치 없이 태그로 Bootstrap 5.3 활용레이아웃 분리: header.jsp, footer..

🏗️ Spring Legacy: 웹 애플리케이션 개발 (Part 2)1. 웹 계층 구조 및 구동 흐름Spring 6 레거시 프로젝트는 여러 설정 파일이 유기적으로 연결되어 구동됨. 각 설정 파일의 역할과 빈(Bean) 관리 범위를 이해하는 것이 핵심임.web.xml: 웹 애플리케이션의 시작점. ContextLoaderListener와 DispatcherServlet 설정 포함.root-context.xml: 비즈니스 로직(Service), 데이터베이스 관련(Mapper, DataSource) 등 공통 빈을 설정하는 곳.servlet-context.xml: 웹 요청 처리와 관련된 빈(Controller, ViewResolver, 정적 리소스 경로)을 설정하는 곳.흐름: web.xml → root-cont..

1. Spring MVC 컨트롤러 메서드 반환 타입컨트롤러에서 요청을 처리한 후 응답을 보내는 방식에 따른 세 가지 주요 반환 타입 정리void: 요청 URL을 기반으로 JSP 파일을 자동 매핑함 (예: /board/list 요청 시 list.jsp 호출)String: 리턴값으로 논리적인 뷰 이름을 지정하여 ViewResolver가 해당 경로의 JSP를 호출하는 방식redirect: 특정 URL을 다시 호출하도록 브라우저에 명령함 (JSP 파일로 바로 가는 것이 아닌 URL 재요청)2. Model 데이터 전달 방식 비교 (PRG 패턴 핵심)데이터를 뷰로 넘길 때 사용 목적과 보안에 따라 addAttribute와 addFlashAttribute를 구분하여 사용함구분addAttributeaddFlashAtt..

최신 Spring 6 버전은 Jakarta EE 기반이므로 Tomcat 10 이상의 서버 환경이 필수임1. 개발 환경 및 서버 설정WAS: Apache Tomcat 10.1.49 설치 (Jakarta EE 10 지원)IDE 설정: Eclipse/STS에서 Server Runtime Environment 추가Lombok: IDE 설치 경로에 java -jar lombok.jar 명령어로 인스톨 필수프로젝트 생성: Dynamic Web Project 생성 후 Generate web.xml 체크 → Maven Project로 전환2. 의존성(Dependency) 및 DB 설정pom.xml 주요 의존성:Spring Framework 6.x 관련 라이브러리HikariCP (고성능 커넥션 풀)mysql-connec..

1. Spring Boot 프로젝트 환경 설정 (오전)Lombok 설치 및 STS 연동설치 경로: D:\Dev\lib 등의 경로에 lombok.jar 배치설정 방법: CMD에서 java -jar lombok.jar 실행 후 STS4 설치 경로 선택하여 설치목적: @Getter, @Setter, @ToString 등을 통해 반복적인 자바 코드(Boilerplate) 제거Spring Starter Project 생성 (Ver 3.5.8)Java Version: 21주요 의존성(Dependencies):Spring Web: 웹 개발을 위한 기본 라이브러리 (내장 톰캣 포함)Spring Boot DevTools: 코드 수정 시 자동 리로딩 지원Lombok: 어노테이션 기반 코드 자동 생성MySQL Driver:..

학습 목표: React Todo 앱 실습을 통한 JSX 문법, 조건부 렌더링, 이벤트 핸들링 및 실무 패턴 습득1. React JSX 괄호 구분 가이드JSX에서 중괄호 {}와 소괄호 ()는 명확한 용도 차이가 있습니다.중괄호 {} : JavaScript 표현식 삽입내부 텍스트: 변수나 로직 삽입 시 사용 ({name})배열 렌더링: {todos.map(todo => {todo.text})}속성 값: value={content}인라인 스타일 (객체 전달): style={{ color: 'red' }}특수문자 출력: > 기호 등은 {'>'} 또는 {'}'} 처럼 문자열로 감싸서 처리소괄호 () : 긴 JSX 반환 시 가독성 확보여러 줄의 JSX를 반환할 때 하나의 묶음으로 처리하여 가독성을 높임화살표 함수에..