짧은코딩

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..

preventDefault preventDefault는 form 태그에서 제출 버튼을 누르게 되면 href 를 통해 이동하거나, 창이 새로고침하여 실행된다. preventDefault 를 통해 이러한 동작을 막아줄 수 있다. 우리는 SPA 방식을 사용하기 때문에 preventDefault가 필요하다. TS에서 any, unknown, 제너릭 타입 -any any 타입은 어떤 타입이라도 올 수 있는 것이다. 하지만 이러면 ts를 사용하는 의미가 없고 개발할 때 이로 인해 에러가 발생할 수 있다. 따라서 any 타입은 조심해서 사용해야 한다. -unknown unknown 타입은 any 타입과 동일하게 모든 값을 허용하지만, 할당된 값이 어떤 타입인지 모르기 때문에 함부로 프로퍼티나 연산을 할 수 없다. -..

Switch Switch는 하나를 키면 다른건 꺼지듯이 위 코드에서는 반드시 3개 중에서 1개만 선택 가능하다. 즉 여러 개의 라우터 중에서 딱 하나의 라우터만 표시해준다. Route는 컴포넌트를 화면에 띄워주는 것이다. Redirect는 다른 페이지로 돌려준다. 위 코드에서는 url이 /로 끝나면 /login으로 돌려준다. 따라서 /이나 /login이면 path가 login이다. 을 해주지 않으니까 에러가 발생했었다. SPA 구동 방식 SPA는 url이 없다. 오로지 index.html만 사용한다. 그래서 url 뒤에 /하고 주소를 붙쳐주는 것은 History API 덕분이다. 그래서 History API를 이용해서 가짜 주소를 만들어 준다. 새로고침하면 주소는 프론트로 안가고 서버로 간다. 근데 서버..

만드는 과정 이 세팅을 하는데 정말 4일은 사용한 것 같다. 제로초님의 강의를 보고 그대로 따라했지만 에러의 늪에서 벗어나지 못했다. 오류를 해결하니 다른 오류가 발생했다. 혹은 오타가 발생했는데 이를 모르고 시간을 날렸다. 처음엔 정말 열정을 가지고 이 강의를 들었다. 하지만 에러와 오타가 날 수강 환불로 이끌뻔했다(ㅠㅠ). 정말 마음을 다 잡고 다시 처음 강의부터 차근차근 해 나갔다. 물론 이 과정에서도 오류는 발생했다. 하지만 이전에 했을 때 보다는 쉽게 극복할 수 있었다. 이 과정을 따르면서 npx create-react-app이란 명령어에게 얼마나 감사한지 알게되었다. 물론 이 세팅이 npx create-react-app을 수동으로 하는 과정인 것은 마지막에 알았다. 이걸 알고 나서 너무 허무했..