2024/07 27

[CloudWatch] 필터 패턴을 활용한 CloudTrail 작업에 대한 경보 설정

CloudTrail 구성 변경에 대한 로그 지표 필터 및 경보가 설정되어 있는지 확인{ ($.eventSource = cloudtrail.amazonaws.com) && (($.eventName = CreateTrail) || ($.eventName = UpdateTrail) || ($.eventName = DeleteTrail) || ($.eventName = StartLogging) || ($.eventName = StopLogging)) }다음과 같은 지표 필터 패턴은 CloudTrail 기준이다. CloudTrailCloudTrail에 나와있는 eventName, eventTime, userName, eventSource, resourceType, resourceName 를 참조하여작성한 필터 패..

[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - CORS

참고 블로그: 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..

개발 2024.07.23

[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - SPA

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 추가 ..

개발 2024.07.23

[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - 브라우저의 동작 원리

브라우저의 동작 원리사용자가 브라우저 주소창에 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 등 리소스들이 담긴 자바스크립트 다운로드다운받은 자바스크..

개발 2024.07.23

[React.js, 스프링부트, AWS로 배우는 웹 개발] 3장 - 리액트 애플리케이션 생성

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

개발 2024.07.23

[React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 퍼시스턴스 레이어

관계형 데이터베이스에 쿼리를 날리기 위해 어떻게 하는가?데이터베이스 클라이언트 설치 (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"; 테이블 생성, 테이블에 엔트리 추가, 수정, 삭제도 모두 웹 서비스의 일부로 동작해야..

개발 2024.07.22

[React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 서비스 레이어

서비스 레이어는 컨트롤러와 퍼시스턴스 사이에서 비즈니스 로직을 수행하는 레이어이다.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..

개발 2024.07.22

[React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 컨트롤러 레이어

컨트롤러 레이어는 비즈니스 로직 처리보다는 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 메서드에 연결된 메..

개발 2024.07.21

[React.js, 스프링부트, AWS로 배우는 웹 개발] 2장 - 레이어드 아키텍처 패턴, REST API 스타일

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

개발 2024.07.20