분류 전체보기

안녕하세요 ! 정만입니다 이번에 프론트 담당을 맡게 되어 웹사이트 UI/UX를 여기저기 구경하고 있습니다.멋진 웹사이트엔 Three.js를 활용해 3D를 야무지게 활용한걸 볼 수 있었습니다. https://orpetron.com/blog/10-exceptional-websites-showcasing-creative-usage-of-threejs/프로젝트에 적용할진 모르겠으나.. 한번 배워보고 싶어 Three.js를 맛보기 해보았습니다. Three.js란 ?three.js는 웹 브라우저에서 3D 그래픽스를 쉽게 생성하고 렌더링할 수 있게 해주는 라이브러리 입니다. 이 라이브러리는 WebGL 위에 구축되어 있습니다. WebGL(Web Graphics Library)은 HTML5의 요소와 함께 사용되어 브라..

서론 MSA(Microservice Architecture)의 기본적인 구현에 대해 공부하던 중, 다양한 응용 프로그램의 설정을 관리하는 프레임워크, Spring Cloud Config에 대해서 알게 되었다. 생소한 프레임워크이기도 하여, 이번 기회에 간단하게 정리해보고자 한다!Spring Cloud Config를 왜 써야할까? 나는 지금껏 단 하나의 어플리케이션을 이용한 서비스만 구현해 보았고, 그런 서비스에서는 어플리케이션의 설정을 관리하는 기능이나 시스템이 전혀 필요 없었다. 어차피 하나의 어플리케이션이니, 그 어플리케이션의 설정 파일만 건드리면 됐기 때문이다. 하지만 MSA같이 잘게 쪼개어진 여러 어플리케이션으로 이루어진 서비스를 운용해야 할 때, 그런 기능이 없다면 어떻게 될까? 각 어플리케이션..

useRef란? 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook로컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다. const ref = useRef(initialValue)initialValue- ref객체의 current  프러퍼티 초기 설정값으로 어떤 유형의 값이든 지정할 수 있다.- 단 초기 렌더링 이후부터는 무시된다. 반환값- 단일 프로퍼티를 가진 객체를 반환한다.- current    처음에는 전달한 initialValue로 설정된다.    값을 변경할 수 있다.    하지만 state와 다르게 리렌더링을 유발하지않는다.    ref객체를 jsx노드의 ref 어트리뷰트로 react에 전달하면 react는 current 프로퍼티를 설정한다.- 다음 렌더링에서 u..

들어가기 전에이번 프로젝트에서는 "MSA를 적용해서 해보자" 라는 이야기가 나왔을 때, MSA가 무엇인지조차 몰랐다. 그래서 MSA에 대해 찾아보고, 알아보았는데 이미 많은 회사들이 MSA로 전환을 시도했다는 사실을 알게 되었다. MSA의 기본 개념은 간단하다. Micro Service Architecture 라는 이름 그대로, "하나의 어플리케이션을 다수의 독립적인 서비스들의 집합으로 구성하는 것" 이다. MSA에 대한 자세한 내용은 다음글을 참고하면 된다.https://savingbe.tistory.com/42 [Architecture] 유잔씨의 MSA 이모저모 알아보기들어가기 전에이번 프로젝트는 MSA 구조로 하자!! 라는 말이 나왔을 때 MSA가 뭐야?? 라는 생각부터 들었다. 계속 공부해도 이렇..

오늘은 리액트의 페이지 라우팅에 대해서 공유해보도록하겠습니다!🤔 페이지 라우팅이란?경로에 따라 알맞은 페이지를 렌더링하는 과정입니다. 특정 url(/mypage, /edit 등)로 요청이 왔을 때 적절한 페이지(마이페이지, 게시글 편집 등)를 렌더링하는 것입니다.💭 리액트의 페이지 라우팅은?Multi Page Application(MPA)MPA는 서버는 웹페이지를 HTML로 가지고 있고 요청이 들어왔을 때 요청 주소에 맞는 페이지를 응답하는 방식입니다. 그렇기 때문에 페이지를 이동할 때마다 서버에 요청을 보내고 웹페이지가 이동할 때 깜빡거리는 움직임이 생깁니다. 페이지 이동이 매끄럽지 않고 페이지 이동마다 요청을 보내기 때문에 서버 부하의 위험도 있습니다.Single Page Application(S..

동시성 이슈를 해결하는 방법은 여러가지가 있지만 이번에는 비관적 락, 낙관적 락, 분산 락으로 어떻게 해결하는지 코드와 함께 간단하게 정리해보았습니다!Pessimistic Lock 활용하기비관적 락(Pessimistic Lock)은 데이터의 일관성을 보장하기 위해 자주 사용하는 방법 중 하나입니다. 이 방법에서는 특정 데이터에 대한 Exclusive lock을 걸어, 다른 트랜잭션이 해당 데이터에 접근할 수 없도록 만듭니다. 쉽게 말해, 데이터를 가져가려면 먼저 내가 작업을 마칠 때까지 기다리라고 하는 것이죠.예를 들어, 아래의 코드처럼 JPA에서 @Lock 어노테이션을 활용해 비관적 락을 걸 수 있습니다.public interface StockRepository extends JpaRepository{..

안녕하세요, 이번에는 Spring MVC 기반의 애플리케이션에 동작하는 Spring Securtiy Architecure에 대해 정리를 해보려고 합니다. 본문은 https://docs.spring.io/spring-security/reference/servlet/architecture.html 을 기반으로 작성되었습니다.📌 Filter는 무엇인가?Spring Servlet에 대한 Spring Security의 지원은 Servlet Filter에 기반하고 있습니다. 따라서 Spring Security를 이해하기 위해서는 Spring MVC에서 필터가 어떻게 동작하는지 알고 있는 것이 중요합니다. 클라이언트가 애플리케이션에 요청을 보내면, Container(Servlet Container)는 요청 URI경..

안녕하세요. 게으른 만두입니다.이번 특화 프로젝트에서 프론트엔드를 맡게 되어 울면서 공부 중 입니다.이번에 공부한 리액트 내용 공유 드리겠습니다.모든 백엔드가 프론트를 하는 그 날까지 화이팅! 🥹 리액트! 프론트엔드에서는 CDD(Component-Driven Development)로 컴포넌트 단위로 개발합니다. 특정 기능들을 수행하는 작은 모듈로 구성해서 전체 화면을 구성할 수 있습니다. 그러면 재사용성을 높이고, 독립적인 테스트와 개발을 할 수 있으며 디자인 일관성을 지킬 수 있다는 장점이 있습니다. 이번 프로젝트의 컴포넌트는 이렇게 구성되어 있습니다. 오늘의 날짜를 알려주는 헤더, 새로운 TODO 입력 컴포넌트, TODO 리스트 컴포넌트, 리스트 안에 리스트 아이템들이 컴포넌트로 구성되어 있습니다...

컨테이너와 네트워크도커 컨테이너에서는 크게 3가지의 통신이 일어날 수 있다.컨테이너와 World Wide Web의 통신컨테이너에서 로컬 호스트 머신으로 통신컨테이너 간 통신도커 컨테이너와 WWW의 통신도커 컨테이너와 World Wide Web과의 통신은 어떠한 조치를 취하지 않아도 통신이 된다.컨테이너와 로컬 호스트 머신 간의 통신컨테이너와 로컬 호스트 머신간 통신을 하기 위해서는host.docker.internal을 사용한다.이를 도메인이 필요한 곳, URL이 필요한 곳에 입력하면 호스트 머신의 IP주소로 변환된다.컨테이너간 통신컨테이너 간 통신을 하려면 docker container inspect {컨테이너 식별자}를 입력하여 컨테이너의 IP 주소를 알아내 사용할 수 있다.하지만 이 방법은 컨테이너의..

Cloneable을 사용한다고 clone이 완벽하게 되는 것은 아니다!!clone 메서드가 선언된 곳이 cloneable이 아닌 Object이고접근 제한자가 protected 이다.그래서 Cloneable 을 구현하는 것만으로는 외부 객체에서 clone 을 호출할 수 없다.Cloneable 인터페이스는 빈 인터페이스라서 clone 메서드를 따로 오버라이딩 해주어야 한다.그렇다면 Cloneable은 무슨 일을 할까?Object의 protected 메서드인 clone의 동작 방식을 결정한다.Cloneable을 구현한 클래스의 인스턴스에서 clone 을 호출하면 그 객체의 필드들을 하나하나 복제한 객체를 반환한다.Cloneable을 구현하지 않은 클래스의 인스턴스에서 호출하면 CloneNotSupportedE..