Hi-람👋 High-람☀️

기존 Input에서 제공하는 RadioButton에서 색만 바꾸고 싶었을 뿐인데, 생각보다 자료들이 많지 않았다. 커스텀했다는 내용을 살펴보면 radio 특유의 동그라미 2개를 사용하는 모양보다, 아예 새로운 이미지를 사용하는 경우가 대다수였다. 그래서 나처럼 고민하는 사람들을 위해 RadioButton 커스텀하는 방법을 정리해보도록 하겠다! 먼저, 내가 만들고자 하는 모양은 다음과 같았다. 고려해야 할 점은 선택되었을 때 1. 내부에 동그라미가 생겨야 하며 2. icon의 색과 label의 색상이 바뀌어야 한다 는 것이다. 다른 것보다 나는 css에 대해 잘 모르고 있어서, 1번을 어떻게 구현해야 하는지 막막했다. 여기서는 다음과 같은 css에 대해 아는 것이 중요하다. 가상 선택자 :after 선택한..

1. 설치 방법 설치 방법은 간단하다. react-datepicker를 사용하기 위해 다음 명령어를 입력하면 된다. npm install react-datepicker 2. 사용 방법 import import DatePicker from "react-datepicker"; // 기본 설정 1 import "react-datepicker/dist/react-datepicker.css"; // 기본 설정 2 import { ko } from "date-fns/esm/locale"; // 한국어 설정 먼저 원하는 파일에서 라이브러리를 import 한다. 위의 두개는 기본적으로 불러준다. 기본 언어는 영어로 되어 있기 때문에 한국어로 설정하기 위해서는 위와 같이 import 해야 한다. 변수 선언 const t..

내가 하는 프로젝트에서 알림 설정을 위해 토글 스위치를 만들어야 했다. 1. 토글 스위치란? 💡 토글 스위치 토글 스위치는 우리가 흔히 아는 물리적 스위치처럼 "ON/OFF"와 같이 두가지 반대되는 상태를 다룰 때 사용한다. 사용자가 스위치를 누를 때마다 상태가 변경될 수 있도록 해야한다. 2. 토글 스위치 구현 결과 3. 중요 Point 🌱 props 이용하기 props로 toggle의 상태(on/off)를 넘겨주어 css 부분에서 조건부로 스타일링이 가능하도록 만들었다. (ex) ${props => props.isToggleOn ? 'background-color: #7BAB6E' : 'background-color: #CECECE' }; 🌱 transition 사용하기 토글 버튼이 자연스럽게 움직일..

❓ 문제 상황 기존에 하던 프로젝트를 이어서 작업하기 위해 git clone을 받고 npm start을 하려고 했는데 다음과 같은 에러 메세지가 떴다. sh: react-scripts: command not found package.json을 봐도 start하라고 나와있고, 항상 react앱을 npm start로 켰기 때문에 꽤나 당황했다. 😳 하지만 당연하게도 새로 clone 받아왔기 때문에 package.json 내의 모든 dependency를 다운받을 필요가 있었는데, 그걸 무시하고 무작정 npm start를 했으니 실행이 될리가 없었다. 🫠🫠 해결방법은 간단하다. 💡 해결 방법 npm intall // or npm i npm intall을 통해 모든 패키지들을 설치해주면 문제는 해결된다! 이번 뿐..

기존에는 API 연결을 위해서 proxy설정을 하고 호출할 때 endpoint 경로를 적어주었다. 그런데 CORS설정이 완료되고 더 이상 proxy가 필요 없게 되어 삭제했더니 매 호출마다 전체 주소를 적어야 했다. 이 문제를 해결하기 위해 환경변수와 axios 인스턴스를 사용하여 공통적인 부분들을 관리하고자 했다. 1. 환경변수 설정 먼저 환경변수를 세팅해줬다. 환경변수를 사용하면 지금의 경우처럼 하드코딩된 값들을 대체할 수 있다는 장점도 있고, 이 외에도 여러 장점이 있다. 오픈 소스에 올리면 안 되는 값들을 .env파일로 관리하며 보안성을 높일 수 있고, 로컬 개발 환경과 실제 배포 환경에서 사용하는 설정도 분리할 수 있다. 작성 방법은 다음과 같다. 먼저 프로젝트의 최상위 루트에 .env파일을 만..

프로젝트를 하다 보면 서버에서 데이터를 받아오고, 보내야 하는 상황이 생긴다. 예시를 통해 axios를 이용하여 API를 연동하는 방법을 알아보자! 1. axios 설치하기 API를 호출하기 위해서 axios라는 라이브러리를 설치해야 한다. // 1. npm을 이용하여 설치하는 경우 npm install axios // 2. yarn을 이용하여 설치하는 경우 yarn add axios 설치했다면 사용하고자 하는 프로젝트에서 import를 해야 한다. import axios from "axios"; 이렇게 API를 사용 가능한 상태가 되었다. 우리는 API를 사용해서 아래와 같은 동작을 할 수 있다. Create : 데이터 생성(POST) Read : 데이터 조회 (GET) Update : 데이터 수정 (..

생년월일을 받는 Input 컴포넌트에서 연도는 4자리, 달은 2자리, 날짜는 2자리로 지정하고 싶었다. 그래서 찾아봤더니 Input태그에 maxlength를 지정하면 길이를 제한할 수 있으나, 타입이 number인 경우에는 불가능하다고 한다. 따라서 직접 onChangeHandler에서 다뤄야 했고, 코드를 다음과 같이 고쳤다. const yearChangeHandler = (e) => { setUserInfo({ ...userInfo, year: e.target.value.slice(0, 4) }); }; const monthChangeHandler = (e) => { setUserInfo({ ...userInfo, month: e.target.value.slice(0, 2) }); }; const d..

프로젝트를 진행하다 보니 체크박스를 내가 원하는 디자인으로 커스텀을 해야 했다. 기본으로 제공되는 체크박스는 내가 원하는 스타일과는 꽤나 다르게 생겼다. 그래서 다음과 같이 Checkbox 컴포넌트를 새로 만들기로 했다. 코드 Checkbox.js import { CheckboxStyle, CheckboxWrapper, StyledLabel } from "./style"; const Checkbox = ({ id, label, checked, handler }) => { return ( {label} ); }; export default Checkbox; 먼저, 가 커스텀한 Checkbox인 과 을 감싸도록 했다. Checkbox를 사용하기 위해 input type을 "checkbox"로 지정해 주고, ..

버튼 컴포넌트를 만들다 보니 테마에 따라 이미지의 색상도 바꿔야 했다. SVG파일의 경우 마크업 언어로 표현되기 때문에 색상을 쉽게 바꿀 수 있다. 1 ) SVG 파일 수정하기 SVG파일의 색상을 바꾸려면 먼저 위의 코드처럼 fill="none"으로 작성되어 있는 부분을 fill="current"로 바꿔야 한다. 여기서 주의할 점은 모든 fill을 바꿔야 한다는 것이다. 내가 바꾸고 싶은 svg파일의 경우 fill이 2군데 있었다. 한 군데만 바꿨을 때는 작동이 안 됐다. 2 ) fill 속성 지정하기 SVG파일을 수정했으면 해당 컴포넌트로 가서 props를 fill="#A0A0A0"와 같이 지정하면 색상이 바뀐다. 다만 여기서도 주의해야 하는 부분이 있다. SVG파일을 다음과 같이 img src를 이용..