전체 글

전체 글

    LightSwitch 서비스 인프라 트러블 슈팅 - Docker Network

    안녕하세요. LightSwitch 서비스에서 인프라 개발에 참여했던 박현우 입니다. LightSwitch는 오픈소스 피쳐플래깅 솔루션으로, 도커 이미지 형태로 누구나 쉽게 서비스에 피쳐 플래깅을 도입할 수 있는 서비스입니다.저는 인프라와 자바스크립트 SDK 개발자로서 LightSwitch 팀에서 함께 프로젝트를 진행했는데요, 서비스의 인프라를 구성하면서 겪은 문제를 공유하고자 정리해 보았습니다.Nginx 구성하기인프라 담당으로서 첫 번째로 담당했던 서비스 SPOPARTY에서는 호스트 운영체제에 바로 Nginx를 설치하여 사용했는데, LightSwitch 서비스에서는 nginx도 컨테이너로 관리하는 방식을 이용하게 되었습니다.따라서, 컨테이너화된 nginx에서 리버스 프록시를 활용하여 backend 서버로..

    Vite, Webpack, Babel 관계 정리

    개요JavaScript 라이브러리를 개발하며 React, Vue와 같은 프레임워크를 제외하고 빌드와 관련된 여러 도구들의 관계를 정리하고자 포스팅한다.1. WebPack1 - 1. 웹팩이란?웹팩은 웹 어플리케이션에서 사용하는 수많은 리소스를 하나의 파일로 병합 및 압축 해주는 모듈 번들러이다.1. 자바스크립트에서의 모듈자바스크립트에서의 모듈이란 특정 기능을 가진 코드들을 하나의 파일로 관리하는 것// date.jsexport const getDate() => new Date().valueOf();2. 웹팩에서의 모듈웹팩에서의 모듈은 자바스크립트 모듈 뿐만이 아니라 HTML, JavaScript, Images, Font등 웹 애플리케이션을 구성하는 모든 자원들을 모듈이라고 한다.3. 모듈 번들링출처 : h..

    Vue3 Axios 사용 시 CORS + 504(Gateway Time-out)

    개요 vue를 통해 front-end측 로직 처리 중 이상한 오류가 발생하여 공유한다. api 호출 시 특정 상황에서 CORS 오류가 발생하는데, CORS 오류와 함께 504 에러가 발생하는 것이다. 서버측 CORS 설정은 한참전에 완료되었기 때문에 다른 문제라고 바로 생각이 들어서, CORS + 504 에러가 발생하는 경우로 검색해봤다. 아래의 블로그가 나와 비슷한 현상이 발생하는것 같아서 적용해보니 해결할 수 있었다. 504 (Gateway Timeout) 에러 해결 (AWS EB, Node.js) 또한 CORS와 함께 504 에러가 발생하는 이유는 아래의 글에서 확인할 수 있었다. https://github.com/kubernetes/ingress-nginx/issues/2134 정리 문제의 원인은..

    자바스크립트 비동기 처리 알아보기

    개요 2024-03-15일 저녁에 공통 프로젝트 팀원들과 회식을 하면서 비동기 처리 관련 글을 포스팅 했던 얘기가 나왔었는데, 여기서 내가 글을 썼음에도 여러가지 부족한 점들이 느껴져서 조금만 더 정리해본다. 그 중 자바스크립트 에서 비동기 처리를 어떻게 하는것인가에 대해서 얘기하다 어물쩡 거려가지고 좀 부끄러웠다. 어떻게 진행되는지 한번 보자. 동기와 비동기 동기 동기(Synchronous)는 순차적인 흐름을 가진다. 하나의 작업이 실행되는 동안, 뒤의 다른 작업들은 그대로 멈춘 채 자신의 차례가 오기까지를 기다린다. 이 일련의 과정 중에서 동기식 프로그램의 특징을 알 수 있다. 손님이 주문을 요청하면, 점원은 그 요청에 대한 처리를 거처 응답을 내놓는다. 손님은 응답이 돌아오기까지 카운터를 떠나지 않..

    Windows 10 에어팟 2 케이스 충전 불가능 해결하기

    Windows 10 에어팟 케이스 충전 불가능 현상 종종 Windows 10 PC에 에어팟을 연결하여 충전을 하거나 연결하는데, 에어팟 케이스가 충전되지 않는 현상이 있어 이를 해결하는 방법을 적어본다. Windows 키를 눌러 Bluetooth 및 기타 장치를 입력한 후 확인해보면 오디오에 연결된 에어팟의 이름과 기타 디바이스에 에어팟 케이스가 함께 표시되는데, 나의 경우 이 에어팟 케이스 아래에 드라이버 문제라는 텍스트가 함께 표시 되는 문제가 있었다. 해결방법 해결방법은 아주 간단했다. 먼저 기타 디바이스에 표시된 AirPod Case 장치 제거 버튼을 클릭하여 장치를 제거해주고, 오디오 카테고리 아래에 있는 OO's AirPods 도 동일하게 장치 제거 버튼을 클릭해준다. 이후 에어팟을 다시 PC..

    vue3+typescript+vite 환경에서 jquery 사용

    개요 SSAFY 2학기 특화 프로젝트에서 front-end를 담당하며 생긴 trouble shooting 로그를 남겨본다. 책을 넘기는 듯한 ui를 구현하기 위해 turn.js 라이브러리를 활용했으나, 환경적인 문제로 인하여 jquery 적용에 어려움을 느꼈다. 이를 해결한 방법을 정리해보자. 환경 vue ^3.3.0 vuetify ^3.0.0 typescript vite JQuery 적용하기 먼저 JQuery 적용 및 turn.js 사용을 위해 js 파일을 다운로드 한 후 index.html 파일에 추가해줬다. 여기까지 설정 후 바로 npm run dev 명령어를 통해 실행 시 정상적으로 표시되지만 빌드하여 서버에 업로드 시 아래의 오류 발생하며, turn.js 라이브러리가 정상 적용되지 않은것처럼 표..

    AnnotationProcessor 직접 구현해보기

    개요 평소 사용법만 알았던 어노테이션에 대해서 자세히 알아보고 직접 어노테이션을 만들어보자. 어노테이션이란 자바 소스 코드에 추가하여 사용할 수 있는 메타데이터의 일종 @ 기호를 붙여 사용한다. JDK 1.5 이상 버전에서 사용가능하다. 클래스 파일에 임베디드 되어 컴파일러에 의해 생성된 후 자바 가상머신에 포함되어 작동한다. Annotation의 용도 compiler를 위한 정보 : Annotation은 컴파일러가 에러를 감지하는데 사용 컴파일 시간 및 배포 시간 처리 : Annotation 정보를 처리해 코드, XML 파일 등을 생성 런타임 처리 : 일부 Annotation은 런타임에 조사됨 Annotation의 종류 Built in Annotation : 자바에서 기본 제공하는 어노테이션 ex. @..

    [프로그래머스] 베스트 앨범 자바 풀이

    문제 https://school.programmers.co.kr/learn/courses/30/lessons/42579?language=java 풀이 속한 노래가 많이 재생된 장르를 먼저 수록합니다. 장르 내에서 많이 재생된 노래를 먼저 수록합니다. 장르 내에서 재생 횟수가 같은 노래 중에서는 고유 번호가 낮은 노래를 먼저 수록합니다. • 장르에 속한 곡이 하나라면, 하나의 곡만 선택합니다. 이 조건들을 위주로 생각하여 문제를 풀었다. 우선, 장르, 재생횟수, 인덱스를 저장하기 위해 Triple이라는 자료구조를 하나 만들어줬다. 또한, 장르별 재생횟수를 저장하기 위해 Pair 자료구조와 함께 HashMap을 사용했다. Triple 자료구조를 저장하는 list에 모든 데이터를 담고, 이 후 재생횟수 순서대..

    [프로그래머스] 게임 맵 최단거리 자바 풀이

    문제 https://school.programmers.co.kr/learn/courses/30/lessons/1844?language=java 풀이 틀린 풀이 DFS를 통해 문제를 먼저 풀었지만 효율성 테스트에서 모두 실패했다. 새로운 풀이 문제점 DFS는 다음과 같은 문제가 있기 때문에 이 문제를 해결하는 방법으로 적합하지 않다. 해가 없는 경로가 깊을 경우 탐색시간이 오래 걸릴 수 있다. 얻어진 해가 최단 경로가 된다는 보장이 없다. 따라서, BFS로 다시 문제를 풀었다. 또한 맨날 헷갈리는 부분이 다익스트라(PQ)를 사용할 것인지 인데, PQ의 경우 가중치가 다른 경우에 사용한다는 것을 다시 기억하자. 일반적인 방법의 BFS를 통해 문제를 해결할 수 있다. 코드 package com.company...

    [프로그래머스] 메뉴 리뉴얼 자바 풀이

    문제 https://school.programmers.co.kr/learn/courses/30/lessons/72411?language=java 풀이 소요시간 60분 틀린 풀이 조합을 통해 가능한 전체 코스의 경우의 수를 구하고, 코스가 등장한 갯수를 구하기 위해 map을 이용했다. 이후 map에서 2개 이상 등장 했으며, 코스의 길이가 orders 배열에 포함된 경우 추가하도록 했다. 문제점 코스에 만약 ABCD가 있다면, BCD, CD 와같이 ABCD 내에 포함된 경우를 제거하는 방법을 찾지 못해 풀지 못했다. 새로운 풀이 2개의 코스 요리중 가장 많이 주문한 경우, 3개의 코스 요리중 가장 많이 주문한 경우와 같이 각 코스종류마다 답을 구하도록 수정했다. 풀이를 보고나서 다시 문제를 보니, 이 부분..