일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- 백준 javascript
- Linux
- 프로그래머스
- 반복문
- 코테
- 코딩테스트
- JavaScript
- Memoir
- 리눅스마스터 1급 정리
- 개발자 회고록
- 문자열
- map
- 스프링 빈
- 카카오
- 자바
- GoingBus
- 자바스크립트 코딩의 기술
- toCharArray
- 월간코드챌린지
- 백준 java
- java 백준 1차원 배열
- 리눅스
- Java
- 스프링 컨테이너
- 고잉버스
- 명령어
- 리눅스마스터 3과목
- Kotlin
- 연습문제
- 리눅스마스터1급
- Today
- Total
목록 자바스크립트 코딩의 기술 (14)
hoon's bLog
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); // ..
5장 반복문을 단순하게 만들어라 tip20. 화살표 함수로 반복문을 단순하게 만들어라 화살표 함수는 함수가 장황해지는 문제를 해결해서 함수 작성을 간결하고 짧게 만들어준다. 또한, 필요하지 않은 정보를 최대한 걷어낸다. (function keyword, 괄호, return, 중괄호 등...) 매개변수가 1개인 경우에는 괄호를 생략 매개변수가 없거나 2개 이상인 경우에는 괄호 필수 // 이름이 있는 '기명함수' function capitalize(name) { return name[0].toUpperCase() + name.slice(1); } // 이름이 없어 변수에 할당하는 '익명함수' const capitalize = function(name) { return name[0].toUpperCase() ..