Home

2021
0
SpringSpring Cloud

Spring Cloud - 4. Spring Cloud Gateway Custom Filter 적용

Spring Cloud - 7. Load Balancer 적용 Spring Cloud - 6. Spring Cloud Gateway Global Filter 적용 Spring Cloud - 5. Spring Cloud Gateway Global Filter 적용 Spring Cloud - 4. Spring Cloud Gateway Custom Filter 적용 Spring Cloud - 3. Spring Cloud Gateway Filter 적용 Spring Cloud - 2. Spring Cloud Gateway 사용하기 Spring Cloud - Eureka 에 Service 등록하기 Spring Cloud - Service Discovery Server (Eureka) 사용자 정의 필터 만들기AbstractGatewayFilterFactory 를 이용해 Custom Filter를 정의할 수 있다. CustomFilter.java @Component@Slf4jpublic class CustomFilter extends AbstractGatewayFilterFactory<CustomFilter.Config> { public CustomFilter(){ super(Config.class); } @Override public GatewayFilter apply(Config config) { // Custom Pre Filter return (exchange, chain) -> { ServerHttpRequest request = exchange.getRequest(); ServerHttpResponse response = exchange.getResponse(); log.info("Custom PRE filter: request id -> {}", request.getId()); // Custom Post Filter return chain.filter(exchange).then(Mono.fromRunnable(() -> { log.info("Custom POST filter: request id -> {}", response.getStatusCode()); })); }; } public static class Config{ // Put the configuration properties }} 설정에 추가하기 spring.cloud.gateway.routes.filters application.yml server: port: 8080eureka: client: register-with-eureka: false fetch-registry: false service-url: defaultZone: http://localhost:8761/eurekaspring: application: name: apigateway-service cloud: gateway: routes: - id: first-service uri: http://localhost:8081/ predicates: - Path=/first-service/** filters: - CustomFilter# - AddRequestHeader=first-request, first-request-header2# - AddResponseHeader=first-response, first-response-header2 - id: second-service uri: http://localhost:8082/ predicates: - Path=/second-service/** filters: - CustomFilter# - AddRequestHeader=second-request, second-request-header2# - AddResponseHeader=second-response, second-response-header2

0
SpringSpring Cloud

Spring Cloud - 3. Spring Cloud Gateway Filter 적용

Spring Cloud - 7. Load Balancer 적용 Spring Cloud - 6. Spring Cloud Gateway Global Filter 적용 Spring Cloud - 5. Spring Cloud Gateway Global Filter 적용 Spring Cloud - 4. Spring Cloud Gateway Custom Filter 적용 Spring Cloud - 3. Spring Cloud Gateway Filter 적용 Spring Cloud - 2. Spring Cloud Gateway 사용하기 Spring Cloud - Eureka 에 Service 등록하기 Spring Cloud - Service Discovery Server (Eureka) 코드를 통한 라우팅 설정RouteLocatorBuilder 를 이용해 Filter를 추가할 수 있다. FilterConfig.java @Configurationpublic class FilterConfig { @Bean public RouteLocator gatewayRoutes(RouteLocatorBuilder builder) { return builder.routes() .route(r -> r.path("/first-service/**") .filters(f -> f.addRequestHeader("first-request", "first-request-header") .addResponseHeader("first-response", "first-response-header")) .uri("http://localhost:8081")) .route(r -> r.path("/second-service/**") .filters(f -> f.addRequestHeader("second-request", "second-request-header") .addResponseHeader("second-response", "second-response-header")) .uri("http://localhost:8082")) .build(); }} application.yml을 통한 라우팅 설정 spring.cloud.gateway.routes.filters application.yml spring: application: name: apigateway-service cloud: gateway: routes: - id: first-service uri: http://localhost:8081/ predicates: - Path=/first-service/** filters: - AddRequestHeader=first-request, first-request-header2 - AddResponseHeader=first-response, first-response-header2 - id: second-service uri: http://localhost:8082/ predicates: - Path=/second-service/** filters: - AddRequestHeader=second-request, second-request-header2 - AddResponseHeader=second-response, second-response-header2

0
SpringSpring Cloud

Spring Cloud - 2. Spring Cloud Gateway 사용하기

Spring Cloud - 7. Load Balancer 적용 Spring Cloud - 6. Spring Cloud Gateway Global Filter 적용 Spring Cloud - 5. Spring Cloud Gateway Global Filter 적용 Spring Cloud - 4. Spring Cloud Gateway Custom Filter 적용 Spring Cloud - 3. Spring Cloud Gateway Filter 적용 Spring Cloud - 2. Spring Cloud Gateway 사용하기 Spring Cloud - Eureka 에 Service 등록하기 Spring Cloud - Service Discovery Server (Eureka) 참고 https://docs.spring.io/spring-cloud-gateway/docs/current/reference/html/ Spring Cloud Gateway당연히 가능합니다! Spring Cloud Gateway는 스프링 생태계에서 제공하는 도구 중 하나로, 마이크로서비스 아키텍처를 구축하기 위해 사용됩니다. Spring Cloud Gateway는 API 게이트웨이로 작동하여 클라이언트와 백엔드 서비스 사이의 통신을 관리하고 보안, 로드 밸런싱, 라우팅, 필터링 등의 기능을 제공합니다. Spring Cloud Gateway의 핵심 개념은 라우트(Routes)와 필터(Filters)입니다. 라우트는 클라이언트 요청을 수신하고, 해당 요청을 백엔드 서비스로 전달하는 방법을 정의하는데 사용됩니다. 각 라우트는 요청을 받을 수 있는 경로, 요청을 보낼 수 있는 대상 URI, 필요한 필터 등을 포함하고 있습니다. 이를 통해 요청의 동적인 라우팅과 로드 밸런싱을 구현할 수 있습니다. 또한, 필터는 요청과 응답에 대한 전처리와 후처리 작업을 수행하기 위해 사용됩니다. 예를 들어, 인증, 로깅, 헤더 조작 등의 작업을 필터를 통해 처리할 수 있습니다. 필터는 전역 필터(Global Filters)와 라우트별 필터(Route Filters)로 구분될 수 있으며, 필터 체인을 통해 여러 필터를 조합하여 사용할 수 있습니다. Spring Cloud Gateway는 Netty 서버를 기반으로 동작하며, 비동기적이고 넌블로킹 방식으로 요청을 처리합니다. 이를 통해 높은 성능과 확장성을 제공합니다. 또한, Spring Cloud Gateway는 다양한 기능과 확장 포인트를 제공하여 개발자가 필요에 맞게 사용할 수 있습니다. 요약하자면, Spring Cloud Gateway는 스프링 기반의 API 게이트웨이로서 마이크로서비스 아키텍처에서 클라이언트와 서비스 사이의 통신을 관리하고 보안, 로드 밸런싱, 라우팅, 필터링 등의 기능을 제공합니다.

0
FrontendToastUI

React Toast UI Editor 4 - 이미지 올리기

React Toast UI Editor 4 - 이미지 올리기Editor에서 이미지 업로드를 지원하다고 해서 이미지를 붙여 넣었더니 다음과 같이 이미지가 base64로 인코딩 돼 올라가는 것을 보고 살짝 당황했다. 어떻게 해야지 하면서 문득 생각이 들었던게 Markdown Editor를 사용하는 대표 블로그 사이트인 velog가 생각이 났다. 그래서 당장 velog로 가서 이미지를 올려보니! 다음과 같이 이미지가 저장된 URL을 가져오는 것을 확인 할 수 있었다. 아마 내부적으로 이미지가 들어오면 먼저 서버에 이미지를 저장하고 이미지가 저장된 경로를 받는 로직 같았다. 즉! 이미지를 업로드 하려면 이미지를 저장할 수 있는 서버를 준비해 연동할 필요가 있다는 것이다. Toast UI Editor에 Image 업로드 하기 위한 방법을 찾다 보니 처음에 연결된 Hook을 제거하고 새로운 Hook을 정의해 서버에 이미지를 올릴 수 있는 것을 알게 됐다. https://github.com/nhn/tui.editor/issues/1588 TOAST UI 에 Image Server 에 올리는 기능 구현import React, { useRef, useEffect } from "react";import axios from "axios";// Toast UI Editor 모듈 추가import { Editor } from "@toast-ui/react-editor";import "@toast-ui/editor/dist/toastui-editor.css";// SyntaxHighlight 모듈 추가import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";// prism 모듈 추가import "prismjs/themes/prism.css";const Write = () => { const editorRef = useRef(); const handleClick = () => { console.log(editorRef.current.getInstance().getMarkdown()); }; useEffect(() => { if (editorRef.current) { // 기존에 Image 를 Import 하는 Hook 을 제거한다. editorRef.current.getInstance().removeHook("addImageBlobHook"); // 새롭게 Image 를 Import 하는 Hook 을 생성한다. editorRef.current .getInstance() .addHook("addImageBlobHook", (blob, callback) => { (async () => { let formData = new FormData(); formData.append("file", blob); console.log("이미지가 업로드 됐습니다."); const { data: filename } = await axios.post( "/file/upload", formData, { header: { "content-type": "multipart/formdata" }, } ); // .then((response) => { // console.log(response); // }); const imageUrl = "http://localhost:8080/file/upload/" + filename; // Image 를 가져올 수 있는 URL 을 callback 메서드에 넣어주면 자동으로 이미지를 가져온다. callback(imageUrl, "iamge"); })(); return false; }); } return () => {}; }, [editorRef]); return ( <div> <Editor initialValue="hello react editor world!" previewStyle="vertical" height="800px" initialEditType="markdown" useCommandShortcut={true} ref={editorRef} plugins={[codeSyntaxHighlight]} /> <button onClick={handleClick}>Markdown 반환하기</button> </div> );};export default Write;

0
FrontendToastUI

React Toast UI Editor 3 - 입력 내용 가져오기

React Toast UI Editor 3 - 입력 내용 가져오기Editor에 입력된 내용을 저장하고 관리하기 위해서는 입력된 값을 받아와야 한다. Toast UI Editor에서는 useRef를 이용해 const editorRef = useRef(); 버튼 Event Handler 만들기버튼을 만들어줘 버튼을 눌렀을 때 Editor에 입력된 내용을 반환해 주는 Evnet를 작성한다. 입력된 값을 받아올 때는 Ref 객체인 editorRef 를 이용해 Toast UI Editor 객체를 가져와 입력된 값을 받아올 수 있도록 한다. const handleClick = () => { console.log(editorRef.current.getInstance().getMarkdown());}; Button 클릭에 대한 이벤트 핸들러와 Editor 컴포넌트에 Ref 객체를 넣어준다. <div> <Editor initialValue="hello react editor world!" previewStyle="vertical" height="600px" initialEditType="markdown" useCommandShortcut={true} ref={editorRef} plugins={[codeSyntaxHighlight]} /> <button onClick={handleClick}>Markdown 반환하기</button></div> 전체 소스

0
FrontendToastUI

React Toast UI Editor 2 - Syntax Highlight 적용하기

React로 Toast UI Editor 2 - Syntax Highlight 적용하기https://github.com/nhn/tui.editor/tree/master/plugins/code-syntax-highlight 글을 쓰다보면 Post에 코드를 같이 올릴 경우가 많은데, 초기 Setting은 Code Highlight가 적용돼 있지 않는 것을 확인할 수 있었다. 아무래도 Code Highlight가 없어서 코드를 작성하게 되면 가독성도 좀 떨어지고 Post 작성할 맛도 안나서 Editor에 Code Highlight를 적용하려고 한다. 패키지 추가yarn add @toast-ui/editor-plugin-code-syntax-highlightyarn add prism import React from "react";// Toast UI Editor 모듈 추가import { Editor } from "@toast-ui/react-editor";import "@toast-ui/editor/dist/toastui-editor.css";// SyntaxHighlight 모듈 추가import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight-all.js";// prism 모듈 추가import "prismjs/themes/prism.css";const Write = () => { return ( <Editor initialValue="hello react editor world!" previewStyle="vertical" height="600px" initialEditType="markdown" useCommandShortcut={true} plugins={[codeSyntaxHighlight]} /> );};export default Write; Code Highlight가 적용된 것을 확인할 수 있다. 덕분에 가독성도 훨씬 좋아져 점점 맘에 들기 시작했다.

0
FrontendToastUI

React로 Toast UI Editor 사용해보기

React로 Toast UI Editor 사용해보기개인 프로젝트도 하고 싶고 나만의 블로그를 만들고 싶은 마음에 UI도 찾아보고 Editor도 찾고 있었었다. 개인적으로 Editor를 찾고 있던 기준은 첫번째는 Markdown 언어가 사용 가능해야 하고 두번째는 이미지 업로드가 가능한 Editor를 찾고 있던 와중에 NHN에서 제공하는 Toast UI Editor를 찾게 됐다. 기능들이 너무너무 맘에 들어 사용해보기로 했다. Toast UI Editor에서는 내가 가장 원했던 Markdown 문법이 사용 가능 했고, 이미지 업로드도 가능 했다.!!! 그리고 코드블럭에 마음에 드는 Syntax Highlighter를 적용할 수 있는 장점과 다양한 기능들이 있어 너무나도 맘에 들었다. 플러그인 설치하기yarn add @toast-ui/react-editor Write.jsx import React from "react";import { Editor } from "@toast-ui/react-editor";import "@toast-ui/editor/dist/toastui-editor.css";const Write = () => { return ( <Editor initialValue="hello react editor world!" previewStyle="vertical" height="600px" initialEditType="markdown" useCommandShortcut={true} /> );};export default Write; 마지막으로 App.js에 새로만든 Write.jsx 컴포넌트를 추가하면 화면에서 Toast UI가 나타나는 것을 확인할 수 있다.

0
ProgrammingJPA

JPA 프로그래밍(기본편) 2 - JPA 설정하기

JPA 프로그래밍(기본편) 2 - JPA 설정하기Entity 생성하기Entity 어노테이션을 통해 JPA가 관리하는 객체임을 명시해준다. @Entitypublic class Member { @Id private long id; private String name; public long getId() { return id; } public void setId(long id) { this.id = id; } public String getName() { return name; } public void setName(String name) { this.name = name; }} EntityManagerFactory 생성하기 JPA를 사용하기 위해 persistence.xml에 JPA 설정 정보를 넣어 줬다. 해당 정보를 사용하기 위해서 EntityManagerFactory를 생성해주도록 한다. EntityManagerFactory entityManagerFactory = Persistence.createEntityManagerFactory("hello"); EntityManager 생성하기EntityManagerFactory를 이용해 EntityManager를 생성해준다.

0
ProgrammingJPA

JPA 프로그래밍(기본편) 1 - JPA 설정하기

JPA 프로그래밍(기본편) 1 - JPA 설정하기의존성 추가하기JPA를 사용하기 위해서 JPA를 구현한 hibernate 라이브러리를 사용한다. DB로는 메모리 DB인 H2 DataBase를 사용하도록 한다. <!-- JPA 하이버네이트 --><dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-entitymanager</artifactId> <version>5.3.10.Final</version></dependency><!-- H2 데이터베이스 --><dependency> <groupId>com.h2database</groupId> <artifactId>h2</artifactId> <version>1.4.200</version></dependency> JPA Setting 하기resource/META-INF/persistence.xml JPA 표준 문법 설정 javax.persistence.jdbc.driver : 사용하고자 하는 DB 드라이버를 설정한다. javax.persistence.jdbc.user : DB에 접근하기 위한 Username javax.persistence.jdbc.password : DB에 접근하기 위한 Password javax.persistence.jdbc.url : 접근하고자 하는 DataBase 경로 hibernate 전용 문법 설정

0
Frontend로그인

리엑트 로그인 페이지 만들기

리엑트 로그인 페이지 만들기import React, { useState, useCallback } from "react";import styled from "styled-components";import axios from "axios";const LoginFragment = styled.div` display:flex; justify-content:center; align-items:center; width:400px; height:400px; position: relative; /* 추후 박스 하단에 추가 버튼을 위치시키기 위한 설정 */ background: white; border-radius: 16px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04); margin: 0 auto;`;const LoginInputs = () => { const [id, setId] = useState(""); const [password, setPassword] = useState(""); const onChangeId = useCallback((e) => { setId(e.target.value); }, []); const onChangePassword = useCallback((e) => { setPassword(e.target.value); }, []); const onSubmit = useCallback((e) => { e.preventDefault(); let data = { username: id, password: password, } console.log(data); axios.post("/api/users/login", data) .then((response => { console.log(response.data) })); }, [id, password]) return ( <LoginFragment> <form style= {{ display: "flex", flexDirection: "column", }} onSubmit={onSubmit} > <label htmlFor="user-id">아이디</label> <input name="user-id" value={id} onChange={onChangeId} /> <label htmlFor="user-password">비밀번호</label> <input name="user-password" type="password" value={password} onChange={onChangePassword} /> <br /> <button type="submit">로그인</button> </form> </LoginFragment > )}export default LoginInputs; import React from "react"import { styled, createGlobalStyle } from "styled-components";import LoginInputs from "./components/LoginInputs";const GlobalStyle = createGlobalStyle` body { background: #e9ecef; }`;function App() { return ( <div> <GlobalStyle /> <LoginInputs /> </div> )}export default App; CORS 해결하기const { createProxyMiddleware } = require("http-proxy-middleware");module.exports = (app) => { app.use( "/api", createProxyMiddleware({ target: "http://localhost:8080", changeOrigin: true, }) );};