🧐 JavaScript에서 날짜는 어떻게 다룰까요? 웹 개발을 하다 보면 날짜와 시간을 다뤄야 하는 경우가 많습니다. 예를 들어 회원가입 일자, 게시글 작성 시간, 디데이 계산, 예약 시간 표시 같은 기능이 모두 날짜와 관련되어 있습니다. JavaScript에서는 이런 날짜와 시간을 Date 객체로 다룰 수 있습니다. 이번 글에서는 Date 객...
[React] react-router-dom 설치부터 기본 사용법까지
🧐 React에서 페이지 이동은 어떻게 할까요? 일반 HTML에서는 <a> 태그를 사용해 다른 페이지로 이동합니다. 하지만 React 앱에서 <a> 태그로 페이지를 이동하면 브라우저가 새로고침되면서 앱의 상태가 초기화될 수 있습니다. React Router를 사용하면 페이지를 새로고침하지 않고 URL에 따라 필요한 컴포넌트만...
[JavaScript] 스프레드 연산자(...) 정리
🧐 스프레드 연산자는 언제 사용할까요? JavaScript를 작성하다 보면 배열이나 객체를 복사하거나, 기존 값에 새로운 값을 추가해야 하는 경우가 많습니다. 이때 자주 사용하는 문법이 스프레드 연산자입니다. ... 점 세 개로 이루어진 이 문법은 배열, 객체, 문자열처럼 여러 값을 가진 데이터를 펼쳐서 사용할 수 있게 해줍니다. 이번 글에...
[React] react-icons 설치부터 사용법까지 정리
🧐 React에서 아이콘은 어떻게 사용할까요? React 프로젝트를 만들다 보면 버튼, 메뉴, 입력창 등에 아이콘이 필요한 경우가 많습니다. 아이콘 이미지를 직접 다운로드해서 관리할 수도 있지만, 매번 파일을 찾고 크기를 맞추는 일이 번거로울 수 있습니다. 이럴 때 편하게 사용할 수 있는 라이브러리가 react-icons입니다. react-ic...
[React] map 함수로 리스트 렌더링하기와 key prop 이해하기
🧐 React에서 반복되는 UI는 어떻게 만들까요? React를 사용할 때 반복되는 UI를 하나하나 직접 작성하는 것은 비효율적입니다. 예를 들어 이름 목록을 <li>로 출력해야 한다면, 배열과 map을 함께 사용하는 편이 훨씬 좋습니다. 이번 글에서는 map으로 HTML 태그를 반복 렌더링하는 방법과, 이때 자주 만나는 key pro...
[JavaScript] 자바스크립트 배열 map 함수 정리
🧐 map은 언제 사용할까요? JavaScript에서 배열을 다룰 때 map은 정말 자주 사용하는 메서드입니다. filter가 조건에 맞는 요소만 골라내는 역할이라면, map은 배열의 각 요소를 원하는 형태로 변환할 때 사용합니다. 예를 들어 숫자 배열의 모든 값에 2를 곱하거나, 사용자 객체 배열에서 이름만 뽑아낼 때 사용할 수 있어요. ...
[React] 리스트 클릭 시 삭제하기: filter 함수 활용
🧐 들어가며: 리스트에서 특정 항목을 삭제하려면? React로 투두 리스트 같은 목록형 UI를 만들다 보면 삭제 기능은 거의 반드시 필요합니다. 예를 들어 사용자가 X 버튼을 누르면 해당 항목만 리스트에서 사라져야 합니다. 이때 자주 사용하는 메서드가 JavaScript 배열의 filter입니다. 이번 글에서는 useState로 리스트를 관리하...
[JavaScript] 자바스크립트 배열 filter 함수 정리
🧐 filter는 언제 사용할까요? JavaScript에서 배열을 다룰 때 자주 사용하는 메서드 중 하나가 filter입니다. 이름 그대로 배열에서 특정 조건을 만족하는 요소만 걸러내고 싶을 때 사용합니다. 예를 들어 숫자 배열에서 3 이상인 값만 남기거나, 게시글 목록에서 특정 카테고리에 해당하는 글만 보여주고 싶을 때 사용할 수 있어요. 이...