axios.create() 메소드로 작성해보는 API module..🧚🏻

자바스크립트 유틸리티 라이브러리, Lodash의 throttle과 debounce를 리액트에 적용해보자.

기존 JavaScript로 작성했던 프로젝트(초기 단계)를 TypeScript로 리팩토링하는 데에 성공했다.

JavaScript 공부 시에 레퍼런스를 보다보면 iterable, iterator라는 단어를 종종 접한다.오늘은 이 두 개념의 차이에 대해 정리하겠다.Iterable : An object which has enumerable properties and can perf

오늘은 간단하게 리액트 토글 메뉴를 어떻게 구현했는지 정리해보고자 한다.더 심플하고 좋은 방법을 생각하고 싶은데, 이 글을 보시는 누구나 제안해주신다면 감사히 받겠습니다..!먼저 상태값을 지정해주어야겠지..먼저 상태값은 객체로 관리해준다. 객체 안에 모든 tab 메뉴를

이 글은 콜백함수와 Promise에 이은 비동기 시리즈의 마지막편입니다.오늘은 드디어 비동기 처리의 마지막 편이다. Async와 Await은 promise를 좀 더 편하게 사용할 수 있는 비동기의 꽃! 비동기의 보물!이다.async와 await은 promise를 기반으

JavaScript Promise 개념부터 이해하기 (1/2)에 이어지는 글입니다.이어서 promise chaining에 대해 알아보자.then은 promise로부터 받은 데이터를 처리하면서도 또 다른 promise를 받아 비동기적으로 처리할 수도 있다.다음의 코드를

(앞서 정리한 JavaScript 콜백 함수 개념에 이어서 정리하는 Promise 편...!)Airbnb를 클론하는 프로젝트의 중간 즈음... 이런 피드백을 받게 된다.나는 mockdata와 서버에서 받는 데이터를 동시에 받기 위해 axios를 두 번 사용했고, 비동기

비동기 프로그램이란? 자바스크립트는 동기적(Synchronous)이다. 즉 호이스팅이 된 이후부터 우리가 작성한 순서에 따라 동기적으로, 순서에 따라 처리된다. 비동기(Asynchronous) 처리를 할 때 대표적인 함수는 setTimeout()이다. setTim

오늘은 event.composedPath()에 대해 적어보려 한다.먼저 mdn 공식 문서를 인용해보자면,The composedPath() method of the Event interface returns the event’s path which is an array

React 프로젝트를 진행하면서 정말 수없이 많은 전개구문, 스프레드 연산자를 사용했다.확실하게 기록하기 위해 TIL을 작성하기로 한다!먼저 공식문서부터 확인!즉, 전개 구문을 활용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수(함수로 호출할 경우)

위의 모달창을 보자. 위의 모달창에는 X 버튼이 달려있지 않다. 하지만 모달창의 바깥 부분을 클릭하면 바로 모달창이 꺼진다. 이런 간단한 모달창을 세상 쉽게 만드는 방법을 적어 본다. (리액트 초심자가 리액트 초심자에게 드리는 팁입니다!😇)Event.stopPropa

약 1주일 동안 혼자 바닐라 자바스크립트로 인스타그램을 구현하고, 다음의 2주 동안 팀으로 React를 활용하여 구현.CRA 활용한 초기 세팅Github 기반 PR 활용하여 피어 코드 리뷰 진행공용 컴포넌트를 공유한 협업 프로젝트JavaScript 1주(10/26 ~

이 글에서는 React onClick 이벤트 상황에서 event.target과 event.currentTarget의 차이점을 정리해본다.흔히 쓰는 event.target은 이해할 수 있다. 다만 currentTarget과 다른 점은 무엇일까?MDN 문서를 먼저 빠르게

클래스는 객체 지향 프로그래밍의 핵심이다. '객체 지향 프로그래밍'이라는 단어에서 '객체'는 JavaScript의 데이터 타입을 말하는 것이 아니다. 여기서 객체는 말 그대로 사물을 뜻한다.하지만 클래스는 결국 key와 value를 갖는 object를 잘 설계하기 위한

아마 자바스크립트를 배우기 시작하신 분들은 '객체'에 대해 들어보셨을 것이다.이 글은 초심자, 혹은 어느 정도 객체를 들여다 본 분께 도움이 될 것 같다. 객체를 자유롭게 쓰고 수정하는 것이 아직은 어색한 분들께 이 글이 도움이 되었으면 좋겠다.자바스크립트의 거의 모든

위의 코드에서 panel-question 에 active가 활성화 된 부분은 패널-바디가 열리고,active가 없는 panel-question 은 닫히게 만드려고 한다.또한 button으로 모든 panel-question이 닫히는 기능을 추가한다.panel-questi

오늘은 event.target (이벤트 위임)에 대해 정리한다.자바스크립트의 이벤트 중에서 클릭한 요소를 가져오는 방법이다.아래와 같이 li 안에 button이 있는 상황에서 button을 누르면 li가 사라지는 객체를 만들 때, event.target은 button이

오늘은 array의 내장 함수 중 sort()에 대해 간략히 정리해본다.sort() 메소드는 배열의 요소를 적절하게 정렬한 후 리턴한다. 원 배열이 바뀐다는 것을 유의하자. 기본 정렬 순서는 문자열의 유니코드 기준을 따른다. 위의 결과로 보아 숫자의 경우 오름차순이 아

오늘은 localStorage와 sessionStorage의 차이점을 알아보고 localStorage에 접근해 저장된 값을 가져오는 방법에 대해 정리해본다.sessionStorage는 브라우저 탭이 열려 있는 동안만 유효하다. 따라서 창을 닫거나 종료 시에는 저장된 값