Univdev
취소

Nextjs에서 React Portal 사용해보기

React Portal 웹을 제작하다보면 대부분의 경우 계층 구조로 컴포넌트를 배치하여 렌더링하는 방식으로 문제를 해결할 수 있습니다. 그런데 간혹 n레벨에 배치 되어야 하는 컴포넌트가 실제로 렌더링 될 때는 Document의 최상단에 배치하고 싶을 수 있습니다. Tooltip Modal Tooltip이나 Modal 컴포넌트가 바로 그 대표적인...

Nextjs의 hydration이란?

Hydration Hydration을 검색하면 나오는 이미지 Hydration은 위 이미지처럼 ‘수분 공급’을 의미합니다. Hydration을 이해하기 전에 CSR, SSR이 무엇인지 간단하게 짚고 넘어가야 합니다. CSR Client Side Rendering의 약자입니다. Web은 단순히 홈페이지라는 개념을 넘어서 응용프로그램의 영역을 대체한지 ...

Element가 서로 같은지 비교하기

개요 실제로 웹을 개발하다보면 DOM Element를 직접 핸들링 해야하는 일이 은근히 생깁니다. 그럴 때, 내가 선택한 Element와 어떤 Element가 서로 동일한 Element인지 비교를 하고 싶을 때가 있는데, Javascript에서는 다행히도 isEqualNode와 isSameNode Method를 지원합니다. 사용해보기 코드 const ...

React Query로 관리하는 효율적인 서버 데이터 핸들링

React Query React Query는 네트워크에서 받아온 데이터를 관리하기 위해 처리해야 하는 다양하고 번거로운 절차들을 대신 처리해주는 라이브러리입니다. React Query npm 다운로드 횟수 주간 다운로드 횟수가 백만 회를 넘어갈 정도로 인기가 많은 라이브러리인데, 서버 데이터에 대해 어떤 문제점이 있길래 이렇게나 많은 호응을 얻을...

취업과 이직에 실패하는 여러분께

개요 출처: https://www.hankyung.com/life/article/202007146223g 저는 얼마 전, IT 업계에 정식으로 몸을 담은지 5년 차가 되었습니다. 누군가가 말하길, IT 업종에서 1인분을 하기 시작할 때는 3년차이고 어느 정도 좀 한다는 취급을 듣는 시기는 5년차라고 하더라구요. 나름 노력은 하고 있지만 배우면 배울...

Novel AI 디테일하게 사용해보기

Novel AI란? Novel AI가 궁금하신 분들은 제 이전 글을 참고해주시기 바랍니다. 지난 게시글 이후 그 이후로 10,000 Anlas 만큼 더 충전해서 이용해보았습니다. 한화로 약 1만 5천원 정도 돼요. 2일 동안 약 10시간 정도 Novel AI 서비스를 사용해 보았습니다. 그래서 이젠 어느정도 사용법을 익힌 듯 하여 여기에 다시 작성합...

Novel AI 찍먹해본 후기

Novel AI Novel AI는 요즘 유행하는 텍스트 기반 이미지 생성 서비스입니다. Dall E와 다른 점은 실사처럼 그리는 것이 아닌, 만화나 애니메이션과 같은 화풍으로 일러스트를 생성해 준다는 점입니다. 회사 Slack에 최신 기술 동향을 공유하는 채널이 있는데 여기에 심심할 때마다 나오는 얘기 중 하나가 텍스트 기반 이미지 생성 인공지능에...

React Context

Context Context는 React에서 제공하는 기능 중 하나로, 유효범위 내부에 존재하는 컴포넌트들에서 데이터를 주고받는 방법 중 하나입니다. 사용 이유 기본적으로 React 공식 홈페이지에서는 컴포넌트들의 계층이 복잡해질 때 props가 아닌 다른 방식으로 데이터를 쉽게 주고 받을 수 있다고 홍보(?)하고 있습니다. 하위 컴포넌트에게 넘겨주...