Algoroot's space

안녕하세요 오늘은 자바스크립트에서 지원하는 클로저에 대해 설명해 보고자 합니다. 해당 글은 사내 프런트엔드 세션 발표자로 참여해 준비한 세션 내용을 담았습니다. 총 5개의 섹션이 있을 예정입니다. 주제를 선정하게 된 계기 최근 함수형 프로그래밍 책을 읽으며 클로저가 생각보다 깊게 자리하고 있고, 이미 유용하게 쓰이고 있지만 잘 모르고 있었다는 것을 깨닫게 되었습니다. 지난 토요일에 진행한 feconf 2023 컨퍼런스에 참여해 메모리 누수 디버깅 가이드를 들은 후 전역변수를 참조해 의도적으로 누수를 발생시킨 예제를 보며 잘못된 클로저의 사용이 성능 저하의 원인 중 하나일 것이라는 생각이 들었습니다. 이 포스팅을 통해, 클로저와 고차함수와 같은 어렴풋이 알고 있던 개념을 명확하게 이해시켜 드리고자 합니다...

지난 두 포스팅에 걸쳐 자바스크립트의 비동기 처리 방법 콜백과 프로미스에 대해 작성했다. 1_ [비동기 | 동기 ] 비동기 처리의 시작 - 콜백 지옥 체험 2_ [자바스크립트 비동기 처리 ] 프로미스(Promise) 개념과 활용 이번에는 좀 더 간편하고 깔끔한 코딩이 가능해지는 async, await에 대해 다뤄보겠다. 프로미스의 체이닝과 같은 콜백 패턴 또한 가독성이 그리 좋지 않다. async, await 은 프로미스의 체이닝 없이 프로미스를 좀 더 간결, 간편하게 동기적으로 실행되는 것처럼 보이게 만들어주는 API이다. 새로운 것이 추가된 것은 아니고 기존 존재하는 프로미스 위에 조금 더 간편한 API를 제공한 것으로 이를 문법적 설탕(syntactic sugar)이라고 한다. async 네트워..

지난 포스팅에서는 비동기 처리를 위한 콜백 지옥을 의도적으로 체험해보았다. [비동기 | 동기 ] 비동기 처리의 시작 - 콜백 지옥 체험 이번 포스팅에서는 이런 콜백지옥의 대안으로 ES6에서 나온 프로미스(Promise)에 대해 다뤄보는 시간을 가지겠다. 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 번거로워지며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. 이의 대안으로 ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스(Promise) 를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이..

리액트를 공부하며 aync와 await에 대해 알아보고자 한 게 어떻게 해서 이런 편리한 API가 나오게 됐는지 궁금해 찾아보다 보니 콜백 지옥부터 시작하게 되었다. 개발 공부 극초반에 애용하던 드림 코딩 by엘리 유튜브 채널에서 관련 영상을 쭉 본 적이 있는데 그때는 이 비동기적 처리 부분에서 많이 헤맸고 결국 이해를 거의 하지 못하고 넘어갔었다. 하지만 이제는 직접 사용을 해보게 되는 시기가 왔고, 피할 수 없는 중요한 개념이라는 생각이 들어 이번 기회에 다시 공부해보기로 했다. 포스팅에 적힌 예시 코드는 엘리님 유투브 강의 기반으로 작성했고, 추가적인 설명은 모던 자바스크립트 deep dive책을 기반으로 덧붙였다. 앞으로 세 포스팅에 걸쳐 콜백 지옥을 직접 경험해보고 이의 대안으로 나온 프로미스(..

프로그래머스 - 비밀지도 이번 문제도 잘 풀었다고 생각했는데 답안 제출 후 한 분의 풀이에서 처음 보는 문법을 알게 되어 포스팅하게 되었다. 짧다고 무조건 좋은 코드는 아니겠지만, 저렇게 할 수 있는 사람은 효율적인 코드를 알면서 일부러 짧은 코드로 제출하고 있는 게 아닌가 싶다. 이 부분에 대해선 내 풀이에 대한 설명 후 적겠다. 아무튼 능력자들! 풀이 과정 내가 푼 풀이과정을 요약하면 다음과 같다. 1. 10진수를 2진수로 변환한다. 2. arr1, arr2의 각 숫자들을 더한다. 3. 그 값이 0이라면 " "으로, 0보다 크다면 "#"을 출력한다. 1. 10진수를 2진수로 변환한다. 주어진 배열 두 개를 (arr1, arr2) 2진수로 바꾸고 보든 2진수가 주어진 n개의 숫자로 이뤄져야하므로 pa..

프로그래머스 - 3진법 뒤집기 주어진 n의 수를 3진법으로 바꾸고 다시 10진법으로 바꾸면서 조금 생각하다가 왠지 변환해주는 메서드가 있을 것 같아서 찾아보았다. 간단하지만 잘 알고 있으면 언젠가 또 요긴하게 쓸 것 같아 기록한다. Method Number.toString([radix]) : 숫자를 문자열로 변환하여 반환한다. 진법을 나타내는 2~36 사이의 정수값을 인수로 전달할 수 있다. 인수 생략시 기본값 10진법이 지정된다. parseInt(string, radix) : 전달 받은 문자열을 전달 받은 radix로 분석한 정수를 반환한다. 자주 썼던 메서드 두개인데 다른 진법으로도 변환이 가능한 줄은 몰랐다. 전체 답안 function solution(n) { let answer = n.toStri..

프로그래머스 - 실패율 이 문제와 비슷한 유형의 문제를 푼 적이 있어서 그런 식으로 풀었다가 시간 초과 났다.. 지금 보니까 배열을 자르고 넣고 자르고 넣고 아주 많은 연산을 해버렸다.. 작성 답안 내가 푼 풀이이다. 몇몇 테스트 케이스는 통과도 안되었고 무엇보다 성능이 좋지 않다. while문에서 크게 처리시간을 잡아먹었다. 또 실패율이 같을 때는 스테이지가(index) 작은 것부터 출력해야 되었던 부분에서 잘못 파고든 것 같다. 현재 스테이지와 스테이지에 도달한 플레이어를 나누는 부분에서 stage를 뜻하는 index i를 넣어주는 게 포인트였다. 나는 그 i 를 구하려고 index라는 변수를 새로 선언했는데 전혀 그럴 필요가 없었다. sort() 비교함수에서 그 조건들을 이미 만족시켜 반환해주기 ..

프로그래머스 -폰켓몬 조금 수월하게 푼 문제는 포스팅까지 하지는 않는데 제출 후 다른 분 답변을 보고 실행해봤더니 훨씬 더 많은 테스트케이스일 경우에 처리속도가 현저히 빨랐다. 중복된 값을 제거해주는 Set 객체를 이용한 연산이었다. 나도 한 번 더 생각했으면 내가 쓴 코드에서 value값을 쓰지 않았다는 것을 알았을 텐데..! 하는 생각에 좀 아쉬웠다. 풀이 과정 *nums개수는 짝수이기 때문에 1개인 경우는 생각하지 않아도 됨. 1. 가질 수 있는 인형 개수 구하기 let getToyCount = nums/2 = 3 2. 똑같은 인형의 개수가 얼마큼 있는지 분류해주자. 3. maxCount를 구하자 3.1 key의 개수와 maxCount와 같은가? > count가 key개수보다 크거나 같을 때 성립된..