JIN_CODER

재귀 함수 함수가 직접 또는 간접적으로 자신을 호출하는 함수 필수 조건 재귀 함수는 끝나는 지점(종단점)을 설정해주어야 하고, 매번 다른 인풋 값이 들어갈 수 있도록 해야 함 주의할 점 종단점 미설정(무한 루프에 빠짐) 잘못된 값을 반환, 반환을 하지 않음(같은 인풋 값이 들어가서 무한루프에 빠짐) // n부터 카운트다운 하는 함수 function consoleN(n) { if (n === 0) { // 끝내는 조건 console.log("done!"); return; } console.log(n); n--; // 매번 다른 인풋값 consoleN(n); // 자기자신 다시 호출 } consoleN(3); /* 3 2 1 done! */ // n까지 숫자의 합 function sumN(n) { if (n..

reduce()는 배열의 각 요소를 순회하며 callback 함수의 실행 값을 누적하여 하나의 결과값을 반환함 arr.reduce(callback[, initalValue]) callback 함수 4가지 인수 1. acc : callback 함수의 반환값을 누적 2. cur : 배열의 현재 요소 3. index(Optional) : 배열의 현재 요소의 인덱스 4. arr(Optional) : 호출한 배열 initialValue(Optional) 최초 callback 함수 실행시 acc 인수에 제공되는 초기값 initialValue 미설정시 초기값을 배열의 첫번째 요소 사용 빈배열에서 initialValue미 설정시 에러 발생 Ex) 가장 간단한 표현 const a = [1, 3, 5, 7, 9]; let..

실전 프로젝트를 진행함에 앞서 이제 6주 동안 다른 사람들과 코드를 작성해서 공유를 많이 할 텐데 각자의 코드 작성 스타일이 다르면 나중에 깃 허브에서 충돌이 많이 날 것이다. 이를 대비해서 최대한 남의 코드는 건들지 않겠지만 불가피하게 남의 코드나 파일을 수정할 경우 최대한 같은 스타일을 사용한다면 충돌이 날 확률도 낮아질 것이다. 또한 나중에 보았을 때도 모든 코드가 같은 설정으로 통일되어있다면 보다 좋은 가독성을 주고 안정감을 주기 때문에 협업을 하기 전엔 코드 컨벤션을 통해 팀끼리 코드 스타일 설정을 맞추는 것이 좋은 협업의 지름길이라고 생각한다. 사실 이 글을 쓰기 전 컨벤션이 정확히 무엇인지 잘 모르고 필자도 prettier만 사용해서 스타일만 정해서 협업에 들어갔다. 이 글을 쓰면서 생각보다..

js에서 소수점 반올림하여 사용하는 방법 1. Math.round() Math.round(123.456); // 123 Math.round(123.678); // 124 Math.round(123.9191); // 124 사용 시 소수 첫 번째 자리에서 반올림하여 정수로 표현됨 정수가 아닌 소수로 표현하고 싶을 경우 const num = 6.789; const roundNum = Math.round(num * 10) / 10; console.log(roundNum); // 6.8 const roundNum2 = Math.round(num * 100) / 100; console.log(roundNum2); // 6.79 소수 첫 번째 자리까지 표현하고 싶으면 숫자에 10을 곱해서 Math.round()를 ..

지난 포스팅에선 단위 테스트에 많이 쓰이는 jest의 간단한 사용법과 모킹 함수가 무엇인지 정리했다. 이번에는 통합 테스트에서 많이 사용하는 supertest를 알아보겠다. supertest란 ExpressJS 통합 테스트용 라이브러리 내부적으로(가짜로) 익스프레스 서버를 구동시켜 가상의 요청을 보낸 뒤 결과를 검증한다. 기능을 검증하는 단위 테스트들의 상호 연결이 잘 되었는지 확인하는 통합 테스트에서 사용한다. API 서버를 만들고 HTTP 검증 도구로 슈퍼 테스트를 사용한다 supertest 설치 및 설정 1. 설치 npm i supertest -D 2. 테스트 데이터 베이스 설정 jest는 데이터베이스에 접근하지 않기 위해 모킹 함수를 써서 했다 치고 하고 값을 지정해주어 넘어갔지만, 통합 테스트는..

테스트 코드가 무엇인지 어떤 종류가 있는지는 지난 포스팅에서 언급했기 때문에 이번엔 실제 그 테스트 코드를 작성하는 방법과 어떻게 코드를 짜야하는지에 대해서 알아보겠다. 간단하게 정의만 집고 가자면 테스트 코드란 작성한 코드에 문제가 없는지 테스트하기 위해 작성하는 코드 테스트 코드의 종류 - 단위 테스트(유닛 테스트) 가장 작은 규모의 기능을 테스트 - 통합 테스트 여러 가지 기능을 합쳤을 때 생시는 문제를 방지하기 위한 테스트 - E2E 테스트(end-to-end 테스트) 백앤드부터 시작해서 최종적으로 웹페이지가 원하는 대로 동작하며 원하는 데이터를 잘 보여주는지 확인 jest란 jest란 페이스북에서 만들어서 리액트와 더불어 많은 js 개발자들이 사용하고 있는 테스팅 라이브러리이다. 주로 단위 테스..

hoisting이란? 변수와 함수의 선언문을 해당 스코프의 꼭대기로 끌어올리는 동작을 의미한다. 이 과정에서 선언문 자체는 옮겨지지만, 함수 표현식의 대입문을 포함한 모든 대입문은 끌어올려지지 않는다. 예시 console.log(a) // undefiend var여서 호이스팅 됬지만 undefiend로 초기화 상태 var a = 1; console.log(a) // 1 1로 초기화 상태 console.log(b) // Uncaught ReferenceError: b is not defined let b = 1; console.log(c); // ReferenceError const c = '1'; print() // d function print() { console.log('d') } print2() ..

Class 객체를 생성하는 생성자 함수 js에서는 class가 생성자 함수 역할을 대신함 ES6에서 class 개념 추가 객체 생성 : object 생성법 / class 생성법 object 생성법 : 붕어빵을 하나하나 만드는 방법 class 생성법 : 붕어빵 틀을 만들어 틀을 이용해 붕어빵을 찍어내는 방법 object 생성법으로 객체 만들기 var potBung = { base : '밀가루'; flavor : '팥'; } var chouxBung = { base : '쌀가루'; flavor : '슈크림'; } var pizzaBung = { base : '튀김가루'; flavor : '피자'; } . . . 비슷한 객체를 만든다면 object 생성법은 하나하나 직접 작성을 해줘야 하는 단점이 존재한다. ..

유사 배열 객체 이름 그대로 배열과 유사한 객체 배열처럼 보이지만, 사실 key가 숫자이고, length 값을 가지고 있는 객체 JS 에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사 배열 객체에 담겨서 온다. // 배열 var arr1 = ['aaa', 'bbb', 'ccc']; console.log(arr1); // (3) ["aaa", "bbb", "ccc"] // 유사배열 var arr2 = document.body.children; console.log(arr2); // HTMLCollection(10) [header.main-header, aside.main-sidebar, div.wrapper, div#playerArea, // if..

비구조화 할당이란, 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하는 js 표현식 ES6 부터 추가된 문법이며, 구조 분해 할당 이라고도 함 즉, 배열이나 객체의 값을 새로운 변수에 쉽게 할당함 배열 선언 및 호출 기존방식 //배열선언 const animalList = ['CAT', 'DOG', 'TIGER']; //각각 변수담기 const cat = animalList[0]; const dog = animalList[1]; const tiger = animalList[2]; //각각호출 console.log(cat); // 'CAT' console.log(dog); // 'DOG' console.log(tiger); // 'TIGER' 배열의 인덱스를 하나씩 꺼내서 직접 할당..