그냥 내가 사용해 본 것들

원본 작성일자 2024. 11. 24. 기본 사용 react, vite, yarn, MSW2.0 이상에서는 rest사용 불가 http 사용 GPT한테 속지말것

이 코드는 React에서 사용자 등록(가입) 및 사용자 수정 페이지를 처리하는 폼 컴포넌트의 예시입니다. useLocation 훅을 사용하여 현재 페이지의 경로(/edit인지 아닌지)를 확인하고, 경로에 따라 동적으로 폼의 텍스트와 동작을 변경하는 방식입니다. 코드의

프로젝트에서 사용했더 모션 기능을 알려드릴게요. Framer motion을 사용했는데 라이브러리가 가벼고 커스텀이 자유롭다는 장점이 있습니다. Framer Motion을 Yarn을 사용하여 설치하고 사용하는 방법을 알려드리겠습니다. 1. Yarn으로 Framer M

FormData를 통해 데이터를 자동으로 객체화할 수 있어서,axios.post에 data 객체를 그대로 전달할 수 있습니다.이때 data에 모든 필드가 포함되므로 따로 title, body, userId를 하나씩 지정하지 않아도 돼요.이렇게 하면 formData가 객

참고사이트 https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/ https://velog.io/@phw3071/Stroybook-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B

Figma와 Storybook 연동은 디자인 시안과 개발 컴포넌트 간의 싱크를 맞추고 디자인-개발 협업 효율성을 극대화하는 효과적인 방법이다. ⚙️ Figma - Storybook 연동 순서 chromatic으로 storybook배포 → figma에서 플러그인 다운

참고사이트 Storybook Chromatic 으로 배포하기 Storybook Tutorials 📌 목차 Chromatic이란? 초기 세팅 Github Action으로 Chromatic 자동 배포 배포 테스트 회고 Chromatic이란? Chromatic은

.env파일에 소셜 로그인 키값이나 중요한 데이터를 넣어두고 gitignore에 제외를 해야 하지만 실수로 안한상태로 깃에 업로드 됬을때 최대한 빨리 수정을 해야 한다.난 다행스럽게 pr이 열려있고 내 브랜치를 나만 사용하고 팀원이 사용하기 전이라 수정이 비교적 쉬웠다

React에서 경로를 설정하는 방법중 "Route Objects API"에 대하여 설명하겠다.여러 방법이 있지만 "Route Objects API"를 선택한 이유는 한페이지에서 모든 경로를 볼수 있어 코드 가독성이 좋다.확장성이 좋아 페이지가 많아져도 관리하기 쉽다.특

웹과 앱을 따로 만들면 당연히 더 좋겠지만 적은 시간과 인원으로 다 만들기는 힘들고 하나의 웹페이지를 앱처럼 사용할수 있는 PWA에 대해 설명해 볼까 한다.PWA는 첫 번째 접속 시 리소스를 캐싱해 두기 때문에, 두 번째 접속부터는 네트워크를 거치지 않고 브라우저에 저

최근 웹사이트를 PWA(Progressive Web App) 로 구현하는 사례가 늘어나고 있음.PWA는 앱처럼 설치가 가능하고 오프라인에서도 동작할 수 있어 사용자 경험 개선에 큰 도움이 됨.그중 중요한 포인트는 사용자가 자연스럽게 앱을 설치하도록 설치 유도 팝업을 제

Https는 일반적으로 배포서버라 테스트를 할수 없지만 PWA가 설치 알림을 띄우는지 확인하기 위해서는 Https서버에만 가능했다 그렇다고 배포 서버로 무작정 올려서 확인 할수가 없으니 테스트를 위해 우회하는 방법을 선택했다 난 yarn과 vite를 사용중이여서 yar