Front-End 썸네일형 리스트형 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 를 통해 빌드, 테스트를 자동화 하는것이 성공하면 배포 단계로 .. 더보기 [Javascript] 자료형 자바스크립트의 여섯가지 자료형 1. 문자열 자료형- '(작은따옴표), "(큰따옴표) 를 사용해서 문자열 자료형으로 인식- 하나의 따옴표를 사용해 일관성을 주는 것이 좋음 2. 숫자 자료형- 정수와 유리수의 구분 없이 모두 같은 자료형으로 인식 3. bool 자료형- 참, 거짓 값을 표현하는 자료형- 비교연산자를 사용하여 bool 자료형으로 표현할 수 있음- 문자열을 비교연산자로 비교하는 경우 국어사전의 앞쪽(유니코드 문자의 코드 값을 기준)에 있을수록 작은 값으로 비교 ('가방' > ' 하마' => false)- bool 자료형 끼리의 비교도 가능 [ true(1) > false(0) => true ] 4. 함수- ECMAScript 에서 함수는 객체로 간주되지만 객체에 존재하지 않는 특별한 프로퍼티가 .. 더보기 이전 1 2 다음
