어떻게 적어야 가독성이 좋아질까 고민하며 새로운 방식으로 써보기위해 말투와 양식을 바꾸어보고있습니다.읽기 불편하시거나 피드백사항이 있으시다면 댓글이나 메일로 주시면 정말 감사합니다!갑자기 react-query와 Hooks를 쓰라고요..?일단 훅부터 해볼게요.. Hooks가 뭔데?함수형 컴포넌트에서 React 기능(state, lifecycle 등)을 쓰게 해주는 함수들이야.원래는 클래스 컴포넌트(class App extends React.Component)에서만 상태 관리하고 생명주기 쓸 수 있었는데,함수형 컴포넌트에서도 편하게 하라고 나온 게 Hooks야. 가장 중요한 기본 Hooks 3개이름설명비고useState값을 저장하고 바꾼다this.state 알지?useEffect값이 바뀌거나 처음 렌더링될 ..

Mac 사용중인 포트 번호 확인하기 및 포트 삭제사용중인 port 3000 확인하기 port 삭제하기누가 내 로컬 3000번 쓰고있냐Mac에서 포트 충돌? 직접 확인해보자Error: listen EADDRINUSE: address already in use :::3000 사용 중인 포트 번호 확인 명령어터미널에 아래 명령어를 사용하여 확인이 가능합니다.# 현재 열려있는 모든 포트 리스트 보기sudo lsof -PiTCP -sTCP:LISTEN# 특정 포트만 확인 (예: 3000번 포트)sudo lsof -i :PORTsudo lsof -i :3000예상 출력 예시 : COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAMEnod..

Spring Boot 성능 최적화[1] 성능 최적화의 개념과 원칙인터넷 강의보면서 내용 정리중에 있습니다.성능 최적화는 필수!1. 성능 최적화의 개념 및 필요성1. 성능 최적화의 개념성능 최적화란, 최소한의 자원으로 최대 성능을 발휘하는 것을 의미합니다. 이는 CPU, 메모리, 네트워크와 같은 시스템 자원을 효율적으로 활용하여 응답 시간을 줄이고 처리량을 증가시키는 데 초점을 맞춥니다.예를 들어, 도로의 신호체계를 최적화하면 더 많은 차량이 원활하게 이동할 수 있듯이, 애플리케이션도 자원을 효율적으로 관리하면 더 빠르고 안정적인 성능을 제공할 수 있습니다.2. 성능 지표응답 시간(Response Time): 애플리케이션이 요청을 처리하는 데 걸리는 시간처리량(Throughput): 서버 또는 애플리케이션..

React Fabric.js - 캔버스 전체 영역 이미지 저장 및 다운로드하기Fabric.js 캔버스 전체 영역 이미지 다운로드 (React.js)자꾸 보이는 영역만 썸네일 생성되고 이미지 다운로드돼서 작업하다 다른분들도 고생하실까싶어 작성해봄작업 기존방식최초엔 단순히 Fabric으로 생성된 canvas에 대해서 썸네일을 생성했었는데, 이걸 이용하다보니 현재 보이는 화면 기준으로만 썸네일이 뽑혀오는 현상이 발생했었습니다. (만약 현재 보이는 화면의 이미지만 캡쳐하고싶다면 아래 코드를 그대로 사용하셔도 됩니다)//예시. thumbnail 생성getThumbnailCanvas = () => { return canvas.toDataURL({ format: 'png' })} 전체영역으로 수정방식현재 보이는 화면..

도커, 컨테이너, 쿠버네티스트 이게 뭐지?우선 간단히 추가해보았습니다.아직 학습이 부족하여 공부하여 다시 작성할 예정입니다.컨테이너컨테이너는 서버(프로그램 소프트웨어가 실행되는 하드웨어)의 한 종류로서VM(Virtual Machine)과 같이 하나의 서버공간을 가상화 서버로 분리하여 여러 소프트웨어가 실행될 수 있게끔 지원해줍니다. 다만, VM의 경우에는 프로그램을 실행하고 업데이트 하는데 시간이 매우 오래 소요되는데,컨테이너의 경우에도 같은 방식이지만 VM에 비해 이 실행하고 업데이트를 하는 시간이 기존의 가상화 기술(VM 등)보다 가볍고 빠르기 때문입니다. 하나의 서버공간에 기존 VM의 경우 미리 공간을 분배하여 해당 공간에 SW를 배포하는 방식이라면컨테이너방식은 필요할때 공간할당하여 서버에 밀어넣어..

객체 구조 분해 할당으로 파라미터 다루기 (JavaScript Destructuring Assignment) ({a, b, ...others})구조 분해 할당이란?JavaScript에서 함수를 호출할 때 객체를 파라미터로 넘기면, 특정 값만 따로 변수로 받고 나머지는 그대로 유지하는 방법이 있는데이런 기법을 객체 구조 분해 할당(Object Destructuring Assignment) 이라고 합니다. 함수를 호출할 때 { key: value } 형태의 객체를 넘겨줄 경우, 함수 내부에서 필요한 값만 골라서 사용할 수 있도록 해주는 문법인데이렇게 하면 불필요한 코드 작성을 줄이고 가독성을 높일 수 있어 사용합니다. 기본 사용법(1) - 각 객체 모두 등록다음처럼 함수를 정의할 때, 객체에서 특정 키만 추..