공부 기록

https://app.wonchanlee.click React App app.wonchanlee.click 한 달 조금 넘게 이 책을 잡아오면서 씨름했던 노력들이 글로 남아있다. 결국 이 앱을 완성하니 뿌듯했다. 적었던 글들을 보며 부족한 부분을 공부해야겠다.

배운 내용 CSR 본문 요약 프론트엔드에도 인증을 위해 로그인, 회원가입 그리고 리디렉션을 구현해주어야 한다. 세부적인 구현 설명은 아래와 같다. 로그인, 회원가입 페이지를 구현한다. 백엔드에 HTTP 요청을 보냈을 때 403(forbidden)이 리턴되면 로그인 페이지로 리디렉트(redirect)한다. 백엔드 서비스로부터 받은 토큰을 로컬 스토리지에 저장하고 매 요청마다 해더에 Bearer 토큰으로 지정한다. react-router-dom 라이브러리는 CSR(Client-Side Routing)을 돕는다. 모든 라우팅은 클라이언트 코드 즉, 자바스크립트가 해결한다. 우리의 경우 그 자바스크립트가 리엑트다. 브라우저의 '/' 경로에 처음 접근했을 때 필요한 모든 리소스(html, js, css)가 리턴된..

배운 내용 EC2 로드 밸런서 오토 스케일링 그룹(ASG) VPC 일라스틱 빈스톡 본문 개념 EC2(Elastic Compute Cloud)는 서버 컴퓨터다. 로컬 환경에서 애플리케이션을 실행한 것 처럼 EC2에서 애플리케이션을 실행할 수 있다. EC2에서 애플리케이션을 실행하는 경우 EC2의 IP나 EC2가 제공하는 public domain으로 앱에 접근할 수 있다. 로드 밸런서는 EC2 인스턴스의 스케일을 키울 수 있도록 트레픽을 여러 인스턴스로 분배한다. VIP(Virtual IP)라는 공유 IP로 GET 요청이 오면 로드 밸런서에 연결된 인스턴스들에 트래픽을 균형있게 분배한다. 오토 스케일링 그룹(ASG)는 트래픽의 변동에 따라 자동으로 로드 밸런서에 연결된 인스턴스를 Scale in(서버 증설)..

애플리케이션을 배포하려면 어떤 형태로든 인증 메커니즘을 구현해야 한다. 이 장에서는 REST API 인증에 대해 직관적으로 알아볼 것이다. 인증: 사용자가 누구인지? 인가: 사용자 별로 할 수 있는 자원(resource)를 정의한다. 인가의 예시) 인증된 사용자(누구인지 식별된 사용자)가 데이터 A 또는 API(기능) A를 사용할 수 있는가? 만약 사용할 수 있다면 이는 인가된(authorized) 사용자이다. 인증과 인가를 구현하려면 적합한 아키텍처 디자인을 선택해야 한다. 스케일(서비스 사용자 수를 고려한 서비스 크기)에 따른 기존 인증 방식(Basic, 토큰 등의 인증 스탠다드)의 한계와 JSON Web Token을 이용해 해결하는 방법을 알아본다. 또한 스프링 시큐리티, Bearer 인증, JSO..

브라우저는 서버에 있는 자원을 사용자의 컴퓨터로 다운로드한 후 브라우저에서 실행시킨다. js 라이브러리인 React.js를 이용해 프론트엔드를 개발한다. React를 사용하려면 Node.js를 이용해야 한다. Node.js는 브라우저 밖에서도 자바스크립트를 컴파일하고 실행하도록 돕는다. Node.js는 구글 크롬의 V8 자바스크립트 엔진을 실행한다. 우리는 자바스크립트로 된 node 서버를 이용해 프론트엔드 서버를 개발한다. 우리의 프론트엔드 서버는 요청이 왔을 때 HTML, JS, CSS를 리턴한다. NPM NPM(Node Package Manager)은 Node.js의 패키지 관리 시스템이다. gralde이 maven repository에서 라이브러리를 다운받는 것과 비슷하게 npmjs(https:/..

의존성 주입은 한 클래스가 의존하는 다른 클래스를 주입하는 것이다. 생성자나 setter를 만들고, 인자로 객체를 전달한다. 유닛 테스트(클레스의 메서드 등의 동작 테스트)를 위해 Mock 클래스(테스트를 위한 기능만 가진)를 만들어 사용할 수 있다는 장점도 있다. 의존성 주입의 구현은 간단하지만, 주입할 클래스가 많아지면 객체를 생성할 때 코드가 복잡해질 수 있다. 이를 해결하기 위해 의존성 주입 컨테이너(Dependency Inject Container)를 사용할 수 있고, 컨테이너 중 하나가 바로 스프링 프레임워크이다. 스프링 프레임워크를 사용하면 어노테이션, XML, Java 코드를 이용해 오브젝트(bean이라고 부름) 간의 의존성을 명시할 수 있다. 그렇게 하면 앱 시작 시 스프링 프레임워크의 ..

프론트엔드 클라이언트를 반환하는 서버가 있다. 이 서버는 React.js 애플리케이션을 반환한다. 스프링 부트를 통해 백엔드 애플리케이션인 REST API를 구현한다. 이 API는 프론트엔드 애플리케이션이 사용한다. 프론트엔드와 백엔드를 분리하는 이유는 모바일 앱으로 만들 때 별도의 백엔드 개발 없이 이 REST API를 사용할 수 있다. 즉, 마이크로서비스 아키텍처로 서비스를 확장하는 데 용이하다. HTTP: 클라이언트-서버 간의 통신 방법 HTTP request로 브라우저에 URL을 입력하면, URL에 해당하는 서버로 HTTP GET 요청을 전송한다. 그 결과인 HTTP response를 브라우저에 렌더링(화면에 디스플레이)한다. HTTP request 요청에는 GET, POST, PUT, DELET..