본문 바로가기

Front-End

(26)
Clean Code Javascript 함수함수 인자는 2개 이하가 이상적이다안 좋은 예 : function createMenu(title, body, buttonText, cancellable) { // ... }좋은 예 :function createMenu({ title, body, buttonText, cancellable }) { // ... } createMenu({ title: 'Foo', body: 'Bar', buttonText: 'Baz', cancellable: true });인자가 3개 이상이라면 이미 그 함수는 너무 많은 역할을 하고 있는 것이다. 만약, 많은 인자를 사용해야 하는 경우라면 객체를 이용하자. ES6의 비구조화(destructuring) 구문을 사용하자!
ES6 문법 개요 ES6 문법 1. let과 constES6부터 나온 새로운 변수 선언 키워드이다. let과 const는 block scope를 가진다.const는 변경되지 않는 상수를 표현할 때 사용한다.function foo() { if (true) { let a = 'bar'; } console.log(a); } foo(); // Uncaught ReferenceError: a is not definedES6 문법 2. Arrow functionconst a = () => { console.log("arrow function"); } a();const print = text => { console.log(text); } // 파라미터가 1개일땐 괄호 생략 가능 const sum = (a, b) => (a + b) /..
Functions 함수 선언 - 파라미터로 non-primitive value가 넘어오면 원본도 바뀐다.function myFunc(theObject) { theObject.make = 'Toyota'; } var mycar = {make: 'Honda', model: 'Accord', year: 1998}; var x, y; x = mycar.make; // x gets the value "Honda" myFunc(mycar); y = mycar.make; // y gets the value "Toyota" // (the make property was changed by the function)bind, apply, call 이란? Function level scope var로 선언된 변수나, 함수 선언
HTTP 스크립팅 개요 HTTP(HyperText Transfer Protocol)는 웹브라우저가 서버로부터 문서를 전송받거나 폼의 내용을 보내는 방법, 그리고 해당 요청에 대해 서버가 어떻게 응답해야 되는지 명세한다. 일반적으로 HTTP는 스크립트의 제어를 받지 않는 대신 새로운 URL이 입력되거나 사용자가 링크를 클릭했을 때 발생한다. 그러나 HTTP는 자바스크립트 코드를 통해서도 작성할 수 있다 AJAX는 HTTP를 조작하는 데 특화된 웹 어플리케이션 설계 방식을 가르키는 용어다. 이것은 핵심적인 특징은 페이지를 로딩하지 않고 웹 서버와 데이터를 통신할 수 있는 것이다.
클라이언트 UI와 서버 데이터 제대로 연동하고 싶다. 상황Server DB table에 있는 값들을 Client 화면에 실시간으로 보여주고 싶다. ( 2-way binding ) 이걸 구현하려면 어떻게 해야될까??? 만약에 Client에서 요청한 할 때 값을 받아온다면...1) DB를 조회하는 Service 만들기2) Client에서 해당 Service 요청3) Service response가 왔을 때 UI랑 data랑 바인딩이런 순으로 구현하면 될 것이다. 하지만, 요청을 미친듯이 한다면? Connection하는데 드는 비용을 계속 감수해야 한다. 그렇다면 어떻게 해결해야 할까?HTML5 프로토콜에 추가된 WebSocket을 이용하면 된다. WebSocket은 브라우저와 서버 사이의 양방향 연결채널을 구성하는 HTML5 프로토콜이다. WebSocket A..
Web Worker(웹 워커) - 멀티 스레드 쓰고 싶어! 1. 공부하게 된 계기 클라이언트 앱을 개발하는 도중, 서버 쪽에 동작이 오래 걸리는 서비스를 호출하고 싶다. 만약 같은 스레드에서 요청한다면 브라우저는 멈추게 되고 사용자는 기다려야 한다. ( 예를 들어, 서버 데이터를 가져오는 네트워크 작업과 같은 경우 ) '이럴 때 백그라운드 스레드 생성을 어떻게 할 수 있을까?' 라는 고민을 하다 웹어커를 알게 되었다.
Web project 성능 최적화하기 웹 어플리케이션 성능 최적화모바일 웹 어플리케이션 구동 시 서버에서 단말 단까지 구성되는 지연 요소는 크게 단말에서의 HTML,CSS,JS 처리와 서버에서의 처리 지연 그리고 네트워크 전송 부분으로 구성된다. 1. 자바스크립트자바스크립트 적재 시간 최적화첫 화면 구성 시 즉시 필요한 자바스크립트와 필요하지 않은 자바스크립트를 분리하여 lazy loading자바스크립트 minify자바스크립트 수행 코드 수행 시간 짧게 유지자바스크립트 수행 동안 main UI thread는 중지됨http://readme.skplanet.com/?p=4437
Prototype, Object 이해하기 Prototype이란 무엇인가?Java에서와 다르게 Javascript는 프로토타입 기반의 언어라고 한다. 항상 귀동냥으로 자바는 객체지향 언어이고 이는 자바스크립트에서 지원이 되지 않는다고만 알고 있었다. ( ECMA2016에서 class 키워드가 등장하긴 했지만... )공부를 하다보니 Object가 무엇인지도 제대로 안 되어 있음Object란 무엇인가?Object란 객체이다. 객체란 Java에서 배웠던 것 처럼 데이터(주체)와 행동(데어터에 관련된 동작)을 정의하고 있는 것이다. 자바스크립트는 객체 그 자체라고 하는데, 이것이 어떠한 의미인지는 아직 와닿지는 않는다. 위에서 정의한 것처럼 흔히 데이터는 프로퍼티라 칭하고, 행동은 메소드라 칭한다.Property프로퍼티는 객체의 속성을 나타내는 접근 가..
[Docs번역-Tutorial]#3.Master.Detail(리스트만들기) 이번에는 영웅들의 리스트를 보여주고, 사용자가 영웅을 선택하여 상세내역을 확인할 수 있도록 만들어 볼 것입니다. 코드는 다음과 같습니다. ( https://embed.plnkr.co/?show=preview )파일 디렉토리angular-tour-of-heroessrcappapp.component.tsapp.module.tsmain.tsindex.htmlstyles.csssystemjs.config.jstsconfig.jsonnode_modules ...package.jsonheroes 보여주기프로젝트를 만들기 영웅들의 리스트를 보여주기 위해서는 view template를 추가하자.Mock data로 사용할 10개의 heroes를 만들자.src/app/app.component.ts (hero array)c..
[Docs번역-Tutorial]#2.The Hero Editor(양방향 바인딩) 개발 환경 로컬에 구성하기 angular-tour-of-heroes 프로젝트를 만들기 위해 해당 링크(https://angular.io/guide/setup)를 따라하자. angular-tour-of-heroessrcappapp.component.tsapp.module.tsmain.tsindex.htmlstyles.csssystemjs.config.jstsconfig.jsonnode_modules ...package.json우리가 이 모든것을 완성하고 나면 다음과 같은 화면(https://embed.plnkr.co/?show=preview)을 볼 수 있다.앱을 compile하고 실행하자.터미널에 다음과 같은 명령어를 입력하자.npm start이 커맨드는 TypeScript 컴파일러가 "watch mode..