react-icons의 아이콘 사용법 정리 ❓상황 쿠팡 클론코딩 중, 로그인 및 회원가입 form 구현할때 아이콘을 구현하기 위해 블로그에 정리하였음. 기존에 Font Awesome 사이트의 아이콘을 사용했는데, 다른 사이트의 아이콘 사용하는 경험도 쌓기 위함. 📖 React Icons 이란? React 프로젝트에 주로 사용되는 아이콘들을 포함하고 있음. 🐸 설치 // npm npm install react-icons // yarn yarn add react-icons 만약, React 프로젝트의 크기가 커질 경우 아래 명령어를 사용할 수 있다. 설치하는데 오래 걸리지만, MeteorJS, Gatsbyjs 등에 적합하다. // npm npm install @react-icons/all-files // y..

React Hook Form 으로 간단하게 Form의 유효성 검사하기 ❓상황 쿠팡 클론코딩 중, 로그인 및 회원가입 form 구현할때 React Hook Form을 사용했기 때문에 정리함. 📖 React Hook Form 이란? 유효성 검사, 에러 메시지 등 구현하기 복잡한 form을 React Hook Form을 이용하면 쉽고 빠르게 form 구현 가능 🐸 설치 // npm npm install react-hook-form // yarn yarn add react-hook-form // typescript는 react-hook-form에 내장되어 있다. 🗒️ useForm() useForm 예시 useForm은 양식을 쉽게 관리할 수 있는 custom hook이고 옵션을 사용한다. // 예시 type ..

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? ❓상황 Next.js 태그에 태그를 넣는것 대신, 컴포넌트를 넣을때 발생하는 오류 🔎 원인 파악 Next.js의 태그로 감싸진 태그는 (onClick, onMouseEnter), ref 총 3개의 필수 속성을 갖는다. 태그 안에 태그를 넣으면, 별 문제없이 잘 동작한다. 회원가입 그러나 컴포넌트를 사용할 경우, onClick, onMouseEnter, ref 속성을 갖도록 해줘야한다. 회원가입 그래서 아래와 같이 ...연산자를 이용하여 속성을 부여했다. const Button..

for 반복문을 이용하지 않고, 연속된 숫자를 갖는 배열 만들기 ❓상황 자바스크립트 알고리즘 문제를 풀때, 부여받은 숫자를 가지고 연속된 숫자를 갖는 배열을 만드는 방법 정리. ✨ 해결 방법 1. Array 객체를 이용 Array(개수).fill(채우는 숫자).map((key, idx) => key + idx) // 예시 // const arr = [1,2,3,4,5,6,7,8,9,10] const arr = Array(10).fill(1).map((n, idx) => n + idx) 이 외에도 방법이 많지만, 그나마 제일 이해하기 쉬운 문법을 채택하여 정리했다.

fatal: refusing to merge unrelated histories ❓상황 다른 사람 원격저장소의 branch를 나의 로컬 저장소로 git pull할때 발생한 오류 🔎 원인 파악 기본적으로 git pull은 git fetch와 git merge의 2개의 명령어를 합친 명령어이다. git fetch의 경우에는, 원격 저장소의 내용을 가져온다. 조금 더 정확히는 원격 저장소의 branch들을 가져온다. 확인하려면, git fetch 한 후에, git branch -r을 하면 다른 사람 원격저장소의 branch들을 가져온 것을 볼 수 있다. git branch -r git merge의 단편적인 개념으로는 원격 저장소의 특정 branch와 현재 선택된 나의 로컬 저장소의 branch와 합쳐지게된다...