IT 엘도라도

Documentation - Module Resolution How TypeScript resolves modules in JavaScript www.typescriptlang.org 모듈 해석(Module Resolution)이란 컴파일러가 각 import가 어떤 모듈을 가리키는지 해석하는 과정을 의미한다. 예를 들어 import { a } from "moduleA"라는 코드가 있으면, 컴파일러는 a가 올바르게 사용되는지 체크하기 위해 moduleA가 정확히 어떤 모듈을 가리키는지 알아야 한다. 그리고 해당 모듈에 존재하는 a의 타입 정보를 참조해야만 한다. 그 모듈 탐색 과정이 바로 모듈 해석이다. 먼저, 컴파일러는 import 하려는 모듈을 탐색한다. 그 탐색 전략으로는 크게 두 가지가 있다. 하나..

이 포스팅은 도메인, 혹은 DNS(Domain Name System)에 대한 기본 지식이 있음을 가정한다. 만약에 잘 모른다면 이 포스팅을 읽고 기본 개념을 먼저 숙지한 다음에 여기로 돌아오기 바란다. 또한 도메인을 등록하고 HTTPS를 설정할 EC2 인스턴스는 이미 마련되어 있다는 것까지 가정한다. 우리는 해당 EC2 인스턴스에 로드 밸런서를 연결하고 그 로드 밸런서에 대해 도메인을 등록하고 HTTPS를 설정할 것이다. 포스팅 내용은 다음과 같은 순서로 이뤄질 것이다. AWS Route 53에서 도메인 등록 및 호스팅 영역 생성 AWS Certificate Manager(이하 ACM)에서 SSL/TLS 인증서 발급 AWS Application Load Balancer(이하 ALB) 생성 AWS Rout..

여기서는 EC2 인스턴스(AMI : Amazon Linux 2)와 RDS 인스턴스(엔진 : PostgreSQL)를 이미 생성했고, EC2 인스턴스에 SSH로 접속하는 방법을 알고 있으며, EC2 인스턴스에서 RDS 인스턴스로 접근이 가능하도록 인바운드 규칙까지 설정해둔 상태라고 가정한다. 더불어 EC2 인스턴스에 Nginx라는 웹 서버를 깔고 기본적인 설정도 이미 해둔 상태를 가정한다. 이와 관련해서는 EC2에 대해 설명하는 이 포스팅, RDS에 대해 설명하는 이 포스팅, 그리고 EC2에 Nginx를 세팅하는 것을 다루는 이 포스팅을 반드시 먼저 읽고 오길 바란다. 아래에서 설명하는 명령어들은 기본적으로 해당 EC2 인스턴스에 SSH 접속이 이뤄진 상태에서 입력하는 것들에 해당한다고 보면 된다. * 하나..

* 2020.11.26 저녁부터 2020.11.27 오전까지 씨름했던 문제. 트러블 슈팅 경험을 여기다 기록하고자 한다. EC2에 React 프로젝트를 배포한 뒤, 데스크탑 브라우저에서 정상적으로 접속이 되는 것을 확인하고 안심한 찰나, 모바일 브라우저에서는 접속만 되고 아무것도 뜨지 않는(흰 화면만 뜨는) 문제가 발견되었다. 몇 시간 동안 그 원인을 찾기 힘들었는데, 그것은 바로 모바일 브라우저에는 데스크탑 브라우저에서와 달리 개발자 도구가 없었기 때문이다. 그러다가 우연히 모바일 브라우저도 개발자 도구를 사용하는 법을 알게 되었는데, 안드로이드 폰 기준으로 핸드폰과 데스크탑을 USB로 연결한 뒤 개발자 옵션을 켜고 USB 디버깅까지 켜면 되는 것이었다. 이후 모바일에서 특정 웹 페이지를 방문하면 해당..

EC2 인스턴스를 생성하고 해당 EC2 인스턴스에 SSH로 접속하는 방법에 대해서는 이 포스팅을 참조하자. 여기서는 이미 해당 포스팅의 내용에 기반하여 EC2 인스턴스를 생성했고(AMI : Amazon Linux 2) 해당 EC2 인스턴스에 SSH 원격 접속이 이뤄진 상태라고 가정하고 설명을 진행하도록 하겠다. 즉 아래에서 설명할 모든 명령어들은 SSH 접속 후 EC2 인스턴스의 터미널에서 입력하는 명령어들에 해당한다. 1. 기본 소프트웨어 및 Nginx, Node.js 설치 $ sudo yum update 현재 EC2 인스턴스에 설치되어 있는 모든 소프트웨어 패키지들을 업데이트한다. 개발자라면 yum 혹은 apt 명령어에 대해 한 번쯤은 들어봤을 것이다. yum과 apt는 둘 다 Linux 운영체제에서..

AWS RDS는 Relational Database Server의 약자로, 데이터베이스 서버로 사용할 수 있도록 AWS에서 제공해주는 하나의 물리적인 컴퓨터라고 생각하면 된다. EC2 인스턴스 생성과 관련한 직전 포스팅에서 다뤘듯이, 초보 개발자는 Elastic Beanstalk, Kubernetes 등의 배포 패키지를 바로 이용하는 것보다 AWS의 각 리소스를 직접 생성하고 설정까지 해보면서 배포를 해보는 경험을 가지는 것이 좋다. 이러한 목적으로, 직전 포스팅에서는 EC2 인스턴스를 직접 생성하고 이에 접속하는 방법까지 알아보았다면, 이번 포스팅에서는 데이터베이스 서버 운용을 위한 RDS 인스턴스를 직접 생성하고 이를 EC2 인스턴스에 연결하는 방법을 알아보도록 할 것이다. 참고로 RDS도 EC2와 ..

이번 포스팅에서는 React 웹 애플리케이션을 개발할 때 클라이언트 사이드 라우팅을 위해 많이 사용하는 패키지들의 동작 원리에 대해 간단히 한 번 알아볼 것이다. 대표적으로 가장 많이 사용하는 패키지는 react-router-dom이며, 이는 react-router 패키지에 의존하는 패키지로서 브라우저에서 클라이언트 사이드 라우팅을 수행할 수 있도록 해준다. 한편, 라우팅과 관련된 정보들을 Redux의 스토어에 저장하는 방식을 필요로 하는 경우 connected-react-router 패키지를 사용하기도 한다. 따라서 필자는 이 세 패키지의 핵심 요소들에 대해 그 동작 원리를 간단히 살펴보기로 했다. 동작 원리는 직접 해당 패키지의 JavaScript 코드를 뜯어보며 파악하였다. 혹시 잘못된 부분이 있다..

이번 포스팅은 React 애플리케이션 개발의 핵심 중 하나인 Babel과 Webpack에 대해 다뤄볼 것이다. 다만 엄청 자세히는 다루지 않고, React 애플리케이션을 개발하는 사람이라면 알아야 하는 상식 선의 개념 및 동작 원리에 대해서만 다룰 것이다. 실제로 Create React App을 통해 React 애플리케이션을 개발하고 있는 사람은 Babel과 Webpack이 어떻게 설정되어 있는지 확인해보지 못한 경우도 있을 것이다. 그것은 Create React App이 Babel 및 Webpack의 설치와 각종 설정을 내부적으로 이미 다 해주고 이를 숨겨두었기 때문이다(물론 확인하는 방법이 있긴 하다). 그래서 막연하게 개발만 하던 사람은 내부적으로 Babel 및 Webpack이 어떻게 돌아가는지 자..

React를 공부하면서 react-router-dom 패키지에서 제공하는 클라이언트 사이드 라우팅의 동작 원리를 알고 싶어졌다. 그러다 보니 react-router-dom 패키지에서 클라이언트 사이드 라우팅을 구현할 때 내부적으로 사용하는 history 패키지의 동작 원리를 공부해야 했고, 이를 이해하기 위해서는 다시 또 history 패키지에서 내부적으로 사용하는 HTML5 history API에 대해서도 공부해야 했다. 이번 포스팅에서는 그렇게 공부한 내용들을 깔끔하게 정리해보도록 할 것이다. 먼저 HTML5 history API부터 알아보도록 하자. 1. HTML5 history API 대부분의 현대 브라우저들은 HTML5 history API를 통해 현재 브라우저 탭의 세션 히스토리(방문 기록)를..

이번 포스팅에서는 그 이름부터 헷갈리는 CSS의 transition, transform, translate에 대해 한 번 정리해볼 것이다. 단, 각각의 기능에 대한 자세한 설명보다는 이 셋을 구별하기 위한 각각의 개략적인 특징에 대해서만 알아볼 것임을 참고해주기 바란다. 1. transition CSS의 transition 속성은 엘리먼트의 CSS 속성을 변경할 때 두 가지 상태 사이에 일어나는 변화(애니메이션)를 커스터마이징 할 때 사용한다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 하는 것이다. 예를 들어, 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 원래라면 변화가 즉시 일어나지만 CSS transition 속성을 이용하면 그 변화의 양상을 ..