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

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

오늘은 타입스크립트의 기본 중의 기본만 요약 정리하며 정리하는 글이다.(불친절할 수도 있는 너무도 간단한 글!)

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

오늘은 타입스크립트로 간단하게 블록체인을 작성해보도록 하자.먼저 Block이라는 클래스를 작성해주고, 각각의 프로퍼티에 타입을 지정해준다.genesisBlock의 타입을 Block으로 지정해주고, new Block으로 새로운 프로퍼티들을 넣어준다. 그리고 한 번 더,

인자 3개를 받는 함수 sayHi를 만들고, 인자를 똑같이 3개 넣어 컴파일 시키면 제대로 작동한다.하지만 sayHi(name, age)라고 함수를 실행시키려고 하면 컴파일 에러가 뜨면서 작동하지 않는다. 이게 바로 타입스크립트가 코드 작성 단계에서 에러를 방지해주는

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

지금 진행 중인 기업 협업에서 TypeScript를 React에 적용해서 개발하기로 결정했다.앞으로 TypeScript 시리즈에서 TS 이론과 React의 적용해보는 후기를 남겨보겠다.아래의 코드를 보자. 먼저 JS로 작성한 sum 함수이다. sum()함수에 커서를 올

자 오늘은 몇 시간 전 Node.js를 시작한 노둥이의 첫 TIL을 정리해보겠다..(이 글은 Wecode notion 자료 그리고 멘토 준님과 함께합니다..)Node.js란 간단하게 비동기 이벤트-기반 JavaScript 런타임 환경이다.즉 Asynchronous ev

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

(제 작고 귀여운 database 좀 보고 가세요...🤭)모든 것의 시작은 $ mycli -u root 자... 들어가자.. MySQL world...데이터 정의어: 실제 데이터 변경은 불가능create, drop, alter ...CREATE TABLE 이름;이름이

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

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

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

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

후기 박스를 작성하면서 말 줄임표를 쓰고 더보기 기능을 구현해야하는 일이 잦았다.그 CSS 속성에 대해 정리해본다.한 줄로 줄이기overflow 속성은 hidden으로 준다. 지금은 부모의 width 속성이 inherit되어 보이지 않지만 당연히 줄이고자 하는 div에

리액트 프로젝트를 하면서 API key를 발급받아 사용하는 일이 잦다.카카오 developer 혹은 google developer와 같은 API key들은본인의 고유한 key이므로 그냥 깃헙에 올리면 안된다.React CRA 기반으로 작업을 한다면 dotenv를 사용해

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

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

오늘은 SPA를 기반으로하는 리액트에서 어떻게 상품 리스트에서 개별 상품 페이지로 넘어가는지, 그리고 개별적으로 데이터를 받아올 수 있는지 알아보기로 하자. 다음의 페이지를 보면 '몬스터'들의 리스트다. 해당 주소를 보자. 자 그렇다면 어떻게 각각의 몬스터들의 상세 페