본문 바로가기

전체 글

 (188)
CD와 CI CI (Continuous Integration, 지속적 통합) CI는 자동화된 빌드 및 테스트가 수행된 후, 개발자가 코드 변경사항을 중앙 레포지토리에 정기적으로 병합하는 방식입니다. 여러명의 개발자가 어플리케이션의 각기다른 기능을 동시에 작업하는 것을 목표로 합니다. 물론 기존에도 github과 같이 같은 레포지토리에 여러명이 각기 다른 어플리케이션의 기능을 만들다가 조직이 정한 한날에 모두모여 병합을 시도하면 각자 기능의 변경사항에 따라 충돌할 수 있습니다. CI는 빌드 및 테스트를 자동화 해주어 이러한 충돌을 방지해줍니다. CI의 동작예시 개발자는 자신의 로컬에서 코드를 수정하고 github에 push를 했다. CI도구에서 변경된 코드에 대한 빌드와 테스트를 수행하고 그결과를 피드백 해준다. 빌드..
모듈 번들러와 트랜스파일러 모듈이란? 모듈이란 여러기능들에 관한 코드들이 한데 모여있는 파일로서 다음과 같은 용도로 사용됩니다. 유지보수성 : 기능들이 모듈화가 잘되어 있다면, 의존성을 그만큼 줄일수 있기 때문에 어떤기능을 개선한다거나 수정할 때에 훨씬 편하게 할 수있다. 네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드가 길어지다보면 네임이 겹치는 경우가 발생한다. 이때 모듈화를 하면 중복되는 변수를 줄일수 있다. 각 모듈만의 네임스페이스를 가지기 때문이다. 재사용성 : 똑같은 코드를 반복하여 사용하지않고 모듈로 분리 시켜서 재사용 할 수 있다. 이러한 장점들로 자바스크립트에서는 모듈을 만들고자 하는 여러 시도들이 있었다. CommonJS, AMD, UMD 및 ES6 등 다양한 방식중 ES6에 관하여 알..
BOM & DOM BOM(Brower Object Model) • 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체 모델이다. 이를 통해서 브라우저의 새창을 열거나 뒤로 가기 등 다른문서로 이동하는 등의 기능들을 실행 시킬 수 있다. • 전역객체로 window 가 있고 대표적인 하위객체로 location history navigator document screen 등이 있다. 이외 매우많다. • window는 모든 객체의 조상으로서 window 관련 코드를 작성할 때에는 생략도 가능하다. (하지만 다른 함수와 헷갈리므로 명시하자) • 심지어 개발자가 만든 javaScript 변수 또한 window 객체안에 들어간다. var really = 'Really?' window.really; // 'Reall..
자바스크립트 엔진이 코드를 실행하는 과정 자바스크립트 엔진 • node.js로 생각하면 JS 구동 플렛폼으로서 구글크롬 자바크립트 엔진인 V8로 만들어졌다. • 보통 브라우저들마다 엔진의 종류는 다르나 구동방식은 비슷하다. • 자바스크립트 엔진은 자바스크립트 소스코드를 파싱하여 AST(Abstract Syntax Tree)로 변환한다. • 인터프리터는 AST기반으로 바이트 코드를 생성한다. • 인터프리터는 프로파일링 데이터(자주 사용하는 함수 및 타입정보)를 바이트코드와 같이 최적화 컴파일러(Optimizing compiler) 에게 보낸다. • 최적화 컴파일러는 바이트 코드와 프로파일링 데이터로 최적화 코드(Optimized code)를 생성한다. • 프로파일링 코드가 잘못된 경우 최적화를 풀고(Deoptimize) 다시 바이트코드로 돌아가 ..
브라우저의 렌더링 과정 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(webkit)이나 게코(Gecko) 등 과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, JavaScript로 렌더링 할 때 CRP(Critical Rendering Path)라는 프로세스를 사용한다. 웹킷(webkit) • 크롬이나 사파리에서 채용한 HTML, CSS 웹 브라우저 렌더링 엔진 입니다. • 그외 게코(Gecko)는 파이어 폭스에서 사용하는 렌더링 엔진입니다. • 종종 css 접두사로 '-webkit' 라는 표현이 사용됩니다. 해당 웹 브라우저에서 해석해서 렌더링이 가능합니다. CRP(Critical Rendering Path) • 렌더링 엔진이 HTML, JS, CSS 파일을 렌더링 할때 의 프로세스입니다. 1. H..
CSR(Client Side Rendering) 과 SSR(Sever Side Rendering SPA와 MPA • SPA (Single Page Application) • 하나의 html 파일을 기반으로 자바스크립트를 이용해서 동적으로 화면 구성을 바꿔주는 웹 어플리케이션 • MPA (Mutiple Page Application) • 사용자가 페이지를 요청할 때마다 웹 서버가 요청한 UI와 필요한 데이터를 html로 파싱해서 보여주는 웹 어플리케이션 방식이다. 보통 각 SPA방식은 CSR이고 MPA방식은 SSR방식이다. 왜 그런지 알아보도록 하자 CSR CSR에서는 웹브라우저가 서버에 html과 js를 요청하고 나서 해당 내용이 로드 되면 사용자의 상호작용을 JS를 이용해서 동적으로 렌더링 시킨다. 장점 • 첫 로딩만 기다리면, 동적으로 빠르게 렌더링이 되기 때문에 사용자 측면에서 활용하기 좋다...
강릉여행 보호되어 있는 글입니다.
MongoDB - [express js app과 연결하기] MongoDB - 데이터베이스 서비스이다. www.mongodb.com/ The most popular database for modern apps We're the creators of MongoDB, the most popular database for modern apps, and MongoDB Atlas, the global cloud database on AWS, Azure, and GCP. Easily organize, use, and enrich data — in real time, anywhere. www.mongodb.com - 오른쪽 상단의 Try Free 를 선택해서 회원가입을 해준다. 하다보면 cluster라는 것을 만들어야 하는데 위 페이지를 보면 cloud 상에서 mongoDB를..

티스토리툴바