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

쿠키란 무엇일까? 쿠키를 이용하여 데이터 CRUD 구현 ❓상황 localStorage를 이용하여 브라우저에 데이터를 저장하는 것 대신 다른 방법을 찾다가, cookie를 알게되었다. 또한, 넘블 쿠팡 클론코딩때 코드 리팩토링 진행시 cookie를 사용하는 것을 보고, 배울려고 찾게되었다. 📖 HTTP Cookie 란? 개념 HTTP 쿠키는 웹 브라우저에 저장되는 작은 크기의 문자열이다. HTTP 통신을 할 때 데이터를 주고받을 수 있도록 만들어진 보조적인 수단이다. 정확한 명세는 RFC 6265에 정의되어 있다. 정의 쿠키(Cookie)는 브라우저와 서버 간에 지속적으로 유지할 수 있는 데이터를 제공함으로써, 상태를 가질 수 있도록 하는 HTTP 상태 관리 개념이다. 쿠키는 주로 웹 서버에 의해 만들어지..

리액트로 구글 아이디로 로그인 구현하기 ❓상황 회원가입 대신, SNS 로그인 기능 구현해보고 싶어서 진행했다. 📖 SNS 로그인 구현 더보기 구글 로그인을 적용하는 방법 1. 새 프로젝트 생성 2. 사용자 인증 정보 생성 3. 구글 플랫폼 라이브러리 가져오기 4. 구글 클라이언트 초기화하기 5. 구글 로그인 버튼 추가 6. 사용자 프로필 정보 가져오기 7. 로그아웃 Google Cloud Platform Setting 홈페이지 접속 새 프로젝트 생성 사용자 인증 정보 생성 사용자 인증 정보 사용자 정보에 접근할 수 있도록 사용자에게 동의를 구하도록 한다. OAuth 동의 화면 구성하기 OAuth 클라이언트 ID로 들어가면, 제품이름을 설정해야한다고한다. 동의 화면 구성을 클릭해서 설정하자 구글 계정을 가..