11장 (2)는 목록 8 - 14까지 다루고 있습니다. (초보 웹 개발자를 위한 스프링5 프로그래밍 입문 286p~319p) 11 - (2)장의 키워드 # @ModelAttribute 애노테이션 # 커스텀 태그 # ModelAndView 8. @ModelAttribute 애노테이션으로 커맨드 객체 속성 이름 변경 @ModelAttribute : 커맨드 객체 속성 이름을 변경하고 싶을때 사용한다. @PostMappint("/register/step3") public String handleStep3(@ModelAttribute("formData") RegisterRequest regReq) { ...//"RegisterRequest -> formData 라는 이름으로 커맨드 객체에 접근 가능 } 9. 커맨..

22-23/22-23 Spring 2 2022. 12. 22. 10:00

이번 10장에서는 컴포넌트의 일정관리 웹 애플리케이션에 대해서 알아보고자 합니다. 지금까지 배운 이론을 바탕으로 실제로 사용 가능한 웹 용 애플리케이션을 만들어 봅시다. 10.1 프로젝트 준비하기 이전의 이론을 바탕으로 애플리케이션을 생성하기에 앞서, 라이브러리 설치 및 기타 프로그램 설정과 생성이 필요합니다. 이를 단계별로 나누어 알아봅시다. 1) 라이브러리 몇 가지를 다운로드합니다. 명령프롬포트 창 등을 통해 라이브러리를 설치하면 되는데, 설치할 라이브러리는 우선 3가지입니다. SASS CLASSNAMES (편리한 조건부 스타일링 제공) REACT-ICONS (다양한 SVG 아이콘 제공) 2) Prettier 설정을 합니다. 2장에서 Prettier에 대해 학습했었습니다. 이를 참고해서 프로젝트를 만..

22-23/22-23 리액트 스타터 1 2022. 12. 22. 10:00

지금까지 배운 것들을 바탕으로 일정 관리 웹 애플리케이션을 만들어 보도록 하겠습니다. 10.1 프로젝트 준비하기 일정 관리 웹 애플리케이션을 만들기 위한 준비작업을 해보겠습니다. 10.1.1 프로젝트 생성 및 필요한 라이브러리 설치 $ yarn create react-app todo-app $ cd todo-app $ yarn add sass classnames reacct-icons 애플리케이션을 위한 프로젝트를 새로 생성해줍니다. 이번 프로젝트에서는 sass를 이용할 예정이며, classnames를 통해 좀 더 편한 스타일링을 할 예정입니다. 또한, react-icons를 통해서 다양한 아이콘도 사용해 볼 예정입니다. 10.1.2 Prettier 설정 { "singleQuote": true, "sem..

22-23/22-23 리액트 스타터 3 2022. 12. 22. 10:00

11장의 키워드 #RequestMapping #GetMapping #PostMapping #커맨드 객체 #리다이렉트 프로젝트 준비 pom.xml 작성, 코드 복사 DB 연동을 위한 모듈 설정 DataSource, 트랜잭션 설정 스프링 MVC 기본 설정 파일 요청 매핑 애노테이션을 이용한 경로 매핑 ❓웹 어플리케이션 개발 특정 요청 URL을 처리할 코드 작성 ⇒ 컨트롤러(Controller) 처리 결과를 HTML 형식으로 응답하는 코드 ⇒ 뷰(View) ❓요청 매핑 애노테이션 @RequestMapping, @GetMapping, @PostMapping 요청 애노테이션을 사용한 컨트롤러 클래스를 이용하여 URL을 처리할 코드를 구현한다. @Controller public class HelloControlle..

22-23/22-23 Spring 2 2022. 12. 22. 10:00

우리는 이전의 단원들을 통해 리액트의 기본기부터 컴포넌트를 스타일링하는 방법까지를 배웠습니다. 지금까지 배운 내용을 활용하여 프런트 엔드를 공부할 때 자주 구현하는 일정관리 애플리케이션을 만들어보겠습니다. 이번 실습은 다음과 같은 순서로 진행됩니다. 프로젝트 준비하기 UI 구성하기 기능 구현하기 I. 프로젝트 준비하기 1. 프로젝트 생성 및 필요한 라이브러리 설치 일정 관리 애플리케이션을 만들기위해 터미널에 create-react-app을 사용한 명령어를 입력하겠습니다. 또한 프로젝트가 생성되면 todo-app 디렉터리로 이동하여 애플리케이션을 만들 때 필요한 라이브러리를 설치하세요. $ yarn create react-app todo-app $ cd todo-app $ yarn add node-sass..

22-23/22-23 리액트 스타터 2 2022. 12. 22. 10:00

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. ❗ JSON JavaScript Object Notation의 약자인 JSON은 간단한 형식을 갖는 문자열로 데이터 교환에 사용된다. { "name" : "코너" "age" : 2 "related" : [ "덕성여대", "컴퓨터공학과" ] } 중괄호로 객체 표현 이름, 값의 쌍 값에는 문자열, 숫자, 불린, null, 배열, 다른 객체가 올 수 있음 ❗ Jackson Jackson은 자바 객체와 JSON 형식 문자열 간 변환을 처리하는 라이브러리 com.fasterxml.jackson.core jackson-databind 2.9.4 com.fasterxml.jackson.datatype jackso..

22-23/22-23 Spring 1 2022. 12. 8. 10:10

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. ❗ 간단한 웹 어플리케이션의 구성 요소 프론트 서블릿 컨트롤러 + 뷰 서비스 DAO 프론트 서블릿은 웹 브라우저의 모든 요청을 받는 창구 역할로, 요청을 분석해서 알맞은 컨트롤러에 전달한다. 스프링 MVC에서는 DispatcherServlet이 프론트 서블릿의 역할을 수행한다. 컨트롤러는 어플리케이션이 제공하는 기능과 사용자 요청을 연결하는 매개체로 기능 제공을 위한 로직을 직접 수행하지는 않고 서비스에게 그 처리를 위임한다. 서비스는 기능의 로직을 구현한다. 서비스는 DB연동이 필요하면 DAO(Data Access Object)를 사용한다. DAO는 DB와 웹 어플리케이션 간에 데이터를 이동시켜 주..

22-23/22-23 Spring 1 2022. 12. 8. 10:09

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. 13장에서 작성한 예제를 이어서 작성합니다. ❗ 회원가입 날짜로 회원 검색 📌selectByRegdate MemberDao에 회원 가입 일자를 기준으로 검색하는 기능, selectByRegdate 추가 public List selectByRegdate(LocalDateTime from, LocalDateTime to) { // from 부터 to 사이에 있는 REGDATE 값을 갖는 Member 목록 반환 List results = jdbcTemplate.query( "select * from MEMBER where REGDATE between ? and ? " + "order by REGDATE d..

22-23/22-23 Spring 1 2022. 12. 8. 10:09

9.1 가장 흔한 방식, 일반 CSS CSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것입니다. 이름을 지을 때 특별한 규칙을 사용하거나 CSS Selector를 활용할 수 있습니다. 9.1.1 이름 짓는 규칙 컴포넌트 이름-클래스 형태로 지어집니다. (ex: App-header) BEM 네이밍은 CSS 방법론 중 하나로, 이름을 지을 때 일종의 규칙을 준수하여 해당 클래스가 어디에서 어떤 용도로 사용되는지 명확하게 작성하는 방식입니다. (ex: .card__title-primary) .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-item..

22-23/22-23 리액트 스타터 3 2022. 12. 1. 10:24

해당 포스트는 초보 웹 개발자를 위한 스프링 5 프로그래밍 입문 [최범균 저] 책 내용을 참고하였습니다. ❗ HttpSession 로그인 상태를 유지하기 위해서는 HttpSession을 이용하거나 쿠키를 이용하면 된다. HttpSession을 사용하려면 다음의 두 방법 중 하나를 선택하면 된다. 요청 매핑 애노테이션 적용 메서드에 HttpSession 파라미터를 추가한다. 요청 매핑 애노테이션 적용 메서드에 HttpServletRequest 파라미터를 추가하고 HttpServletReuqest를 이용해서 HttpSession을 구현한다. 📌HttpSession 파라미터 추가 @PostMapping public String(loginCommand loginCommand, Errors errors, Http..

22-23/22-23 Spring 1 2022. 12. 1. 10:01

10장의 키워드 #DispatcherServlet #HandlerMapping #HandlerAdapter #ViewResolver 1. 스프링 MVC 핵심 구성 요소 : 스프링 빈으로 등록 컨트롤러, JSP : 개발자가 직접 구현 DispatcherServlet은 모든 연결을 담당 웹 브라우저로부터 요청이 들어오면 DispatcherServlet이 전달 받는다. (일종의 창구 역할) 요청을 처리하기 위한 컨트롤러 객체를 HandlerMapping에게 검색해달라 요청한다. 2-1. HandlerMapping이 이를 처리할 컨트롤러 빈 객체를 DispatcherServlet에게 리턴한다. (클라이언트 요청 경로 이용) DispathcerServlet은 컨트롤러 객체를 처리할 수 있는 HandlerAdapt..

22-23/22-23 Spring 2 2022. 12. 1. 10:00

컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있지만, 이번에 다룰 스타일링 방식은 다음과 같다. 일반 CSS : 컴포넌트를 스타일링하는 가장 기본적인 방식이다. Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드 작성을 쉽게 작성할 수 있도록 해준다. CSS Module : 스타일 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해 주는 옵션이다. styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 적용된 컴포넌트를 제작할 수 있다. I. 가장 흔한 방식, 일반 CSS css를 작성할 때 가장 중요한 점은 CSS 클래..

22-23/22-23 리액트 스타터 2 2022. 12. 1. 10:00