티스토리

개발소발닭발

검색하기

블로그 홈

개발소발닭발

suk9.tistory.com/m

개발소발닭발 개발 이야기

구독자: 1

방명록 방문하기

주요 글 목록

Prometheus 프로메테우스를 이용한 Node 모니터링 TODO 공감수 0 댓글수 0 2022. 9. 8.
리코일을 이용한 비동기 처리 TODO 공감수 0 댓글수 0 2022. 9. 8.
리코일 비동기 + debounce 처리하기 리코일로 비동기를 요청하면서 debounce 처리를 하고 싶은 경우가 있다. 공감수 0 댓글수 0 2022. 8. 11.
숫자 키패드만 올리기 가끔 숫자만 입력하는 기능을 구현하면서 input 타입을 type=number 로 처리하는 개발자들이 있는데, 이건 좋지 못하다. 이렇게 넣어주자. 직접 확인하고, 실무에도 적용한 사례니 마음 놓고 사용하면 된다. https://inputtypes.com/ Input Type Sandbox Input Type Sandbox is a front-end testing tool for form input types, validation patterns, onscreen keyboards and more! inputtypes.com 공감수 0 댓글수 1 2022. 7. 18.
NX를 이용한 모노레포 개발 우리팀은 다양한 서비스를 개발하고 있는데, 과거에는 이 모든 서비스가 하나의 CRA 프로젝트 안에 있었다. 내자산, 결제내역, 후불결제, 신용점수, 대출 서비스 등등... 서비스가 늘어나고, 개별 서비스의 덩치도 커지게 되면서 각 서비스들은 독립을 결정 할 수 있게 되었다. 물론, 모든 서비스의 baseDomain은 유지해야 했기에 진입 nginx는 함께 사용하고 subPath로 라우팅을 걸었다. 독립 의사도 각 담당자의 자율이었고, 어떤 프레임워크를 사용할지도 자율이었다. 당연하게도 내가 담당하고 있는 대출 서비스도 독립을 결정하게 되었다. 레포를 새로 파고, 대출 서비스 특성상 서버 환경이 있으면 여러모로 편하기 때문에 nextjs 기반으로 구성했다. 그렇게 쿠버네티스 설정까지 끝내고 무사히 배포를 .. 공감수 0 댓글수 0 2022. 5. 8.
NX를 이용한 모노레포 개발 NX 환경으로 마이그레이션하고, 세개의 서비스를 엮어내기 공감수 0 댓글수 0 2022. 5. 4.
머지된 브랜치 삭제 git branch --merged | egrep -v "(^\*|master|main|dev|epic)" | xargs git branch -d 공감수 0 댓글수 1 2022. 4. 6.
쿠버네티스 명령어 출처 : https://enumclass.tistory.com/136 Pod DESCRIPTIONCOMMAND List all pods kubectl get pods List pods for all namespace kubectl get pods -all-namespaces List all critical pods kubectl get -n kube-system pods -a List pods with more information kubectl get pod -o wide List pods and output to YAML kubectl get pod -o yaml Get pod info kubectl describe pod/ ex) kubectl describe pod/weave-net-2hn7s -.. 공감수 1 댓글수 0 2022. 1. 25.
이벤트 구독 패턴 EventEmitter - 4 콜백 패턴 자바스크립트를 사용하다보면 콜백 패턴을 이용하게 된다. async/await 구문의 등장으로 과거보다 콜백 사용이 많이 줄었지만 여전히 콜백은 즐겨 사용되고 있다. 우리가 콜백을 사용할 때의 상황을 단순화 하면 다음과 같다. 특정 시점에, 콜백이 실행되기를 기대한다. 이것이 콜백의 핵심이자 전부다. 이벤트 구독 패턴 이벤트 구독 패턴은 콜백 패턴과는 다른 방식으로 콜백과 같은 핵심에 접근한다. 1. 특정 시점에 실행 되길 바라는 함수들은 이벤트를 구독한다. 2. 특정 시점이 되면 이벤트를 발생시킨다. 이렇게 두가지 레이어가 이벤트 구독 패턴에서는 명확하게 구분된다. Node에서는 기본적으로 이벤트 구독 패턴을 쉽게 사용할 수 있도록 EventEmitter 클래스를 제공한다. let em = n.. 공감수 1 댓글수 0 2022. 1. 10.
버퍼 Buffer - 3 자바스크립트는 문자열 처리에는 효과적이지만 바이너리 데이터는 잘 처리하지 못합니다. 하지만 문자열만 가지고 다양한 데이터를 처리하기란 매우 어렵습니다. 물론 일반적인 상황에서 Buffer 를 사용하는 일은 흔치 않을 것 입니다. 하지만 파일 업로드, 이미지 조작 등의 작업에 Node를 사용한다면 Buffer가 필요합니다. 개발자가 원하는 만큼의 메모리 할당이 필요한 경우에도 필요합니다. 버퍼 클래스의 경우 메모리가 자바스크립트 VM의 외부 힙에 지정되게 됩니다. 따라서 해당 데이터는 가비지 컬렉션으로 인해, 위치가 이동되지 않습니다. 이는 CPU 사용에 보다 효율적입니다. let x = new Buffer.from('Hello') console.log(x.toString()) // Hello let y .. 공감수 0 댓글수 0 2022. 1. 10.
모듈 Module - 2 Node에서는 CommonJS 모듈 시스템을 사용했었다. 물론 13.2 버전부터는 특별한 옵션 없이도 ES6의 모듈 시스템을 사용할 수 있다. 하지만 여전히 많은 모듈들이 CommonJS의 형태로 이루어져 있으므로 사용 예시를 통해 가볍게 살펴보기로 하자. function Calc() { function add(a, b) { return a+b } return { add } } module.exports = Calc const calc = require('./calc') 모듈을 로딩하는 종류에는 몇 가지 경우가 있다. 코어 모듈 로드 const http = require('http') 노드가 미리 준비해둔 모듈을 코어 모듈이라 하며, 우선적으로 로드 된다. 파일 모듈 로드 const myModule = .. 공감수 0 댓글수 0 2022. 1. 10.
노드 NodeJS - 1 개인적으로, 업무적으로 Node를 활용하는 일이 잦아지고 있다. 때문에 이번 기회에 NodeJS에 관해 깊이 있는 학습과 정리를 하고자 한다. 아주 오래전에 나온 책이지만, 프로페셔널 NodeJS를 활용할 계획이다. (절판된걸로 보인다.) I/O 블로킹 전통적인 프로그래밍은 I/O 작업을 블로킹 모델로 처리한다. 블로킹 모델은 각각의 사용자를 완벽하게 분리할 수 있지만, 너무 느리고 부담스럽다. 멀티스레딩은 이런 블로킹 모델의 대안 중 하나다. 스레드는 경량 프로세스로서 같은 프로세스 내의 다른 스레드와 메모리를 공유한다. 동시 스레드 실행을 통해, 하나의 스레드가 I/O 작업을 기다리는 동안 다른 스레드가 CPU를 사용할 수 있게 되었다. 늘 그렇듯 완벽한 대안은 없고, 멀티 스레딩도 마찬가지다. 특정.. 공감수 0 댓글수 0 2022. 1. 9.
Docker + Nginx + NextJS + MongoDB + Mongoose FE와 BE를 나누는 것이 타당하지만, 혼자서 개발을 하다보면 하나의 흐름안에서 모두 개발을 하고 싶어집니다. 오래전에는 JSP, Spring, 혹은 Express등 통합된 환경 안에서 FE 개발을 하기도 했습니다. 서버안의 FE 영역이라고 할까요 ㅎㅎ 하지만 지금은 반대의 입장이 되었습니다. FE의 관점에서 서버가 필요해서 사용하는 느낌으로 NextJS를 이용할 수 있습니다. SSR과 CSR 각각의 장점을 모두 이용하면서, API 서버도 함께 구축할 수 있습니다. 물론 복잡도는 올라가죠. 하지만 한번 설정해 놓으면 꽤나 편리합니다. 오늘 Docker를 이용해 가장 앞단의 Nginx 설정과 MongoDB 설정, 그리고 NextJS를 띄워 보겠습니다. 그리고 Mongoose를 이용해 실제 연결까지 실습해 .. 공감수 1 댓글수 2 2021. 12. 18.
ubuntu에 docker 설치 # docker 설치 curl -fsSL https://get.docker.com/ | sudo sh # 도커 컴포즈 설치 (https://github.com/docker/compose) sudo curl -L https://github.com/docker/compose/releases/download/v2.1.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose # 실행 권한 추가 sudo chmod +x /usr/local/bin/docker-compose # 계정 권한 추가 sudo usermod -aG docker ubuntu 공감수 1 댓글수 1 2021. 11. 29.
웹 워커와 서비스 워커 브라우저는 자바스크립트를 실행하기 위해 싱글 스레드를 사용한다. 때문에, 자바스크립트는 한 번에 한 가지의 일만 수행할 수 있다. 비동기 처리를 통해 기다리는 시간을 줄이더라도, 결국 메시지 큐에 쌓인 업무들은 Run to Completion 원칙에 따라 동작합니다. "Run-to-completion" 각 메시지는 다른 메시지가 처리되기 전에 완전히 처리됩니다. 이것은 함수가 실행될 때마다 미리 비워질 수 없고 다른 코드가 실행되기 전에 완전히 실행되며 함t수가 조작하는 데이터를 수정할 수 있다는 사실을 포함하여 프로그램에 대한 추론을 할 때 좋은 속성을 제공합니다. 이것은 C와는 다릅니다. 예를 들어 함수가 쓰레드에서 실행된다면 런타임 시스템이 다른 쓰레드에서 다른 코드를 실행하기 위해 어느 시점에서 .. 공감수 0 댓글수 0 2021. 11. 28.
오라클 무료 VM 설정 5년정도 AWS를 사용했는데, 오라클 클라우드로 이전을 준비하고 있다. 유료 서비스를 사용하더라도 오라클의 조건이 나쁘지 않다. 그래봐야 AWS 요금이 한달에 1~2만원 남짓이지만... 장점은 아래와 같다. 기간 없이 무료다. 고정 IP 준다. 볼륨도 넉넉하게 준다. 유료/무료 정확하게 알려준다. 유료 서비스를 이용하더라도, 상대적으로 착한 가격 VM을 생성해보자! 오라클 클라우드 가입 VM 생성 네트워크에서 고정 IP 생성 고정 IP와 VM 연결 볼륨 생성 (100기가 용량과 함께 고성능 옵션을 선택하자.) 볼륨 마운트 하기 마운트 된 볼륨 사용하기. 6번과 7번에서 주의해야 하는데, 6번은 인스턴스 상세 메뉴에서 "블록 볼륨 연결" > "iSCSI 명령 및 정보" 항목을 복붙하면 된다. 7번은 아래 .. 공감수 0 댓글수 1 2021. 11. 28.
Docker + Nginx + NextJS 도커를 이용해 Nginx와 MongoDB는 컨테이너 환경으로 띄우고, NextJS는 호스트 환경에서 실행하고 싶었다. Nginx 설정과 로그는 볼륨 연결을 하고, MongoDB는 alias로 연결했다. NextJS는 호스트에 떠있기 때문에, host.docker.internal을 통해 연결 했다. docker compose 설정은 다음과 같다. version: '2' services: proxy: image: nginx:latest ports: - "80:80" - "443:443" volumes: - ./nginx/nginx.conf:/etc/nginx/nginx.conf - ./nginx/logs:/var/log/nginx environment: - TZ=Asia/Seoul extra_hosts: -.. 공감수 0 댓글수 0 2021. 11. 27.
NextJS + Meterial UI 다른 포스팅 찾아 볼 필요 없다. 공식 예제 보고, 설정하면 된다. Link와 같은 NextJS 자체 컴포넌트 랩핑 예시, SSR 환경에서 스타일이 잘 적용되어 내려오는지 모두 확인해 볼 수 있다. 물론 타입스크립트도 지원 ;) https://github.com/mui-org/material-ui/tree/master/examples/nextjs https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-typescript 공감수 1 댓글수 0 2021. 11. 26.
쿠버네티스 - 잡과 스케줄러 - 19 작업을 완료한 후에는, 종료되는 서비스가 있을 수 있다. 쿠버네티스는 '잡' 이라는 리소스로 해당 기능을 지원한다. 잡을 통해, 파드 내부 프로세스가 완료되면 해당 파드를 완료 시킬 수 있다. 물론 완료에 실패하면 이후처리를 결정 할 수 있다. 때문에 잡은 제대로 완료되는 것이 중요한 작업에 매우 유용하다. 이러한 작업의 좋은 예는 배치 작업이 있다. apiVersion: batch/v1 kind: Job metadata: name: batch-example spec: template: metadata: labels: app: batch-example spec: restartPolicy: OnFailure containers: - name: main image: 배치를 실행할 이미지 kubectl get.. 공감수 0 댓글수 0 2021. 10. 22.
쿠버네티스 - 레플리카셋 - 18 레플리카셋은 우리가 배웠던 레플리케이션을 대체할 새로운 요소다. 레플리케이션컨트롤러와 레플리카셋의 차이점은 다음과 같다. 1. 레플리카셋은 특정 레이블이 없는 파드를 매칭시킬 수 있다. 2. 레플리카셋은 특정 레이블의 키를 갖는 파드를 매칭시킬 수 있다. (key=*) 3. 두개의 레이블의 조합으로 파드를 매칭시킬 수 있다. apiVersion: apps/v1 kind: ReplicaSet metadata: name: suk9-rc spec: replicas: 3 selector: matchLabels: app: suk9-rc template: metadata: labels: app: suk9-rc spec: containers: - name: suk9-rc image: seokkyulee/suk9 po.. 공감수 0 댓글수 0 2021. 9. 28.
쿠버네티스 - 레플리케이션컨트롤러 - 17 레플리케이션컨트롤러의 역할은 실행중인 파드의 수를 레이블 셀렉터와 일치시키는 것이다. 쿠버네티스는 애플리케이션의 실행을 보장한다. 이런 기능을 담당하는 리소스가 레플리케이션 컨트롤러다. 노드가 다운되는 등, 특정 이유로 인해 파드가 사라진 경우 파드를 재실행한다. 반대로 너무 많은 파드가 실행된 경우 제거한다. 말 그대로 복제본(레플리카)을 컨트롤 한다. 이러한 조정 절차는 다음과 같다. 레이블 셀렉터와 매칭되는 파드를 찾는다. 매칭 된 파드의 수와, 설정된 수를 비교한다. 많다면 파드를 삭제하고, 부족하다면 현재 템플릿에서 파드를 추가 생성한다. 레플리케이션 컨트롤러는 세 가지 중요 요소를 가지고 있다. 레이블 셀렉터(label selector)는 레플리케이션컨트롤러의 파드의 매칭 범위를 결정한다. 레.. 공감수 1 댓글수 0 2021. 9. 22.
쿠버네티스 - 프로브 - 16 이전에 우리는 레플리카(레플리케이션 컨트롤러) 설정을 통해 파드가 죽은 경우, 쿠버네티스가 이를 되살리고 그 숫자를 관리한다는 사실을 알게 되었다. 이에 대해서 좀 더 자세히 알아보자. 만약 파드 안에 있는 컨테이너 중 하나가 죽으면 어떻게 될까? 파드가 노드에 스케줄링되는 즉시, 해당 노드의 kubelet은 파드의 컨테이너를 실행하고 파드가 존재하는 한 계속 실행되도록 할 것이다. 애플리케이션 내부의 문제로 컨테이너가 죽더라도 쿠버네티스는 이를 자동으로 되살린다. 물론 애플리케이션에서 쿠버네티스에 재실행을 요청할 수도 있다. 그러나 대부분의 경우 애플리케이션의 외부에서 애플리케이션 컨테이너의 상태를 체크하는 것이 좋다. 흔히 서버를 설정하다보면, 상위 인프라에 헬스 체크를 제공하게 된다. 쿠버네티스도 .. 공감수 2 댓글수 2 2021. 9. 8.
Next.js - Assets 경로와 런타임 변수 - 4 public, assetprefix 경로 설정 설명 + 런타임 환경변수 공감수 1 댓글수 0 2021. 9. 7.
Next.js - 서버 분리 - 3 Next.js에는 서버가 포함되어 있지만, 원한다면 커스텀 서버를 작성하고 거기에 Next.js를 연결해 사용할 수 있다. 이렇게 하면 몇가지 장점이 생긴다. - Next.js의 최상단 진입점을 제어할 수 있다. - Node레벨의 라이브러리를 사용할 수 있게 된다. - Koa, Express와 같은 서버를 구성할 수 있고, 서드파티 모듈을 이용할 수 있게 된다. - Node레벨(최상단)의 에러처리를 할 수 있다. 공감수 1 댓글수 0 2021. 9. 7.
쿠버네티스 - 파드 중지/삭제 - 15 kubectl get po kubectl delete po suk9 간단하게 파드를 삭제하려면, 파드 리스트를 확인 후, delete 명령어로 파드를 삭제할 수 있다. 물론 바로 삭제되지는 않고 특정 절차를 진행하게 된다. 1. 쿠버네티스가 프로세스에 SIGTERM 신호를 보낸다. 2. 30초 동안 기다린다. 3. 시간 동안 종료되지 않으면 SIGKILL 신호를 보내 종료한다. 따라서 그레이스풀하게 종료하려면 SIGTERM 신호를 바르게 처리해야 한다. kubectl delete po -l creation_method=manual 레이블 셀렉터를 통해 다수의 pod를 모두 삭제할 수도 있다. 위의 명령으로 셀렉터에 걸린 pod는 모두 삭제된다. 물론 namespace 안에서 유효하다. kubectl co.. 공감수 2 댓글수 0 2021. 9. 6.
쿠버네티스 - 네임스페이스 - 14 레이블을 통해 쿠버네티스의 모든 오브젝트들을 셀렉트 할 수 있다는 것을 알게 되었다. 하지만 이로서는 충분치 않다. 여러 오브젝트가 같은 레이블을 가지고 있는 경우 결과가 겹칠 수 있기 때문이다. 이번에는 오브젝트를 그룹으로 묶을 수 있는 기능인 네임스페이스를 알아보자. 백문이 불여일행이다. 일단 쳐보자. kubectl get ns default, kube-public, kube-system 등의 네임 스페이스가 보일 것이다. 지금까지 우리는 default 네임스페이스에서만 작업을 했다. kubectl get po -n kube-system kube-system의 pods 리스트를 볼 수 있다. 이런 시스템 파드들이 우리가 실행하는 파드들과 섞여 있다면 혼란 정도가 아니라, 안정성에도 좋지 않은 영향을 .. 공감수 1 댓글수 0 2021. 8. 12.
Next.js - 데이터 가져오기 - 2 Next.js를 사용하면 CSR과 SSR을 자유롭게 넘나들 수 있다. Next.js에서는 데이터를 취급하는 방법이 몇 가지 있고, 이로 인해 렌더링 방식이 달라진다. 초기에 이 기능들을 정확하게 익히지 않으면, 계속 헷갈리게 된다. 차이점과 사용법을 분명하게 하고 시작하자. 웹 페이지는 크게 2가지로 나눌 수 있는데, 데이터가 필요 없는 페이지와 데이터가 필요한 페이지다. 1. 데이터가 필요 없는 정적 페이지를 Next.js가 취급하는 방법 위와 같이 파일 2개를 간단하게 작성하고 npm run build -> npm run start 스크립트를 통해 빌드하고 로컬 서버를 열어 localhost:3000에 접속해보자. 홈(/) 화면에서 프로필(/profile) 화면으로 이동해보자. 반대로 프로필 화면에서.. 공감수 4 댓글수 0 2021. 8. 5.
Next.js - 시작 - 1 2년전 개인적인 프로젝트에 Next.js를 처음 써보고, 오랫동안 사용하지 않았었다. 근래 회사 프로젝트에 Next.js를 사용하게 되면서 그간 몰랐던 기능, 새로운 기능을 공부하기 위해 정리해보려 한다. Next.js는 공식문서가 잘 되어 있기 때문에, 공식문서를 통해 익혀보자! (Next.js의 장/단점에 대해서는 굳이 언급하지 않겠다.) 터미널을 열고, 아래의 명령어를 통해 아주 편리하게 설치가 가능하다. npx create-next-app --typescript npm run dev 순식간에 설치가 끝났다. 설치된 폴더에서 pages : 라우터와 맵핑된다. public : 정적 파일을 딜리버리 한다. 루트 경로에 맵핑되어 있다. localhost:3000/about 접속하면 해당 컴포넌트가 랜더링.. 공감수 1 댓글수 0 2021. 8. 1.
쿠버네티스 - 레이블 - 13 실제 쿠버네티스를 이용해 서비스를 배포할 경우, 파드를 분류할 필요가 있다. 제대로 분류가 되어 있지 않다면, 무수히 많은 파드들이 뒤죽박죽 될 것이 분명하기 때문이다. 레이블 레이블은 리소스에 첨부하는 키-값 쌍이다. 원하는 만큼 추가할 수 있고 이를 통해 리소스를 선택할 수 있다. 바로 실습으로 확인해보자. apiVersion: v1 kind: Pod metadata: name: suk9 labels: creation_method: manual env: prod spec: containers: - image: seokkyulee/suk9 name: suk9 ports: - containerPort: 8080 protocol: TCP kubectl create -f suk9-manual.yaml kub.. 공감수 1 댓글수 0 2021. 8. 1.
쿠버네티스 - YAML - 12 쿠버네티스 리소스(파드를 포함하는)는 쿠버네티스 Rest Api 엔드포인트에 JSON 혹은 YAML 파일을 전송해 생성한다. Dockerfile이 가져다주는 이점들과 비슷한 맥락에서 설정은 파일로 나와 있는게 여러면에서 유리하다. kubectl get pods kubectl get po suk9-gnrzs -o yaml 현재 파드 목록을 출력한 뒤, 한 녀석을 골라 yaml 정의를 구경해보자. 이렇게 긴걸 언제 작성하지? 보다보면 이런 생각이 들텐데 걱정하지 않아도 된다. 실제로 우리가 작성하는 영역은 간소하다. suk9.yaml apiVersion: v1 kind: Pod metadata: name: suk9 spec: containers: - image: seokkyulee/suk9 name: suk.. 공감수 1 댓글수 0 2021. 7. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.