비실이의 개발 성장기

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..

chrome extension 어플리케이션은 크게 5가지 영역으로 구분된다. manifest.json 익스텐션 앱에 대한 정보를 나열해 놓은 json 앱 소개, 버전 및 개발자 정보와 앱 개발 시 필요한 필수로 명시해야 하는 값 등이 기록되어 있다. background 익스텐션 앱의 백그라운드 스크립트 처리 영역 manifest.json 의 background 항목에 스크립트 파일을 명시해줘야 한다. 크롬 브라우저가 정상 실행되고 익스텐션 앱이 활성화 되어있다면 등록한 스크립트가 실행된다. background 스크립트의 디버깅은 ‘크롬브라우저 > 도구더보기 > 확장프로그램 > 해당 앱 백그라운드 활성화’ 에서 가능하다. ui 익스텐션 앱의 ui 를 구성 ui element 를 구성하는 html 과, ui..

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..