개요 프로젝트를 진행하다보면 하나의 Feature를 해결하기 위한 다양한 방법들을 마주할 때가 많아요. 예를 들어, 특정 Element를 복제하고 싶을 때 사용할 수 있는 API는 크게 createElement와 cloneNode가 있습니다. 둘 중 어떤걸 써도 문제의 해결은 가능하지만 가급적 좋은 길을 선택하고자 할 때, 어떤 API가 보다 좋은 ...
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에 최신 기술 동향을 공유하는 채널이 있는데 여기에 심심할 때마다 나오는 얘기 중 하나가 텍스트 기반 이미지 생성 인공지능에...