들어가며 콜백지옥이라는 것을 들어본 적이 있는지? ES6이 도입되기 이전에 비동기 작업을 하기 위해서는 콜백함수로 처리했다고 한다. 비동기 작업으로 처리해야하는 일이 많아질수록 함수가 점점 더 깊어지게 되는데, 이를 흔히들 콜백지옥, 콜백 헬 callback hell 이라고들 부른다. 위의 짤만 보아도 얼마나 가독성이 좋지 않은지...😇 연결을 파악하기가 쉽지 않다는 것을 알 수 있다. 이런 콜백 지옥을 피할 수 있는 방법이 몇가지 있는데, 이 글에서는 프로미스 Promise에 대해 써보고자 한다. 프로미스 프로미스는 ES6에서 도입된 객체로, 비동기 처리 상태와 처리 결과를 반환하는 객체이다. 비동기 처리를 했을 때 작업이 성공이든, 실패이든 결과를 반환해준다. 아래와 같은 형태로 new 연산자를 통해..

Fetch API를 이용해서 데이터를 받아오는 연습! JSONPlaceholder 예시로 jsonplaceholder 에서 데이터를 받아오려 한다. 서버가 없을 때 가상의 데이터를 가져오기에 유용한 사이트다. https://jsonplaceholder.typicode.com/ 사용할 수 있는 데이터 소스들은 아래와 같다. 이 중에서 users를 이용해보려 한다. 사용 가능한 HTTP 메서드들은 다음과 같다. REST API를 연습해볼 때도 유용하게 사용할 수 있을 것 같다. Fetch API로 데이터 받아오기 Fetch API Fetch API는 XMLHttpRequest 객체에서 좀 더 보완된 API로, 모던 브라우저라면 대부분 내장되어있다. 비동기 통신에 많이 사용되던 ajax를 대체하여 페이지의 새..

mixin Scss에서는 믹스인이라는 문법이 있다. 반복적으로 재사용할 CSS 스타일을 하나의 함수처럼 지정해놓을 수 있다. 많은 mixin을 생성해도 호출하지 않으면 코드의 길이에 영향을 미치지 않는다는 점이 있다. 기본적으로 아래와 같이 정의할 수 있다. @mixin 믹스인이름(필요에 따라 변수지정도 가능){ 내용 } 호출은 include 키워드를 이용한다. @include 믹스인이름(지정했다면 변수사용 가능); 말줄임표 텍스트의 양이 공간보다 넘치는 경우 mixin으로 말줄임표('...')를 만들 수 있다. white-space는 자동 줄바꿈 여부에 관한 속성이다. nowrap으로 해제한다. overflow:hidden으로 넘치는 텍스트 양을 가리고 elipse로 대체한다. @mixin ellips..

들어가며 자바스크립트의 변수 선언 방법에는 var와 let, const가 있다는 사실은 자바스크립트를 조금 공부하기 시작하면 금방 알게되는 사실이다. 그리고 var 키워드를 지양해야한다는 것을 대략적으로 습득하게 된다. 조금 더 검색을 해봤다면 const 키워드는 재할당이 불가능하니 되도록 const 키워드를 지향하고, 재할당이 필요한 경우에만 let 키워드를 사용하는 것이 좋다는 사실까지 알 수 있다. 여기까지 좋다. 그렇다면 어떤 이유 때문일까? 내 머릿속을 정리하기 위해서 몇가지 개념과 함께 이를 알아보고자 한다. 그래서 var 키워드는 뭐가 문제일까? 변수 중복 선언이 가능 먼저 let과 const 키워드로 변수를 중복 선언할 경우에는 이미 선언되었다는 에러가 뜨지만, var 키워드로 선언한 변수..

4월 18일 ~ 24일 한 주 회고 4월 셋째주를 돌아보는 한 주 회고. 학습한 것 JS 이벤트 핸들러로 DOM을 조작해보았다. 비동기 통신의 방법중 fetch API를 사용해보았다. 자료구조/알고리즘 leetCode를 한두문제씩 풀어보고 있다 배열의 여러 타입 문제들을 풀어보고 있다. 연결리스트의 구조에 대해서 다시 복습하는 시간을 가졌다. 그 외 깃허브 리드미를 꾸며 보았다. var와 let, const 에 대해서. 느낀점 SASS가 편해지고 있다. (갈길이 멀지만) 이번 주는 직접 뭔가 해보는 시간을 많이 가지다보니 강의를 생각보다 많이 듣지 못한듯 하다. 쉬운 단계이지만 쉽지 않은 알고리즘~ 정말 다양한 풀이법이 있는 것 같다. 포레스트 기록하다가 까먹은 날이 많았다. 보완할 점 공부 패턴 정착하..

문제 Given two binary strings a and b, return their sum as a binary string. 2진수 문자열 a,b가 주어지면 이들을 더한 값을 다시 2진수 문자열로 반환하는 문제이다. 풀이 let addBinary = function (a, b) { let sum = Bigint('0b' a) + BigInt('0b', 2); let result = sum.toString(2); return result; }; 처음에 생각한 것은 문자열인 a와 b를 정수화 하여 더하는 것이었다. 그러기 위해 parseInt 메서드를 이용했었다. let sum = parseInt(a, 2) + parseInt(b, 2); 보통 parseInt에 매개변수로 문자열만 넣으면 문자열을 바..

문제 You are given a large integer represented as an integer array digits, where each digits[i] is the ith digit of the integer. The digits are ordered from most significant to least significant in left-to-right order. The large integer does not contain any leading 0's. Increment the large integer by one and return the resulting array of digits. 정수의 배열로 표시되는 큰 정수가 주어진다. 각 요소는 정수의 자릿수이다. 숫자는 왼쪽->오른..

문제 You are given an integer array nums where the largest integer is unique. Determine whether the largest element in the array is at least twice as much as every other number in the array. If it is, return the index of the largest element, or return -1 otherwise. 주어지는 정수의 배열에서 가장 큰 수가 배열 내 다른 수의 최소 두 배 이상인지 확인하고, 조건에 충족된다면 가장 큰 수의 인덱스를 반환하는 문제이다. 그렇지 않다면 -1을 반환한다. 풀이 var dominantIndex = function..

문제 Given an array of integers nums, calculate the pivot index of this array. The pivot index is the index where the sum of all the numbers strictly to the left of the index is equal to the sum of all the numbers strictly to the index's right. If the index is on the left edge of the array, then the left sum is 0 because there are no elements to the left. This also applies to the right edge of the..

깃허브 프로필 꾸며보기 요새 깃허브 리드미를 이용해서 프로필을 많이 꾸미는 것 같아서, 리드미에 조금 익숙해져볼겸 간단하게 꾸며보기로 했다. 깔끔한걸 좋아해서 많이 넣지는 않았지만 좀 더 지나면 종종 업데이트를 하지 않을까 싶다. 리드미에서는 마크다운과 html 태그를 모두 사용할 수 있다. 사전 준비 먼저 깃허브 아이디와 동일한 이름의 레포지토리를 생성해야 한다. 레포지토리 이름에 아이디를 입력하면 귀여운 고양이가 ✨스페셜✨ 레포지토리라며 깃허브 프로필로 쓸 수 있다고 말해준다. 캡쳐는 안됐지만 밑에 리드미 파일을 생성하는 것을 체크하면 바로 다음 단계로 넘어갈 수 있다. 꾸며보기 조회수 확인 조회수를 카운트해주는 사이트를 통해 추가할 수 있다. https://hits.seeyoufarm.com/ HI..