회사에서 담당한 프로젝트를 리팩토링 하던 중, dangerouslySetInnerHTML을 사용한 컴포넌트에서 hydration 오류가 발생하여 이를 해결한 경험을 남겨본다.우선 해당 컴포넌트는 아래의 역할을 하고 있다.Admin에서 HTML을 문자열 형태로 전송해당

회사에서 운영중인 프로젝트를 급하게 수정 후 배포할 일이 생겼다.작업을 다 끝내고 push까지 완료해서 일이 끝났다고 생각했지만 갑자기 뜬 아래의 gitlab CI/CD오류...remote: The project you were looking for could not

회사에서 리펙토링을 진행하던 중, 아래의 이슈사항을 발견했다.API호출로 이미지 경로를 받아오고, 해당 이미지는 next/image로 렌더링이미지 경로가 null인 경우에는 defaultImage를 렌더링이미지 경로를 받아오지만, 해당 경로의 이미지에 문제가 있는 경우

Data Type String / int / double / bool / num List / Map / Set

Dart는 main안에서 작업이 이루어져야 실제로 코드가 실행된다만약 main이 존재하지 않다면 실행되지 않는다.변수는 var로 선언하거나 String과 같이 타입을 지정할 수 있다.관습적으로 함수나 메소드 내부에 지역변수는 var를 사용하며, class에서 변수나 p

이번에는 참가자목록 및 이미지 업로드 기능을 추가했습니다. 참가자목록 채팅방에 유저가 접속하면, 서버에서 해당 유저를 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가 변할 시 , 실행되는 함수로 보통 유효성검사를 위해 사용된다고 판단된다.이때 , 함수명은 데이터명과 동일하게 작성해야한다.함수의 첫번째 매개변수는 변경될 데이터, 두번째 매개변수는 변경전 데이터를 뜻한다.