어제보다 더 나은 오늘

1. substring() vs. substr() 각 메소드의 두번째 인자가 의미하는 바가 다르다. - substring의 두번째 인자: 마지막 인덱스(포함하지 않음) - substr의 두번째 인자: 추출한 문자의 길이 const word = 'grapefruit' word.substring(4,7) // 'efr' word.substr(4,7) // 'efruit' 2. substring() vs. slice() substring()과 slice()의 사용법은 기본적으로 동일하다. 하지만 다음의 두 가지 경우에 차이가 있다. 1) startIndex > endIndex 일 때 substring()은 첫번째 인자(startIndex)가 두번째 인자(endIndex)보다 크면 swap을 하지만, slice..

일반적인 for 문과 forEach 메소드에 차이가 있다는 점을 새까맣게 모르고, 이제까지 배열을 순회하는 여러 가지 방법 중 하나라고 생각하고 썼다. 그러던 중 주말에 알고리즘 문제를 풀면서 똑같은 코드를 forEach로 실행할 때와 for of로 실행할 때에 다르게 동작한다는 점을 깨닫고 둘의 차이를 찾아보았다. 1. for loop - 중간에 loop 건너뛰기나 종료가 가능하다 (continue나 break 키워드 사용 가능) - 반복 범위를 설정할 수 있다 (i++, i--, i+=2 등) 즉, 역순 탐색 등 다양한 방식의 탐색이 가능하다. 2. forEach - for문과 다르게 중간에 끊을 수 없고, 배열의 모든 요소를 끝까지 순회한다. forEach의 콜백 함수 안에서 return을 해도 함..

axios 라이브러리는 편의를 위해 다음과 같이 http 메소드의 별칭을 제공한다. axios.get(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]]) axios.delete(url[, config]) 여기에서 마지막 delete 요청을 보면 post 요청과 달리 두번째 인자가 data가 아닌 config이다. 하지만 config 설정 옵션을 통해서도 서버에 data를 실어 보내는 방법이 있다. 다음은 Oauth 구현 과제에서 클라이언트 화면에 있는 로그아웃 버튼을 눌렀을 때 로컬 서버에 accessToken을 같이 보낸 다음, 로컬 서버에서 re..

Map 1. 특징 key-value 쌍을 저장할 수 있는 collection 자료의 연관성을 표현하기 위해 사용한다. key는 중복될 수 없다. 하나의 key에는 하나의 value만 가능하다. (value 값은 중복이 가능하다) map.set을 호출할 때마다 map 자신이 반환된다. 이를 이용해 map.set을 체이닝할 수 있다. map.set(key, value) 메소드를 통해 자료를 넣을 수도 있고, key, value 쌍으로 이루어진 요소로 구성된 이터러블을 생성자 함수의 인자로 전달할 수도 있다. // map.set 메소드 사용 const map = new Map(); map.set('key1', 'value1') map.set('key2', 'value2') // 생성자 함수에 이터러블을 인자로..

가격 정보 등 큰 숫자를 표시할 때 세 자리마다 쉼표를 넣어서 표기해주는 편이 단위를 파악하기 쉽다. 이때 쓸 수 있는 간단한 내장 메소드가 있는데 바로 toLocaleString()이다. 날짜 데이터에만 쓰는 줄 알았는데, 숫자에도 적용 가능하다. 단 숫자에 바로 적용하면 syntax error가 뜨기 때문에 숫자를 변수에 담아서 사용해야 한다. 메소드 이름에서 알 수 있듯이 쉼표가 찍힌 string을 반환한다. 쇼핑몰 상품 카드 등에서 가격을 표시하는 컴포넌트를 만들 때 다음과 같이 작성할 수 있다.

기존 배열은 건드리지 않은 채 배열의 어떤 값을 변경해서 새로운 배열로 반환하고 싶을 때 map 메소드를 자주 쓴다. React, Redux 등 데이터의 불변성(immutability)이 중요한 라이브러리에서 데이터를 다룰 때 자주 쓰는 메소드 중 하나이다. 다음과 같은 user 정보가 담긴 객체가 들어 있는 배열을 예로 들어보자. const users = [ { id: 1, name: "이정도", username: "jd1386", email: "lee.jungdo@gmail.com", phone: "010-3192-2910", website: "https://leejungdo.com", province: "경기도", city: "성남시", createdAt: "2019-02-24T16:17:47.00..

자바스크립트에서 return 문을 정의하지 않은 함수의 default return 값은 undefined다. 입력값을 받아서 로직을 거쳐 출력값을 반환하는 함수라는 녀석에서 굉장히 기본적인 상식이지만 이 기본을 잊어서 곤혹을 겪는 경우가 종종 있다. 이와 비슷하게 오늘 쇼핑몰 장바구니 기능 구현 과제를 하다가 array.push()의 반환값 때문에 어처구니 없는 에러를 겪었다. 배열의 각종 메소드들은 for loop나 그밖의 다른 방법 등으로 배열을 순회하면서 각종 조건문을 걸어주면 어지간하게 다 구현할 수 있다. 하지만 메소드를 쓰면 그안의 로직은 알 바 아니고 내가 하고 싶은 일에만 집중할 수 있어서 엄청나게 편리하다. 명령형(또는 절차형)이 아닌 선언형 프로그래밍의 이점이라고 할 수 있다. 거기에 ..

1. event.key 사용 const handleKeyUp = (e) => { // codes to execute } { if (e.key === "Enter") handleKeyUp(e); } } /> 2. event.keyCode 사용 const handleKeyUp = (e) => { // codes to execute } { if (e.keyCode === 13) handleKeyUp(e); } } /> 📚 참고자료: https://ungdoli0916.tistory.com/446

'하노이의 탑' 이해하기 '하노이의 탑' 문제를 이해하고 문제 해결을 위한 핵심 통찰을 살핀 뒤 코드로 작성합니다. 이후 탑의 개수에 따른 총 이동 횟수를 구하는 일반항까지 수학적으로 유도합니다. shoark7.github.io 💡 재귀 문제의 핵심 1. 문제 정의: 재귀 함수의 입출력값 정의 2. 문제를 작게 만들어 해결하기 3. 작게 쪼갠 문제를 재귀식으로 표현하기 4. 재귀식을 그대로 코드로 구현 function _move(N, start, to) { return console.log(`${N}번 원반을 ${start}에서 ${to}로 이동시킨다`); } function hanoi(N, start, to, via) { if (N === 1) _move(1, start, to); else { hano..

1. 순수 함수(pure function)란? : 같은 입력 값을 받으면 항상 같은 출력 값을 반환하는 함수 (순수 함수는 입력으로 전달된 값을 수정하지 않는다.) 순수 함수의 특징: - side effect가 없다. - 예측가능하고, 신뢰할 수 있고, 테스트하기 쉽다. 2. side effect(부수 효과)란? : 함수 내에서 어떤 구현이 함수 외부의 상태에 의존하거나 외부의 상태를 변경하는 경우, 해당 함수는 side effect가 있다고 이야기한다. 1) 외부 상태에 의존: 외부에 있는 변수의 값에 따라 함수의 결과가 달라진다. 2) 외부 상태를 변경: 힘수가 외부에 있는 변수의 값을 변화시킨다. 순수 함수의 예시: React의 컴포넌트 리액트의 컴포넌트는 props가 입력으로, JSX Elemen..