TIL

Vite, Webpack, Babel 관계 정리

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

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

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

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

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

싱글 스레드에서 비동기 요청이 가능할까?

개요 SSAFY 계절학기 강의 수강 중 싱글스레드에서 비동기 요청을 할 수 있다는 내용이 있었는데, 필자가 개발하면서 싱글 스레드 환경에서 비동기 요청을 한 기억이 없어서 그런지 잘 이해가 되지 않았다. 이를 이해하고자 문서를 작성해본다. 자바스크립트에서 싱글 스레드와 비동기 요청 아래와 같이 “싱글스레드 비동기” 라는 키워드로 구글에 검색을 해봤다. 그러나 이 부분은 자바스크립트 언어가 어떻게 싱글 스레드에서 비동기 요청 처리를 가능하게 하는 것인지 말해주는 내용이 대다수 였다. 글들을 읽어보면 결국에는 자바스크립트 언어 자체는 싱글 스레드로 동작하는 것이고, 비동기 요청의 경우 Browser API를 통해 비동기 요청을 처리 후 콜백 처리를 해주는 것으로 이해했다. 따라서, 자바스크립트도 결국에는 완..

SPOPARTY 서비스 파일 업로드, 삭제 장애 대응

개요 공통 프로젝트로 진행했던 SPOPARTY 서비스가 SSAFY에서 제공해주는 서버 기간 만료로 인해 다운되었었는데, 중간중간 서비스를 개발하면서 팀원들과 함께 게시판을 잘 이용했었다. 그래서 도메인 구매하여 서비스를 다시 올려놨었는데… 장애 발생 파일 업로드가 불가능한 현상 + 파일 삭제가 불가능한 현상 두가지가 함께 터져서 로그를 보면서 추적 해봤다. 파일 업로드 불가능 현상 파일 업로드의 경우 제보자가 보내준 내용 그대로였다. nginx는 client_max_body_size가 1MB가 기본으로 설정되어 있었는데, 기존 서버에는 openvidu 컨테이너 내부 nginx에서 설정되어 있었던 것으로 보인다. 따라서 현재 서버의 nginx 설정에 아래의 옵션을 추가한 후 정상적으로 업로드가 가능해졌다...

Jenkins Container 접속 http 경로 변경하기

개요 Jenkins Container 환경 설정 시 웹 페이지의 경로를 변경하고, nginx 프록시 할 수 있도록 구성하는 방법을 알아보자. Host OS 내에 jenkins container를 이미 구성한 상태에서 접속할 수 있는 경로만 변경하는 작업을 포스팅 한다. 환경 필자의 경우 Host OS(Ubuntu Linux) 위에 Jenkins Container를 구성했고, Host OS에 Nginx를 설치하여 리버스 프록시를 활용하여 Jenkins 관리 웹 페이지로 이동시키게끔 구성했다. Jenkins Container 설정 StackOverflow의 글에서 경로를 변경하기 위해서 환경변수를 설정할 수 있다는 글을 확인했다. Change jenkins container deployment root pa..

함수 호출 규약(Calling Convention)과 마샬링(marshalling)

개요 C# Application에서 C++ Dll을 호출하기 위해서는 마샬링 과정이 필수적이다. 또한, 마샬링 과정에서 Calling Convention이 조율되지 않으면 스택에서 오류가 발생하는데, 어떻게 이러한 문제가 발생하는 것인지 알아보자. 목표 마샬링이 무엇인지 설명할 수 있다. Calling Convention이 무엇인지 설명할 수 있다. C# Application과 C++ Dll의 통신 마샬링(Marshalling) 마샬링이란 한 객체의 메모리에서의 표현방식을 저장 또한 전송에 적합한 다른 데이터 형식으로 변환하는 과정입니다. 이는 데이터를 서로 다른 프로그램간에 전달할 필요가 있을 경우 사용합니다. 즉, 이는 직렬화와 유사하며 직렬화된 한 객체로, 멀리 떨어진 객체와 통신하기 위해 사용합니..

[키워드 정리] VNC VS RDP, ICMP

VNC와 RDP 개요 팀 회의 도중 생소한 키워드를 정리하기 위해 글을 씁니다. VNC vs RDP VNC (Virtual Network Computing) VNC는 RFB(Remote Frame Buffer)프로토콜 방식을 이용해 서버에서 보낸 화면 정보를 클라이언트에 설치된 그래픽 라이브러리를 이용해 그리는 방식이다. 사용을 위해 RFB를 전송 가능한 프로그램, 전달 받는 프로그램 (server, client)가 필요하다. 원격에서 화면을 보는 기능만 지원하며, 클라이언트 별로 세션을 가지지 못한다. (여러 PC에서 동시에 접속한다면 하나의 화면을 공유하게 된다.) VNC는 주로 클라우드 상에서 동작하는 서버 VM을 동작하기 위해서 사용하는 프로토콜이다. RDP (Remote Desktop Proto..

JavaScript ES6 문법 정리

JavaScript ES6 문법 정리 const and let ES6에서 추가된 변수 선언 방법입니다. 변수 재 선언 var의 경우 변수를 한번 더 선언했음에도 오류가 발생하지 않습니다. var foo = "foo" console.log(foo) // foo var foo = "pee" console.log(pee) // peelet의 경우 변수를 한번 더 선언할 경우 오류가 발생합니다. (const의 경우도 마찬가지로 오류가 발생합니다.) let foo = "foo" console.log(foo) let foo = "pee" // Uncaught SyntaxError: Identifier 'foo' has already been declared console.log(foo)const 와 ..

2021.09.11

JSX = Javascript + XML Javascript와 XML구문을 결합해 사용하는 코드를 JSX 라고한다. 자바스크립트 표준에 JSX 구문이 없지만, 포함된 것 처럼 동작할 수 있는 이유는 ESNext 자바스크립트 컴파일러인 바벨(babel)이 플러그인 구조로 동작하기 때문이다, 바벨은 ESNext 자바스크립트 코드를 만나면 파이프라인 형태로 동작하여 이해할 수 있는 구문만 컴파일하여 자바스크립트로 변환한다. 페이스북은 JSX 구문을 컴파일 하고자 @babel/plugin-trnasform-react-jsx 라는 바벨 플러그인을 제공한다. jsx 구문이 있는 타입스크랍트 코드는 .tsx 여야하며, 다음 임포트 문이 필요하다. import React from 'react' React.createE..