hoon's bLog

10장 컴포넌트 아키텍처를 이용해 관련 파일을 모아라 tip47. 가져오기와 내보내기로 기능을 분리하라 프로젝트를 개발하다보면 html, css, javascript 등 파일을 여러개로 분리해서 작업을 해야한다. 이때 분리된 파일 각각을 모듈(module)이라고 하는데, 모듈은 클래스 하나 또는 특정 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다. 이 때 모듈에 export와 import 키워드를 사용하면, 다른 모듈을 내보내고, 불러들이는 일종의 기능 공유가 가능하다. // address.js import { capitalize } from '../single/util'; export function parseRegion(address) { const region = address.sta..

9장 외부 데이터에 접근하라 저번 포스팅과 마찬가지로, 개념적으로 부족한 부분이 많아 기본 개념과 설명이 많고, 예제 코드도 책이 아닌 직접 코딩을 해서 설명을 풀어보겠다. tip45. fetch로 간단한 AJAX 호출을 처리하라 fetch() API HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공 Fetch API가 제공하는 전역 fetch() 메서드로 네트워크의 리소스를 쉽게 비동기적으로 취득 가능 fetch() : 특정 정보가 필요한 클라이언트는 서버에 HTTP 통신으로 요청(request)을 보내고, 정보를 응답(response)받을 수 있다. fetch()는 대부분의 최신 브라우저에서 지원되지만 Node.js에서는 기본적으..

9장 외부 데이터에 접근하라 이번 포스팅에서는 Promise라는 개념과 async/await에 대해서 알아볼 텐데, 개념적으로 부족한 부분이 많아 기본 개념과 설명이 많고, 예제 코드도 책이 아닌 내가 직접 코딩을 해서 설명을 풀어보겠다. 이번 장을 이해하기 위해서는 비동기 방식과 콜백함수가 선행되어야 한다. (추후 비동기와 콜백함수에 대해서 포스팅 예정) tip43. 프라미스를 이용해 비동기적으로 데이터를 가져오라 프라미스(Promise) 자바스크립트 비동기 처리에 사용되는 객체로, 비동기 작업을 전달받아서 응답에 따라 두 가지 메서드 중 하나를 호출하는 객체이다. 비동기 작업이 성공하거나 충족된 경우 then() 메서드에 결과를 넘겨준다. 비동기 작업이 실패하거나 거부되는 경우에는 Promise가 c..

8장 클래스로 인터페이스를 간결하게 유지하라 tip40. get과 set으로 인터페이스를 단순하게 만들어라 이전 팁에서 사용한 코드를 활용하여, 클래스는 아래 코드처럼 속성에 접근하여 변경도 가능하다. class Coupon { constructor(price, expiration) { this.price = price; this.expiration = expiration || '2주'; } getPriceText() { return `$ ${this.price}`; } getExpirationMessage() { return `이 쿠폰은 ${this.expiration} 후에 만료됩니다.`; } } const coupon = new Coupon(5); coupon.price = '$10'; coupon..

8장 클래스로 인터페이스를 간결하게 유지하라 tip37. 읽기 쉬운 클래스를 만들어라 우선 자바스크립트에서 클래스를 작성하는 방법을 살펴보자. class Coupon { constructor(price, expiration) { this.price = price; this.expiration = expiration || "2주"; } } const coupon = new Coupon(); coupon.price; // undefined coupon["expiration"]; // 2주 class : 클래스를 선언 클래스는 일반적인 JavaScript 함수일 뿐이며 클래스 구문을 사용하지 않고 완전히 복제 가능하여, 복잡한 객체를 보다 쉽게 선언하고 상속 할 수 있도록 한다! new : 새로운 인스턴스 생..

7장 유연한 함수를 만들어라 tip34. 부분 적용 함수로 단일 책임 매개변수를 관리하라 고차 함수를 이용해 매개변수에 단일 책임을 부여하는 방법을 살펴보자. 고차 함수(Higher-Order Function) 함수를 파라미터로 전달받거나 연산의 결과로 반환해주는 메서드 다른 함수를 반환하므로 최소 2단계의 매개변수가 존재 자주 거론되는 함수형 프로그래밍의 핵심이기도 하며, 자바스크립트를 함수형 프로그래밍에 알맞은 언어로 만들어주는 특성 함수형 프로그래밍 : 함수형 프로그래밍은 함수를 다른 함수의 파라미터로 넘길 수도 있고 반환(return) 값으로 함수를 받을 수도 있는 프로그래밍 형태 웹사이트에 행사 안내 페이지가 있다고 가정하자. 아래 코드를 통해 살펴보자. 장소, 건물(building), 관리자(..

7장 유연한 함수를 만들어라 tip32. 테스트하기 쉬운 함수를 작성하라 코드를 쉽게 리팩토링 가능 오래된 코드를 쉽게 이해 가능 마지막으로 명확하고 버그가 적은 코드를 작성 가능 너무 당연한 말이 아닐까 싶지만, 현실은 테스트 코드를 작성하는 것 조차 쉽지 않다. (테스트 작성의 어려움, 코드가 외부 의존성이 강하게 결합, 개발속도가 느림 등...) import { getTaxInformation } from './taxService'; function formatPrice(user, { price, location }) { const rate = getTaxInformation(location); // const taxes = rate ? `추가 세금 $${price * rate}` : '추가 세금'..

6장 매개변수와 return 문을 정리하라 tip28. 매개변수 기본값을 생성하라 pound를 kilogram으로 변환하는 코드를 보면서 알아보자.(pound를 2.2로 나눠야 kilogram으로 변환) function convertWeight(weight) { return weight / 2.2; } 온스(ounce)도 변환해야 한다는 요구사항이 생겼다.(온스는 1pound === 16ounce 이므로 ounce / 16으로 계산) function convertWeight(weight, ounces) { const oz = ounces ? ounces / 16 : 0; const total = weight + oz; return total / 2.2; } convertWeight(44, 11); // ..