![]()
채널 만들기 any -> `e: ChangeEvent` type 강제 변환 : `as unknown an T` T extends string | number * K.C 케밥 케이스 : 하이픈(-)으로 단어를 연결하는 방식. css 기존 코드 바탕으로 수정할때는 가장 의존이 많이 되는 것 바꾸면 -> 의존요소 모두 빨갛게 변하고, 수정해주기 Channel, DM 유사구조. 중복제거하기 좋다 타입 점검하기(타입 가드) DM : sender, receiver Chat : channel, user JS문법. 폴인문 for...in 문 : 상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복 data 객체 안에 'Sender'속성이 있으면 true, 없으면 fal..
![]()
정규표현식으로 문자열 변환하기 채팅전송 멘션 하이라이트 효과, 정규표현식 Regular Expression : 패턴이 있는 부분 구현, 성능이 조금 안좋음 `npm i regexify-string` /(여기에 적음)/g g : global Flag 모두 찾겠다 \ : escape 정규식 특수기호 무력화. []각각 정규식 역할을 무력화 하고, 문자열로서 정규식을 만든다. . + ? : (모든글자) (1개이상) (0개나 1개) \d + ? : (숫자) (1개이상) (0개나 1개) * : 0개이상 () : 그루핑, 묶인 값이 배열에 추가됨 arr[1], arr[2]... regexifyString({ input: data.content, pattern: /@\[(.+?)]\((\d+?)\)|\n/g, //비교..
![]()
socket.io 전용 훅스 만들기 웹소켓 : 실시간을 서버와 데이터를 주고받을 때 양방향으로 실시간 소통하는 방법. 한번만 연결을 맺어놓으면 계속 소통 Long Polling (롱 폴링) : 웹소켓 등장 전 양방향 통신 컨트롤 웹소켓 API 백엔드에서 전송 npm i socket.io-client@2 -> TypeORM이 아직 @3버전 정식지원X *Socket.io는 한번 연결을 해놓으면 전역적인 특징을 띄기 때문에, 컴포넌트 연결에 복합함 발생할 수 있음. 리액트의 동적 성질과 어울리지 않는다* -> 하나의 컴포넌트에 종속되게 넣으면, 컴포넌트가 사라지면 연결도 끊기기에 공통 구성된 컴포넌트에 넣어줄 Hook 사용 부모에 연결해도 잘 안될경우 Hook에 넣어야함 useHooks.ts 에서 Hooks로..
실시간 채팅..! 고대하던 기능이다. 그것을 위한 프론트 구조 짜는 섹션3이다. DM 목록 만들기 배포시에 localhost//3095 등 실제주소값이 적혀앴으면 오류가 난다! proxy 를 사용하면 배포할때 주소를 바꾸지 않아도됨 변수명 길게 써서 주석역할을 하도록 함. 변수(명사역할) 함수(동사역할)... 나는 주석을 많이 달아서 기능설명하는 편이라 고민해봐야할듯 chanelList, DMList 코드 실제 웹소켓 사용해서 실시간 채팅 구현 Collapse 버튼 : 접었다 폈다 해주는 기능(notion >) true면 펴지고, false 면 접힘 애니메이션 반응형 const [channelCollapse, setChannelCollapse] = useState(false); 참고 -> https://..
워크스페이스 gravatar 사용자 프로필 이미지 아이콘 '그라바타' '기타' '절소스콘' 서비스 이메일 이미지 1대1매칭(아이덴티티) npm i gravatar npm i @types/gravatar -> 타입스크립트 용 그라바타 설치 {/* 사용자프로필이미지 */} 워크스페이스 중첩 라우터 workspace에서 채널 index를 받을때 1. children 주소 받기 //channel index.tsx import Workspace from '@layouts/Workspace'; //Workspace index.tsx {children} 2. 스위치 라우터 안에서 스위치라우트를 또사용, 주소 구조는 계층적 주고로 동일해야함! APP의 workspace 주소와 동일 //Workspace index.ts..
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] =..
강좌 소개 및 기본세팅 https://github.com/zerocho/sleact back폴더 .env COOKIE_SECRET=sleactcookie MYSQL_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.0 npm v 9.5.0 mysql 8.0 FE세팅 git에는 node_modules를 올리지..
