짧은코딩

개발을 하다가 dependency가 빠지면 알려주는 기능이 있으면 좋을 것이다. 그것을 위한 설치 방법을 기록하려고 한다. 참고로 dependency는 외부에서 쓰이면 무조건 넣어주는 것이 좋다. npm i -D eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react 이렇게 5개를 깔아줘야 한다. -.eslintrc { "extends": ["plugin:prettier/recommended", "react-app"] } 그리고 .eslintrc 파일에다가 "react-app"을 추가해야 한다. 이렇게 만들면 dependency를 안써줬을 때 에러는 아니지만 노란..

input 리액트에서 input이 들어가면 웬만하면 컴포넌트로 빼는 것이 좋다. 안그러면 리렌더링이 너무 빈번하게 일어난다. toast 만약 어떤 것을 하다가 에러가 발생하면 사용자들에게 알려주기 위해서 toast를 사용한다. toast.error(error.response?.data, { position: 'bottom-center' }); 이 코드를 axios의 catch에 넣으면 된다. Route 첫번째 코드는 파라미터가 있는 주소이고 두번째는 아니다. 이렇게 하면 무조건 slack가 된다. 따라서 파라미터가 있는 주소를 밑에 적어줘야 한다. NavLink 그냥 Link와 비슷하다. 다른 점은 activeClassName을 줄 수 있다. 그래서 만약에 지금 주소와 링크의 주소가 같으면 activeC..

공통된 레이아웃을 사용할 때 공통된 레이아웃을 사용하기 위해서는 2가지 방법이 있다. 방법 1 -workspace test Sleact MenuScroll Chats {children} 이렇게 {children}을 레이아웃 부분에 넣는다. -컴포넌트 const Channel = () => { return ( {/* div 태그가 Workspace의 children이 된다. 즉 다른 컴포넌트 안에 넣은 jsx는 childre이 된다. */} 로그인하신 것을 축하드려요! ); }; 이렇게 각 컴포넌트에 가서 Workspace를 감싸면 div가 children 역할을 하게 된다. 방법2 공통 레이아웃인 Workspace 파일에 하면된다. const Channel = loadable(() => import('@..

gravatar gravatar은 유저의 이미지가 없을 때 랜덤한 이미지가 나오게 해주는 것이다. 예를 들어 깃허브에 가면 이런 이미지가 나온다. 이런 것들을 gravatar를 이용해서 구현할 수 있다. @types의 유무 npm으로 설치할 때 types를 붙어야할지 말지 모르는 상황이 있다. 상황에 따라서 에러가 발생할 수 있기 때문에 잘 알고 설치를 해야한다. 그럴 경우에는 공식 문서에 가서 확인해보면 된다. https://www.npmjs.com/package/@types/gravatar @types/gravatar TypeScript definitions for gravatar. Latest version: 1.8.3, last published: a year ago. Start using @ty..

mutate mutate는 서버에 요청 안보내고 데이터를 수정하는 것이다. 즉 서버 요청을 하지 않고 클라이언트 쪽에서 데이터를 조작할 수 있다. 그러다가 결국 마지막엔 서버에 데이터가 이렇게 바뀐게 맞나 점검을 하는데 이것이 mutate의 두번째 인자이고 shouldRevalidate라고 한다. 따라서 이 두번째 인자에 false를 넣어야 서버에 요청을 보내지 않는다. -예시 인스타에 좋아요를 누르면 하트의 색이 변하는데 이것은 서버에 가기 전에 하트의 색을 바꾸는 것이라 mutate를 사용했다. 이렇게 하면 사용자 입장에서는 빠르게 적용이 되는 것 처럼 느껴져서 좋다. 하지만 만약 서버에 전송이 실패하면 다시 좋아요를 취소시킨다. 이런 것을 OPTIMISIC UI라고 부른다. 낙관적인 UI라고 부른다..

로그인 페이지 실행 로직 코드만 보면서 어떻게 돌아갈건지 예측하는 것도 좋은 연습 방법이다. import useInput from '@hooks/useInput'; import { Success, Form, Error, Label, Input, LinkContainer, Button, Header } from '@pages/SignUp/styles'; import fetcher from '@utils/fetcher'; import axios from 'axios'; import React, { useCallback, useState } from 'react'; import { Link, Redirect } from 'react-router-dom'; import useSWR from 'swr'; cons..

CORS cors에 대해 알기 위해서는 먼저 sop에 대해 알아야 한다. sop(same-origin policy) sop는 동일 출처 정책으로도 부른다. 불러온 문서, 스트립트의 출처가 다르면 리소스와의 상호장용하는 것을 제한하는 중요한 보안 방식이다. sop는 해로울 수 있는 문서를 분리하여 공격받을 수 있는 경로를 줄여준다. -출처의 정의 두 URL의 프로토콜, 포트(명시한 경우), 호스트가 모두 같아야 동일한 출처이다. 예를 들어서 http://store.company.com/dir/page.html과 출처를 비교하면 이런 결과가 나온다. CORS(Cross-Origin Resource Sharing) CORS는 교차 출처 리소스 공유라고도 하며, 추가 HTTP를 헤더를 사용해 실행 중인 웹 애플..

Link import { Link } from 'react-router-dom'; 로그인 하러가기 이렇게 Link를 써야 SPA가 유지된다. swr swr은 원격데이터 fetch를 위한 커스텀 훅 npm 모듈이다. useSWR(Key, Fetch) Fetch 함수를 이용해 key라는 주소에서 가져오는 데이터를 전역적으로 관리할 수 있다. 즉 swr은 데이터를 가져오기 위한 리액트 훅이다. -swr 활용 방법 swr은 비동기랑 get 요청에 얽매이지 않고 fetherPost 이렇게 만들어서 post 요청도 사용할 수 있다. 결국 swr로 전역 데이터를 관리할 수 있다는게 중요하다. 즉 전역 스토리지 역할을 할 수 있다. swr을 잘 활용하려면 백엔드에서 오는 데이터를 그대로 사용하는 것이 아니라 fethe..

axios Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트이다. 서버에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용한다. 사용법 -back 서버에 보내는 주소 리스트 https://github.com/ZeroCho/sleact/blob/master/API.md GitHub - ZeroCho/sleact Contribute to ZeroCho/sleact development by creating an account on GitHub. github.com axios .post('http://localhost:3095/api/users', { email, nickname, password, }) //..

커스텀 훅 커스텀 훅이란 리액트에서 기본 제공하는 훅을 합쳐서 사용자가 훅을 만드는 것이다. 예를 들어 useState와 useCallback을 합쳐서 새로운 훅을 만들 수 있다. import { useCallback, useState } from 'react'; const useInput = (initialData) => { const [value, setValue] = useState(initialData); const handler = useCallback((e: any) => { setValue(e.target.value); }, []); return [value, handler, setValue]; }; export default useInput; 이런 식으로 useState, useCallba..