Programming

[Javascript] RxJS란?

1. 개요 Nest.js에서 Microservice를 구현하면서 RxJS개념을 사용이 되어 정확하게 이해하고자 정리를 합니다. 듣기로는 Angular에서 사용되는 개념이라고 하네요(Angular를 쓸 기회가 있을지는 모르겠지만...) RxJS는 Reactive Extensions For JavaScript 라이브러리라고 해서 리액티브 프로그래밍을 javascript에서 지원하기 위해 만들어진 라이브러리입니다. 리액티브 프로그래밍이란 이벤트나 배열 같은 데이터 스트림과 전파를 중심으로 변화에 유연하게 반응하는 프로그래밍을 의미합니다. 이 리액티브 프로그래밍은 Push 시나리오 방식으로 외부와 통신합니다. *Push 시나리오 : 외부에서 명령하면서 응답이 오면 그때 반응하여 처리함. 데이터를 가지고 오기 위..

[Next.js] Hydrate란?

1. 개요 Hydrate란, Server Side단에서 렌더링 된 정적 페이지와 번들링된 js파일(Webpack)을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 js 코드를 서로 매칭시키는 과정을 말합니다. 일단, Client Side Rendering인 기본 React에서는 js파일만을 이용하여 public/index.html의 기본 뼈대만 있는 내용을 제외하고 src/index.js의 자바스크립트 코드에서 모든 화면을 렌더링 한 뒤, HTML DOM 요소 중 root라는 엘리먼트를 찾아 하위로 주입을 하여 웹 화면이 구성합니다. Next.js에서는 클라이언트에게 웹 페이지를 보내기 전에 Server Side 단에서 미리 웹 페이지를 Pre-Rendering 합니다. Pre-..

서비스 지향 아키텍처란? (SOA, Service Oriented Architecture)

1. 정의 서비스 지향 아키텍처(SOA)는 백엔드에서 사용되는 아키텍처 중 하나로 대규모 컴퓨터 시스템을 구축할 때, 애플리케이션의 기능을 비즈니스 적인 의미를 가지는 기능 단위로 묶어서 표준화된 호출 인터페이스(Rest API 등)를 통해 서비스로 구현하고, 이 서비스들을 기업의 업무에 따라 어플리케이션을 구성하는 소프트웨어 개발 아키텍처를 의미합니다. * 토마스 얼에 의한 정의로는 SOA는 공개, 기민성, 확장, 연합, 자립적 요소들로 구성된 조합가능한 아키텍처, 서비스 품질, 다양한 벤더, 상호 운영성, 서비스 발견 그리고 잠재적으로 재사용 가능한 서비스들이 웹서비스로 구현된다. SOA는 비지니스 로직과 기술을 추상화하여, 이 도메인 간에 느슨한 결합을 유도한다. SOA는 과거 플랫폼의 진화물로서,..

[Docker] 도커 안에 젠킨스 설치 (도커 인 도커, Docker In Docker, D in D)

1. 개요 젠킨스와 같이 CI/CD 툴을 컨테이너에 설치하고 젠킨스에서 프로젝트를 생성하고, 프로젝트에서 컨테이너를 관리하는 환경을 구축하고 싶을 때 도커 인 도커라고 불리우는 방법을 사용해서 구축합니다. 컨테이너는 독립된 환경인데, 컨테이너에 설치된 젠킨스가 컨테이너들을 관리하려면 도커 볼륨을 연동해서 아래와 같은 느낌으로 구성해줍니다. 컨테이너에 젠킨스를 설치할 때 '/var/run/docker.sock:/var/run/docker.sock' 볼륨에 위와 같은 옵션을 주어서 호스트와 컨테이너가 같은 장소를 공유할 수 있도록 해줍니다. 2. 도커 인 도커 구성 도커 인 도커를 구성하는 방법은 간단합니다. 여러가지 요구되는 옵션이나 dependency가 많기는 하지만, 컨테이너에 젠킨스를 설치할 때 Do..

[Javascript] 클로저(Closure) 요약

정의 클로저의 정의는 클로저는 독립적인 변수를 가리키는 함수이며, 클로저 안에 정의된 함수는 만들어진 환경을 '기억한다',라고 MDN에서 정의하고 있습니다. 간단한 예제 function getClosure() { var text = 'variable 1'; return function() { return text; }; } var closure = getClosure(); console.log(closure()); // 'variable 1' 위처럼 getClosure()를 호출하면 getClosure 내부에서 선언된 변수는 사라지지 않고 제대로 된 값을 가지고 있는 것을 확인할 수 있는데, 만들어진 환경을 기억하고 있는 이 var closure 변수에 담긴 함수를 바로 클로저라고 합니다. 자세하게 클로..

[React] Immer (produce)

1. Immer란? 리액트에서 배열이나 객체를 업데이트할 때 직접 수정하지 않고 불변성을 지켜주면서 업데이트를 해야하는데, 이때 쉽게 불변성을 유지하면서 업데이트를 도와주는 라이브러리가 Immer 라이브러리 입니다 2. 사용법 npm install immer 위 명령어로 먼저 immer 라이브러리를 받습니다. import produce from 'immer'; 불변성을 관리할 코드에서 상단에 immer를 import해줍니다. produce 함수를 사용하는데, 첫번째 파라미터에는 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣어줍니다. 보통 produce(state, draft) 형태로 사용합니다 const state = { number: 1, dontChangeMe..

[Jenkins] 젠킨스와 깃허브 연동(GitHub Web Hook AWS) (3)

1. AWS 사용할 시 저는 AWS의 EC2를 사용했는데 host와 연결할 수 없다고 나왔습니다. 이런 경우엔 AWS EC2의 ssh를 깃허브에서 접근할 수 있게 처리를 해주어야 합니다. 먼저 Jenkins가 설치된 EC2 인스턴스 폴더에 SSH로 접근해줍니다. (저는 docker container를 사용했습니다) 각자 Jenkins가 설치된 위치가 다르기 때문에 위치를 따로 확인하셔야 합니다. 그다음 jenkins 설치 폴더에 .ssh라는 폴더를 생성하고 .ssh에 들어갑니다. 그리고 ssh-keygen 명령어로 rsa 알고리즘으로 된 key를 생성합니다. mkdir .ssh cd .ssh ssh-keygen -t rsa -b 4096 -C test-key -f github_jenkins passphr..

[Jenkins] 젠킨스와 깃허브 연동(GitHub Web Hook) (2)

앞에선 Jenkins Credentials에 Github를 등록했고, 여기에서는 Github Repository에 WebHook을 걸어 push가 일어나면 Jenkins에서 Catch할 수 있도록 하는 처리를 진행하겠습니다. 1. 메인 대시보드에서 새로운 Item을 클릭합니다. 2. item 이름을 정하고 Freestyle project를 선택하고 Ok 합니다. 3. General - GitHub project - Project url 작성 레포지토리를 연결할 github url을 작성합니다. 4. 소스코드 관리 - Git - Repository URL - Credentials 작성 Repository URL은 3번과 동일하게 작성해주시고, 처음 Credentials에는 none으로 되어있을텐데 Add ..

[AWS] EC2 Docker, Docker-compose 설치(Linux)

AWS에서는 docker와 docker-compose를 설치하는데 기존 리눅스 방법과는 다른 방법으로 설치를 진행해서 아래 방법을 찾아 공유하려고 합니다! 도커 설치 // 도커 설치 sudo amazon-linux-extras install docker // 도커 시작 sudo service docker start // 권한 부여 sudo usermod -a -G docker ec2-user // auto-start에 docker 등록 sudo chkconfig docker on // 인스턴스 재시작 sudo reboot // 도커 버전 확인 docker version 버전 확인 했을때 위와 같이 나오면 정상적으로 설치가 된 것입니다. 도커 컴포즈 설치 // 최신 docker compose를 해당 링크에..

[React] React.js 강좌 18. useReducer

1. useReducer 기존에 state를 새로운 상태로 업데이트하는 useState라는 Hook함수가 있었는데, useState와 다르게 상태를 관리하는 Hook으로 useReducer가 있습니다. 이 Hook함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다. 상태 업데이트 로직을 컴포넌트 바깥에 작성하며, 다른 파일에서 작성 후 불러와서 사용할 수 있습니다. 먼저 reducer 가 무엇인지 알아보겠습니다. reducer 는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수입니다. function reducer(state, action) { // 새로운 상태를 만드는 로직 // const nextState = ... return nextStat..