본문 바로가기

Web17

웹페이지가 사용자에게 보여지기까지 (브라우저 렌더링 과정) 우리가 주소창에 어떤 웹사이트의 주소를 입력하고 엔터키를 누르면 몇 초도 지나지 않아서 해당 사이트의 화면이 뜨게된다. 사실 굉장히 자주 하는 일이고, 당연한 일이지만 주소 입력만으로 화려한(?) 화면이 등장하기까지는 사실 생각보다 복잡한 과정들을 거쳐야 한다. 이번 글에서는 바로 이 복잡한 과정에 대해 알아보고자 한다. 미리 알아야할 개념들 파싱(parsing) 프로그래밍 언어로 작성된 파일을 실행시키기 위해 구문 분석(syntax analysis)을 하는 단계이다. 파일의 문자열들을 문법적 의미를 갖는 최소 단위인 '토큰'으로 분해하고, 이 토큰들을 문법적 의미와 구조에 따라 노드라는 요소로 만든다. 노드들은 상하관계를 반영해 트리를 형성하는데, 이 트리를 파스트리라고 한다. 렌더링(rendering.. 2021. 6. 14.
Amazon S3 Amazon S3 Simple Storage Service의 약자로, AWS에서 제공하는 클라우드 스토리지 서비스이다. 클라우드 스토리지 서비스라고해서 어렵게 느껴질 수 있지만, 쉽게 생각하면 우리가 흔히 쓰는 구글드라이브, 네이버 MYBOX처럼 파일을 저장해두면 다른 기기라고 하더라도 언제 어디서나 쓸 수 있게 해주는 저장소라고 할 수 있다. Amazon Simple Storage Service는 인터넷 스토리지 서비스입니다. 이 서비스는 개발자가 더 쉽게 웹 규모 컴퓨팅 작업을 수행할 수 있도록 설계되었습니다. S3의 장점 S3를 사용하면 다양한 이점을 얻을 수 있다. 우선은 스토리지 규모를 무한히 확장할 수 있고, 쓴만큼의 비용만 내면 되기 때문에 효율적이기도 하다. 그리고 내구성이 높아 저장된 파.. 2021. 3. 10.
AWS RDS(Relational Database Service) RDS ❓ RDS는 Relational Database Service의 줄임말인데, 이름 그대로 AWS에서 제공하는 관계형 데이터 베이스 서비스이다. 이걸 굳이 왜 쓰는 걸까? 앞서 배운 EC2에 MySQL같은 관계형 데이터베이스 엔진을 설치해두면, RDS를 사용할 필요가 없는게 아닐까? 하는 생각이 들 수도 있다. 그렇다면 대체 어떤 이점이 있길래 쓰는건지부터 한번 살펴보자. 우선 EC2 인스턴스에 Database를 직접 설치해서 데이터를 관리하게되면, 유지보수나 버전관리, 데이터 백업 등 필요한 모든 작업들을 일일이 사용자가 처리해야 한다. 하지만, RDS를 사용하면 차를 렌트하듯이 유지보수같은 일들은 AWS에 맡길 수 있게 된다. 사용자는 그냥 초기설정만 하고, Database에 저장된 데이터들을 .. 2021. 3. 10.
Amazon EC2 (Elastic Compute Cloud) Amazon Elastic Compute Cloud(Amazon EC2)는 안전하고 크기 조정이 가능한 컴퓨팅 용량을 클라우드에서 제공하는 웹 서비스입니다. 개발자가 더 쉽게 웹 규모의 클라우드 컴퓨팅 작업을 할 수 있도록 설계되었습니다. Amazon EC2의 간단한 웹 서비스 인터페이스를 통해 간편하게 필요한 용량을 얻고 구성할 수 있습니다. 컴퓨팅 리소스에 대한 포괄적인 제어권을 제공하며, Amazon의 검증된 컴퓨팅 인프라에서 실행할 수 있습니다. EC2는 AWS에서 제공하는 클라우드 컴퓨팅 서비스이다. 한마디로 원격제어가 가능한 가상컴퓨터를 아마존에서 한 대 빌려오는 것이다. 제어하는 방법은 간단하다. AWS가 제공하는 URL(Public DNS)를 통해 접근해 일반 컴퓨터처럼 사용하면 된다. 이.. 2021. 3. 10.
배포 (Deploy) 배포? 배포한다는게 무슨말일까? 한마디로 말하면 내가 개발한 서비스를 다른 사용자들도 이용할 수 있게 하는 과정이라고 할 수 있다. 하지만 내 컴퓨터에 어떤 환경 설정이 되어있는지는 알 수 있지만, 남의 환경은 알기 힘들다는 문제가 있다. 따라서 배포 과정에서는 내 로컬환경뿐만 아니라 모두의 환경에서 프로그램이 잘 작동하도록 하는 것이 중요하다. 배포의 일반적인 과정 1. Development 컴퓨터의 로컬 환경에서 개발을 하고, 테스트를 진행하는 과정으로, 여기서는 아직 개발중인 단계이기 때문에 실제 데이터가 아닌 fake data를 이용해 테스트를 하게 된다. 모든 구성원들이 각자의 환경에서 개인플레이로 진행하는 단계이기 때문에 변경 사항이 생겨도 별다른 문제를 일으키지 않는다. 2. Intergra.. 2021. 3. 10.
Cloud Computing (클라우드 컴퓨팅), 온프레미스(On-premise) 온프레미스(On-premise) 온프레미스(On-premise)란 소프트웨어 등 솔루션을 클라우드 같이 원격 환경이 아닌 자체적으로 보유한 전산실 서버에 직접 설치해 운영하는 방식을 말합니다. 온프레미스는 클라우드 컴퓨팅 기술이 나오기 전까지 기업 인프라 구축의 일반적인 방식이었기 때문에 이전 또는 전통적인 이라는 단어와 함께 사용됩니다. premise의 뜻을 찾아보면 '기본, 전제, 건물, 토지' 라고 나온다. 온프레미스는 자체적으로 서버실같은 곳에 컴퓨터를 두고 인터넷을 연결해 서비스를 제공하는 방식이다. premise의 뜻과 함께 생각해보면 어딘가에 기반을 두고있다는 뜻이 아닐까 싶다. 곧 소개할 클라우드와는 반대로 원격이 아닌 자체적으로 보유한 전산실 서버에 직접 설치해 운영하는 것이다. 이때는 .. 2021. 3. 10.
dotenv Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology. .env 환경변수 파일은 Node.js에서 프로그래밍에 필요한 값들을 관리하는 역할을 한다. 쉽게 말해 설정들을 모아두는 곳이다. .env 파일에 정의된 미리 정의된 값을 애플리케이션에서 활용하고 싶을 때 사용한다. 참고로 환경변수는 특정 process를 위한 key-value 형태의 변수라고 할 수 있는데, Node.js 기반이라면 .. 2021. 2. 26.
Redux 알아보기 Redux는 리액트 상태 관리 라이브러리로, 컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리해 효율적으로 관리할 수 있게 해준다. 컴포넌트의 상태를 따로 한군데서 관리하기 때문에 코드의 유지보수도 용이해지고, 작업효율도 높아진다는 장점이 있다. 특히 React와 Redux를 함께 사용하면, Redux의 상태관리 전용 장소(store)에서 상태를 따로 관리하고, React에서는 UI 요소만 관리가 가능해진다. 우선은 이러한 Redux와 관련된 중요 개념들부터 알아보자. Store 모든 상태들을 관리하는 중앙관리소 같은 곳이다. 형태는 그냥 아래처럼 JSON같이 생겼다. 스토어 안에는 현재 상태, 리듀서 등이 포함된다. 프로젝트에 리덕스를 적용하기 위해 스토어를 생성해야 하며, 한 프로젝트당 하나의 스.. 2021. 2. 22.
[Javascript 객체] location 객체 location 객체는 window 객체, document 객체의 프로퍼티인데, 주소와 관련된 객체이기 때문에 URL을 변경하거나, 현재 브라우저에 표시된 HTML 문서의 주소와 관련한 다양한 정보를 얻을 수 있다. origin도 확인가능하다. console.log(location) 객체를 살펴보면 url의 구성요소들을 하나씩 확인해볼 수 있다. location 이나 location.href 에 값으로 url을 넣어주면 페이지 이동도 가능하다. location.href = 'http://google.com'; replace, assign 메서드를 이용하면 페이지를 넘나들 수도 있다. 둘의 차이는 이동 후 기록(history)를 남기는지 안남기는지이다. assign은 기록을 남기고, replace는 말 그.. 2021. 2. 6.
[브라우저] name 전역변수 브라우저에서 아무런 선언없이 name를 참조하면 빈 문자열을 반환한다. 전역 객체인 window의 프로퍼티 중에 name이라는 전역변수가 존재하기 때문이라고 한다. 이 변수값은 ''(빈문자열)이다. (단 Node.js 환경에서는 적용되지 않는다) 아래의 경우도 같은 이유에서 NaN이 나오게 되는 것이다. 일단 Javascript의 객체 키 이름에는 기본적으로 -를 사용할 수 없다. 굳이 이렇게 사용하고 싶다면 따옴표를 붙여서 사용해야 한다. 접근할 때도 dot notation은 쓸 수 없고, [대괄호]를 쓰는 bracket notation으로만 접근이 가능하다. dot notation을 쓰는경우 person.first 에서 name을 빼는 것처럼 인식한다고 한다. person.first는 undefine.. 2021. 1. 29.
[개발자 도구] enumerable 여부에 따른 속성 색상 표시 enumerable 여부에 따른 속성 색상 표시 개발자 도구의 콘솔 창에서 이것저것 테스트를 해보다가 알게되었다. 미세한 차이라 지금까지 의식하지 못했지만.. [[FunctionLocatoiin]]처럼 좀 더 짙은 보라색으로 표현된 속성이 있고, arguments, caller,... 처럼 좀 더 옅은 보라색으로 표시된 속성들이 있다. 이런 색상 차이는 { enumerable : false } 속성이 부여되었는지 여부 때문이라고 한다. 이 속성은 열거 가능한지를 알려주는 속성이다. 짙게 표시된 부분은 enumarable하고, 옅게 표시된 부분은 inenumerable하다는 것을 의미한다. 나중에 이런 객체 속성들에 접근하고자 할때, 색상 구분을 통해 for in, for of 같은 순회 메서드를 사용할 .. 2021. 1. 15.
setTimeout함수에서의 this값 변화 setTimeout함수에서의 this값 변화 ❗️ 에러 일단 setTimeout은 시간 지연을 일으켜 함수를 '비동기적'으로 실행시키는 함수이다. 이 함수는 명시적으로 항상 전역 객체(window)를 this 바인딩하는데, 이로 인해 아래와 같은 에러가 발생할 수 있다. class Rectangle { constructor(width, height) { this.width = width; this.height = height; } getArea() { return this.width * this.height; } printArea() { console.log('넓이 : ' + this.getArea()); } printSync() { // 사각형 넓이 즉시 표시 this.printArea(); } pri.. 2021. 1. 13.
반응형

티스토리툴바