엘리스 AI 트랙 4기/Frontend CS Study15 [Frontend] CI와 CD 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ CI 지속적인 통합(CI, Continuous Integration)은 빌드와 테스트를 자동화해서 공유 저장소에 병합시키는 프로세스를 의미한다. git과 같은 버전관리 시스템을 사용할 때 여러 명의 개발자가 하나의 공유 저장소를 사용하는 경우가 많다. 이때 새로운 코드의 변경 사항이 저장소에 통합되지 않을 경우 서로 충돌할 수 있다. 따라서 자동화된 빌드 및 테스트 수행 후 코드 변경 사항을 공유 저장소에 정기적으로 병합하는 것이 중요하다. 지속적인 통합에서는 각 커밋에 앞서, 개발자가 통합 전에 추가 검증 단계로 코드에 로컬 유닛 테스트를 수행할 수 있다. 지속적인 통합 서비스는 새로운 코드 변화에 대한 유닛 테스트를 자.. 2022. 1. 30. [Frontend] 모듈 번들러와 트랜스파일러 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ 모듈 번들러 모듈이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 의미한다. 현대의 프론트엔드 개발은 모듈 단위로 파일을 엮어서 개발하는 방식이다. 다르게 말하면 모듈은 서로 의존성을 가지고 있다는 것이다. 이러한 점에서 다음과 같은 문제들이 생긴다. 모듈들의 순서를 어떻게 유지하고 처리할 것인지 모듈이 많아질 수록 HTTP 요청도 늘어나는데 이로 인한 오버헤드를 어떻게 처리할 것인지 같은 이름의 모듈이 존재할 경우 어떻게 처리할 것인지 ES6+의 코드들을 어떻게 처리할 것인지 위 문제들을 해결하기 위해 등장한 것이 모듈 번들러이다. 모듈 번들러(Module Bundler)는 웹 애플리케이션을 동작시키기 위한 서.. 2022. 1. 28. [Frontend] BOM과 DOM 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ BOM 브라우저 객체 모델(BOM, Browser Object Model)은 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체 모델이다. BOM은 DOM과 달리 W3C 표준 객체 모델은 아니지만 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해준다. 자바스크립트에서는 이러한 BOM의 객체들을 전역 객체(global object)로 사용할 수 있다. ✔️ window 객체 window 객체는 웹 브라우저의 창을 나타내는 객체로 대부분의 웹 브라우저에서 지원하고 있다. 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다. window 객체의 메서.. 2022. 1. 27. [Frontend] 자바스크립트 엔진이 코드를 실행하는 과정 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ 자바스크립트 엔진 자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하고 웹 브라우저는 자바스크립트 엔진을 내장하고 있다. 대표적인 예는 Google V8 엔진이다. V8은 Chrome과 Node.js에서 사용하는데 Memory Heap과 Call Stack으로 이루어져 있다. Memory Heap : 메모리 할당이 일어나는 곳 Call Stack : 코드 실행 시 호출 스택이 쌓이는 곳 이외에도 최초의 자바스크립트 엔진인 SpiderMonkey, 마이크로소프트의 Chakra, 애플의 JavaScript Core 등이 존재한다. ✅ 코드 실행 과정 자바스크립트 엔진이 코드를 실행하는 방법은 다음과 같다. JavaScr.. 2022. 1. 27. [Frontend] 브라우저와 브라우저 렌더링 원리 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ 브라우저 웹 브라우저(Web browser)는 WWW(World Wide Web)에서 콘텐츠를 표시하고 탐색하는 소프트웨어 프로그램이다. 현재 자주 쓰이는 브라우저의 종류로는 구글 크롬, 마이크로소프트 엣지, 애플 사파리, 모질라 파이어 폭스, 오페라 등이 있다. 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통 HTML 파일이지만 PDF나 이미지 또는 다른 형태로 존재할 수도 있다. 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다. 브라우저는 웹 표준화 기구인 W3C(World Wide Web Consortium)에서 정한 HT.. 2022. 1. 25. [Frontend] CSR과 SSR 취준생이라면 알면 좋을 프론트엔드 관련 지식들 자료를 보고 정리한 내용입니다. ✅ SPA와 MPA ✔️ SPA SPA(Single Page Application)는 하나의 HTML 파일을 기반으로 자바스크립트를 이용해 동적으로 화면의 컨텐츠를 바꾸는 형식의 웹 어플리케이션이다. 따라서 페이지 새로고침이 발생하지 않고 일반적으로 사용자의 작업에 대한 응답이 필요한 경우 적절한 리소스를 동적으로 로드, 페이지에 추가한다. ✔️ MPA MPA(Multiple Page Application)는 사용자가 페이지를 요청할 때마다 웹 서버가 요청한 UI와 필요한 데이터를 HTML로 파싱해서 보여주는 방식의 웹 어플리케이션이다. 따라서 사용자의 요청이 발생할 때마다 서버는 새 HTML 페이지를 렌더링하고 이로 인해 페.. 2022. 1. 24. 이전 1 2 다음
