티스토리

Hoo_Dev

검색하기

블로그 홈

Hoo_Dev

hoo-dev.tistory.com/m

알고리즘, SWEA, 백준, IT, Programmers, Flutter

구독자: 0

방명록 방문하기

주요 글 목록

[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.. 공감수 0 댓글수 0 2024. 5. 8.
[Web] Service Mesh MSA의 통신의 복잡함 해결각 서비스 간의 통신의 복잡함 → 서비스 간 연결 구조를 알기 어려워 장애가 생겼을 시 위치 파악이 어려움ex) 클라이언트 → 서비스A → 서비스B 로 통신을 한다고 했을 때, 서비스B가 느려지거나 장애가 생긴다면 서비스 A에서 파악이 어려움위와 같은 상황을 해결하기 위한 기술 → Service MeshService MeshMSA의 단점을 인프라 단계에서 해결Service Mesh서비스와 서비스간의 통신이 있을 때, 서비스마다 프록시를 둠.서비스간의 통신은 프록시를 통해서 해결하고, 한쪽 서버에서 장애가 났을 때 프록시가 서킷 브레이커 역할을 대신해준다.서킷 브레이커(Circuit breaker)?디자인 패턴의 종류서비스A → 서킷 브레이커 → 서비스B 를 예시로 들었을 때, .. 공감수 0 댓글수 0 2024. 5. 7.
[Web] MFA란(Micro Frontend Architecture) Micro Frontend Architecture 개념장점작고, 응집력 있는 유지보수성을 가지는 코드베이스분리배포가 용이, 자율적인 팀 조직운영이 수월프론트엔드 개발을 점진적 업그레이드 또는 재작성이 수월단점배포 번들 사이즈가 커짐서로간의 개발 환경의 차이로 복잡도 증가운영의 복잡도 증가MFA 기법의 종류서버 템플릿 통합각 서버로 html 템플릿을 요청하고, 최종 응답서버에서 각 템플릿을 조합해서 응답을 보냄 서버측에서 최종 화면을 조합한다.빌드타임 통합단위 애플리케이션을 패키지로 배포하고, package.json에 명시한 후 컨테이너 애플리케이션에서 import하여 사용하는 방법 각 애플리케이션에 대한 런타임 대응이 안된다. 애플리케이션을 릴리즈하고 최종 애플리케이션에서 컴파일해야 한다. iframe.. 공감수 0 댓글수 0 2024. 5. 3.
[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 컨테이너를 올리는 방식으.. 공감수 0 댓글수 0 2024. 4. 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 ... 함수 종류에 따라 콜백 함수들이 큐에 들어갔다면 이벤트 루프가 함수를 내보내는 우선순위는 (높음).. 공감수 0 댓글수 0 2023. 3. 20.
[백준 1260 / 파이썬 풀이] DFS와 BFS from collections import deque def dfs(v): print(v, end=' ') visited[v] = 1 for i in graph[v]: if visited[i] != 1: dfs(i) def bfs(v): visited[v] = 0 q = deque() q.append(v) while q: c = q.popleft() print(c, end=' ') for j in graph[c]: if visited[j]: q.append(j) visited[j] = 0 N, M, V = map(int, input().split()) graph = [[] for _ in range(N+1)] visited = [0] * (N+1) for i in range(M): n1, n2 = map.. 공감수 0 댓글수 0 2023. 3. 20.
[프로그래머스 / 파이썬 풀이] 행렬의 곱셈 def solution(arr1, arr2): answer = [] for i in range(len(arr1)): num_sum_lst = [] for j in range(len(arr2[0])): num_lst = [] for k in range(len(arr1[i])): num_lst.append(arr1[i][k] * arr2[k][j]) num_sum_lst.append(sum(num_lst)) answer.append(num_sum_lst) return answer A*B와 C*D의 행렬일 경우 B와 C가 일치해야 행렬의 곱이 이루어진다. 이 점을 활용해서 풀이 공감수 0 댓글수 0 2023. 2. 17.
[프로그래머스 / 파이썬 풀이] 괄호 회전하기 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 괄호 배열을 한칸씩 회전하면서 모든 수를 비교한.. 공감수 0 댓글수 0 2023. 2. 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의 범위가 배우.. 공감수 0 댓글수 0 2023. 2. 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.. 공감수 0 댓글수 0 2023. 2. 15.
[Next.js] 웹 접근성 개선 버튼들과 a태그에 적절한 이름이 있지 않아 스크린리더에게 좋지 않은 사용자 경험을 주고있다. element가 빠진 부분은 SEO 개선에서 해결하고자 한다. 해당 오류가 생긴 곳에 aria-label 속성을 태그 안에 추가시켜줌으로서 각 버튼들과 태그의 기능에 대해 명시해준다. (aria-label을 사용 할 경우 voiceover 기능으로 웹 화면을 보지 못하는 사용사들에게 음성으로 해당 UI들의 기능을 음성으로 설명해준다.) https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label aria-label - Accessibility | MDN The aria-label attribute defines a str.. 공감수 0 댓글수 0 2023. 2. 15.
[Next.js] 웹 성능 개선(Largest Contentful Paint (LCP) ) 이전에 포스팅에서 저하된 성능들에 대한 개선을 진행 해 볼 예정이다. Largest Contentful Paint (LCP) 최적화 https://nextjs.org/docs/api-reference/next/image#priority next/image | Next.js Enable Image Optimization with the built-in Image component. nextjs.org 해당 서비스를 개발자 모드에서 실행 해보면 다음과 같은 warning이 콘솔창에 나타나는데 이가 뜻하는 것은 Image 태그 안에 priority 속성을 true로 바꿔주라는 말인데 그 이유는 모든 priority의 기본값은 false이고, 공식 문서를 참고하면 되도록이면 웹사이트에서 스크롤을 내리지 않고 제.. 공감수 0 댓글수 0 2023. 2. 15.
[Next.js] Lighthouse를 통한 웹 성능 검사 Next.js를 활용한 네이버 맵 관련 토이 프로젝트의 웹 성능 검사를 진행해보려 한다. 테스트 하고자 하는 페이지의 주소로 접속 후 Lighthouse 탭으로 이동한다. Performance 웹 페이지의 로딩 속도 등 실제 성능을 측정합니다. Progressive Web App PWA로 부르며, 웹과 네이티브 앱의 기능 모두의 이점을 가지도록 만들어진 서비스인지 체크합니다. Best practices Best practices를 따라 개발되었는지 체크합니다. Accessibility 접근성입니다. 보통 폰트 사이즈, 메뉴간 간격 등을 측정합니다. SEO Search Engine Optimization의 약자로 검색 엔진 수집 최적화에 관련된 부분입니다. 여긴 아마 웹 사이트 운영하시면 많이 민감하게 신.. 공감수 0 댓글수 0 2023. 2. 15.
[Next.js] getStaticPaths와 getStaticProps를 사용하여 정적 페이지 만들기 https://nextjs.org/docs/basic-features/data-fetching/get-static-paths Data Fetching: getStaticPaths | Next.js Fetch data and generate static pages with `getStaticProps`. Learn more about this API for data fetching in Next.js. nextjs.org getStaticPaths를 사용하여 빌드 타임에서 페이지 경로를 정적으로 생성해둔다. ex) getStaticPaths export const getStaticPaths: GetStaticPaths = async () => { const stores = (await import('../.. 공감수 0 댓글수 0 2023. 2. 15.
[프로그래머스 / 파이썬 풀이] 영어 끝말잇기 def solution(n, words): dic = {words[0] : 1} for i in range(1, len(words)): if words[i][0] != words[i-1][-1]: return [i % n + 1, i // n + 1] else: if words[i] not in dic: dic[words[i]] = 1 else: dic[words[i]] += 1 return [i % n + 1, i // n + 1] return [0, 0] 딕셔너리를 생성 후 끝말잇기의 첫 값을 키밸류로 넣는다. for문을 1번 인덱스부터 시작해 각 단어의 끝과 첫 글자를 비교한다. (다르면 return) 이후 딕셔너리에 없으면 추가, 있으면 +1을 해주면서 만약 +1이 된다면 중복이므로 return .. 공감수 0 댓글수 0 2023. 2. 15.
[Next.js] 상태 관리 라이브러리 SWR이란? SWR은 React 프레임워크인 Next.js를 만든 팀이 만들었다. https://swr.vercel.app/ko 데이터 가져오기를 위한 React Hooks – SWR 데이터 가져오기를 위한 React Hooks Suspense Pagination swr.vercel.app react query에 비해 진입 장벽이 낮고, fetch 속도가 빠르며 코드가 경량화 돼 있는 특징이 있다. useSWR SWR은 useSWR이라는 훅을 사용하여 데이터를 조작한다. const { data, error, isValidating, mutate } = useSWR(key, fetcher, options) 파라미터 key : 요청을 위한 고유한 값 fetcher : 데이터를 조작하기 위한 함수를 반환하는 Promise.. 공감수 0 댓글수 0 2023. 2. 14.
[프로그래머스 / 파이썬 풀이] 이진 변환 반복하기 def solution(s): global answer answer = [0, 0] first_arr = list(s) first_arr = list(map(int, s)) answer[1] = len(first_arr) - sum(first_arr) def binary(n): global answer arr = [] while n >= 1: next_n = n % 2 arr.append(next_n) n //= 2 answer[1] += len(arr) - sum(arr) return arr while True: if len(first_arr) == 1 and sum(first_arr) == 1: return answer next_arr = binary(sum(first_arr)) answer[0] +.. 공감수 0 댓글수 0 2023. 2. 14.
[프로그래머스 / 파이썬 풀이] 멀리 뛰기 def solution(n): memo = [0] * (n+2) memo[1] = 1 memo[2] = 2 for i in range(3, n+1): memo[i] = (memo[i-1] + memo[i-2]) % 1234567 return memo[n] dp문제 중 하나 n개의 칸을 뛰려면 n-1개 칸을 뛸 때의 경우의 수 + n-2개 칸을 뛸 때의 경우의 수가 돼야 한다. (5개의 칸 = 4개의 칸 + 3개의 칸 .... 3개의 칸 = 2개의 칸 + 1개의 칸) 과 같은 식으로 결론적으론 피보나치 수열과 같은 방식의 풀이로 풀이하게 된다. memo 배열을 초기화 하는 방법 중 n+1로 둔 이유는 만약 n이 1이 들어오게 된다면 3번째 인덱스인 memo[2] 를 생성할 수 없기 때문에 그 부분을 고려해.. 공감수 0 댓글수 0 2023. 2. 14.
[프로그래머스 / 파이썬 풀이] 짝지어 제거하기 def solution(s): answer = -1 stack = [] for i in range(len(s)): if len(stack) == 0: stack.append(s[i]) else: if stack[-1] == s[i]: stack.pop() else: stack.append(s[i]) if stack: answer = 0 else: answer = 1 return answer stack을 활용 한 풀이. stack과 현재 순회하는 값을 비교 한 후 stack의 마지막 원소와 순회하는 원소가 같으면 stack을 pop 해준다. 같지 않다면 stack에 순회하는 원소를 append 순회가 끝났을 때, stack이 비어있다면 1, 비어있지 않다면 0 공감수 0 댓글수 0 2023. 2. 13.
[프로그래머스 / 파이썬 풀이] 구명보트 from collections import deque def solution(people, limit): answer = 0 people.sort() people = deque(people) while len(people) > 1: if people[0] + people[-1] 공감수 0 댓글수 0 2023. 2. 13.
[Next.js] _document, _app 이란? Next.js 프로젝트를 처음 생성하면 기본적으로 제공되는 _document와 _app이 제공된다. 오늘은 이 두 페이지의 사용 목적에 대해 알아보려고 한다. _app _app은 서버로 요청이 들어왔을 때 가장 먼저 실행되는 루트 컴포넌트이다. 페이지에 적용 할 공통 레이아웃을 정의 할 때 사용 할 수 있다. ex) import '@/styles/globals.css' import type { AppProps } from 'next/app' export default function App({ Component, pageProps }: AppProps) { return } 가장 초기 생성 된 _app의 코드를 확인해보면 1. Component 속성 값은 서버에 요청한 페이지가 된다. 아래 예시를 보게 된.. 공감수 0 댓글수 0 2023. 2. 13.
[Next.js] Next.js에서 window 혹은 document 속성 불러오기(dynamic import) A const NoSSR = () => { return width: {window.innerWidth}; }; export default NoSSR; B import type { NextPage } from 'next'; import dynamic from 'next/dynamic'; import NoSSR from '../../components/section1/NoSSR'; const Example: NextPage = () => { return ( SSR에서 윈도우 객체 불러오기 no SSR ); }; export default Example; 보통 React를 사용 할 때 A컴포넌트를 B컴포넌트에서 사용 할 때 일반적인 import를 통해 가져오게 된다. 하지만 Next에서 위와 같은 방식으로 w.. 공감수 1 댓글수 0 2023. 2. 10.
[Next.js] getServerSideProps란? (SSR) getServerSideProps getServerSideProps는 이전 게시물에 말했듯이 두 가지 pre-rendering 기능 중 하나를 의미한다. pre-rendering의 뜻을 다시 한 번 짚고 간다면 사전에 미리 HTML을 렌더링 하는 것인데 즉, HTML을 미리 생성하고 최소한의 js를 연결 시킨 후 클라이언트에서 요청이 들어오면 해당 HTML을 로드하면서 나머지 js를 불러와 화면에 렌더링 해주는 방법이다. getServerSideProps 예시코드 import type { GetServerSideProps, NextPage } from 'next'; interface Props { data: number; } const Example: NextPage = ({ data }) => { re.. 공감수 0 댓글수 0 2023. 2. 10.
[프로그래머스 / 파이썬 풀이] 다음 큰 숫자 def solution(n): def changeBinary(n): arr = [] x = n while x >= 1: arr.append(x%2) x //= 2 return arr for i in range(n+1, 1000001): if changeBinary(i).count(1) == changeBinary(n).count(1): return i answer = 0 return answer 10진법을 2진법으로 변환하는 함수를 작성하고 입력받은 값보다 큰 수 부터 순회하는 for문을 통해 해당 숫자를 2진법으로 변환 후 1의 개수를 비교한다. 공감수 0 댓글수 0 2023. 2. 10.
[프로그래머스 / 파이썬 풀이] 피보나치 수 def solution(n): answer = 0 stack = [0, 1] for i in range(100001): stack.append(stack[-1] + stack[-2]) if i == n: answer = stack[n] % 1234567 break return answer 스택에 미리 정의 된 0, 1 번째 수를 작성하고 피보나치 수는 맨마지막 값과 그 마지막 값의 전 값을 더하기 때문에 해당하는 값을 스택에 추가해준다. 그리고 n의 값과 더해준 값의 인덱스가 같다면 break를 해줘서 효율성을 높여준다. 나는 범위를 문제에 맞게 100000 까지 순회하고 해당 인덱스에서 break하는 식으로 작성했지만, 범위를 range(n+1)로 설정한다면 좀 더 좋은 코드를 작성 할 수 있었을 것 .. 공감수 0 댓글수 0 2023. 2. 10.
[프로그래머스 / 파이썬 풀이] 숫자의 표현 def solution(n): answer = 0 for i in range(1, n+1): cnt = 0 for j in range(i, n+1): cnt += j if cnt >= n: answer += 1 break elif cnt > n: break return answer 이중포문을 통해 풀이. 누적합의 값이 n보다 커지면 break (효율성) 공감수 0 댓글수 0 2023. 2. 10.
[Next.js] getStaticProps란? (SSG, 정적 페이지 생성) 위 개념을 먼저 알기 전에 PreRendering에 대해 먼저 짚고 넘어가려 한다. PreRendering이란? Next.js에서는 두 가지 PreRendering 방식을 제공하는데, Static Generation(정적 생성 방식)과, Server-Side Rendering 방식이다. Next.js에서는 Static Generation을 권장한다. Next.js에서 Static Generation 을 사용하는 법을 예제를 통해 간단히 알아보자. getStaticProps import type { NextPage } from 'next'; interface Props { data: number; } const Example: NextPage = ({ data }) => { return ( getStati.. 공감수 0 댓글수 0 2023. 2. 9.
[프로그래머스 / 파이썬 풀이] 최솟값 만들기 from itertools import product def solution(A,B): answer = 0 A.sort() B.sort(reverse=True) for i in range(len(A)): answer += A[i] * B[i] return answer 두 배열 중 최솟값을 만들려면 한 배열의 가장 작은 원소 * 또 다른 배열의 가장 큰 원소 의 곱으로 이루어져야 한다. 각 배열을 sort 후 풀이 공감수 0 댓글수 0 2023. 2. 9.
[Web] 쿠키, 세션, 웹 스토리지의 차이점과 사용처 쿠키란? 쉽게는 흔히들 아는 헨젤과 그레텔 이야기 처럼 쿠키를 바닥에 떨어뜨려 자신의 흔적을 남기는 것과 같다고 생각하면 된다. 즉, 서버에 요청한 클라이언트의 정보를 일시적으로 key : value 모양으로 담게 된다. - 클라이언트(브라우저)에 저장되는 키와 같이 들어있는 작은 파일. - 클라이언트의 상태 정보를 클라이언트에 저장했다가 참조. - 한 개에 4KB 까지 저장, 최대 300개 까지 저장 할 수 있는 텍스트 파일 - 사용자가 따로 요청을 보내지 않아도 브라우저가 Request 시 Request Header에 넣어서 자동으로 서버에 전송한다. - 만료 날짜 지정이 가능 하다는 특성에 의해 n일 동안 보지 않기, 재방문시 아이디/비밀번호 자동입력 등 특정 시간이 지나면 다시 띄워주는 팝업 구현.. 공감수 0 댓글수 0 2023. 2. 8.
[프로그래머스 / 파이썬 풀이] H-index def solution(citations): answer = 0 citations.sort(reverse=True) for i, j in enumerate(citations): if i >= j: return i return len(citations) https://www.ibric.org/myboard/read.php?Board=news&id=270333 [연구논문을 위한 핵심 10단계] H-지수(H-Index) 란 무엇인가? 일반적으로 특정 연구원의 연구성과를 평가하기 위해 얼마나 많은 논문을 발표 하였는지를 보게됩니다. 그러나 단순히 발표한 논문 수로만 그 연구원의 연구 업적을 평가 하기에는 발표한 논문 www.ibric.org 문제 이해를 위해 위 링크에서 참고했다. 내림차순 정렬 후 enumer.. 공감수 0 댓글수 0 2023. 2. 8.

LIST

문의안내

티스토리
로그인
고객센터

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