짧은코딩

Nexus란?Sonatype에서 만든 저장소 관리자 프로젝트다양한 Format의 사설 저장소를 만들 수 있으며 메인 저장소를 Cache 할 수 있는 기능 또한 제공하여 저장소를 관리할 수 있도록 도와주는 관리자 도구Maven에서 주로 사용하지만 npm 저장소로도 이용이 가능회사 내부 라이브러리를 저장하기 위해서 사용npm i 혹은 yarn을 했을 때nexus에 있는 라이브러리라면 nexus 저장소에서 라이브러리를 다운로드하고nexus에 없는 라이브러리면 npm 저장소로 가서 라이브러리를 다운로드한다설치Docker로 Nexus 설치하기docker pull sonatype/nexus3도커로 nexus 이미지를 다운로드하였다.docker run -d -p 8081:8081 --name nexus sonatyp..

리액트 개발을 하던 도중 많은 데이터를 처리할 일이 생겼는데, 프로젝트의 성능이 많이 느려졌었다.다시 빠르게 동작 시키기 위해서 여러 방법을 찾았는데, 순환 참조가 그중에서 하나였다.여태까지 이런 문제가 있다는 것 자체를 몰랐기에 글로 적어 기록하려고 한다.순환 참조란?순환 참조(Circular Dependency)는 두 개 이상의 모듈이 서로를 직접적 또는 간접적으로 import 하는 상황을 말한다.function createCircularReference() { const objA = {}; const objB = {}; objA.reference = objB; objB.reference = objA;}이렇게 서로가 서로를 참조하면 문제가 발생한다. -문제점 코드가 예상대로 동작하지 않을 수 ..

저번 글에서 미니 PC(이하 우분투 서버)의 윈도우를 밀고 우분투를 설치했다.이번 글에서는 SSH로 접속하기 위해서 설정한 것들을 정리해보려고 한다.우선 준비물이 필요하다.와이파이 공유기다들 아이피 타임 공유기를 사용한다고 한다.하지만 나는 집에 있던 디링크 공유기를 사용했다공유기에서 고정 DHCP, 포트포워딩, DDNS 설정 등을 해야 하기 때문에 우선 우분투와 와이파이 공유기 연결이 필요하다.와이파이 연결sudo apt install network-managernmcli dev wifi list # 이 명령어를 입력하면 연결 가능한 와이파이 목록이 나옴nmcli dev wifi connect {SSID} password {PASSWORD}nmcli는 NetworkManager 패키지의 일부이다.고정 ..

평소 AWS, 구글 클라우드, 카카오 클라우드 등 클라우드 환경을 자주 사용했다.개인적으로 사용할 때는 주로 무료로 사용하기 위해서 인스턴스의 성능을 낮은 버전을 설치해야 했다. 또한 가끔 과금이 청구되어 당황했던 적이 있었다.그러던 도중 친구가 미니 PC를 알리에서 구매해서 온미레미스처럼 서버 구축을 한다 했다. 나도 이 말에 솔깃해서 미니 PC에 우분투를 설치하여 서버로 이용하기로 했다!미니 PC 사양https://ko.aliexpress.com/item/1005006141099278.html?spm=a2g0o.order_list.order_list_main.5.11a0140fPH238V&gatewayAdapt=glo2kor FIREBAT AK2 플러스 미니 PC, 인텔 N100, 듀얼 밴드, WiF..

상황{ name: "", list: [],}보이는 데이터가 많은 모달에서 input을 받아서 state에 저장하는 기능을 구현하고 있었다.사용자 리스트가 나오고, 체크를 하면 list 배열에 저장되는 방식이었다.사용자 리스트가 많은 경우, name을 input으로 입력받아 업데이트하는 방식에서 input delay가 발생해결법1. 컴포넌트 분리 //사용자 체크 기능(데이터가 많음) ...이렇게 name과 list 배열을 입력하는 것이 같은 컴포넌트에 있으면 컴포넌트가 계속 렌더링 되어 delay가 발생한다.  //사용자 체크 기능(데이터가 많음) ...따라서 이렇게 컴포넌트를 분리하고 setValue를..

회사에서 협업을 하는데 git에 대한 개념이 좀 부족하다고 느껴서 몰랐던 개념들에 정리하고자 이 글을 작성한다.git worktree와 stashgit worktree한 레포지토리에서 여러 개의 작업트리를 관리하기 위해 사용하는 명령어일반적으로 레포지토리 안에 있는 여러 브랜치를 각각 하나의 worktree라고 생각하면 된다.git stash자신이 한 브랜치에서 작업을 완료하지 않는 상태에서 다른 작업이 생기면, 완료되지 않은 코드를 commit 하는 것은 좋지 않다.따라서 stash를 활용해 마무리하지 않은 작업을 스택에 잠시 저장할 수 있다.git fetch와 pull우선 fetch와 pull의 가장 큰 차이는 병합(merge) 처리 여부이다.git fetchfetch는 원격 레포지토리에서 최신 co..

loading.tsx와 error.tsx loading.tsx, error.tsx 파일을 만들어두면 로딩 중에는 loading.tsx가 보이고, 에러가 발생하면 error.tsx가 보이게 할 수 있다. React의 Suspense와 error boundary를 이용하여 구현할 수 있다. Next의 Loading UI and Streaming 공식 문서 https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming Routing: Loading UI and Streaming | Next.js Built on top of Suspense, Loading UI allows you to create a fallback ..

next-auth(Auth.js) https://authjs.dev/ Auth.js Authentication for the Web. authjs.dev next-auth는 사실 이전 이름이고, 현재는 Auth.js로 바뀌었지만 이 글에선 next-auth라고 부르겠다. next-auth는 next와 호환이 되는 로그인 라이브러리이다. 또한 여러 sns 로그인도 지원해 준다. -간단한 사용법 공식 문서를 보고 next-auth 설치 app 폴더와 같은 위치에 auth.ts, middleware.ts 파일 생성 및 설정 middleware.ts next에서 middleware 기능을 제공해 줘서 로그인해야지만 접근 가능한 페이지를 쉽게 설정할 수 있음 이것은 페이지 렌더링보다 middleware.ts에 있..

useFormState와 useFormStatus 로그인이나 회원가입 같은 부분에서 Form을 통해 처리를 하곤 한다. 이때 아이디나 비밀번호가 비어있으면 에러 메시지를 알려줘야 한다. 그럴 때 useFormState, useFormStatus를 사용하면 편하다. 하지만 이 기능은 아직 실험적인 기능이긴 하다. useFormState https://react.dev/reference/react-dom/hooks/useFormState useFormState – React The library for web and native user interfaces react.dev -예시 코드 import { useFormState } from "react-dom"; async function increment(p..

useSelectedLayoutSegment useSelectedLayoutSegment는 ActiveLink를 만들 때 유용한 hooks이다. next에 내장되어 있는 기능이다. -useSelectedLayoutSegment import {useSelectedLayoutSegment} from "next/navigation"; export default function NavMenu() { const segment = useSelectedLayoutSegment(); console.log(segment); return ; } 만약 "compose/tweet" 주소에 있으면, segment는 "compose"가 나온다. 즉, useSelectedLayoutSegment는 최상위 부모 경로만 나온다. -u..