이번에는 참가자목록 및 이미지 업로드 기능을 추가했습니다. 참가자목록 채팅방에 유저가 접속하면, 서버에서 해당 유저를 Map에 저장하여 클라이언트측으로 배열 형태로 넘겨주는 방식으로 구현했습니다. > 1. 유저의 socket.id를 key, 닉네임을 value형

React Profiler를 통해 최적화 여부를 결정한다.Profiler URL

Next.js - 채팅 어플리케이션 구현 2편

Next.js로 사이드프로젝트 진행 중, socket.io를 활용한 채팅방 기능을 구현하고 있습니다.(서버는 express로 구성)express를 활용한 서버측 구성은 아래와 같이 구성합니다.io변수의 path는 클라이언트측과 socekt을 연동시켜주는 주소라고 생각하

React 18 버전부터 virtualDom은 업데이트의 우선순위를 부여해준다.(ex. 애니메이션과 text 중 우선순위를 선정)Fiber는 리엑트 렌더링/업데이트의 가장 작은 단위이다.(react컴포넌트보다 작은 단위)Reconciliation(재조정)시, DFS(깊

원티드 프리온보딩 프론트엔드 챌린지4월 사전과제 중, React 18 버전의 업데이트관련사항 정리가 있어 해당 내용을 다시 정리해본다.React 17버전까지는 이벤트 핸들러 내부에서 발생하는 상태변경만 하나로 통합하여 처리 후 리렌더링을 진행했다. 이 경우, 이벤트 핸

면접을 보던 중 , JavaScript의 colletions에 관한 질문을 듣고 당황한 기억이 있다.colletions이 어떤 개념인지 몰라서 당황하여 해당 개념을 다시 정리해본다.우선 Colletion이란 여러 원소들을 담을 수 있는 자료구조를 뜻한다.JavaScri

SSR 및 SSG관련 내용을 정리하다가 문득 HTML생성시점이 헷갈려서 정리해 본다위의 이미지들과 같이 SSR의 경우, build 시 HTML파일을 생성하지 않는다.따라서, 유저가 해당 페이지에 접속한 경우에 HTML을 생성하여 전달해준다.반면, SSG는 build 시

Next.js에서는 express에서와 같이 middleware를 사용가능하다.만약 전역 middleware를 사용하고 싶다면 page폴더에 middleware.ts파일을 작성하면된다.공식문서 URL

위의 코드에서 source경로로 접근 시, destination경로를 보여준다.단, source경로에 해당하는 페이지가 존재하는 경우에는 source화면을 보여준다.rewrites는 api 경로를 숨기는 경우에도 사용 가능하다.위의 코드에 따라, api요청시 sourc

아래의 errorElement를 각 routing마다 지정해준다면 해당 페이지의 에러가 다른페이지에 영향을 주지 않는다.위의 파일을 작성 후 , index.tsx파일을 아래와 같이 변경한다.마지막으로 App.tsx를 수정한다.Next.js의 router.query.id

일반적으로 사용하는 main브랜치에서 merge하는 방법신규 브랜치의 시작점을 main브랜치의 최신버전으로 옮기고 merge하는 방법깃 충돌이 발생하는 위험이 있지만, git log를 깔끔하게 하기위해 사용한다.일반 merge와 달리 새로운 브랜치에서 사용한다.main

Vue의 상태관리를 위해 Vuex를 사용한다.store.js 혹은 store.ts파일을 만들어 아래의 코드를 작성한다.main.js 혹은 main.ts에 다음을 추가한다.import { createStore } from 'vuex'const store = createS

Vue컴포넌트는 크게 create -> mount -> 컴포넌트 생성 -> update -> unmount의 라이프사이클이 존재한다.데이터만 존재하는 단계이다.template에 구성된 요소들을 실제 HTML로 변경한다.beforeCreate()created()befor

watch란 data가 변할 시 , 실행되는 함수로 보통 유효성검사를 위해 사용된다고 판단된다.이때 , 함수명은 데이터명과 동일하게 작성해야한다.함수의 첫번째 매개변수는 변경될 데이터, 두번째 매개변수는 변경전 데이터를 뜻한다.

v-for로 원하는 개수만큼 반복적으로 생성 가능하다 (react에서 map으로 생성하는것과 유사)v-for= "(item,index) in menu"로 index도 구할 수 있다.v-if / v-else / v-else-if를통해 if문을 적용시킬 수 있다.v-els

Vue의 기본 구조는 template / script / style로 구성된다.HTML코드로 구성된다.{{변수명}}으로 script에서 지정한 변수를 사용할 수 있다.(react의 state 개념)data()객체 안의 변수는 react의 state와 같은 개념이라 생각

Vue.js 3버전 설치방법은 아래와 같다npm install @vue/cli 로 vue cli를 설치원하는 작업폴더에서 vue create 폴더명 으로 생성TS 사용시 ,vue add typescript 명령어 실행

Next.js 는 404에러 및 500에러를 담당하는 페이지를 커스텀 가능하다구현되지 않는 페이지로 접속 시 보여주는 페이지이다.파일명은 404.tsx로하여 원하는 형식으로 에러 페이지를 구성해준다빌드환경에서 에러가 발생할 시 이동하는 페이지이다.파일명은 \_docum

클라이언트에서 넘겨주는 이미지를 저장하기 위해 multer 라이브러리를 사용한다.원하는 router파일에 아래와 같이 multer사용코드를 작성한다.cb(null,"원하는폴더")로 이미지 저장 경로를 지정해준다.아래와 같이 , 미들웨어로 사용해준다