분류 전체보기 144

[Infra] Jenkins와 Docker를 사용한 Vue3 + Spring boot2 배포 (2)

Jenkins 설정Plugin 설치Jenkins를 본격적으로 사용하기 전, Jenkins의 동작을 도와주는 플러그인들을 설치해보려 한다.설치 Plugin 항목GradleJava(spring Boot)를 빌드하기 위한 PluginNodeJSNodeJS(Vue3)를 빌드하기 위한 PluginPublish over SSHJenkins에서 빌드 된 파일을 외부 서버로 옮기기 위한 PluginPlugin(Gradle, NodeJS, Publish over SSH) 설정Gradle본인이 Jenkins에서 사용 할 Gradle의 버전을 지정해준다.(자신이 사용하는 프로젝트의 Gradle 버전과 일치 시키기를 권장)NodeJS본인이 Jenkins에서 사용 할 Node 버전을 지정해준다.(자신이 사용하는 프로젝트의 No..

Infra 2024.05.08

[Web] Service Mesh

MSA의 통신의 복잡함 해결각 서비스 간의 통신의 복잡함 → 서비스 간 연결 구조를 알기 어려워 장애가 생겼을 시 위치 파악이 어려움ex) 클라이언트 → 서비스A → 서비스B 로 통신을 한다고 했을 때, 서비스B가 느려지거나 장애가 생긴다면 서비스 A에서 파악이 어려움위와 같은 상황을 해결하기 위한 기술 → Service MeshService MeshMSA의 단점을 인프라 단계에서 해결Service Mesh서비스와 서비스간의 통신이 있을 때, 서비스마다 프록시를 둠.서비스간의 통신은 프록시를 통해서 해결하고, 한쪽 서버에서 장애가 났을 때 프록시가 서킷 브레이커 역할을 대신해준다.서킷 브레이커(Circuit breaker)?디자인 패턴의 종류서비스A → 서킷 브레이커 → 서비스B 를 예시로 들었을 때, ..

Web 2024.05.07

[Web] MFA란(Micro Frontend Architecture)

Micro Frontend Architecture 개념장점작고, 응집력 있는 유지보수성을 가지는 코드베이스분리배포가 용이, 자율적인 팀 조직운영이 수월프론트엔드 개발을 점진적 업그레이드 또는 재작성이 수월단점배포 번들 사이즈가 커짐서로간의 개발 환경의 차이로 복잡도 증가운영의 복잡도 증가MFA 기법의 종류서버 템플릿 통합각 서버로 html 템플릿을 요청하고, 최종 응답서버에서 각 템플릿을 조합해서 응답을 보냄 서버측에서 최종 화면을 조합한다.빌드타임 통합단위 애플리케이션을 패키지로 배포하고, package.json에 명시한 후 컨테이너 애플리케이션에서 import하여 사용하는 방법 각 애플리케이션에 대한 런타임 대응이 안된다.  애플리케이션을 릴리즈하고 최종 애플리케이션에서 컴파일해야 한다. iframe..

Web 2024.05.03

[Infra] Jenkins와 Docker를 사용한 Vue3 + Spring boot2 배포 (1)

이번에 우연히 Jenkins와 Docker를 사용해 Vue3와 Spring boot 2를 배포하게 되어 그 경험에 대한 내용을 적어보려한다.Jenkins란?젠킨스란 소프트웨어 개발시 지속적인 통합(Continuous integration)을 제공해주는 도구이다. 더불어 지속적인 배포 (Continuous Delivery/Deployment)환경까지 구축할수 있는 도구이다. 따라서 Git을 통한 push의 이벤트를 감지하여 자동으로 CI/CD를 수행하도록 도와주는 도구라고 볼 수 있다. (물론 특정 주기에 따라 CI/CD를 수행 할 수도 있고, 여러 방식을 통해 CI/CD를 수행 할 수 있다.) Docker는 어디서 사용해?나같은 경우는 Docker를 통해 서버 안에 Jenkins 컨테이너를 올리는 방식으..

Infra 2024.04.23

[Javascript] 이벤트 루프 Macro Task Queue & Micro Task Queue (매크로큐, 마이크로 큐)

위 사진은 자바스크립트의 이벤트루프의 동작 원리를 보여주는 사진이다. 이 때 Callback Queue는 하나의 큐 처럼 보이지만 실제로는 여러 큐로 나눠져 있다. 그 중 매크로 태스크 큐와 마이크로 태스크 큐에 대해 알아보려고 한다. 콜백 큐는 위 사진과 같이 매크로 태스크 큐와 마이크로 태스크 큐로 나뉘게 되는데 나누는 기준은 함수의 종류에 따라 나뉘게 된다. Macro Task Quque setTimeoutm setInterval, setImmediate ... Micro Task Queue Primise callback, process, nextTick, queueMicrotask, await ... 함수 종류에 따라 콜백 함수들이 큐에 들어갔다면 이벤트 루프가 함수를 내보내는 우선순위는 (높음)..

Javascript & React 2023.03.20

[프로그래머스 / 파이썬 풀이] 괄호 회전하기

def solution(s): s = list(s) global answer answer = 0 def check(brackets): dic = { '}' : '{', ']' : '[', ')' : '(' } global answer lst = [] for i in brackets: if len(lst) == 0: lst.append(i) else: if i in dic.keys(): if dic[i] == lst[-1]: lst.pop() else: lst.append(i) if not lst: answer += 1 return for i in range(len(s)): a = s.pop(0) s.append(a) check(s) return answer 괄호 배열을 한칸씩 회전하면서 모든 수를 비교한..

Programmers 2023.02.17

[프로그래머스 / 파이썬 풀이] 예상 대진표

시간초과 코드 def solution(n,a,b): answer = 0 arr = [i for i in range(1, n+1)] while True: sub_lst = [] for i in range(0, n, 2): if arr[i] == a and arr[i+1] == b: answer += 1 return answer if arr[i] in [a, b]: sub_lst.append(arr[i]) elif arr[i+1] in [a, b]: sub_lst.append(arr[i+1]) else: sub_lst.append(arr[i]) arr = sub_lst answer += 1 n //= 2 return answer 문제에 맞춰 로직을 그대로 구현 한 결과로 시간초과가 나게됨 (n의 범위가 배우..

Programmers 2023.02.16

[Next.js] SEO 개선하기

현재 해당 프로젝트는 두가지의 SEO 감점 요인을 가지고 있다. 1. 문서에 title이 없음 2. description문서가 없음 이 두가지가 무엇인가? 빨간 원 - title 파란 네모 - description 두 가지를 해결 하기 위한 방법 description에 대한 해결 방법 (title 같은 경우는 document에서 지정 해주니 에러가 나왔다. 자세한 내용은 아래 링크 참고) https://nextjs.org/docs/messages/no-title-in-document-head no-title-in-document-head | Next.js No Title in Document Head Prevent usage of with Head component from next/document. A..

Next.js 2023.02.15
LIST