짧은코딩

useState의 동작 원리useState는 동기, 하지만 비동기처럼 동작원리state의 변경useState는 queue에 state 업데이트 쌓임(같은 값이 여러 개면 최적화 되어 사라질 수 있음)효율성을 위해 event Loop에서 state 업데이트 요청들을 batching으로 한번에 처리(16ms동안 변경된 상태 값들을 하나로 묶어 처리)useState는 const로 선언하기 때문에 불변성에 의 값을 변경 불가따라서 리렌더링이 발생하고 화면에 변경된 state가 보임 => 따라서 비동기처럼 동작하는 것 처럼 보임함수형 업데이트-문제점 코드const [count, setcount] = useState(0);setCount(count + 1);setCount(count + 1);//count는 1이 ..

제어 컴포넌트폼 데이터가 React 컴포넌트의 state에 의해 제어상태(state)와 입력 필드가 동기화-예시 코드function ControlledInput() { const [value, setValue] = useState(''); return ( setValue(e.target.value)} /> );}상태 변경 시 컴포넌트 리렌더링반응형 상태 관리비제어 컴포넌트DOM 자체에서 폼 데이터를 다룸ref를 사용해 DOM 요소에 직접 접근-예시 코드function UncontrolledInput() { const inputRef = useRef(null); const handleSubmit = () => { console.log(inputRef.current.val..

"기존에 폴더 구조를 짤 때는 명확한 기준을 잡지 않고 폴더 구조를 짰다. 기준이 없으면 매번 행동이 달라지게 된다."이 말에 굉장히 공감했다. 그렇기에 FSD 폴더 구조를 공부해 보고자 이 글을 작성한다.FSD의 구조FSD에서는 폴더 구조는 Layers, Slices, Segments로 3 depths를 사용한다.SlicesSlices로 나눈 것은 "도메인 주도 설계"이다.블로그라고 치면 post 안에 comment가 있는게 아닌가 싶지만, 최대한 분리하는 것이 좋다.Segmentsui는 화면담당model은 데이터 담당api는 서버로 부터 데이터 가져오는 담당Layers상위 폴더에서만 하위 폴더를 import 할 수 있다.app에서는 모든 폴더를 import 가능하다는 의미shared에서는 아무 폴더도..

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 ..