비실이의 개발 성장기

AWS CloudFront CloudFront 는 Content Delivery Network (CDN) 서비스 AWS S3 에 올려져 있는 리소스들을 CloudFront 가 캐시하여, 클라이언트(브라우저) 에서 리소스 요청을 하는 경우에 빠르게 제공하기 위한 목적으로 사용 AWS Lambda@edge AWS Simple Queue Service (SQS) 자료구조 Queue 구조로 되어있으며, 데이터를 전달받아 지정한 목적지에 데이터를 순차적으로 전달해주는 서비스 아키텍쳐 구조를 message queue 방식으로 개선하는 과정에서 목적지 어플리케이션에 데이터 병목을 줄이기 위해 SQS 를 사용 SQS 는 목적지로 데이터를 전달하는 과정에서 어떠한 이유로 전달에 실패한 데이터는 Dead Letter Qu..

DOM 이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. DOM 이란? - MDN web docs javascript 를 통해 웹 콘텐츠를 동적으로 제어할 수 있는 이유는 DOM ..

Rendering 이란? 컴퓨터 프로그램을 사용하여 모델 또는 이들을 모아놓은 장면인 씬 파일(scene file)로부터 영상을 만들어내는 과정을 말한다. (위키백과 - 렌더링) SSR / CSR 에서 말하는 렌더링은 인용 문구에서 말하는 scene 파일들을 이용해 영상을 만들지는 않습니다. 하지만, 렌더링 엔진을 사용해 소스 코드들로 부터 웹 페이지를 만들어낸다는 면에서 의미는 동일하다고 생각됩니다. Server-Side Rendering(SSR) 이란? PHP, JSP, ASP, Node.js 등 Server-Side Script 언어 기반의 템플릿 엔진을 이용해 동적인 웹 콘텐츠(html) 문서를 만드는 방식 입니다. 다음 코드는 Node.js 템플릿 엔진인 EJS 문법으로 작성 된 .ejs 파일 ..

# 이벤트 루프(event loop) 이벤트 루프는 구현방식으로 인해 붙여진 이름이며, 이벤트 루프는 보통 아래 코드와 유사합니다. while(queue.waitForMessage()) { queue.processNextMessage(); } 이벤트 루프는 javascript 실행환경인 브라우저에서 관리합니다. # 이벤트 루프 동작방식 비어있는 태스크 큐에 1개의 태스크가 들어온 경우, 이벤트 루프에 의해 태스크가 큐에서 pop 됩니다. pop 된 태스크가 실행되면 javascript engine 에 의해 실행 가능한 코드범위로 실행 컨텍스트가 생성됩니다. 생성된 실행 컨텍스트는 콜 스택(Call Stack) 에 push 되고 실행됩니다. 코드 실행과정에서 생성되는 태스크는 태스큐 큐에 push 됩니다...

# CORS 란? Cross Origin Resource Sharing(교차 출처 자원 공유) 의 약어 원본 출처에서 실행 중인 웹 어플리케이션이 다른 출처의 자원에 접근할 수 있도록 서버에서 관련 HTTP 헤더를 추가하여 브라우저에 알려주는 체제 입니다. # SOP 란? Same Origin Policy(동일 출처 정책) 의 약어 원본 출처에서 실행 중인 웹 어플리케이션은 보안상의 이유로 동일한 출처의 리소스만 공유할 수 있다 라는 정책 입니다. SOP 정책 중, 다른 출처 리소스 요청을 허용하는 예외 항목이 있는데 그 중 하나가 CORS 정책을 지킨 리소스 요청 입니다. # 출처(Origin) 란? URI 구조에 대해서 알아야 합니다. http://localhost:3000/main?page=1#co..

# 모듈 ES6 에서 처음으로 모듈에 대한 표준이 도입되었습니다. ES5 까지 javascript 에는 모듈에 대한 표준이 없었습니다. 모듈 표준이 없었을 당시에는 AMD, CommonJS, UMD 방식의 모듈시스템을 사용했습니다. # 모듈 생성 js 파일이 곧 모듈이 됩니다. 모듈에서 다른 모듈을 가져와 사용할 수 있고, 반대로 내보낼 수 있습니다. (import / export) 생성한 js 모듈을 브라우저에서도 모듈로 인식하도록 script 태그에 type="module" 을 지정합니다. 브라우저가 모듈로 인식해야 import / export 를 사용할 수 있습니다. # 모듈 import / export 모듈에 선언한 변수나 함수를 다른 모듈에 제공하기 위해 export 를 사용합니다. export..

typescript 선택은 아주 만족스러웠다 javascript 로 개발하다 보면 타입 체크를 위한 조건문을 선언 해줘야 하는 경우가 있었다. typescript 를 사용하면서 타입 체크를 위한 조건문을 사용할 필요가 없었다. IDE 설정을 제대로 해주자 react 는 프레임워크가 아니다보니 디렉토리 구성이나 파일 명 등.. 제약이 없으나, 프로젝트 규모가 점차 커지면서 내가 구성한 구조에 불신(?) 이 생길 때가 있다. 하지만, IDE 설정을 제대로 해준다면 디렉토리나 파일 위치 또는 이름을 변경하면 발생하는 경로 수정을 자동으로 해주기에 신경 쓰지 않아도 된다. eslint 와 prettier 는 사용하는게 좋다 코드를 작성하다보면 함수 표현식 끝에 세미콜론을 붙이거나 안 붙이거나 뒤죽박죽 일 때가 ..

오랜만에 삽질기를 올린다. 아직 Typescript 기반으로 React 개발을 해본 적도 없고.. Parcel 번들러도 경험해보고 싶어서 요즘 끄적끄적하고 있다. 오늘 상대 경로를 절대 경로로 변경하기 위해 Parcel 공식문서를 찾아보다 Tilde (~)를 사용한 절대 경로 적용에 대해 알게 되었다. Parcel 공식 Docs Tilde path 바로가기 📔 Module Resolution Getting Started Features 📦 Asset Types Advanced 📔 Module Resolution The Parcel resolver implements a modified version of the node_modules resolution algorithm. Module resolution..