IRRO
[ Spring Boot ] 롬복 활용하기
롬복을 활용해 늘어진 코드를 간소화하고 printIn() 문을 로깅으로 변환한다. 🤍 롬복 추가하기 롬복 : 코드를 간소화해주는 라이브러리, 여러 필수 코드가 반복되는 것을 최소화할 수 있고 println()문을 로깅 기능을 대체 할 수 있다. 로깅 : 프로그램의 수행 과정을 기록으로 남기는 것. build.gradle 파일에 롬복을 추가한다. compileOnly 'org.projectlombok:lombok' annotationProcessor 'org.projectlombok:lombok' dependencies {} 블록 안에는 프로젝트를 생성할 때 추가한 도구들이 적혀 있다. 웹 서비스를 만들기 위한 web mustache,jpa,h2database를 확인할 수 있다. 롬복도 여기에 추가한다. ..
[ Spring Boot ] 게시판 CRUD 만들기 : DB 데이터 조회하기
앞에서 폼 데이터를 DB에 저장했다. 폼 데이터를 DTO로 받아 엔티티로 변환한 후 리파지터리를 이용해 DB에 저장하는 과정이였다. 테이블에는 데이터가 한 행씩 생성(Create)된다. 이렇게 채워진 데이터는 조회(Read),수정(Update),삭제(Delete) 할 수 있다. CRUD 조작은 SQL이라는 언어로 수행한다. 대표적인 SQL 문법으로는 데이터를 생성할 때 사용하는 INSERT 문, 조회할 때 사용하는 SELECT문, 수정할 때 사용하는 UPDATE문, 삭제할 때 사용하는 DELETE문이 있다. 📌 H2 DB 접속하기 src > main > resources > application.properties server.servlet.encoding.force-response=true #H2 DB..
[ Spring Boot ] 게시판 CRUD 만들기 : DTO를 데이터베이스에 저장하기
받은 데이터를 데이터베이스에 저장해보자 📌 데이터베이스와 JPA 데이터베이스 DB 데이터를 관리하는 창고 데이터를 행과 열로 구성된 테이블에 저장해 관리한다. DB 프로그램 : MySQL, 오라클, 마리아DB, H2 DB 등 SQL ( Structured Query Language ) 언어를 사용한다. 자바로 DB에 명령을 어떻게 내리나? 자바 언어 ( JPA : Java Persistence API ) 로 DB에 명령을 내린다. 데이터를 객체 지향적으로 관리할 수 있게 해 준다. 🤍 JPA의 핵심 도구 엔티티 : 자바 객체를 DB가 이해할 수 있게 만든 것, 이를 기반으로 테이블이 만들어진다. 리파지터리 : 엔티티가 DB 속 테이블에 저장 및 관리될 수 있게 하는 인터페이스이다. DTO로 받은 폼 데이..
[ Spring Boot ] 게시판 CRUD 만들기 : 폼 데이터 (form data)
CRUD : 게시글을 생성 (Create) 조회 (Read) 수정 (Update) 삭제 (Delete) 하는 것. 📌 폼 데이터란? form data HTML 요소인 태그에 실려 전송되는 데이터 태그에 실어 보낸 데이터는 서버의 컨트롤러가 객체 (DTO : Data Transfer Object) 에 담아 받는다. DTO로 받은 데이터는 최종적으로 데이터베이스에 저장된다. 1. 폼 데이터를 DTO로 받기 new.mustache {{>layouts/header}} Submit {{>layouts/footer}} 2. 컨트롤러 만들기 ArticleController package com.example.firstproject.controller; import org.springframework.stereotyp..
[ Spring Boot ] 뷰 템플릿 페이지에 레이아웃 적용
레이아웃 : 화면에 요소를 배치하는 일 헤더 - 푸터 레이아웃 : 상단의 헤더 영역에는 사이트 안내를 위한 내비게이션, 하단의 푸터 영역에는 사이트 정보, 두 영역 사이에는 핵심 내용인 콘텐츠를 배치. 부트스트랩 : 웹 페이지를 쉽게 만들 수 있도록 각종 레이아웃, 버튼, 입력창 등 디자인을 미리 작성해 놓은 코드 모음. 미리 작성된 html,css,자바스크립트 코드를 가져다 사용. 부트스트랩 v5.0 사용. Navbar Home Link Dropdown Action Another action Something else here Disabled Search {{username}}님, 반갑습니다. ⓒ CloudStudyin | Privacy | Terms 📌 헤더-푸터를 템플릿화하기 템플릿화 : 코드를 하..
[ Spring Boot ] MVC의 역할과 실행 흐름
웹 서비스 : 클라이언트의 요청에 대한 서버의 응답으로 동작. 스프링 부트 : 서버의 역할 서버 : 모델, 뷰, 컨트롤러가 유기적으로 역할을 분담해 클라이언트의 요청을 처리한다. 컨트롤러가 클라이언트의 요청을 받고, 뷰가 최종 페이지를 만들고, 모델이 최종 페이지에 쓰일 데이터를 뷰에 전달한다. 📌 실행 흐름 🤍 /hi 페이지_컨트롤러 동작 컨트롤러임을 선언 클라이언트로부터 "/hi" 요청을 받아 접수 "/hi" 요청을 받음과 동시에 메서드 수행 뷰 템플릿 페이지에서 사용할 변수를 등록하기 위해 모델 객체를 매게변수로 가져옴 모델에서 사용할 변수를 등록 메서드를 수행한 결과로 파일을 반환 package com.example.firstproject.controller; import org.springfra..
[ Spring Boot ] MVC 패턴 이해와 실습
📌 뷰 템플릿과 MVC 패턴 1. 뷰 템플릿이란? View Template : 화면을 담당하는 기술, 웹 페이지(View)를 하나의 틀(Template)로 만들고 여기에 변수를 삽입해 서로 다른 페이지로 보여준다. ex ) Mustache(머스테치)가 뷰 템플릿을 만드는 도구이다. 머스테치 외의 템플릿 엔진으로는 Thymeleaf, JSP 등이 있다. 2. MVC 패턴이란? 화면을 담당하는 뷰 템플릿을 '뷰'라고 정의한다면 뷰는 컨트롤러와 모델이라는 두 동료가 있다. 컨트롤러(Controller) : 클라이언트의 요청에 따라 서버에서 이를 처리하는 역할 모델(Model) : 데이터를 관리하는 역할 웹 페이지를 화면에 보여주고 (View), 클라이언트의 요청을 받아 처리하고 (Controlelr), 데이터..
[ Spring Boot ] 스프링 부트란?
📌 스프링과 스프링 부트 스프링 부트는 스프링 프레임워크 ( Spring framework ) 를 개선한 것이다. 대표적인 개선 사항 개발 환경 설정을 간소화 : 스프링은 버전에 따라 동작하는 외부 라이브러리를 일일이 찾아 연동해야 한다. 하지만 스프링 부트는 미리 설정된 스타터 프라젝트로 외부 라이브러리를 최적화해 제공하므로 사용자가 직접 연동할 필요가 없다. 웹 애플리케이션 서버를 내장 : 스프링 부트는 내부에 웹 애플리케이션 서버 ( WAS, Web Application Server )인 톰캣을 가지고 있다. 따라서 웹 서비스를 jar 파일로 간편하게 배포할 수 있다. 스프링 부트 버전 접미사 스프링 부트 뒤에 표기된 접미사 : 소프트웨어 생명주기를 의미 일반적으로 GA 또는 아무런 접미사가 없는 ..
[ JPA ] JPA란?
객체를 자바 컬렉션에 저장 하듯이 DB에 저장할 수는 없을까? 🤍 JPA - Java Persistence API - 자바 진영에서 ORM 기술 표준으로 사용되는 인터페이스의 모험 - 구현된 클래스와 매핑을 해주기 위해 사용되는 프레임워크 - JPA를 구현한 대표적인 오픈소스 -> Hivernate ✉ ORM - Object - Relational - Mapping ( 객체 관계 매핑 ) - 객체는 객체대로 설계, 관계형 데이터베이스는 관계형 데이터베이스대로 설계 - ORM 프레임워크가 중간에서 매핑 JPA는 애플리케이션과 JDBC 사이에서 동작한다. 🤍 JPA 동작 - 저장 🤍 JPA 동작 - 저장 🤍 JPA를 사용하는 이유 - SQL 중심적인 개발에서 객체 중심으로 개발 - 생산성 - 유지보수 : 필..
[ React ] VSCode 개발 환경 설정하기
VSCode에서 타입스크립트로 리액트 프로젝트를 개발할 때 몇 가지 환경을 설정해주면 좀 더 편리하게 개발할 수 있다. 프로그램명 용도 운영체제 기타 프리티어 코드 정렬 윈도우/macOS 권장 테일윈드CSS CSS 스타일링 필수 헤드윈드 테일윈드CSS 클래스 분류기 선택 포스트 CSS CSS 구문 강조 표시 선택 🤍 편집기 설정 파일 & 설치 및 설정하기 VSCode는 설정 화면에서 바꾼 내용을 settings.json 파일에 저장해 놓는다. Ctrl + Shift + P 를 눌러 나타난 메뉴에서 "User Settings"를 입력하고 Open User Settings (JSON) 를 선택한다. 해당하는 키와 값을 볼 수 있다. ✉ 프리티어 설치 및 설정 프리티어 Prettier 코드에서 띄어쓰기, 들여..
[ React ] 윈도우에서 리액트 개발 환경 만들기
🤍 설치할 개발 도구 프로그램명 용도 운영체제 기타 Node.js 웹 서버 개발 플랫폼 윈도우/macOS 필수 VSCode 소스 코드 편집기 윈도우/macOS 권장 scoop 윈도우용 설치 프로그램 윈도우 권장 Homebrew macOS용 설치 프로그램 macOS 권장 touch 파일 관리 유틸리티 윈도우 선택 Chrome 웹 브라우저 윈도우/macOS 권장 더보기 https://product.kyobobook.co.kr/detail/S000200550965 🤍 scoop 설치하기 scoop : 명령 줄에서 프로그램을 쉽게 설치하게 해주는 프로그램. scoop update * 명령 한 번이면 scoop으로 설치한 모든 프로그램을 한꺼번에 업데이트할 수 있다. scoop으로 설치할 프로그램의 위치 (C:\..
