본문 바로가기

CSS 렌더링 에 대하여 CSS 렌더링 'CSS 렌더링'이란 그림을 그릴 영역을 계산하고 영역을 채우는것. 웹에있는 CSS 렌더링 시스템은 여러 분야의 렌더링 시스템을 받아들여 왔기 때문에 난잡하고, 표준화 되어 있지 않다. CSS 는 버전이 아니라 레벨로 관리된다. 1. CSS LEVEL 1 - A4 한장으로 정의할 정도로 별거없음 2. CSS LEVEL 2 + Module 의 개념 추가 - 모듈로 관리되기 시작하면서 모듈별로 버전이 관리되게 되고 CSS3 로 전체 모듈의 레벨을 한번에 관리하는것이 불가능하게됨) 3. CSS LEVEL 2.1 - CSS 2.1 에 포함 된 모듈 중 모듈의 버전이 3 인것들을 CSS 3 라고 부르게 됨) W3C 의 영향력이 약해지면서 Draft 되지 않을 것들을 브라우저에서 적용했고, W3C 에.. 더보기
SPA(Single Page Application) SPA(Single Page Application) SPA 는 웹 페이지를 구성하는 방법중 하나다. SPA 는 기본적으로 단일 페이지로 구성된다. SPA 가 아닌 보통의 link tag 를 사용하는 전통적인 웹사이트는 새로운 페이지 요청시 마다 해당 주소로 이동하고 서버통신으로 HTML 코드를 읽어오는 방식을 취하는데, 이것을 서버사이드 렌더링(Server Side Rendering, SSR) 이라고 부른다. 이것은 변경이 필요없는 부분을 포함한 전체 페이지를 갱신하기 때문에 비효율적이다. 하지만 SPA 는 초기 페이지 요청시 모든 정적 리소스를 다운로드 하고, 이후에 페이지 갱신에 필요한 JSON, XML 같은 데이터만 서버를 통해 요청 응답 받는다. 페이지 이동시에는 전체 페이지를 갱신하는 것이 아니.. 더보기
Babel, Polyfill 그리고 Babel-Polyfill Babel - ES6/7 코드를 ES5 코드로 Transpiling 해주는 Transpiler- ES5 이전까지는 표준이 없었고, jquery 가 브라우저 호환성을 해결해줄 수 있기 때문에 필요 없었음- Babel 은 스크립트 자체가 수정되어야 하는 상황으로 새로운 컴파일이 필요할 때 사용함 - 자바스크립트 스펙으로 아직 확정되지 않은 Proposal 스펙이 5개의 Stage 로 구분되어 존재하는데, Babel 은 각각의 Stage 에 대해 Preset 을 제공함 아래의 Arrow Function (=>) 은 ES6 에서 추가된 함수 표현식으로, 화살표 표현식 (=>) 은 Javascript 의 Syntax 가 아니기 때문에 Javscript 가 읽을 수 있는 스크립트로 재 작성 되어 새로 컴파일 되어야.. 더보기
GitHub 커밋에 ESLint 를 이용한 Code Convention 지키기 ESLint - ES(EcmaScript) + Lint(보푸라기) - 사용자가 정의한 Code Convention 을 지키고, 에러 체크를 도와주는 도구(Linter)- 협업에 유용한 도구로 개발자들이 같은 형태의 코드를 작성할 수 있도록 도와줌 ESLint 적용하기 Node 와 ESLint, Travis 세가지를 조합해 ESLint 를 적용해보았다.Travis 까지 적용하기 위해서는 Travis 설정이 사전에 필요하기 때문에 Travis 설정은 다음 글을 참고한다. 1. npm 을 이용해 ESLint 를 설치한다. (sudo 필수) sudo npm install -g eslint 2. ESLint 를 init 하는 명령어를 실행하여 ESLint 를 정의한다. eslint --init 3. (선택) 현재.. 더보기
Travis 를 사용한 CI(Continuous Integration), CD(Continuous Delivery/Development) Travis - Ruby 로 작성된 오픈소스 기반의 CI(Continuous Integration), CD(Continuous Delivery/Development) 도구이다. - GitHub 의 프로젝트를 연결하여 테스트, 빌드 및 배포가 가능하다. CI(Continuous Integration)/CD(Continuous Delivery/Development) 여기서 말하는 CI 란 '지속적인 통합' 으로 개발자가 개발한 소스의 빌드 과정을 주기적으로 수행하여 소스 통합 과정에서 발생하는 오류를 사전에 해결하고 이런 과정들에 필요한 시간을 줄일 수 있도록 해준다. CI 를 통해 빌드, 테스트를 자동화 하는 것이 가능하다는 이야기이다. CI 를 통해 빌드, 테스트를 자동화 하는것이 성공하면 배포 단계로 .. 더보기