구리

TypeScript any, unknown 타입의 차이를 공부하다가 알게 된 점을 정리한 글입니다. 목차 서론 본론 any 타입 any 타입을 사용할 수 밖에 없는 케이스 unknown 타입 any 타입과 unknown 타입의 차이 타입 검사말고 as unknown as를 사용하는 건 어떨까? 결론 서론 아래 설명에 앞서 아래 타입은 JS 자료형에서 제시되지 않은 독자적인 타입 시스템에 포함된 타입이다. 물론 TS의 타입 시스템이 내포하고 있는 개념은 모두 JS에서 기인되었지만 단지 JS로 표현할 수단과 필요성이 없었을 뿐으로 앞으로 소개한 모든 타입 시스템은 TS에만 존재하지만 그 개념은 JS에서 기인한 타입 시스템이라는 점을 인지해야 한다. any 타입 JS에 존재하는 모든 값을 오류 없이 받을 수 ..

JavaScript 사용시 타입 변환이 왜 일어나는지 어떤 규칙에 의해 타입이 바뀌는지 공부한 글입니다. 목차 서론 본문 타입 변환이란? 명시적 타입 변환만 사용하는 것이 좋은 방법 아닐까? 타입 변환은 어떻게 진행될까? 암묵적 타입 변환이 왜 일어날까? 명시적 타입 변환만 사용하는 것이 좋은 방법 아닐까? 타입 변환 규칙 숫자 표현식에서 숫자가 아닌 값 문자열 객체 Falsy and Truty NaN 결론 서론 JavaScript를 사용하다보면 종종 의도대로 코드가 동작하지 않는 경우가 있다. const sumNumber = (a, b) => { return a + b; }; console.log(sumNumber(1, 2)); // 3 console.log(sumNumber(100)); // NaN ..

프로젝트할 때 보통 Interface로 데이터 타입을 정의했었는데 문득 Type, Interface의 차이와 언제 써야하는지 궁금해져 정리한 글입니다. 목차 본문 Type Alias는 무엇일까? Interface는 무엇일까? Type Alias, Interface의 공통점은 무엇일까? 타입 지정 여러 타입에 대한 관계 정의 Type Alias, Interface의 차이점은 무엇일까? 사용 데이터 형태 선언 병합 왜 굳이 확장 가능한 방법과 확장이 가능하지 않은 방법으로 나눴을까? 결론 Type Alias와 Interface 중 뭘 사용해야할까? Type Alias는 무엇일까? 타입의 새로운 이름을 만드는 역할로 실제로 새로운 타입을 만드는 것은 아니다. 인터페이스와 유사하지만 윈시 값, 유니언, 튜플 그..

업무 중 만난 Nginx 관련 에러를 해결한 과정을 작성한 글입니다. 이슈 회사에서 작업하는 서비스는 프론트엔드, 백엔드 각각의 프로젝트로 구성되어 있고 프론트엔드는 React + Nginx 기반입니다. 배포 환경(Docker Rancher)에서는 프론트엔드, 백엔드 컨테이너를 각각 띄우고 모든 요청은 Nginx가 받아 특정 path로 요청이 올 경우 proxy_pass를 이용해 백엔드로 요청을 전달하는 구조입니다. 아래는 Nginx proxy_pass 코드 일부입니다. location /api { rewrite ^/api(/.*)$ $1 break; proxy_pass http://백엔드_컨테이너명; } 이때 백엔드 컨테이너를 업그레이드하면 nginx 연결이 끊겨 백엔드 컨테이너 업그레이드시 프론트엔드..

Next.js13 프로젝트에 prettier, prettier 관련 플러그인 적용시 관련 에러를 해결한 과정을 작성한 글입니다. 이슈 1 - .prettierrc 파일 적용 안되는 경우 vscode 하단에는 prettier가 적용되고 있다는 표시가 있었지만 실제로는 prettier config 파일이 적용되지 않는 버그가 발생했습니다. 원인 "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, 위는 제 vscode의 settings.json 파일 중 일부로 vscode에서 prettier 설정시 파일별 적용 옵션이 누락되어 tsx, ts 파일에는 prettier가 적용되지 않았었습니다. 해결 "[javascript]": { "e..

자바스크립트의 비동기 처리 관련 이벤트 루프를 공부하면 스레드라는 단어가 많이 나오는데 스레드의 정확한 개념과 스레드와 연관 있는 프로세스에 대해 알아보며 정리한 글입니다. 사전 지식 CPU 스레드의 두가지 의미 본문 프로세스 프로세스 메모리 영역 프로세스 상태 프로세스 계층 구조 스레드 멀티 프로세스와 멀티 스레드 정리 Q&A CPU CPU는 컴퓨터의 두뇌 역할로 메모리에 저장된 명령어를 읽고 해석하며 실행하는 부품입니다. CPU의 내부 구성 요소 중 가장 중요한 3가지는 산술논리연산장치(Arithmetic Logic Unit), 레지스터(register), 제어장치(Control Unit)가 있습니다. 산술논리연산장치(ALU) 계산만을 위해 존재하는 부품으로 컴퓨터 내부에서 수행되는 대부분의 계산은..

지난 글에서는 JavaScript 엔진의 기본적인 동작 원리(소스코드가 컴파일되는 과정)에 대해 알아보았습니다. 이번 글에서는 JavaScript 엔진이 컴파일된 코드를 어떤 기준으로 순서를 정해 실행하는지에 대해 알아보겠습니다. 참고로 프로세스와 스레드 관련 정리 글을 읽으시면 이해에 더 도움이 될 수 있습니다. 목차 사전 지식 실행 컨텍스트 자바스크립트 엔진 구조 콜백 함수 본문 컴파일과 실행 능률적으로 일하기 (web API, Callback Queue, event loop) Browser Web APIs Callback Queue Task Queue MicroTask Queue Render Queue Event Loop 결론 Event Loop 동작과정 Queue 우선 순위 실행 컨텍스트 코드를 ..

이번 글은 JavaScript 엔진(구글 V8 엔진 기준)이 코드를 어떻게 실행하는지에 대해 알아보는 글입니다. 자바스크립트 엔진의 동작 원리를 크게 2단계로 나눠 (2) 소스 코드가 컴파일되기까지의 과정의 주제를 현재 글에서 다루며 (2) 컴파일 후 실행되는 과정은 다음 글에서 다룰 예정입니다. 사전 지식 브라우저 동작 원리 JavaScript 동작 원리 JITC AJITC 본문 V8엔진 동작원리 비최적화 컴파일러 결론 브라우저 동작원리 브라우저는 서버로부터 전달 받은 HTML 파일을 파싱하다 script 태그를 만나면 네트워크 레이어를 통해 JavaScript 파일을 로드 후 JavaScript 엔진에게 제어권을 넘겨 파싱과 실행 단계를 진행하게 됩니다. (브라우저의 동작원리에 대해 자세히 알고 싶다..