2018/08 썸네일형 리스트형 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 를 통해 빌드, 테스트를 자동화 하는것이 성공하면 배포 단계로 .. 더보기 GitHub Pages 사용하기 GitHub Pages 는 GitHub 에서 제공하는 Static 웹사이트 로 GitHub Repository 에 Push 만 하면 간단하게 웹사이트를 만들 수 있다. 다만 Static 웹사이트 이기 때문에 Database 등은 사용이 불가능하지만 AWS 없이도 무료로 내가 만든 웹사이트를 공유할 수 있는 유용한 도구이다. GitHub Pages 로 접속하면 다양한 방법의 GitHub Pages 설정이 가능하다. GitHub Pages 에서 제공하는 jekyll 을 이용해 이미 완성된 템플릿으로 간단하게 웹페이지를 Generate 할 수 있지만 나는 앞으로 내가 만들고 있는 블로그 프로젝트를 웹으로 보여주길 원하기 때문에 jekyll 없이 사용하였다. 일단 기존 GitHub 에 Respository 가 .. 더보기 이전 1 다음
