FrontEnd/React

FrontEnd/React
[React] msw로 가짜 api 만들기
개발을 하다보면 백엔드 api 개발이 덜 된 경우가 많다. 해당 경우 마치 api가 개발된 상태인 것처럼 fetch를 날려서 거기에 해당되는 가짜 api를 받아오는 방법이 있다. 먼저 msw라이브러리를 설치해준다. npm install msw --save-dev src폴더 내에 mocks 폴더를 만든 후에 worker.ts파일을 하나 생성해 주자. 파일의 내용은 아래와 같이 작성해준다. import { setupWorker } from 'msw'; import { handlers } from './handlers'; export const worker = setupWorker(...handlers); 이후 아래 명령어를 쳐주면 npx msw init public/ --save public 안에 mockS..
→2023.02.09
FrontEnd/React
[React] 토스트 알람창으로 alert 대체하기
개발을 하다보면 alert를 활용하여 알람을 띄어주는 경우가 생긴다. 이를 아래와 같이 조금 더 예쁘게 꾸며보자. react-toastify 라이브러리를 활용하면 위와같은 토스트를 쉽게 만들 수 있다. 사용방법도 매우 간단하다. import React from 'react'; import 'react-toastify/dist/ReactToastify.css'; import { toast } from 'react-toastify'; import { ToastContainer } from 'react-toastify'; function App() { const notify = () => toast.warning('Wow so easy!'); return ( Notify! ); } export default ..
→2023.02.03
FrontEnd/React
[React] 스크롤 이벤트 활용하기
이번에 프로젝트를 진행하다가 스크롤 이벤트를 활용할 상황이 생겨서 공부하게 되었다. 원래 스크롤이벤트를 활용하기 위해서는 window.addEventListener 함수를 활용하여 이벤트를 등록할 수 있다. 이를 훅으로 만들어 두면 보다 편하게 사용할 수 있다. import { useEffect } from 'react'; // 스크롤이벤트 등록해주는 훅 export const useWindowScrollEvent = ( listener: (this: Window, ev: Event) => any, ) => { useEffect(() => { window.addEventListener('scroll', listener); return () => { window.removeEventListener('scr..
→2023.02.01
FrontEnd/React
[React] emotion styled 컴포넌트처럼 관리하기
리액트에서 emotion/styled 를 활용하여 작업하는법을 알아보자. 리액트에서 emotion을 통해 위와같은 박스를 만들어볼 것이다. 우선 emotion/styled를 적용하려면 해당 라이브러리를 설치해야 한다. npm i @emotion/styled 그리고 아래처럼 컴포넌트를 하나 만들어주자. 해당 컴포넌트 아랫단에, const GitHubLoginArea = styled` display: flex; align-content: center; position: absolute; right: 0; top: 5rem; padding: 1rem; background: #ffffff; box-shadow: 0px 1px 9px rgba(10, 31, 68, 0.1), 0px 0px 1px rgba(10, ..
→2022.11.17
FrontEnd/React
[React,TS] 리액트에서 절대경로 사용하기
보통 리액트에서 경로를 지정하다보면 '../components/Header' 와 같은 상대경로를 많이 사용하게 될 것이다. 이를 'components/Header' 와 같은 조금 더 깔끔히 절대경로로 할 수 있는 방법을 알아보자. 방법은 생각보다 간단하다 "baseUrl": "src", "paths": { "components/*": ["components/*"], } tsconfing.json 파일에 위 부분을 추가하면 된다. baseUrl을 설정한 주소를 기반으로 path를 설정할 수 있다. 혹시 적용이 안된다면 "baseUrl": "src", "paths": { "components/*": ["/components/*"], } 위처럼 적진 않았는지 확인해보자. 또한, 바로 적용이안된다면 VSCODE..
→2022.11.17
FrontEnd/React
[TypeScript] File 타입과 FileList 타입
타입스크립트엔 File이란 타입이 있다. 예를들어 위처럼 이미지들을 업로드 할수있는 컴포넌트를 하나 만들었다고 생각해보자. const handleFile = (e: React.ChangeEvent) => { const files = e.target.files; }; 해당 input태그에 onChange이벤트를 건 후에, files를 찍어볼 수 있다. 그렇다면 이 files의 타입은 무엇일까?? 이미지 개개인별로의 타입은 File이며, 위처럼 여러개를 묶어진 경우에 FileList란 타입으로 지정되게 된다. https://microsoft.github.io/PowerBI-JavaScript/interfaces/_node_modules_typedoc_node_modules_typescript_lib_lib_..
→2022.10.06

• 이전
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 다음