My StudySpace

참고 블로그: https://evan-moon.github.io/2020/05/21/about-cors/#cors%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%8F%99%EC%9E%91%ED%95%98%EB%82%98%EC%9A%94 CORS ( Cross-Origin Resource Sharing 크로스-오리진 리소스 셰어링 )애플리케이션을 통합하면서 우리는 CORS 문제를 맞닥뜨리게 된다.이 문제는 백엔드에서 해결해야 한다. componentDidMountTodo 아이템을 불러오는 부분이다.우리가 http://localhost:3000 접속하면 Todo 아이템이 리스트에 보여야 한다. 렌더링이란?리액트는 브라우저에 보이는 HTML DOM 트리의 다른 버전인 ReactDOM..

SPA(Single Page Application)한 번 웹 페이지를 로딩하면 사용자가 임의로 새로 고침하지 않는 이상 페이지를 새로 로딩하지 않는 애플리케이션 파싱(parsing)브라우저가 HTML, CSS, JavaScript 등의 소스 코드를 해석하는 과정렌더링(rendering)파싱된 웹 페이지를 화면에 실제로 표시하는 과정  [React.js로 알아보는 SPA 동작 원리] 1. index.html 렌더링   2. index.js 실행ReactDOM.render(,document.getElementById('root'));  3. root Element 아래에 React.js 가 생성한 HTML Element 추가 ..

브라우저의 동작 원리사용자가 브라우저 주소창에 http://app.softwareengineer.com 웹 url 입력브라우저는 HTTP GET 요청을 http://app.softwareengineer.com의 서버에게 전송http://app.softwareengineer.com 서버는 HTTP Response 로 index.html 반환브라우저는 index.html을 받고 코드를 해석(파싱)하고 사용자의 화면에 띄워준다(렌더링).  DOM파싱은 렌더링의 전처리 단계파싱 단계에서 브라우저가 하는 일은 3가지가 있다.브라우저는 HTML을 트리 자료 구조의 형태인 DOM(Domain Object Model) 트리로 변환IMAGE, CSS, SCRIPT 등 리소스들이 담긴 자바스크립트 다운로드다운받은 자바스크..

사용자는 자신의 컴퓨터에서 브라우저를 실행한다.브라우저는 인터넷을 이용해 서버에 있는 자원(HTML, JavaScript, CSS 등)을 사용자의 컴퓨터로 다운로드한 후 브라우저에서 실행한다. Node.jsNode.js 등장 전까지 자바스크립트는 브라우저 내에서만 실행할 수 있었다.자바스크립트는 브라우저상에서 HTML 렌더링 일부로 실행하거나 개발자창의 자바스크립트 콘솔을 이용해 실행해야 했다.다시 말해 자바스크립트는 브라우저 밖에서는 실행할 수 없었다.이젠 그렇지 않다.Node.js는 자바스크립트를 내 컴퓨터에서 실행할 수 있게 해주는 프로그램, 즉 자바스크립트 런타임 환경이다.Node.js는 구글 크롬의 V8 자바스크립트 엔진을 실행한다.  NPM(Node Package Manager) NPM(Nod..

관계형 데이터베이스에 쿼리를 날리기 위해 어떻게 하는가?데이터베이스 클라이언트 설치 (MySQL일 경우, MySQL Workbench 설치)클라이언트를 이용해 데이터베이스에 연결되면 쿼리를 작성[Create Table 쿼리]CREATE TABLE IF NOT EXISTS Todo( id VARCHAR(100) NOT NULL PRIMARY KEY, userId VARCHAR(100) NOT NULL, title VARCHAR(100) NOT NULL, done boolean DEFAULT false); [SELECT 쿼리]SELECT id, title, doneFROM TodoWHERE id = "ff80808177"; 테이블 생성, 테이블에 엔트리 추가, 수정, 삭제도 모두 웹 서비스의 일부로 동작해야..

서비스 레이어는 컨트롤러와 퍼시스턴스 사이에서 비즈니스 로직을 수행하는 레이어이다.HTTP 요청/응답을 관할하는 컨트롤러와 데이터베이스와 연결된 퍼시스턴스와 분리되어 우리가 개발하는 로직에 집중할 수 있다. [TodoService.java]package com.example.demo.service;import org.springframework.stereotype.Service;@Servicepublic class TodoService { public String testService() { return "Test Service"; }}@Service 는 비즈니스 로직을 수행하는 서비스 레이어임을 알려주는 어노테이션[TodoController에서 TodoService 사용]import org.sprin..

컨트롤러 레이어는 비즈니스 로직 처리보다는 HTTP 요청/응답을 담당하는 레이어이다.HTTP는 GET/POST/PUT/DELETE/OPTIONS 등과 같은 메서드와 URI를 이용해 서버에 HTTP 요청을 보낼 수 있다.그렇다면 서버는 이 요청을 받은 후 처리를 어떻게 할까? [HTTP 요청]GET /test HTTP/1.1Host: localhost:8080Content-Type: application/jsonContent-Length: 17{ "id": 123}클라이언트가 서버 localhost:8080에 HTTP GET 메서드를 이용해 test라는 리소스를 요청함서버는 자기 주소를 제외한 /{리소스}부분과  어떤 HTTP 메서드를 사용했는지 알아야 함그 이후 해당 리소스의 HTTP 메서드에 연결된 메..

레이어드 아키텍처 패턴은 스프링 프로젝트 내부에서 어떻게 코드를 적절히 분리하고 관리할 것이냐에 대한 것이다. REST 아키텍처 패턴은 클라이언트(브라우저)가 우리 서비스를 이용하려면 어떤 형식으로 요청을 보내고 응답을 받는지에 대한 것이다. 클라이언트는 정해진 메서드로 우리 서비스를 이용할 것이다. 이렇게 REST 아키텍처 패턴을 따라 설계 및 구현된 서비스를 RESTful 서비스라고 한다.  레이어드 아키텍처 (Layered Architecture)레이어드 아키텍처는 애플리케이션을 구성하는 요소들을 수평으로 나눠 관리하는 것이다. [레이어가 없는 웹 서비스]public String getTodo(Request request) { // request validation if(request.use..

스프링 부트 실행 프로세스스프링 부트 애플리케이션 실행한다.@ComponentScan 어노테이션이 있는 경우 베이스 패키지와 그 하위 패키지에서 @Component가 달린 클래스를 찾는다.필요한 경우 @Component가 달린 클래스의 오브젝트를 생성한다.이때 생성하려는 오브젝트가 다른 오브젝트에 의존한다면, 즉 멤버 변수로 다른 클래스를 갖고 있다면 그 멤버 변수 오브젝트를 찾아 넣어줘야 한다. @Autowired를 사용하는 경우 스프링이 그 오브젝트를 찾아 생성해 넣어준다.1) @Autowired에 연결된 변수의 클래스가 @Component가 달린 클래스인 경우 스프링이 오브젝트를 생성해 넘겨준다.2) @Autowired에 연결된 변수의 클래스가 @Bean 어노테이션으로 생성하는 오브젝트인 경우 @B..

자바 서블릿(Java Servlet)  >> DispatcherServlet 대체[Spring Boot 사용 전]자바 서블릿(Java Servlet)대표 서블릿 컨테이너 ( Apache Tomcat, Jetty, JBoss 등)클라이언트의 요청을 처리하고 서버 측에서 동적인 콘텐츠를 생성웹 요청을 기반으로 각 알맞은 비즈니스 로직을 호출하는 역할서블릿 기반의 서버를 사용하려면 개발자는 javax.servlet.http.HttpServlet을 상속받는 서브 클래스를 작성해야 한다.그러면 서블릿 컨테이너가 서블릿 서브 클래스를 실행시킨다.http 요청이 서버로 전달되면 웹 서버는 받은 요청을 해석해 해당되는 서블릿 클래스를 실행한다.package com.example.Demo;import java.io.*;..