Frontend/React
-
CRA + Typescript + EsLint, Prettier 프로젝트 설정하기Frontend/React 2023. 8. 18. 15:29
매번 프로젝트마다 빠질 수 없는 프로젝트 설정 잊어버리지 않기 위한 기록이다. CRA + Typescript 프로젝트 설치하기 npx create-react-app my-app --template typescript ESLint 설정하기 npm init @eslint/config 명령어 입력 후 아래 몇 가지 프로젝트 설정을 선택하면 ✔ How would you like to use ESLint? · problems ✔ What type of modules does your project use? · esm ✔ Which framework does your project use? · react ✔ Does your project use TypeScript? · Yes ✔ Where does your co..
-
[React] 프론트엔드에서 PWA 적용하기Frontend/React 2023. 7. 31. 16:36
내가 회사에서 개발에 참여한 첫 번째 웹 사이트는 mobile-first로, '주요 사용자가 모바일을 통해 유입한다.'는 가정하에 앱처럼 만들어졌다. 네이티브 앱과 비교했을 때 웹은 오프라인 지원이나 푸시 알림 등 지원되지 않는 단점이 있다. 이러한 단점을 극복하기 위해 나온 것이 바로 Progressive Web App, PWA이다. 별도의 네이티브 앱 개발 없이 웹 기술만으로도 네이티브 앱이 가진 장점을 제공할 수 있다. Progressive Web App 웹은 검색이 쉽고 많은 사람들이 어플리케이션을 설치하는 것을 꺼리는 경향이 있는데 PWA는 쉽게 링크로 공유할 수 있고, 또 홈화면에 추가도 빠르게 가능하다. 네이티브 앱은 오프라인 상태에서도 캐시된 데이터를 통해 동작 가능하며,이를 통해 빠르게 ..
-
[프론트엔드] 카카오 소셜 로그인 연동하기(with REST API)Frontend/React 2023. 7. 10. 13:23
카카오 소셜로그인 연동하는 방법에 대해 알아보겠습니다. 카카오 디벨로퍼 설정하기 카카오 디벨로퍼에서 내 어플리케이션 > 어플리케이션 추가하기 .env에 카카오 디벨로퍼에 설정된 앱키(REST API 키) 복사하기 // .env REACT_APP_KAKAO_CLIENT_ID=REST_API_APP_KEY_넣기 3. Redirect URI 등록하기 // local에서 사용할 Redirect URI http://localhost:3000/oauth/kakao/login 로그인 버튼 클릭 시 인가코드를 받기 위한 url로 이동 카카오 인증서버로 인가코드를 받기 위한 요청을 보내기 // 인가코드를 받기 위한 요청 주소 export const KAKAO_AUTH_DOMAIN = 'https://kauth.kakao..
-
[React] props에 따라 스타일 설정하기Frontend/React 2022. 9. 21. 19:09
버튼 컴포넌트에 props로 상태 넘겨주기 import Button from '../../components/Button'; 상태에 따라 스타일링 하기 import { classNames } from '../shared/share'; interface IProps { type?: 'submit' | 'button'; text: string; onClick?: () => void; disabled?: boolean; styling?: 'fullBtn' | 'normal'; } export default function Button({ type = 'button', text, onClick, disabled, styling, }: IProps) { return ( {text} ); }
-
[React Hook Form] radio button 구현하기Frontend/React 2022. 7. 10. 15:09
React Hook Form으로 radio button 구현하는 방법을 알아보자 radio button 구현 시 고려해야 할 사항 input을 label로 감싸기 label htmlFor와 input id를 통일해서 input value 클릭 시 radio button이 선택되도록 하기 input register를 같은 이름으로 설정하기 import { Dispatch, SetStateAction } from 'react'; import { useForm } from 'react-hook-form'; import Button from './Button'; import ModalBox from './ModalBox'; import ModalNav from './ModalNav'; interface IPro..
-
[React Router v6] Nested Routes에 대해 알아보자Frontend/React 2022. 5. 12. 14:10
React Router v6에서 Nested Routes 활용하는 방법을 알아보자 라우터에 경로를 중첩하여 작성한다. function Router() { return ( ); } export default Router; 이 때 자식은 부모를 상속하며 경로는 다음 세 가지이다. /invoices /invoices/:invoicesId /invoices/sent 부모 element 안에 ``을 통해 자식이 render될 곳을 지정한다. function Invoices() { return ( Invoices ); } function Invoice() { let { invoiceId } = useParams(); return Invoice {invoiceId}; } function SentInvoices() {..