우당탕탕 개발일지

오늘은 Javascript에서 filter라는 함수의 사용법에 대해서 알아보려고합니다. 배열 관련 함수 중 많이 쓰이는 함수들은 filter, map, reduce 등 있습니다. 그중에서도 filter는 활용도가 높은 편이라 자세히 알아두면 굉장히 유용하게 사용할 수 있을 거 같습니다. filter 메서드는 조건을 주고 해당 조건이 true인 요소를 모아 새로운 배열로 반환하는 메서드입니다. 배열에서 추출 하고 싶은 데이터가 있을 경우 자주 사용합니다. filter는 중복값을 제거해주지 않아 중복값이 반환될 수 있습니다. 정의 Array.prototype.filter(callback(element[, index[, array]])[, thisArg]) callback : 각 요소에 조건 값 (true: ..

여느 때와 다를거 없이 작업 후에 테스트를 해보기 위해서 postman에서 send 버튼을 눌렀습니다 그런데 무한 로딩에서 나오지를 못하는 현상이 일어났습니다.. 자주는 아니지만 가끔씩 일어나는 일이여서 의심되는 곳에 로그를 남기며 해당 구문이 잘 작동하는지 테스트를 해봤습니다. 의심이 되는 곳은 로그가 잘 찍히고 있었습니다 설마라는 생각을 가지고 return 바로 윗 부분에 로그를 남겨봤는데 return 바로 직전까지 로그가 잘 찍혔습니다. 원초적인 방법인 ide를 껐다 켜보기, postman 껐다 켜보기, 컴퓨터를 껐다 켜보기.. 원초적인 방법으로 해결이 됐었던 경우도 있었어서 (왜 그런지는 의문) 해봤지만 결과는 똑같았습니다. 이런 경우는 처음이였어서 구글링을 시작했습니다. 뾰족한 방법은 없었고 오..

A 테이블을 생성 후에 A테이블에서 하나의 column에 Foreign Key 설정을 해주려고 했습니다. 하지만 Cannot add foreign key constraint 에러가 발생했습니다. 즉시 에러 내용을 구글링하여 해결방안을 찾기 시작했습니다. 해당 에러에서 가장 많은 유형들을 보며 비교해봤습니다. 그 중 대표적인 유형들 1. 테이블이나 컬럼명에 오타가 있을 경우 2. 참조키 컬럼과 참조되는 컬럼의 데이터 타입이 다를 경우 3. 외래키로 지정한 컬럼이 기본키가 아닐 경우 위의 내용들을 보며 비교해봤지만 실수한 부분은 없었습니다... 그런 도중 이상한 점을 발견했는데 그 부분을 수정하니 참조키가 정상적으로 설정되었습니다. 해결 : B테이블과 A테이블의 콜레이션이 다르게 설정 되어 있어 콜레이션을 ..

Javascript ES2022에서 추가된 기능들이 몇가지 있습니다. 그중에서 가장 유용하고 많이 사용하게 될 거 같은 기능들에 대해서 알아보려고 합니다. Top-level await //기능이 나오기 전에 await를 사용하는 예 (async function () { await start(); })(); //기능이 나온 후 await를 사용하는 예 (async 없이 바로 선언) await start(); Top-level await 기능이 나오기 전에는 await를 사용하려면 async 함수 내에서만 사용해야만 했습니다. 모듈 최상단에서 사용하고 싶었지만 사용할 수 없었습니다. 하지만 이제 await은 최상단에서도 사용할 수 있습니다. Error cause Error cause를 활용하면 오류의 원인을..

디바운싱과 쓰로틀링은 웹에서 발생하는 이벤트를 제어하는 프로그래밍 기법입니다. 디바운싱(Debouncing) 연속으로 호출되는 함수들 중에 마지막 호출되는 함수만 실행되도록 하는 것 예시) 엔터를 누르지 않아도 검색 결과가 나오는 검색창을 구현한다고하면 본인이 검색하려는 검색어를 다 입력한 후에 검색 결과가 나오는 것이 일반적일 것입니다. 그렇다면 검색어를 입력하려고 타자를 칠 때마다 타이머를 설정하여, 예를들면 2초 동안 입력이 없으면 입력이 끝난 것으로 간주하여 검색 api를 요청하는 방식으로 구현할 수 있습니다 쓰로틀링(Throttling) 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 쓰로틀링은 실행 횟수에 제한을 걸기 때문에 대개 성능 문제를 이유로 사용합니다...

문제 코딩테스트 연습 - 가장 큰 수 0 또는 양의 정수가 주어졌을 때, 정수를 이어 붙여 만들 수 있는 가장 큰 수를 알아내 주세요. 예를 들어, 주어진 정수가 [6, 10, 2]라면 [6102, 6210, 1062, 1026, 2610, 2106]를 만들 수 있고, 이중 가장 큰 programmers.co.kr 풀이 function solution(numbers) { let answer = numbers.map(num => num + '').sort((a, b) => (b + a) - (a + b)).join(''); return answer[0] === "0" ? "0" : answer; } numbers.map(num => num + '') = 숫자들을 문자로 변환 sort((a, b) => (b..

문제 코딩테스트 연습 - 기능개발 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 programmers.co.kr 풀이 function solution(progresses, speeds) { var answer = []; let days = 1; let count = 0; for(let i = 0; i = 100) { if(progresses[i..

프로미스(Promise)란? Javascript에서의 Promise란 비동기 처리에 사용되는 객체입니다. 프로미스는 Promise 생성자 함수를 통해 인스턴스화합니다. Promise 생성자 함수는 비동기 작업을 수행할 콜백 함수를 인자로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인자로 전달받습니다. 서버에서 받아온 데이터들을 화면에 표시할 경우 프로미스를 주로 사용합니다. 프로미스의 생성 // Promise 객체 생성 const promise = new Promise((resolve, reject) => { // 비동기 작업 수행 if (/*조건*/) { // 비동기 작업 성공 resolve('success'); } else { //비동기 작업 실패 reject('fail'); } ..

콜백(callback)이란? javascript에서 callback 함수는 다른 함수가 실행을 끝낸 뒤 그 다음에 실행하는 함수를 의미합니다. javascript는 single thread에서 동작하기 때문에 한 번에 한 가지 일만 수행 할 수 있습니다. javascript는 비동기적 방식을 사용하여서 작업들이 순차적으로 실행되어야 하는 경우에는 함수들이 순차적이지 않은 순서로 실행되어 결과 또한 바뀔 수 있습니다. [일반 함수] //일반 함수 function introduceMySelf(name, callback) { console.log(`Hello my name is ${name}`); } introduceMySelf('ujam'); //Hello my name is ujam [callback 함수..

클로저(Closure)란? MDN에서는 클로저를 이와 같이 정의합니다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. 클로저는 함수와 그 함수가 선언됐을 경우 렉시컬 환경(Lexical environment)과의 조합입니다. 정의만 읽어봤을 때는 무슨 뜻인지 잘 와닿지 않았습니다. 예제를 통해서 알아보겠습니다. function outer(){ const name = 'ujam'; function inner(){ console.log(name); } return inner; } var getName = outer(); getName(); //ujam outer 함수는 내부에 ..