SSG 기반 웹사이트 구현하기 ❓상황 SSG기반으로 웹사이트를 구현하기위해 사용하는 next.js를 확실하게 공부하고 싶어서 정리하게 되었음. 📖 next.js 이란? Next.js는 빠른 웹 응용 프로그램을 만들 수 있는 구성 요소를 제공하는 유연한 React 프레임워크입니다. 웹사이트를 구현할때, 고려할 사항은 다음과 같습니다. 사용자 인터페이스 - 사용자가 응용프로그램을 사용하고 상호 작용하는 방식. 라우팅 - 사용자가 응용프로그램의 다른 부분을 탐색하는 방법. 데이터 가져오기 - 데이터가 저장되는 위치와 데이터를 가져오는 방법. 렌더링 - 정적 또는 동적 콘텐츠를 렌더링할 때와 장소를 지정합니다. 통합 - 사용하는 타사 서비스(CMS, 인증, 결제 등) 및 이러한 서비스에 연결하는 방법. 인프라 ..

Line Awesome의 아이콘 사용법 정리 ❓상황 패스트캠퍼스 강의 수강 중, 이미지 슬라이드에 사용할 아이콘을 구현하기 위해 정리함 이전에 react-icons 사이트의 아이콘을 사용했는데, 다른 사이트의 아이콘 사용하는 경험도 쌓기 위함. 📖 Line Awesome 이란? React 프로젝트에 주로 사용되는 아이콘들을 포함하고 있음. Font Awesome의 모던한 아이콘을 제공한다고 적혀있다(자회사인듯?) 🐸 설치 // npm npm install line-awesome // yarn yarn add line-awesome import { FaBeer } from "@react-icons/all-files/fa/FaBeer"; class Question extends React.Component ..

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..