![]()
socket.io 전용 훅스 만들기웹소켓 : 실시간을 서버와 데이터를 주고받을 때 양방향으로 실시간 소통하는 방법. 한번만 연결을 맺어놓으면 계속 소통 Long Polling (롱 폴링) : 웹소켓 등장 전 양방향 통신 컨트롤웹소켓 API 백엔드에서 전송npm i socket.io-client@2 -> TypeORM이 아직 @3버전 정식지원X*Socket.io는 한번 연결을 해놓으면 전역적인 특징을 띄기 때문에, 컴포넌트 연결에 복합함 발생할 수 있음. 리액트의 동적 성질과 어울리지 않는다* -> 하나의 컴포넌트에 종속되게 넣으면, 컴포넌트가 사라지면 연결도 끊기기에 공통 구성된 컴포넌트에 넣어줄 Hook 사용부모에 연결해도 잘 안될경우 Hook에 넣어야함useHooks.ts 에서 Hooks로 공통된..
![]()
4 종류의 괄호문자들 '()', '[]', '{}', '' 로 이루어진 문자열이 주어진다. 이 문자열에 사용된 괄호들의 짝이 모두 맞는지 판별하는 프로그램을 작성한다. 예를 들어 아래와 같은 문자열은 유효하다고 판단할 수 있다. 아래와 같은 문자열은 유효하지 않은 문자열이다. 붉은색으로 표시된 괄호의 짝을 찾을 수 없기 때문이다. 아래 문자열은 열고 닫는 괄호의 개수는 유효하나 짝이 맞지 않는 괄호가 사용 되었기 때문에 유효하지 않다. [입력] 각 테스트 케이스의 첫 번째 줄에는 테스트케이스의 길이가 주어지며, 바로 다음 줄에 테스트 케이스가 주어진다. 총 10개의 테스트케이스가 주어진다. [출력] #부호와 함께 테스트 케이스의 번호를 출력하고, 공백 문자 후 유효성 여부를 1 또는 0으로 표시한다 (1..
![]()
Problem 다음 100X100의 2차원 배열이 주어질 때, 각 행의 합, 각 열의 합, 각 대각선의 합 중 최댓값을 구하는 프로그램을 작성하여라. 다음과 같은 5X5 배열에서 최댓값은 29이다. [제약 사항] 총 10개의 테스트 케이스가 주어진다. 배열의 크기는 100X100으로 동일하다. 각 행의 합은 integer 범위를 넘어가지 않는다. 동일한 최댓값이 있을 경우, 하나의 값만 출력한다. [입력] 각 테스트 케이스의 첫 줄에는 테스트 케이스 번호가 주어지고 그 다음 줄부터는 2차원 배열의 각 행 값이 주어진다. [출력] #부호와 함께 테스트 케이스의 번호를 출력하고, 공백 문자 후 테스트 케이스의 답을 출력한다. input.txt 1 13 24 13 24 1 7 24 11 22 18 22 16 ..
Problem 10개의 음이 아닌 정수가 차례로 주어진다. 10개의 수 중에서 최댓값을 구하라. [제약 사항] 10개의 수는 0 이상 10,000,000 이하이다. [입력] 가장 첫 줄에는 테스트 케이스의 개수 T가 주어지고, 그 아래로 각 테스트 케이스가 주어진다. 각 테스트 케이스의 첫 번째 줄에는 10개의 숫자가 공백을 띄고 주어진다. [출력] 출력의 각 줄은 '#t'로 시작하고, 공백을 한 칸 둔 다음 정답을 출력한다(t는 테스트 케이스의 번호를 의미하며 1부터 시작한다). input.txt 68 99 1 0 38 41 46 33 51 70 30 67 15 11 47 64 18 52 61 26 65 87 52 59 89 70 6 71 7 34 20 37 14 37 49 58 24 53 47 66 ..
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..
