React.js, 스프링 부트, AWS로 배우는 웹 개발 101
1.1주차 정리
통신을 하기 위한 규약이라는 뜻으로 애플리케이션 레벨의 네트워크 프로토콜이다. 사용자는 브라우저라는 클라이언트를 통해 서버에 HTTP요청을 전송할 수 있다. 서버는 그 요청의 결과인 HTTP응답을 브라우저에 렌더링(화면에 디스플레이)한다.Request / Respons
2.2.2.1 레이어드 아키텍처
https://velog.velcdn.com/images/junrain2/post/d8d6b8cb-7686-4ae1-8df6-069f876aba34/image.png레이어드 아키텍처 패턴은 애플리케이션을 구성하는 요소들을 수평으로 나눠 관리하는 것이다.레이어로
3.2.2.2 모델, 엔티티, DTO
https://velog.velcdn.com/images/junrain2/post/db6c59ea-e74c-4aeb-8adc-ff67b2f373e0/image.png1\. 일을 하는 클래스 즉 기능을 수행하는 클래스. 일을 하는 클래스는 컨트롤러, 서비스, 퍼
4.2.2.3 REST API
REST(Representational State Transfer)는 아키텍처 스타일이다.아키텍처 스타일은 아키텍처 패턴과는 조금 다른데, 패턴은 어떤 반복되는 문제 상황을 해결하기 위한 도구이고 스타일은 반복되는 아키텍처 디자인을 의미한다. REST 아키텍처 스타일은
5.2.2.4 컨트롤러 레이어 : 스프링 REST API 컨트롤러
HTTP는 메서드와 URI를 이용해 서버에 HTTP요청을 보낼 수있다. 서버는 이 요청을 받은 후 어떻게 처리 해야 할까?https://velog.velcdn.com/images/junrain2/post/a95c5f2a-5fba-454b-8362-6262649
6.2.2.5 서비스 레이어 : 비즈니스 로직
ㅇ
7.2.2.6 퍼시스턴스 레이어 : 스프링 데이터 JPA
하나의 엔티티 인스턴스는 데이터베이스 테이블의 한 행에 해당한다. 엔티티 클래스는 클래스 그 자체가 테이블을 정의해야 한다. 즉, ORM이 엔티티를 보고 어떤 테이블의 어떤 필드에 매핑해야 하는지 알 수 있어야 한다는 뜻이다.자바 클래스를 엔티티로 정의할 때 주의해야
8.2.3.1 Create Todo 구현
퍼시스턴스 -> 서비스 -> 컨트롤러 순으로 구현한다.용도에 따라 크게 info, debug, warn, error으로 나누고 이를 로그 레벨이라고 부른다.엔티티 저장을 위해 JpaRepository가 제공하는 save메소드를 사용하고, 새 Todo 리스트를 반환하기
9.2.3.2 Retrieve Todo 구현
createTodo에서 했던 것처럼 새 Todo 리스트 반환을 위해 findByUserId() 메서드를 사용한다.Repository의 findByUserId()를 이용해 TodoService에 findAll이라는 메서드 작성TodoController에 새 GET 메서드
10.2.3.3 Update Todo 구현
TodoRepository를 사용한다. 업데이트를 위해 save(), findByUserId() 메서드를 사용한다.TodoService에 update() 메서드를 작성한다.TodoController에 새 PUT 메서드를 만들어주고 메서드 내부를 서비스 코드를 이용해 작
11.2.3.4 Delete Todo 구현
TodoRepository를 사용한다. 업데이트를 하기 위해서 delete(), findByUserId() 메서드를 사용한다.TodoService에 delete() 메서드를 작성한다.TodoController에 새 DELETE 메서드를 만들어 주고 메서드 내부를 서비스
12.3.1.5 브라우저의 작동 원리
브라우저란 웹 페이지, 이미지, 비디오 등의 콘텐츠를 수신, 전송 및 표현하는 소프트웨어다. 우리가 인터넷에 접속하기 위해 사용하는 크롬, 사파리, 엣지, 파이어폭스 등이 바로 브라우저다. 브라우저는 클라이언트/서버 모델로써 클라이언트는 웹 서버에 접속하고 정보를 요청
13.3.1.6 React.js
SPA란 싱글 페이지 애플리케이션의 약자로, 말 그대로 한번 웹 페이지를 로딩하면 유저가 임의로 새로고침하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션을 의미한다. App 컴포넌트https://velog.velcdn.com/images/junsu122
14.3.3.1 CORS
먼저 프론트엔드와 백엔드를 연결하기 위해서 아래와 구현하고 실행시킨다.localhost:3000으로 들어가서 개발자 툴의 콘솔 창을 확인하면 아래와 같은 에러가 나온다.이 이유는 보안을 위한 CORS 헤더 Policy를 위반했기 때문이다.CORS란?처음 리소스를 제공한
15.3.3.2 Effect Hook을 이용한 Todo 리스트 초기화
CORS 에러는 해결했지만 todo가 끝없이 나열된다.그 이유는리액트는 컴포넌트의 상태가 변하게 되면 렌더링을 한다.fetch를 사용한 API 호출은 비동기 호출이라서 응답이 올 때까지 기다리지 않는다.then()으로 이어진 함수가 차례차례 실행되고, setItem을
16.3.3.3 fetch
자바스크립트 Promise자바스크립트 비동기 처리와 콜백 함수프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다. 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미한다.자바스크립트
17.4.1 Rest API 인증 기법
모든 HTTP 요청에 아이디와 비밀번호를 같이 보내는 방법HTTP 요청 헤더의 Authorization 부분에 아이디와 비밀번호를 콜론으로 이어 붙인 후 인코딩한 문자열을 함께 보낸다.서버는 디코딩을 통해 아이디와 비밀번호를 찾아낸 후, DB나 인증 서버의 레코드와 비
18.4.2 User 레이어 구현
구현 UserEntity 구현 UserRepository 구현 UserService 구현 UserDTO/UserController 구현 
버전 문제로 compile 대신에 implementation을 사용함.implementation과 api, compile의 차이유저의 정보를 받아 JWT를 생성해주는 일을 한다.token 필드가 반환된다!!토큰 인증을 위해 컨트롤러의 메서드의 첫 부분마다 인증 코드를