하수도키의 성장일기

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 5 - 반복문을 단순하게 만들어라(2/2))

자바스크립트 코딩의 기술(시리즈 5 - 반복문을 단순하게 만들어라(2/2)) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 갈지는 진행하면서 가늠잡아 보겠다. 개요 데이터를 순회할 때 사용하는 배열메서드를 알아보자. 여태까지 for문만 사용했으면 이제 적합한 도구(배열메서드)를 사용해보자. forEach()로 동일한 동작을 적용하라.(TIP24) forEach() 메서드를 이용해 배열의 각 항목에 동작을 적용하는 방법을 살펴보자. map(), filter(), find()와 달리 forEach()는 배열을 전혀 변경하지 않는다. 대신, 모든 항목에 동일한 동작을 수행 한다. 회원들에게 이메일로 초대장을 보내는 예제 코드를 보면서 살펴보자. cons..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 5 - 반복문을 단순하게 만들어라(1/2))

자바스크립트 코딩의 기술(시리즈 5 - 반복문을 단순하게 만들어라(1/2)) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 갈지는 진행하면서 가늠잡아 보겠다. 개요 데이터를 순회할 때 사용하는 배열메서드를 알아보자. 여태까지 for문만 사용했으면 이제 적합한 도구(배열메서드)를 사용해보자. 화살표 함수로 반복문을 단순하게 만들어라(TIP20) 화살표 함수(=>)를 이용해 관련 없는 정보(기존 함수에서)를 제거하는 방법을 알아보자. 필요없는 정보 function 키워드 인수를 감싸는 괄호 return 키워드 중괄호 this와 관련된 문맥 내용도 있으나 여기서는 지나가고 나중에 TIP36에서 살펴볼 것이다. 영문 이름 값을 받아 첫 번째 글자를 대문자..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 4 - 조건문을 깔끔하게 작성하라)

자바스크립트 코딩의 기술(시리즈 4 - 조건문을 깔끔하게 작성하라) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 갈지는 진행하면서 가늠잡아 보겠다. 개요 이번장에서 참과 거짓에 관련된 코드를 간결하게 작성하는 방법을 알아보자. 참과 거짓에 대한 기초 지식 삼항 연산자 단락 평가 거짓 값이 있는 조건문을 축약하라(TIP17) 거짓 값과 참 값을 이용해 서로 다른 정보를 확인하는 방법을 알아보자. 불 자료형(boolean type)이라고 부르는 원시값 true, false 와 참(truthy) 또는 거짓(falsy) 값이라고 부르는것들에 대한 차이를 살펴보자. 우선 동등과 일치에 대해 살펴보자. 1 == '1' // true 동등 : ..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 3 - 특수한 컬렉션을 이용해 코드 명료성을 극대화하라)

자바스크립트 코딩의 기술(시리즈 3 - 특수한 컬렉션을 이용해 코드 명료성을 극대화하라) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 갈지는 진행하면서 가늠잡아 보겠다. 객체를 이용해 정적인 키-값을 탐색하라(TIP10) 데이터에 따라 UI에 색상을 적용해야 하는 경우를 생각해보자. 다음 예제 코드와 같이 배열에 16진수 값을 넣었지만, 이것만으로 각각 무슨 의미인지 알 수 없다. const colors = ['#d10202', '#19d836','#0e33d8']; 사용자 정보를 담은 배열처럼 구조적으로 유사하고 다른 데이터와 교체해도 괜찮은 경우와 다르게 위에서 살펴본 색상들은 각각 다른 목적으로, ..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 2 - 배열로 데이터 컬렉션을 관리하다)

자바스크립트 코딩의 기술(시리즈 2 - 배열로 데이터 컬렉션을 관리하다) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 갈지는 진행하면서 가늠잡아 보겠다. 배열로 유연한 컬렉션을 생성하라(TIP5) 자바스크립트에는 데이터 컬렉션을 다루는 구조로 배열, 객체 이렇게 두가지가 있었다. 모던 자바스크립트에서 맵(Map), 세트(Set), 위크맵(WeakMap), 위크셋(WeakSet), 객체, 배열을 사용할 수 있다. 컬렉션을 선택할 때는 정보로 어떤 작업을 할지 생각해봐야 된다. 대부분 배열을 사용하며 배열을 사용하지 않아도 배열에 적용되는 개념을 빌리게 된다. 배열의 순서가 기술적으로 보장되지 않지만 대부분 상황에서 동작한다고 생각하면 된다.(htt..

개발일기/자바스크립트 코딩의기술 정리

자바스크립트 코딩의 기술(시리즈 1 - 변수 할당으로 의도를 표현하라)

자바스크립트 코딩의 기술(시리즈 1 - 변수 할당으로 의도를 표현하라) 자바스크립트 코딩의 기술 책을 읽고 복습 겸 정리하는 포스팅이다. 시리즈 1이 시작이며 시리즈 몇까지는 갈지는 진행하면서 가늠잡아 보겠다. const로 변하지 않는 값을 표현하라(TIP1) 과거에는 var만 사용하여 변수에 할당했으나 현재는 let, const를 사용하여 할당한다. const는 재할당 할 수 없는 변수 선언입니다. 즉, 한 번 선언하면 변경할 수 없다. 하지만, 값이 변경되지 않는 것, 즉 불변값이 되는 것이 아니다. const를 사용해 객체(배열)을 할당하고 객체의 프로퍼티(배열의 경우 요소)을 바꿀 수 있다. 이는 const 변수의 타입이 객체(배열도 마찬가지)인 경우, 객체에 대한 참조를 변경하지 못한다는 것을 ..

개발일기/Vue.js

[Vue.js] highcharts 설치 및 세팅

highcharts 설치 및 세팅 Vue.js 사용하면서 차트를 그려야 될때 highcharts를 이용해보자. 다른 차트로 만들고 싶으면 https://madewithvuejs.com/charts 요기를 참고해보자. highcharts 설치 https://www.highcharts.com/ https://npmjs.com/ 에서 highchart를 검색해보니 vue 와 관련된 라이브러리를 발견! 3개월전 업데이트가 되었고 따끈따끈해보인다. 시작하기 위해서 필요한것들이 뭐가 있는지 보자.(Requirments 클릭) Vue, Highcharts 라이브러리가 필요하다. Vue는 설치되어있고 Highcharts를 다시 검색해보자. 설치 방법은 여러가지 있으니 환경에 맞게 하자. 나는 npm install --..

개발일기/Vue.js

[Vue.js] Vue CLI 설치 및 세팅

Vue CLI 설치 및 세팅 Vue CLI 설치 하기 - 글로벌(전역)으로 설치하여 어느 곳에서든지 Vue CLI사용할 수 있게 한다. - 터미널 또는 CMD에서 아래와 같이 명령어를 입력한다. npm i -g @vue/cli Vue project 생성하기 - vue create project명으로 Vue CLI를 이용해 프로젝트를 생성한다. vue create playground - 터미널에서 여러가지 옵션을 선택해야 되는데 아래 스크린샷과 같이 설정한다. - 대략적으로 수동으로 옵션 선택, ESLint, Linter, Router, Babel, Prettier, NPM 사용한다는 내용이다. Vue Project 실행하기 - 설치된 폴더로 이동 후 프로젝트를 실행한다. cd playground npm ..