styled-components란? styled-components란 리액트로 개발을 할 때 사용되는 CSS-in-JS 라이브러리로, CSS-in-JS란 자바스크립트 코드 안에서 CSS를 작성하는 방법을 말한다. 이 방식을 채택함으로써 컴포넌트 기반의 스타일링을 쉽게 구현할 수 있다. 우리가 일반적으로 CSS를 작성할 때, 클래스를 주고 해당 클래스에 스타일을 입혔다면 styled-components는 클래스가 아닌 컴포넌트에 직접 스타일을 작성해서 컴포넌트처럼 재사용할 수도 있다. 그 외에도 자바스크립트 코드로 작성되기 때문에 삼항연산자 등을 이용해서 동적으로 스타일을 변경하는 작업도 쉽게 할 수 있다는 장점이 있다. 컴포넌트를 사용하는 리액트 환경에서는 CSS-in-JS 스타일링 방식을 사용하는 게 ..

Axios란? Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. HTTP 요청을 보내고 응답을 받는데 필요한 다양한 기능을 제공하기 때문에 쉽게 서버와 통신할 수 있다. 즉, 프론트엔드 입장에서 백엔드 서버에 통신하는 라이브러리로 우리가 흔히 아는 Ajax와 비슷하다고 생각하면 된다. Ajax는 XML 형태의 데이터를 주고받는 통신 방법으로 Jquery를 이용해서 쉽게 구현할 수 있지만, Promise 기반이 아니기 때문에 then/catch를 사용할 수 없다는 단점이 있다. 반면, Axios는 Promise API를 사용하기 때문에 then/catch를 이용해서 response 데이터를 쉽게 다룰 수 있다. Axios에 대한 자세한 정의는..

두 함수의 차이는? // #1 const insertData = useCallback((todo) => { let info = { seq: index.current, task: todo, date: new Date().toLocaleString().replace(/-/g, '.') } setData([info, ...data]); index.current++; }); // #2 const insertData = useCallback((todo) => { setData((prevData) => { let info = { seq: index.current, task: todo, date: new Date().toLocaleString().replace(/-/g, '.') } index.current++; r..

구현하고자 하는 기능 구현 방법 라이브러리 설치하기 npm install react-beautiful-dnd --save 우선 라이브러리를 사용하려면 다음과 같은 명령어를 입력해서 설치부터 해준다. 여담으로, 뒤에 --save를 하는 이유는 패키지를 설치할 때 해당 패키지를 프로젝트의 'package.json' 파일에 의존성으로 추가하도록 지시하기 위함이다. 의존성으로 추가된 패키지 정보는 'dependencies' 항목에 기록되며, 이렇게 정의된 패키지는 나중에 'npm install' 명령을 통해 프로젝트를 복원할 때 자동으로 설치된다. 기본 구조 List List List 대략적인 구조는 다음과 같다. 가장 바깥에서 드래그 앤 드롭을 사용할 영역을 로 크게 감싸준다. 다음으로는 로 드래그 앤 드롭을..

우리가 알고 있던 것과 다른 개념 [] == ![] // true 자바스크립트를 조금 끄적여본 사람이라면 머릿속에 쌓아온 자바스크립트적 통념이란 게 있다. 1 == !1의 결과로 false가 나온다는 것이 바로 그 통념의 예시이다. 이것은 굳이 코딩을 모르는 사람이 봐도 비교 연산자만 알고 있다면 답을 알 수 있는 기본적인 상식이기도 하다. 이런 통념을 바탕으로 [] == ![]을 보면 어떨까? 처음엔 '배열과 배열이 아닌 게 같다고? 당연히 false겠네'라고 생각할 것이다. 하지만, 이것은 true를 리턴한다. 이때부터 우리는 그동안 쌓아왔던 통념과 충돌을 느끼고 내가 그동안 잘못 배운 건가라는 생각에 사로 잡히게 된다. 왜 이런 결과가 나오는지에 대해서는 동등 연산자(==)와 배열의 타입에 대해서 ..