일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- SSR
- async/await
- 태그된 유니온
- Promise
- 타입 좁히기
- recoil
- Jest
- 공변성
- useAppDispatch
- 반공변성
- 리터럴 타입
- webpack
- CORS
- tailwind
- ESlint
- dfs
- Cypress
- 이분 검색
- app router
- RTK Query
- React
- map
- autosize
- 결정 알고리즘
- 인터섹션
- 무한 스크롤
- CI/CD
- 호이스팅
- TS
- 투포인터
- Today
- Total
목록리액트 (32)
짧은코딩
X-Requested-With 프로젝트 중에 로그인 axios를 했는데 실행이 되지 않았다. 백엔드 요청에 X-Requested-With 헤더가 포함되어 있었다. X-Requested-With 헤더는 해당 요청이 Ajax라는 것을 의미한다. 저렇게 백엔드 요청을 보고 있는 헤더는 추가해줘야 된다. 그리고 X-Requested-With를 쓰는 다른 이유는 CORS를 통해 서버 동의 없이 Ajax 요청을 할 수 없기에 CSRF 공격을 방지할 수 있다. 즉 보안을 강화시켜준다. 적용 const headers = { "X-Requested-With": "XMLHttpRequest", }; 먼저 이렇게 headers 안에 헤더를 만들어 놓는다. axios .post( "https://waycabvav.shop/l..
form form 안의 버튼에 보통 submit를 많이 사용한다. 하지만 form 안에 버튼이 여러 개인데 하나의 버튼에서만 submit를 사용하고 싶으면 다른 버튼의 type에는 이렇게 type을 button으로 만들어야 한다. 그렇지 않으면 다른 버튼을 눌러도 요청이 가버린다. -예시 가입하기 이런식으로 form 안에서는 type을 지정해줘야 한다.
TS로 컴포넌트 파일 만들 시 주의점 TS에서는 파일 경로명의 앞 글자를 무조건 대문자로 해야한다. 그렇지 않으면 Property 'checkIdModal' does not exist on type 'JSX.IntrinsicElements'. 이런 오류가 발생한다. 컴포넌트의 앞 글자를 대문자로 바꿨더니 에러가 바로 해결되었다. 처음에 아무리봐도 틀린 것이 없었었다. 구글링을 해보니까 해결법을 알게되었다. 다음부턴 꼭 기억해야겠다.
슬라이드 만들기 이미지 준비하기 우선 슬라이드에 활용 할 이미지를 준비한다. 이미지 리스트 만들기 -slideList.ts export const slideList = [ { id: 1, src: "slideImage/img1.jpeg", alt: "첫번째 슬라이드", }, { id: 2, src: "slideImage/img2.jpeg", alt: "두번째 슬라이드", }, { id: 3, src: "slideImage/img3.jpeg", alt: "세번째 슬라이드", }, { id: 4, src: "slideImage/img2.jpeg", alt: "세번째 슬라이드", }, ]; id, src, alt로 이미지의 정보를 담은 리스트를 만든다. 이미지 출력하기 {slideList.map((v) => ..
addEventListener const windowResize = () => { if (window.innerWidth > 769) { setMenu(false); } }; window.addEventListener(`resize`, windowResize); addEventListener는 첫번째 인자로 어떤 이벤트를 감지할 것인지 적어준다. 두번째 인자로는 첫번째 인자가 발생했을 때 일어날 이벤트를 적어준다. removeEventListener window.removeEventListener(`resize`, windowResize); 이벤트 대상에 등록한 수신기를 제거한다. 어느 수신기 중 하나가 이벤트를 처리하는 중에 다른 수신기를 제거하면 제거된 이벤트 수신기는 현재 이벤트에 대해 발동하지 않..
shift, unshift .shift(): 배열의 맨 앞을 제거 .unshift(): 배열의 맨 앞에 추가 Object.entries Object.entries(chatSections) 이렇게 작성하면 객체를 배열로 바꿀 수 있다. useSWRInfinite useSWRInfinite를 사용하면 이중 배열을 사용한다. flat flat는 배열의 차원을 하나씩 낮춰준다. const a = [1, 2, 3, [1, 2], [[1], [2]]] // [1, 2, 3, 1, 2, [1], [2]] 이런식으로 배열의 차원이 1개씩 낮아진다.
MentionsInput -npm 공식 사이트 https://www.npmjs.com/package/react-mentions react-mentions React mentions input. Latest version: 4.4.7, last published: a month ago. Start using react-mentions in your project by running `npm i react-mentions`. There are 101 other projects in the npm registry using react-mentions. www.npmjs.com 이 사이트를 보면 많이 도움이 된다. -공식 사이트 예시 MentionsInput은 Mention이 있어야 에러가 발생하지 않는다. 슬..
설치하기 $ npm i @fortawesome/fontawesome-svg-core $ npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons $ npm i @fortawesome/react-fontawesome 우선 이 명령어를 이용해서 다 설치한다. 적용하기 -적용할 아이콘 fontawesome에서 이 아이콘을 적용해보는 예시이다. -import import { faCaretUp } from '@fortawesome/free-solid-svg-icons'; 이렇게 사용할 폰트를 import 한다. 위 사진에서는 "fa-caret-up"으로 나와있다. 하지만 리..
axios 요청 axios 요청을 할 때는 기본적으로 백엔드 개발자가 api 주소와 body 등을 고려해야 한다. 그리고 withCredentials를 true로 해서 쿠키를 허용해주는 것도 중요하다. 가장 많이 하는 실수 1. 조건에 맞는지 체크 내가 가장 많이 하는 실수로는 요청만 보내고 그 전에 기준은 설정하지 않는다는 점이다. 예를 들면 어떤 것을 입력하고 그것을 보내는데 그 값이 빈 배열이 인지 확인을 해야한다. e.preventDefault(); if (!newWorkspace || !newWorkspace.trim()) return; if (!newUrl || !newUrl.trim()) return; 혹은 form 태그로 작성했을 경우 preventDefault도 해야한다. 2. 전송을 하..
모달 기능 모달을 구현하기 위해서 생각할 부분은 어떤 버튼, 부분을 눌렀을 때 모달이 뜨고 사라져야한다. 모달 바깥 부분을 누르면 모달이 사라져야 한다. 모달 자기 자신을 누르면 사라지면 안된다. 이렇게 3가지를 고려해야 한다. 구현 방법 -1번 모달이 뜨고 사라는 부분을 구현하기 위해서는 const onClickUserProfile = useCallback(() => { setShowUserMenu((prev) => !prev); }, []); 이렇게 state와 함수를 만들어서 구현하면 된다. -2번 모달 바깥 부분을 누르면 모달이 사라져야 하는 기능은 하나의 큰 div를 만들고 그 안에 모달을 구현한다. 큰 div는 화면 전체를 차지 하도록 한다. position을 absolute로 만들어서 전체를..