전체 글

첫 오픈소스 기여 후기

첫 오픈소스 기여 후기2024년 취업과 동시에 여러가지 목표가 있었는데, 그 중 하나인 오픈소스 기여를 매우 간단하게 성공했던 후기를 공유해보고자 한다. 많은 개발자들이 어렵게 생각하는 만큼, 나 역시 “나 같은 하찮은 개발자가 오픈소스에 기여할 수 있을까?” 고민 했었지만, 역시 일단 하고 두들겨 맞는게 가장 빠르게 목표를 달성할 수 있다고 생각하여 오픈소스에 기여할 방법을 찾아봤다.오픈소스 기여 대상 탐색처음에는 Github에서 Major한? 프레임워크(Vue.js, Spring Framework)를 대상으로 기여를 하려고 했으나, 이미 많은 사람들이 참여하고 있는 프로젝트들인 만큼 내가 기여할 수 있는 부분을 빠르게 찾기는 어려웠다. 그래서, SSAFY 자율 프로젝트 진행 중 피쳐플래깅 서비스로 레..

SSAFY[10기/전공/자바반] 수료 후기

SSAFY에서의 1년 회고하기SSAFY 10기, 자바 전공반 합격 및 수료 후기SSAFY 준비에세이23년 4월 중순에 SSAFY 서류 접수 기간이었던것으로 기억한다. 서류같은 경우 짧은 500자의 에세이를 작성했는데, 여러 블로그 글들을 참고하여 “내가 무엇을 잘한다” 라는 느낌 보다는 “내 부족한 점들을 SSAFY에서 얻어가겠다.” 라는 느낌으로 글을 작성했고, 서류 합격을 받을 수 있었다.코딩 테스트코딩 테스트의 경우 가끔씩 2~3 문제씩, SWEA, 백준 문제를 풀었다. 코딩테스트를 잘 하는 편은 아니지만 설렁설렁 준비했는데 두문제 다 맞았다. 크게 어려운 느낌은 없었다. 텅텅 비어있는 커밋 기록..인터뷰 준비면접 부터는 조금 어려웠는데, PT면접이 처음이라 면접스터디를 진행했다. 강민혁님 유튜브 ..

SAA-C03 자격증 후기

자격증따자최근 이직을 하면서 취준 기간동안 스스로 개발 능력의 부족함 보다는 내가 잘 할 수 있는 기술임에도 어필 할 수 있는 부분들이 부족해서 아쉬웠던 순간들이 있었다. 2024년 하반기의 목표로 나는 자격증을 2개 따는것을 목표로 하고 있는데, 그중에 꼭 그 타이틀을 가지고 싶었던.. AWS 자격증(SAA-C03)을 따기위해 공부했던 방식을 공유하고자 글을 작성한다.원래는 CLF-C02 (Practioner) 자격증을 먼저 따려고 했는데, 초급자용이라고 해서 좀더 쎄보이는? Associate 자격증을 따기로 마음을 바꿨다..또한 나는 실무에서 AWS 서비스를 사용했던 경험은 없고 EC2, RDS, S3 서비스로 SSAFY에서 프로젝트를 진행했던 경험만 있었다.취득과정나는 Udemy 강의 없이 Exam..

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. @..