Lecture/slack 클론 코딩 (12) 썸네일형 리스트형 2021-07-08 :: 메뉴와 모달 만들기3 라우터 주소 설계 콜론(:)기호를 이용해 라우터에서 URL 파라미터로 이용할 수 있다. Route역시 우선순위가 존재한다. 높은 우선순위를 가진 라우트를 항상 맨 위에 두도록 URL파라미터와 절대 경로를 같은 경로에 혼용하는 경우, 반드시 절대경로를 위쪽에 두어야 한다. 특정 조건을 만족하는 경우 특정 라우터로 이동하는 로직을 짤 때 if(isSatisfied) 와 같이 구현할 수 있다. create 요청을 Post를 통해 수행할 때. 3번째 인자 객체에 설정을 넣어 전달할 수 있다. 해당 설정에 withCredentials를 통해 쿠키를 공유할 수 있고, 해당 쿠키는 이 요청을 누가 했는지에 대한 정보가 담겨있다. URL 파라미터는 useParams();라는 훅을 통해 접근할 수 있다. URL 파라미터.. 2021-07-06 :: 메뉴와 모달 만들기2 모달 만들기 workspace.tsx 팝업, 사용자 초대기능 추가 fetch한 자신의 데이터 안에 workspace에 대한 정보도 저장 해 두어, 하나로 처리한다. import의 as, 비구조화 할당의 : 기호를 사용해 변수 이름을 사용자 지정할 수 있다. 백앤드 개발자가 전송하는 데이터에 대한 타이핑 역시 해준다. 브라우저의 dev툴에 리렌더링 시 하이라이트 여부에 대한 체크박스가 있다. 나중에 최적화할 때 참고할 자료가 된다. 워크스페이스 추가 모달; 해당 코드는 workspace 컴포넌트 안에 있다. show props에 대항하는 isOpen state를 둔다. 데이터를 다루는 사람이 백앤드이기 때문에 데이터에 대한 권한 자체는 백앤드가 더 크다. 모달은 전체 팝업 창처럼 가운데 뜨는 페이지를 의미.. 2021-07-04 :: 메뉴와 모달 만들기1 워크스페이스 만들기(gravatar) node에서는 app.tsx와 app폴더 안의 index.tsx를 거의 동일하게 처리한다. gravatar에서 랜덤으로 아바타를 만들어준다. github 이미지 프로필의 다양함과 같음. types용 패키지를 설치할 때, @types/packageName이런 식으로 할지 아니면 그냥 패키지만 다운받으면 되는가에 대해 npm 공식 홈페이지에 페키지 이름 옆에 DT라는 마크가 있으면 따로 설치를 해주어야 하고, TS라고 되어 있으면 설치해줄 필요 없다. 가끔 types를 지원 안하면 직접 typing 작업을 해주어야 한다. 이러한 작업은 typing이라는 폴더에 따로 작업해서 넣어둬야 한다. 워크스페이스 만들기(중첩 라우터) 페이지 간 공통인 부분이 layout이고 바뀌는.. 2021-07-04 :: 로그인, 회원가입 만들기3 swr 활용법(optimistic ui) mutate revalidate()함수의 단점은 요청을 한번 더 보낸다. swr의 단점은 요청을 너무 많이 보낸다는 점. 그러므로 설정을 통해 요청을 조절해주어야 한다. 이 문제를 해결하기 위해 revalidate 대신에 사용하는 함수가 mutate이다. revalidate는 서버에 다시 요청을 보내서 데이터를 받아온다. mutate는 서버에 요청 없이 값을 변환한다. 로그인 로그아웃 할 때 값을 불러오고 업데이트하는 과정을 최적화 해보자. 이미 있는 로그인 정보를 그대로 활용하고 싶으면 mutate를 사용한다. mutate는 기존에 있는 데이터를 이용. mutate(res.data); mutate의 두 번째 인자가 서버요청을 통해 데이터 검증여부에 대한 설정이다.. 2021-06-28 :: 로그인, 회원가입 만들기2 로그인 페이지 만들기 리액트 라우터(react-router-dom)에서 {Link}라는 컴포넌트를 가져와서 테그로 사용한다. SPA에서는 Link를 사용한다. 기존 는 새로 고침이 발생한다. 화면 깜빡이 발생하며 기존 state가 손실된다. 가장 쉬운 로그인 구현 방법은 백앤드 서버 재실행이다. 혹은 브라우저에 저장되어 있는 로그인 정보를 삭제하면 된다. 개발자모드 application 탭에 가서 쿠키나 세션가서 로그인 정보(passport에서는 connect.sid)를 삭제해주면 된다. CORS에러를 백앤드에서 해결한 경우 여전히 cross origin통신이므로 option 요청이 발생한다. 또한, proxy 서버를 사용하지 않는 경우 api 통신 경로에 http://localhost:3000 이거 다.. 2021-06-24 :: 로그인, 회원가입 만들기1 중복되는 부분에 대해서 custom hook을 제작한다. 쭉 쓰고 완성한 뒤 중복되는 부분을 제거하는 것을 추천한다. 사소한 차이로 중복이 아닌 경우도 있다. SPA submit에서 e.preventDefault() useCallback 자체가 해당 함수를 해싱해두는 것 deps의 값이 바뀔 때만 리랜더링 해준다. 성능 최적화 커스텀 훅 만들기 state와 input의 onChange email과 nickname은 같은 형식을 공유한다. 이 때 custom hook을 만든다. hooks/useInput.ts import {Dispatch, SetStateAction, useState, useCallback } from "react"; const useInput = (initialData: T): [T, .. 2021-06-24 :: 코드 스플리팅과 이모션 웹사이트가 커지면 수백 페이지가 되지만 이를 하나의 js파일로 만든다면 엄청 느려진다. 화면 랜더링이 3초이상 걸리면 안된다. 필요한 컴포넌트를 필요할 때 불러온다. 어려운 점은 어떤 기준으로 컴포넌트를 구분할 것인가? 먼저 페이지 별로 구분한다. 서버사이드 랜더링이 필요없는 애들도 서버와 별개로 작동하도록 스플리팅 해준다. npm i @loadable/component npm i --save-dev @types/loadable__component 이 패키지로 스플리팅을 진행하겠다. 페이지 단위로 대충 코드 스플리팅을 해주고 굳이 더 신경쓰지 말자 css의 여러가지 선택지가 있다 inline cssmodule className과 연결 css in js, emotion 설정이 간단하다, 서버사이드 랜더링 .. 2021-06-23 :: 폴더 구조와 리액트 라우터 폴더구조 프로젝트별로 많이 다르다. 뭘 사용해도 크게 상관없다. oldschool //container //components //pages - 서비스 페이지 //components -페이지의 컴포넌트들 //layouts -페이지들간의 공통 레이아웃 SPA지만 결국 페이지가 다 있다 그냥 페이지 안에 폴더를 만들고 그 안에 index와 style을 둔다. webpack.config.ts alias: { // 경로 간소화 '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path... 이전 1 2 다음