1. HTTP 요청과 Spring MVCSpring Boot는 HTTP 요청을 처리하기 위해 DispatcherServlet이라는 중앙 컨트롤러를 사용합니다. DispatcherServlet은 클라이언트의 요청을 받아, 적절한 컨트롤러 메서드에 요청을 전달하고 결과를 반환합니다.2. HTTP 요청 처리 흐름1. 클라이언트 요청브라우저나 HTTP 클라이언트가 /form_ok.do와 같은 URL로 요청을 보냅니다.2. DispatcherServlet 요청 수신Spring Boot의 DispatcherServlet이 모든 HTTP 요청을 가로챕니다.3. Handler MappingDispatcherServlet은 요청 URL에 해당하는 컨트롤러와 메서드를 찾습니다.4. 컨트롤러 메서드 실행요청 매핑된 컨트롤러..

1. Gradle 의존성 추가build.gradle에 JSP를 사용하기 위한 의존성을 추가dependencies { implementation 'org.springframework.boot:spring-boot-starter-web' // Spring Web 기본 의존성 implementation 'org.apache.tomcat.embed:tomcat-embed-jasper' // JSP 렌더링을 위한 Tomcat Jasper implementation 'javax.servlet:jstl:1.2' // JSTL 지원}tomcat-embed-jasper:JSP를 처리하기 위한 Jasper JSP 엔진.jstl:JSP에서 JSTL 태그를 사용할 수 있도록 지원.2. 디렉터리 구조 설정Spr..

어노테이션 간단 비교:@Controller = 웹 페이지 반환용 컨트롤러.@RestController = 데이터(JSON/XML) 반환용 컨트롤러 (@Controller + @ResponseBody).1. @Controller역할: 웹 애플리케이션에서 뷰(View)를 반환하기 위한 컨트롤러로 사용됨주요 특징:메서드의 반환값은 뷰의 이름(String)이 되며, 뷰 리졸버(View Resolver)를 통해 실제 뷰(예: JSP, Thymeleaf 템플릿)가 렌더링됩니다.모델(Model) 객체를 사용하여 뷰에 데이터를 전달할 수 있습니다.사용 예시: import org.springframework.stereotype.Controller;import org.springframework.ui.Model;impor..

1. Spring Web이란?Spring Web은 웹 애플리케이션 개발을 위한 모듈, HTTP 요청과 응답을 처리하는 기능을 제공주요 컴포넌트 :Spring MVC(Model-View-Controller) :웹 애플리케이션의 구조적 설계 지원REST API 개발 :JSON, XML과 같은 데이터 형식으로 클라이언트와 서버 간 통신을 간소화Handler와 Controller :URL 요청을 처리하고 응답 데이터를 생성2. Spring Boot와 Spring WebSpring Boot는 Spring Web 모듈을 내장하여 설정 작업을 자동화한다.⇒ 최소한의 설정으로 HTTP 서버, REST API, HTML 렌더링 등을 쉽게 구현 가능내장 서버 :tomcat, jetty같은 웹 서버가 내장되어 별도의 설치 ..

컴포넌트 만드는 법function 만들고다른 function 바깥에 만들기함수 이름은 영어 대문자로 시작return() 안에 html 담기 쓰기function Modal() { return ( 제목 날짜 상세내용 );}(참고1)return () 안에 html 병렬기입 하려면function Modal() { return ( 제목 날짜 상세내용 );} 사용가능(참고2)둘 다 사용 가능어떤 걸 컴포넌트로 만들면 좋은가반복적인 html 축약할 때큰 페이지들자주 변경되는 것들컴포넌트의 단점state 가져다 쓸 때 문제 생김⇒ A 함수에 있던 변수는 B 함수에서 맘대로 가져다 쓸 수 ..

숙제 답(참고) array / object 다룰 때 원본은 보존하는 게 좋음/* eslint-disable */import { useState } from 'react';import './App.css'function App() { let post = '강남 우동 맛집'; **let [글제목, 글제목변경] = useState([ '남자 코트 추천', '강남 우동 맛집', '파이썬독학' ]);** let [따봉, 따봉변경] = useState(0); return ( ReactBlog **{ let copy = [...글제목]; copy[0] = '여자 코트 추천'; 글제목변경(copy..

터미널에서 Warning 메시지 없애기eslint-disable  : Lint 끄는 기능좋아요버튼 & 갯수 UI 만들기/* eslint-disable */import { useState } from 'react';import './App.css'function App() { let post = '강남 우동 맛집'; let [글제목, b] = useState([ '여자 코트 추천', '강남 우동 맛집', '파이썬독학' ]); **let [따봉] = useState(0);** return ( ReactBlog **{ 글제목[0] } 👍 {따봉} ** 2월 17일 발행 ..

return()안에는병렬로 태그 2개이 이상 기입 금지자료 잠깐 저장할 땐변수를 사용해도 되지만 state 써도 된다~state 만드는 법import {useState}useState(보관할 자료)let [작명, 작명]let [a, b] = useState('남자 코트 추천');a : state에 보관했던 자료 나옴b : state 변경 도와주는 함수(참고) Destructuring 문법let num = [1,2];// 배열 안에 있던 걸 변수로 빼고 싶다!let [a, c] = [1, 2];// let a = num[0];// let c = num[1];변수 문법이 있는데 왜 굳이 state 써야 함?변수랑 state는 차이점이 1개 있다.일반 변수 : 갑자기 변경되면 html에 자동으로 반영 안 됨f..

상단 메뉴 만들어보기import './App.css'function App() { return ( 블로그임 );}export default App.App { text-align:center;}.black-nav { display: flex; background: black; width: 100%; color: white; padding-left: 20px;}JSX 문법 1.class 넣을 땐 className 블로그임JSX 문법 2.변수넣을 땐 {중괄호}⇒ 데이터바인딩{ post }JSX 문법 3.style 넣을 땐 style={ {스타일명 : ‘값’} }블로그임참고에러메시지는 터미널/브라우저에서 확인

리액트 프로젝트를 실행하기 전 node.js + 에디터로 vscode 설치.npx create-react-app blog→ 요즘은 vite를 쓰는게 대세! 라고 한다.npm create vite@latest위 명령어를 대신 입력해서 리액트 프로젝트를 세팅~만든 프로젝트 폴더를 열면src폴더 안에 있는 App.js 이게 메인페이지 → 여기서 코드를 짜면 된다~node_modules 폴더 : 라이브러리 코드 보관함public 폴더 : static 파일 모아놓는 곳src 폴더 : 코드짜는 곳package.json : 프로젝트 정보내 사이트를 브라우저로 미리보기 띄우기에디터 상단 메뉴 중에 Terminal - New Terminal 실행터미널에npm run dev입력해당 주소로 접속하면이러한 화면이 뜬다.