javascript

[JS] Promise와 Async/Await의 이해

서론 JavaScript에서 비동기 프로그래밍은 중요한 주제 중 하나이다. 비동기 작업은 코드의 흐름을 방해하지 않고, 동시에 여러 작업을 처리할 수 있게 해준다. 이러한 비동기 작업을 효율적으로 처리하기 위해 Promise와 Async/Await라는 두 가지 주요 도구가 있다. 이 글에서는 Promise가 무엇인지, 그리고 Async/Await와의 차이점이 무엇인지에 대해 좀 더 깊이 있게 다루고자 한다.PromiseJavaScript는 기본적으로 단일 스레드로 동작하기 때문에, 코드가 순차적으로 실행된다. 그러나 웹 애플리케이션에서는 네트워크 요청, 파일 입출력, 타이머 등 시간이 걸리는 작업을 처리해야 하는 경우가 많다. Promise는 비동기 작업이 완료되었을 때 결과를 사용할 수 있게 해주는 객..

[JS] Javascript에서 동기함수와 비동기함수의 차이

Introduce 자바스크립트에서 동기와 비동기를 이해하는 것은 다른 프로그래밍 언어보다 중요하다. 왜냐하면 자바스크립트는 메일 스레드 하나만을 사용하는 단일 스레드 방식으로 설계되어 있으며 메인 스레드에서 뷰가 렌더링되고 사용자와의 상호작용이 많기 때문이다. 브라우저에서 메인 스레드가 blocking되면 웹페이지가 멈추는 프리징 현상이 발생하기에 사용자 경험에 문제가 생길 수 있다. 따라서 이 글에서는 동기와 비동기의 차이를 알아보고, 브라우저에서 이 두 방식이 어떻게 동작하는지 살펴보고자 한다. PreliminariesCall stackCall stack은 자바스크립트 엔진이 현재 실행 중인 함수와 그 함수들이 호출한 다른 함수들을 추적하는 자료 구조다. 이는 LIFO(Last In, First Ou..

[JS] Javascript에서의 FP

서론 함수형 프로그래밍은 패러다임중의 하나이다. 프로그램이 어떻게 동작해야 할지 일일히 명시하는 명령형 프로그램과 다르게 프로그램의 결과만을 입력하는 선언적 프로그램을 만드는 패러다임이다.  자바스크립트는 세가지 특징때문에 함수형 프로그래밍을 쓰기 편하다. 첫째로 클로저를 통해 외부 변수를 쉽게 참조할 수 있으며, 둘째로 1급 객체로서 함수를 값처럼 사용할 수 있어 코드의 유연성과 재사용성을 높인다. 마지막으로 모나드의 일종인 Promise를 통해 비동기 작업을 체계적으로 처리할 수 있다. 이러한 특징들은 JavaScript를 함수형 패러다임에 매우 적합한 언어로 만든다. 이를 통해 순수 함수로 부작용을 방지하고 불변성을 유지할 수 있어 코드의 안정성과 예측 가능성을 높일 수 있다.함수형 프로그래밍의 주..

[JS] Javascript에서의 OOP

서론 함수형 프로그래밍은 JavaScript 개발에서 중요한 패러다임이다. JavaScript는 함수형 프로그래밍의 여러 중요한 특징들을 지원하여 개발자들이 더 효율적이고 오류가 적은 코드를 작성할 수 있게 한다. 특히, 클로저를 통해 외부 변수를 쉽게 참조할 수 있으며, 1급 객체로서 함수를 값처럼 사용할 수 있어 코드의 유연성과 재사용성을 높인다. 또한, 모나드의 일종인 Promise를 통해 비동기 작업을 체계적으로 처리할 수 있다. 이러한 특징들은 JavaScript를 함수형 패러다임에 매우 적합한 언어로 만든다. 이를 통해 순수 함수로 부작용을 방지하고 불변성을 유지할 수 있어 코드의 안정성과 예측 가능성을 높일 수 있다. React에서는 이러한 함수형 패러다임을 권장하여 상속보다는 합성을 권장한..

프로그래머스: 단속카메라(javascript, greedy)

문제는 쉬우나 처음 접근을 잘못해 헤맨 문제이다. 이전에 호텔방 예약하는 문제와 비슷하여 시작 시간과 끝시간만 비교했으나 다음 차의 범위가 이전 차의 범위안에 들더라도 비교가 계속 되면 과거 차들의 정보가 반영이 안되는 문제를 고려 안했다. 그 부분을 수정하기 위해 시작 시간과 끝 시간을 계속 변경 시키는 알고리즘을 추가하여 문제풀이에 성공하였다. greedy algorithm은 떠올리기는 쉬우나 그것이 절대해인지 증명하는 것이 매우 어려워 사실상 운에 맡기거나 반례를 열심히 생각해내야 한다.. function solution(routes) { let answer = 0; routes.sort((a,b)=>a[0]-b[0]) let start = 30001 let end = -30001 routes.fo..

프로그래머스: 프렌즈 4 블록(javascript, 구현)

애니팡같은 게임을 구현하는 문제이며 구현문제이나 javascript는 문자열이 immutable이라서 처리하는데 조금 애를 먹었던 문제였다. 파이썬으로는 되게 쉽게 풀었던것 같은데.. 로직은 간단하다. 2차원 배열을 2x2 정사각형으로 탐색하며 2x2블록안의 문자가 모두 같다면 배열에 그 위치를 모두 저장하면 된다. 배열에 저장하는 이유는 한 위치가 두 블록에 중복되게 포함될 수 있으므로 위치들을 모두 저장했다가 탐색이 끝나면 한번에 지워야 한다. 그 후 빈 블록을 제외한 나머지 블록들을 아래로 내리는 작업을 반복하면 된다. javascript의 문자열이 immutable이라서 문자열을 [행,열]로 접근하지 않고 행을 통채로 교체하는 방식으로 배열을 바꿨다. function solution(m, n, b..

프로그래머스: 파일명 정렬(javascript, 구현)

문제는 구현하기 쉬웠으나 배울만한 점 두가지가 있어 글을 남기게 된다. 문제는 기본적인 정렬 문제로 간단한 구현 문제였다. 주어지는 파일명마다 head와 number로 나누고 tail부분은 무시 후, head를 대소문자 구분없이 기준삼아 정렬 후 두번째 정렬기준으로 number로 정렬하면 된다. head와 number를 구분하기 위해 javascript의 내장함수인 isNaN함수를 사용하고, number이후의 tail를 무시하기 위해 number가 빈값이 아닐때 알파벳이 들어오면 파일명 저장을 멈추도록 하였다. 그 후 head와 number, 원래 파일명을 배열로 하여 빈배열에 저장하였다. 파일명들을 head, number, 원래 파일명으로 나누어 모두 저장하고 나면 배열을 정렬하기만 하면 된다. 이를 ..

백준 1987번: 알파벳(javascript, DFS, 백트래킹)

말이 지날 수 있는 최대의 칸 수를 구하는 문제이다. 최대의 칸을 구해야 하기 때문에 단순 BFS가 아닌 완전탐색 혹은 백트래킹을 이용해 문제를 풀어야 하겠다고 생각했다. 왜냐하면 DFS나 BFS는 한번 방문한 곳은 다시 방문하지 않는데 이 때문에 방문경로에 따라 최대값이 달라지는 경우가 생기기 때문이다. 백트래킹 풀이를 위해서 방문배열을 만들었는데 아스키코드를 이용해 방문을 체크하였다. 왜냐하면 Set자료형에 방문한 알파벳을 넣을수도 있지만 Set은 원소를 집어넣을 때 O(n)이 필요하지만 아스키코드를 이용해 배열의 인덱스에 바로 접근하면 O(1)로 시간복잡도를 줄일 수 있기 때문이다. 그리고 DFS의 인수로 cnt를 주어서 DFS가 재귀할 때마다 cnt에 1을 더해 최대값을 구하고자 했다. 이를 이용..