[Spring Boot 웹개발 입문]3주차: 웹개발(프론트엔드, 백엔드)의 전반적 이해
코드프레소 java 웹개발 체험단 3주차 [spring boot 웹개발 입문] 강의에서는 프론트엔드와 백엔드의 전반적인 이해, spring boot를 활용한 서버 개발을 배웠다. 저번 학기 인턴십에서 클라이언트 개발을 하며 서버와 연결하는 작업을 할 때 깊게 이해하지 못했던 rest api, GET, POST, Json 등의 개념을 이번 강의를 통해 확실히 알게 되어 유익했으며 인턴십에서 서버팀과 협업할때 데이터를 주고받은 과정을 생각하며 강의를 재밌게 들을 수 있었다. 실무에서는 클라이언트 개발이 서버와 연결되는 작업이 학교에서 하는 프로젝트보다 많은데, 이를 취업 전에 배울 수 있어 유익하였다. 또한 2학년때 수강한 웹프로그래밍 과목에서 배운 웹개발과 프론트엔드를 이번 기회를 통해 전반적으로 복습하고 스프링을 이용해 서버 쪽도 다루어볼 수 있어 많은 도움이 되었다. 강의를 들으며 내용을 정리해보았다.
1. Spring Framework
- 대규모 서비스 개발, 방대한 프로젝트가 가능, 끊임없는 변화 가능
- 러닝커브가 높고 설정이 복잡함
- Spring Boot: spring프레임워크를 기반으로 하되 사용을 하기 간편하게 만든 것. 강의에서 사용될 것.
2. 실습환경 구성
1) jdk 11설치
https://www.oracle.com/kr/java/technologies/javase/jdk11-archive-downloads.html
2) intelliJ 설치
https://www.jetbrains.com/ko-kr/idea/download/#section=windows
다운로드 IntelliJ IDEA: 우수성과 인체 공학이 담긴 JetBrains Java IDE
www.jetbrains.com
3) postman 설치
https://www.postman.com/downloads/
Download Postman | Get Started for Free
Try Postman for free! Join 17 million developers who rely on Postman, the collaboration platform for API development. Create better APIs—faster.
www.postman.com
[나의 첫 spring boot 어플리케이션]
스프링 부트 프로젝트를 위 사이트에서 만들고
만들어진 압축파일을 다운 및 압축 해제한 후
intelli j에서 파일을 연다
localhost:8080에서 실행 결과 확인
3. web과 http의 이해
[IP와 PORT의 개념]
클라이언트가 서버의 ip주소와 port주소로 request(요청)하면 서버에서 response(응답)하여 화면에 보여지게 한다.
4. HTML
: 마크업 language , 부가정보인 Tag라는 개념을 사용함
실제 컨텐츠는 body태그에 들어감
[태그의 다양한 종류]
<h></h> : 제목, h뒤의 1~6숫자에 따라 크기가 달라짐
<p></p> : 문단
<br/> : 줄바꿈
<b></b> : bold처리
<strong></strong> : bold처리 중요한 text 표시 - 음성 강조 등 가능, 웹 접근성 높음
<i></i> : italic체
<em></em> : italic체 중요한 text 표시 - 음성 강조 등 가능, 웹 접근성 높음
<u></u> : under line처리
<img></img> : 이미지 삽입 - attribute존재 => src: 이미지의 주소정보/alt: 이미지를 표시할 수 없을 때 사용되는 대체 텍스트
사용 예시) <img src="이미지 주소" alt="이미지가 안보일때 텍스트">
<a></a> : link태그 = 연결하기
하이퍼 텍스트의 본질인 문서 간 연결을 생성함★
href attribute = 링크의 주소
사용 예시) <a href="이동할 주소">이곳을 누르면 사이트로 이동합니다.</a>
table태그
LIST태그
<ul style="list-style-type:square;">
<ol type="I">
로 스타일 지정도 가능
FORM태그
각종 INPUT타입을 지정하여 입력 값을 백엔드로 넘겨줄 수 있음. 중요한 태그
5. CSS 기초
ID지정
id를 지정하여 css를 적용하는 방법도 있음
class로 지정하기도 가능
id, class, tag를 이용하여 html특정 영역 지정이 가능하고 css적용, 크롤링 등을 쉽게 할 수 있다.
6. 계층형 아키텍쳐의 이해
- 소프트웨어 아키텍쳐
: 소프트웨어의 구조를 정의한것으로, 소프트웨어를 구성하는 주요 요소들과 관계를 정의한 것. 건물의 설계도
[소프트웨어 아키텍쳐/디자인패턴]
- 웹 서비스 개발에는 주로 계층형 아키텍쳐 패턴이 사용됨
* 게임개발에는 싱글톤, 유한상태머신(fsm) 등의 디자인패턴이 있음
- sw의 서로 다른 역할을 하는 3~4개 계층(layer로 구분)
1) presentation layer
2) application layer
3) business layer
4) data access layer
-계층 간에 호출을 하고 데이터를 주고받으며 협력하며 전체 웹 서비스를 구성
7. spring controller의 이해
1) spring controller
- 계층형 아키텍쳐의 presentation layer에 해당됨
@RestController는 메소드나 문자열, json등의 데이터를 반환하고
@Controller는 return "hello" 를 했을 때 hello이름의 html파일과 같은 view를 응답함
[spring controller 실습하기]
Generate 해서 압축파일 다운 및 압축풀기한 후
intelliJ에서 파일 open
8. Request Mapping 과 URI
- @RequestMapping이 붙은 메소드는 cient의 특정 요청이 왔을 때 Spring Framework에 의해 호출 됨
uri
=uniform Resource Identifuter
- url과 비슷한 개념, 특정 자원에 접근하기 위한 이름 또는 주소를 말한다.
-Spring Controller의 메소드들은 URI에 따라 호출이 결정 됨.
9. HTTP API의 개념
- API란?
: Application Programming Iterface
컴퓨터 간의 정보를 공유하기 위한 방법
- 함수나 메소드를 호출하는 형식의 api, http등의 기술로 네트워크를 통해 원격자원을 호출하는 api도 있음
REST API : 웹상에서 효율적으로 쓰기 위한 것
localhost:8080/user/paid ==> I'm a paid user
localhost:8080/user/enterprise ==> I'm a enterprise user
10. request 파라미터의 이해
- 서버에 요청할 때 추가적인 data가 필요하고, 이를 request 파라미터라고 한다.
- query string, path parameter의 두 종류 파라미터가 있고 spring framework는 request 파라미터를 메소드 파라미터로 저장
1) query string
- uri와 파라미터의 영역을 구분하여 사용한다.
uri에 이어지는 key=value형식으로 사용
ex) https://www.google.com/search?q=codepresso&sourceid=chrome
https://best-study-day.tistory.com/manage/newpost/?type=post&returnURL=%2Fmanage%2Fposts%2F# 이런식이다.
2) path parameter
- uri의 일부로 파라미터의 값을 사용하는 방식
ex) https://best-study-day.tistory.com/8
- request mapping 파라미터와 메소드 파라미터 구분 잘하기
- 들어올수도 있고 안들어올수도 있는 선택적 데이터에는 query string을 주로 사용
11. Response 데이터와 Json포맷의 이해
response 데이터 = request(요청)을 받았을 때 서버에서 응답받는 문자열, 이미지, 영상, json등의 데이터
@controller어노테이션이 붙은 클래스에서는 html파일을 response하고,
@restController어노테이션이 붙은 클래스에서는 클래스 안의 값 자체가 응답 됨
-> 클래스 안의 문자열 뿐만 아니라 get메소드에서 더 복잡한 객체를 return하는 경우도 있음
객체를 restcontroller로 반환한 결과가 json데이터임
저번학기 인턴십에서 json파싱했을 때 사용된거
- json = javaScript Object Notation
- 데이터를 교환하는데 기존의 방법(xml)보다 가볍고 사람이 이해하기 쉬움
- json 문법은 객체가 가장 기본 단위로, "key":value 데이터를 가진다.
객체의 value에 문자열, 숫자, boolean, null, 또 다른 json 객체가 올수도 있고, json arry로 올수도 있음
- json 배열은 순서가 있는 데이터의 나열이며 다양한 데이터 타입을 포함할 수 있다.
12. HTTP 메소드의 이해
HTTP 메소드란 HTTP 규약 중 하나로, 특정 자원에 대해 수행하는 행동의 종류를 명시함
=> 자원의 생성, 조회, 수정, 삭제, 일부 수정 등
-> HTTP메소드를 사용하면 단일 URI로 다양한 행동을 정의 가능하다.
- 대표적 HTTP메소드에는
GET(자원의 조회), POST(자원의 생성), PUT(자원의 수정), DELETE(자원의 삭제)가 있음
스프링이 요청하는 정보로 HTTP메소드를 정하고 그를 통해 JAVA메소드를 호출한다.
스프링에서는 RequestMapping의 요소로 @GetMapping , @PostMapping 등으로 간소화된 annotation이 마련되어있음
13. Request Body
- request를 할때는 query, parameter의 방식이 있는데 더 큰 것을 request하기 위해서는 body가 필요함
- 일반적으로 데이터를 저장 및 수정하는 post, put의 메소드에서 사용됨. get, delete는 query string, path param이 주로 사용됨
- request body에 다양한 포맷의 데이터 전송 가능 - > 주로 json데이터 형식이 사용됨
- client 에서는 json데이터를 전송하고, spring에서는 json 데이터를 java 객체 파라미터로 저장
request body 어노테이션을 활용
[REST API 문서의 활용]
- API는 정보를 주고 받기 위한 약속으로, API를 사용하려면 사용방법을 알아야하므로 API문서를 통해 API를 사용하는 방법을 알아야 한다.
- 주로 프론트엔드 개발자가 약속된 REST API문서에 의존하여 프론트엔드를 개발한다.
- REST API의 설명, URI, HTTP Method, Request 파라미터(필수/선택), Response 데이터(필수/ 선택), 에러코드 및 대응방법, 호출예시 등의 정보가 REST API에 담겨있어야 함.
13. Spring 서비스 계층의 이해
14. spring bean 과 의존성 주입
런타임시에 외부에서 결정됨
spring에 의해 객체가 생성되도록 @service, @bean등의 annotation을 설정하고
사용할 객체를 멤버변수와 생성자에 추가한 후
객체를 생성하는데, 이때 new 키워드를 사용하지 않는다. 스프링 프레임워크가 대신 객체를 생성해줄것이기 때문.
- 모든 사진의 출처: 코드프레소
- 코드프레소 Java 웹 개발 체험단 활동 중
- 코드프레소 [Spring Boot 웹개발 입문]강의 수강 중
- 코드프레소 URL: https://www.codepresso.kr/