Sh개발일기

Promise “A promise is an object that may produce a single value some time in the future” "instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future" 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 프로미스를 이용하면 비동기적 처리의 결과값이나(성공시) 에러값(실패시)을 핸들러(콜백 함수)와 연결하여 처리할 수 있도록 도와줍니다. 프로미스를 이해하기 전 꼭 비동기, 콜백 함수에 관한 이해를 먼저 해주세요. Promise 사용하기 let..

콜백 함수란 콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행하게 됩니다. 콜백 함수의 핵심은 제어권의 위임에 있습니다. 예를 들어 보겠습니다. A와 B가 각각 아침 8시에 만나기로 하고 잠을 잡니다. 아침에 적어도 6시에 일어나야 하는 상황이라고 가정해보겠습니다. A는 불안한 마음에 수시로 시계를 확인합니다. 계속 잠을 설치다가 결국 5시 즈음 포기하고 일어나고 말죠. 반면 B는 알람시계의 알람을 세팅합니다. 알람시계는 6시가 되는 순간 울리게 될 것이므로 B는 안심하고 잠자는 일을 마저 진행합니다. 6시가 되자 알람이 울리고 B는 상쾌하게 일어납니다. A는 수시로 시간을 구하는 함수를 직접 호출했습니다. 반면 B는 알람을..

비동기 처리 비동기 처리란 특정 로직의 실행이 끝날 때까지 기다리지 않고 나머지 코드를 먼저 실행하는 것을 의미합니다. 자바스크립트에서는 이러한 비동기 처리가 매우 유용하게 사용되는 경우가 있습니다. let getData() = () => { let responseData; axios.get('http://domain.com/images/1', (res) => { responseData = res }); return responseData; } console.log(getData()); // undefined 위 코드는 자바스크립트를 이용하여 데이터를 가져오는 코드입니다. 일반적인 코드의 경우 res가 나와야 할 것 처럼 보이지만, 결과는 위에 나온것처럼 undefined가 나오게 됩니다. 그 이유는 a..

이벤트 버블링 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생한 경우 해당 이벤트가 상위 요소들로 전달되어가는 특성을 의미한다. 상위 요소란 HTML 트리 구조상 위에 있는 요소를 의미한다. 브라우저는 특정 화면 요소에서 이벤트가 발생하는 경우 그 이벤트를 최상위 요소까지 전파시키도록 동작한다. 이렇게 하위 요소에서 상위 요소로 이벤트가 전달되는 방식을 이벤트 버블링 이라고 한다. 이벤트 캡쳐 이벤트 캡쳐는 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다. 위 그림처럼 특정 이벤트가 발생한 경우 해당 태그를 찾아 내려간다. 이벤트 캡쳐는 addEventListener를 사용할 경우 API 옵션 객체에 capture: true 를 설정해주면 된다. event.stopPropagation() 해당 이..

브라우저의 저장소 종류 브라우저의 저장소에는 크게 2가지 종류가 있다. Web Storage - 웹의 데이터를 클라이언트에 저장할 수 있는 자료구조. key/value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회한다. windows 전역객체의 Local Storage 컬렉션을 통해 저장과 조회가 이루어진다. Cookie - 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. Web Storage vs Cookie 서버전송 web storage는 데이터를 client에만 전송할 뿐 서버로 전송되지 않는다. 그러나 cookie는 서버로 전송된다. 객체저장 web storage는 브라우저의 지원 여부에 따라 다르지만 문자열 이외에도 구조화된 객체를 저장할 수 있다. 용량제한 쿠키는 제한..

본 포스팅은 "코어 자바스크립트, 정재남" 책을 읽고 요약한 내용입니다. this 자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 결정된다. 실행 컨텍스트는 함수를 호출하며 생성되므로 결국 this는 함수를 호출할 때 결정되는 것이다. 이 때 함수를 어떤식으로 호출하는지에 따라 this의 값이 달라지게 된다. this는 자바스크립트에서 가장 혼란스러운 개념중 하나이다. 상황에 따라 달라지는 this의 값을 정리해보며 좀 더 심화적으로 이해할 수 있도록 해보자. 1. 전역 공간에서의 this 전역 공간에서 this는 전역 객체를 가리킨다. 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있는데 브라우저에서..

웹개발을 공부하다보면 URL, URI, Restful API라는 이야기를 많이 듣게 된다. 이번 포스팅은 시리즈로 나눠 URL, URI, Restful API에 관해 공부할 예정이다. 먼저 URL에 관해 살펴보겠다. URL이란 URL이란 Uniform Resource Locator의 약자로 웹상에 존재하는 resource에 접근하는 주소이다. 이론적으로 하나의 URL은 오직 하나의 Resource만을 나타낸다. Resource는 HTML페이지, CSS, image등이 될 수 있다. 물론 예외인 경우가 있는데, 삭제되어 더이상 없는 resource를 가르키거나 다른 곳으로 주소가 바뀐 경우등이 그런 것이다. URL과 URL이 가르키는 resource는 웹서버에 의해 처리된다. 즉, URL과 Resource..

부스트캠프 네이버 커넥트재단에서 진행하는 부스트캠프 2020에 최종 합격하게 되었다. 코딩테스트를 대비한 스터디를 하거나 웹 공부를 하느라 블로그 포스팅을 많이 못해 아쉬웠는데 이를 계기로 캠프를 진행하며 공부한 내용을(공개 불가능한 내용을 제외하고) 포스팅하려고 한다. 화이팅!