본문 바로가기

반응형

전체 글

(501)
45장 프로미스(2) 2023년 5월 13일 856p~869p 45.5 프로미스 체이닝 위에서 "콜백 헬"에서 보았듯이 비동기 처리를 위한 콜백 패턴은 콜백 헬이 발생하는 문제가 있다. 프로미스는 then, catch, finally 후속 처리 메서드를 통해 콜백 헬을 해결한다. const url = 'https://jsonplaceholder.typicode.com'; // id가 1인 post의 userId를 취득 promiseGet(`${url}/posts/1`) // 취득한 post의 userId로 user 정보를 취득 .then(({ userId }) => promiseGet(`${url}/users/${userId}`)) .then(userInfo => console.log(userInfo)) .catch(err ..
[구현] 프로그래머스 '방금그곡' - js 1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/17683 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 구현 function solution(m, musicinfos) { let answer = '(None)'; let tempTime = 0; // 음악이 여러 개일경우 제일 긴 음악을 찾기 위한 변수 for(let i = 0; i
45장 프로미스(1) 2023년 5월 12일 842p~856p 자바스크립트는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. 하지만 전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가곤란하며 여러 개의 비동기 처리를 한 번에 처리하는 데도 한계가 있다. ES6에서는 비동기 처리를 위한 또 다른 패턴으로 프로미스를 도입했다. 프로미스는 전통적인 콜백 패턴이 가진 단점을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있다. 45.1 비동기 처리를 위한 콜백 패턴의 단점 45.1.1 콜백 헬 GET 요청을 위한 함수 예시를 살펴보자. // GET 요청을 위한 비동기 함수 const get = url => { const xhr = new XMLHttpRequest()..
[DP] 프로그래머스 '스티커 모으기(2)' - js 1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/12971 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 코드 해당 문제는 앞의 값을 저장해가는 누적합을 사용해야 하기 때문에 DP가 사용된다. 총 두 가지 경우가 있고, 이 두 가지 경우를 분기처리 하여 누적합을 구해준 뒤 최댓값을 산출해주면 된다. 첫번째 스티커 떼고 시작하는 경우(마지막 스티커 사용 못하고 끝남) 첫번째 스티커 떼지 않고 시작하는 경우(마지막 스티커 사용하고 끝남) 총 두 가지 경우를 나누어, 이전 스티커를 떼었을 ..
44장 REST API 2023년 5월 11일 830p~841p REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처고, REST의 기본 원칙을 성실히 지킨 서비스 디자인을 "RESTful"이라고 표현한다. REST API는 REST를 기반으로 서비스 API를 구현한 것을 의미한다. 44.1 REST API의 구성 REST API는 자원, 행위, 표현의 3가지 요소로 구성된다. REST는 자체 표현 구조로 구성되어 REST API만으로 HTTP 요청의 내용을 이해할 수 있다. 구성 요소 내용 표현 방법 자원 자원 URI(엔드포인트) 행위 자원에 대한 행위 HTTP 요청 메서드 표현 자원에 대한 행위의 구체적 내용 페이로드 44.2 REST API 설계 원칙 REST에서 가장 중요한 기본적인..
[투포인터] 프로그래머스 '연속된 부분 수열의 합' - js 1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/178870#qna 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 코드 처음 푼 코드) 타임아웃. 이번에는 해결해보려고 별 짓을 다했다 ㅋㅋㅋ 나름..내선에서.. function solution(sequence, k) { let candidate = []; let min = 999996; let sum = 0; for(let i=sequence.length-1;i>=0;i--){ sum += sequence[i]; if(sum === k..
43장 Ajax 2023년 5월 10일 816p~829p 43.1 Ajax란? Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식이다. 전통적인 이전의 웹페이지는 화면이 전환되면 html 태그로 시작하여 html 태그로 끝나는 완전한 html을 서버로부터 전송받아 웹페이지 전체를 다시 렌더링하는 방식으로 동작했다. 전통적인 웹페이지 통신 방법은 단점이 존재했다. 변경할 필요가 없는 부분까지 HTML을 서버로부터 매번 다시 전송받기 때문에 불필요한 데이터 통신이 발생한다. 변경할 필요가 없는 부분까지 처음부터 다시 렌더링한다. 이로인해 화면이 깜박이는 현상이 발생한다. 서버와의 통신이 동기 방식으로 동작하기 ..
[투포인터] 프로그래머스 '보석 쇼핑' - js 1. 문제 https://school.programmers.co.kr/learn/courses/30/lessons/67258 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 2. 코드 처음 푼 코드) 타임아웃. 또 예상했던 것. gems 길이가 길어지면 완탐으로는 시간이 오래걸릴 것 같다고 생각했다. function solution(gems) { let set = [...new Set(gems)]; // 보석 종류 let visited = new Array(set.size).fill(0); let candidate = []; let answer = []; ..

반응형