![]()
기존 더보기 버튼으로 구현되어있던 페이지네이션 pagenation 을useInfiniteQuery, Intersection Observer API를 이용하여 무한 스크롤 리팩토링 하였다.기존 더보기 구현 방식 먼저 서버에서 사용하는 데이터 형식을 확인하면, 공연 전체조회 시 쿼리로 page 를 필수로 받는다.다른 codename(장르), title(검색), date(공연날짜)는 필터링이나 상세공연정보 detail 에 접속할때 사용한다. 즉, 이러한 형식으로 요청을 전송하면 데이터는 json 배열로 8개의 각 공연 객체가 전송된다. 데이터를 불러오는 react-query 코드하나의 api url -> 검색, 카테고리, 페이지네이션, 날짜를 이용한 공연상세위 기능을 모두 사용하기 때문에 useQuery 를 ..
![]()
채널 만들기 any -> `e: ChangeEvent`type 강제 변환 : `as unknown an T`T extends string | number * K.C 케밥 케이스 : 하이픈(-)으로 단어를 연결하는 방식. css기존 코드 바탕으로 수정할때는 가장 의존이 많이 되는 것 바꾸면 -> 의존요소 모두 빨갛게 변하고, 수정해주기 Channel, DM 유사구조. 중복제거하기 좋다 타입 점검하기(타입 가드) DM : sender, receiverChat : channel, user JS문법. 폴인문for...in 문 : 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복data 객체 안에 'Sender'속성이 있으면 true, 없으면 falsecons..
![]()
정규표현식으로 문자열 변환하기채팅전송 멘션 하이라이트 효과,정규표현식 Regular Expression : 패턴이 있는 부분 구현, 성능이 조금 안좋음`npm i regexify-string`/(여기에 적음)/gg : global Flag 모두 찾겠다\ : escape 정규식 특수기호 무력화. []각각 정규식 역할을 무력화 하고, 문자열로서 정규식을 만든다.. + ? : (모든글자) (1개이상) (0개나 1개)\d + ? : (숫자) (1개이상) (0개나 1개)* : 0개이상() : 그루핑, 묶인 값이 배열에 추가됨 arr[1], arr[2]...regexifyString({ input: data.content, pattern: /@\[(.+?)]\((\d+?)\)|\n/..
![]()
socket.io 전용 훅스 만들기웹소켓 : 실시간을 서버와 데이터를 주고받을 때 양방향으로 실시간 소통하는 방법. 한번만 연결을 맺어놓으면 계속 소통 Long Polling (롱 폴링) : 웹소켓 등장 전 양방향 통신 컨트롤웹소켓 API 백엔드에서 전송npm i socket.io-client@2 -> TypeORM이 아직 @3버전 정식지원X*Socket.io는 한번 연결을 해놓으면 전역적인 특징을 띄기 때문에, 컴포넌트 연결에 복합함 발생할 수 있음. 리액트의 동적 성질과 어울리지 않는다* -> 하나의 컴포넌트에 종속되게 넣으면, 컴포넌트가 사라지면 연결도 끊기기에 공통 구성된 컴포넌트에 넣어줄 Hook 사용부모에 연결해도 잘 안될경우 Hook에 넣어야함useHooks.ts 에서 Hooks로 공통된..
import Home from '../../Home' .. 상대경로가 많아질 경우를 막기 위해 절대경로를 설정하는 방법 JS일 경우, CRA 전체경로(package.json과 같은 경로)에 jsconfig.json 파일 생성 { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } @로 지정해주는 방법 -> 인프런 내용 { "compilerOptions": { "baseUrl": "src", "paths": { "@hooks/*": ["hooks/*"], "@components/*": ["components/*"], "@layouts/*": ["layouts/*"], "@pages/*": ["pages/*"], } } } 문제점? 재시작 해줘야..
실시간 채팅..! 고대하던 기능이다. 그것을 위한 프론트 구조 짜는 섹션3이다.DM 목록 만들기배포시에 localhost//3095 등 실제주소값이 적혀앴으면 오류가 난다! proxy 를 사용하면 배포할때 주소를 바꾸지 않아도됨 변수명 길게 써서 주석역할을 하도록 함. 변수(명사역할) 함수(동사역할)... 나는 주석을 많이 달아서 기능설명하는 편이라 고민해봐야할듯 chanelList, DMList 코드실제 웹소켓 사용해서 실시간 채팅 구현Collapse 버튼 : 접었다 폈다 해주는 기능(notion >) true면 펴지고, false 면 접힘애니메이션 반응형const [channelCollapse, setChannelCollapse] = useState(false);참고 -> https://anerim...
워크스페이스 gravatar사용자 프로필 이미지 아이콘 '그라바타' '기타' '절소스콘' 서비스이메일 이미지 1대1매칭(아이덴티티)npm i gravatarnpm i @types/gravatar -> 타입스크립트 용 그라바타 설치 {/* 사용자프로필이미지 */} 워크스페이스 중첩 라우터workspace에서 채널 index를 받을때1. children 주소 받기//channel index.tsximport Workspace from '@layouts/Workspace'; //Workspace index.tsx{children}2. 스위치 라우터 안에서 스위치라우트를 또사용, 주소 구조는 계층적 주고로 동일해야함! APP의 workspace 주소와 동일//Workspace index.tsx 채..
npm run dev 명령어를 back폴더 터미널에서 실행해서 서버 활성화 해주기alecture 폴더에서도 npm run dev 명령어 다른 터미널에서 실행 회원가입 페이지반복되는 코드는 커스텀 훅으로 간단화 할 수 있다.hooks 경로에 useInput.ts 파일 만든다.import { Dispatch, SetStateAction, useCallback, useState, ChangeEvent } from 'react';//ts 매개변수 제네릭타입추론 type ReturnTypes = [T, (e: ChangeEvent) => void, Dispatch>];const useInput = (initialData: T): ReturnTypes => { const [value, setValue] = use..
강좌 소개 및 기본세팅https://github.com/zerocho/sleactback폴더 .envCOOKIE_SECRET=sleactcookieMYSQL_PASSWORD=------- npm i → npx sequelise db:create database를 만듬num run dev로 테이블 연결npm sequelize dv:seed:all 워크스페이스, 채널(슬랙은 워크스페이스 안에 채널이 들어감) 기본적으로 만들어줌 seed의 역할num run dev로 다시 테이블데이터 row 연결http://localhost:3095/login 로 서버 생성!노드와 sql 설치노드 lts v18.15.0npm v 9.5.0mysql 8.0FE세팅git에는 node_modules를 올리지 않는다npx webpac..
