FrontEnd/React

0.백엔드 엔드포인트코드해당 글작성에 사용된 JWT 로그인 기능 백엔드 코드에 관한 설명은 다음 글에 작성되어있고, 해당 글에 작성된 코드의 엔드포인트를 기준으로 작성했습니다.https://asa9874.tistory.com/663 [SpringBoot] 쇼핑몰 JWT와 로그인,로그아웃 기능 제작 (2)1.JWT인증과 정보 교환을 위해 사용되는 토큰 기반 인증 방식중 하나로 로그인 기능에 JWT(JSON Web Token)을 사용할거다.그를 위해 일단은 JWT사용을 위한 의존성을 추가해준다. io.jsonwebtoken jjwt-api 0.12.asa9874.tistory.com   1.로그인 api 함수나는 이번에 JWT 토큰을 프론트엔드 부분에서 받는 로직을 LocalStorage를 사용하여 구현하였..

1.depcheck프로젝트에서 사용되지 않거나 누락된 의존성을 찾아주는 도구이다.코드에서 실제로 사용되는 패키지와 package.json 파일에 정의된 의존성 목록을 비교하여, 프로젝트에서 불필요한 의존성이나 누락된 의존성을 확인해준다.npm install -g depcheck   2.사용법다음명령어를 입력하면 사용되지않는 패키지들 목록이 나오게 된다.npx depcheck출력예시)Unused dependencies* @headlessui/react* bcsd-frontend-project* react-loading* react-loading-skeletonUnused devDependencies* autoprefixer* eslint-plugin-import* netlify-cli* postcss

1.Prettier코드 스타일을 자동으로 일관되게 포맷해주는 코드 포매터다.npm으로 Prettier와 ESLint용 플러그인을 설치할수있다.npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev    1-1. 설정파일.prettierrc 파일을 생성하여 원하는 설정을 입력한다.{ "semi": true, // 세미콜론 사용 "singleQuote": true, // 작은따옴표 사용 "trailingComma": "es5", // 객체나 배열의 마지막 요소 뒤에 콤마 추가 "tabWidth": 2, // 탭 너비 2로 설정 "printWidth": 80 // 한 줄에 최대 80자}   1-2. 실행그후 다음 명령..

0.문제발생.env 파일을 만들어서 API키를 commit에서 제외하더라도 GitHub Actions의 secrets와 variables를 사용하여 배포를 하면 나의 API키를 안전하게 지킬수있을줄알았다.  문제는 결국 클라이언트 사이드쪽에서 API키를 통해 호출해야하기 때문에 F12를 눌러나오는 개발자 도구의 Network탭에서 쉽게 확인이 가능해져버린다. 클라이언트 사이드에서 API 키를 숨기려면 API 키를 백엔드 서버로 이전하는 방법을 사용해야 한다고 한다. 그러면 따로 도메인을 사고, 서버를 구입해서 열어야 하는걸까?그렇게 찾던 도중 서버리스 서비스에 대해 알게되었다.      1.Netlify 웹 애플리케이션을 빠르고 쉽게 배포하고 관리할 수 있는 플랫폼으로 GitHub과 연동또한 가능하다.또..

1.설치npm install framer-motion     2.기본 사용법motion컴포넌트로 감싸서 만듬 initial: 시작 상태 (초기값)animate: 최종 도착 상태transition: 애니메이션 지속 시간, 타이밍import { motion } from "framer-motion";export default function Example() { return ( 안녕하세요! 👋 );}   2-1.initial, animate에 들어갈 수 있는 값    2-2.transition        3.Hover & Tap 클릭해보세요!    4.Drag  드래그 가능!     5.Animate Presence컴포넌트 사라질때 애니메이션import { useState }..

1.깃 연동우선 만든 프로젝트를 github과 연동한다.이때 레포지는 public 으로 해야한다.   2.gh-pages 설치npm으로 gh-pages를 설치해준다.npm install gh-pages     3.vite.config.tsvite.config.ts의 base란에 /레포지토리이름/ 으로 설정해준다.import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'import tailwindcss from "tailwindcss";// https://vitejs.dev/config/export default defineConfig({ plugins: [react()], css: { postcss: { plu..

1.InfiniteScroll 라이브러리 설치npm 으로 react-infinite-scroll-component를 설치한다.npm install react-infinite-scroll-component   2.사용법 dataLength: 현재 렌더링된 데이터의 길이next: 데이터를 더 로드하는 함수hasMore: 더 로드할 데이터가 남아 있는지 여부loader: 데이터 로딩 중 보여줄 컴포넌트endMessage: 더 이상 데이터가 없을 때 보여줄 메시지 로딩 중...} // 로딩 중 보여줄 컴포넌트 endMessage={모든 데이터를 불러왔습니다.} // 데이터가 더 이상 없을 때 보여줄 메시지 > {items.map((item, index) => ( ..

1.HeroiconsSVG 형식으로 제공되는 무료 아이콘 세트로 Tailwind Labs에서 제작했으며, 심플하고 현대적인 디자인의 아이콘을 제공해준다.https://heroicons.com/ HeroiconsBeautiful hand-crafted SVG icons, by the makers of Tailwind CSS.heroicons.comnpm install @heroicons/react import { BeakerIcon } from '@heroicons/react/24/solid';function Example() { return ;}   2.Headless UITailwind Labs에서 개발한 완전히 스타일이 없는, 접근성이 뛰어난 UI 컴포넌트 모음https://headlessui.co..