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 대략적인 구조는 다음과 같다. 가장 바깥에서 드래그 앤 드롭을 사용할 영역을 로 크게 감싸준다. 다음으로는 로 드래그 앤 드롭을..

DOM(Document Object Model)이란?DOM이란 문서 객체 모델이라는 뜻으로 브라우저가 HTML 파일의 코드를 읽고 각 요소들을 트리 모양으로 구조화한 객체를 말한다. 쉽게 말하면 우리가 HTML로 만든 코드를 주문서라고 한다면, 브라우저가 이 주문서를 바탕으로 만들어내는 게 DOM인 것이다.  간혹 사람들이 헷갈려하는 게 "HTML === DOM"이라고 착각하는 경우가 많다.하지만 둘은 다른 개념이다. DOM이라는 것은 코드가 아니라 HTML 코드를 파싱하여 만들어지는 객체 모델이다. 반면 HTML은 코드 자체를 의미한다. 우리가 웹을 만들 때 HTML을 이용하여 전체적인 레이아웃을 잡는다. 그리고 이 HTML 코드를 브라우저가 읽고 DOM을 생성한다. 이때, HTML의 각 엘리먼트들은 ..