[React] useQuery — 서버 상태를 다루는 법 서버에서 가져온 데이터는 컴포넌트 안에서 다루는 값과 성격이 다릅니다. 로딩 중인지, 에러가 났는지, 캐시된 값을 그대로 써도 되는지, 언제 다시 가져와야 하는지까지 신경 쓸 게 많습니다. 이 문제를 매번 useState와 useEffect로 직접 짜다 보면 컴포넌트마다 비슷한 코드가 반복됩니다. TanStack Query(구 React Query)의 useQuery는 이 반복을 없애기 위한 훅입니다.🔄 01. 직접 구현하면 반복되는 것들function TodoList() { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(.. [React] 아키텍처 추상화 기능이 늘어날수록 컴포넌트 하나가 떠안는 역할도 늘어납니다. 상태 관리, 유효성 검사, API 호출, 렌더링이 한곳에 몰리기 시작하면 이후에 하나만 바꾸려 해도 전체를 다시 읽어야 하는 상황이 옵니다. 이럴 때 필요한 게 관심사 분리와 추상화입니다.🧱 01. 복잡함이 쌓이는 방식// 흔히 시작되는 모습function UserForm() { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [errors, setErrors] = useState({}); const [loading, setLoading] = useState(false); const handleSubmit = async () => {.. [React] 리렌더링 최적화 리액트 애플리케이션이 느려졌다는 이야기는 대부분 '너무 자주, 너무 많이 리렌더링되고 있다'는 뜻입니다. 브라우저 렌더링 성능을 이야기할 때 리액트 레벨에서 먼저 들여다볼 수 있는 부분이 바로 이 리렌더링입니다.🎯 01. 리액트는 언제 다시 그리는가state가 바뀌거나 props가 바뀌면 리렌더링이 일어납니다. 그런데 여기서 자주 놓치는 부분이 하나 있는데, 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 props가 그대로여도 기본적으로 같이 리렌더링된다는 점입니다. 🎯 02. React.memo — 컴포넌트 단위로 막기const ListItem = React.memo(function ListItem({ item }) { return {item.name};});props를 얕은 비교(shallow c.. [React] webworker 메인스레드 JavaScript는 기본적으로 싱글 스레드로 동작합니다. 무거운 연산이 실행되는 동안에는 화면도, 클릭 이벤트도 전부 멈춥니다. 이 문제를 다루는 방법 중 하나가 Web Worker입니다.⚙️ 01. 왜 화면이 멈추는가리스트를 몇 만 건 정렬하거나, 큰 JSON을 파싱하거나, 복잡한 계산을 반복하는 코드를 메인 스레드에서 실행하면, 그 연산이 끝날 때까지 브라우저는 렌더링도 사용자 입력 처리도 할 수 없습니다. 사용자 입장에서는 그냥 '멈춘 화면'입니다. ⚙️ 02. Web Worker란Web Worker는 메인 스레드와 별개의 백그라운드 스레드에서 JavaScript를 실행할 수 있게 해주는 브라우저 API입니다. 무거운 연산을 워커로 넘기면, 메인 스레드는 그동안에도 렌더링과 인터랙션을 계속 처리할.. [React] 웹소켓 실시간 데이터 실시간 시세, 채팅, 알림처럼 서버가 클라이언트에 먼저 데이터를 보내야 하는 상황이 있습니다. HTTP 요청-응답 구조로는 이런 흐름을 자연스럽게 표현하기 어렵습니다. 매번 클라이언트가 먼저 물어봐야(polling) 하니까요. 이럴 때 쓰는 게 WebSocket입니다.📡 01. HTTP와 무엇이 다른가HTTP는 요청 하나에 응답 하나, 그리고 연결이 끝납니다. 실시간성이 필요하면 짧은 주기로 계속 요청을 보내는 폴링으로 흉내 내야 하는데, 데이터가 없어도 계속 요청이 나가니 비효율적입니다.WebSocket은 처음 한 번 핸드셰이크(handshake)로 연결을 맺고 나면, 그 연결을 계속 열어둔 채로 서버와 클라이언트가 서로 원할 때 데이터를 보낼 수 있습니다. 서버가 먼저 보내는 것(push)도 가능해.. [GPU] NVIDIA MIG(Multi-Instance GPU)의 구조적 이해: Profile과 Config 01. MIG(Multi-Instance GPU)란?하나의 물리적 GPU를 최대 7개의 독립적인 GPU 인스턴스로 분할하여 사용할 수 있게 하는 기술입니다.기존의 시간 분할(Time-slicing) 방식이나 소프트웨어적인 가상화와 달리, MIG는 하드웨어 레벨에서 격리(Isolation)를 제공합니다. 즉, 분할된 각 인스턴스는 고유한 메모리, 캐시, Compute Core를 할당받습니다. 이로 인해 하나의 인스턴스에서 부하가 발생하더라도 다른 인스턴스의 성능에 영향을 주지 않는 것이 특징입니다. 02. 핵심 구성 요소MIG를 구성할 때 가장 혼동하기 쉬운 두 가지 개념이 Instance Profile과 GPU Config(Placement)인데,이를 '조각'과 '조합'의 관점에서 이해하면 명확합니다. .. [CSS] SCSS 문법 01. 중첩 (Nesting)HTML 구조처럼 CSS를 겹쳐서 작성할 수 있음/* SCSS */.navbar { width: 100%; padding: 1rem; ul { list-style: none; } li { display: inline-block; }} 02. 상위 선택자 참조 (&)중첩 안에서 부모 선택자를 지칭할 때 사용주로 가상 클래스(:hover)나 클래스 결합할 때 씀/* SCSS */.button { background: blue; /* .button:hover 와 동일 */ &:hover { background: darkblue; } /* .button.active 와 동일 */ &.active { background: red; }} 03.. [JS] 얕은 복사(Shallow Copy) vs 깊은 복사(Deep Copy) 얕은 복사(Shallow Copy)객체를 복사할 때 최상위 속성만 복사하고, 그 안에 또 다른 객체나 배열이 있으면 그 주소값만 복사'바로가기 아이콘'을 복사하는 것과 같다고 할 수 있습니다.아이콘을 복사해서 바탕화면에 두 개가 생겼지만, 두 아이콘 모두 결국 똑같은 원본 프로그램을 가리킵니다.하나를 통해 원본을 바꾸면 다른 바로가기에도 영향이 갑니다. 예시 코드 👀const original = { name: "peazh", age: 20, address: { city: "서울" }};// 스프레드 문법을 사용한 얕은 복사const shallowCopy = { ...original };// case 1.// 복사본의 최상위 속성 변경shallowCopy.name = 'pp';// 원본 객체.. [HTTP] HTTP 상태 코드 HTTP 상태 코드는 클라이언트(브라우저)가 서버에 무언가를 요청했을 때, 서버가 그 요청을 어떻게 처리했는지 알려주는 세 자리 숫자로 된 결과 이 코드를 통해 요청이 성공했는지, 실패했다면 왜 실패했는지(예: 페이지가 없어서, 권한이 없어서, 서버에 문제가 생겨서 등)를 알 수 있습니다. 상태 코드는 크게 5개의 그룹으로 나뉩니다.1xx: 정보 (Informational)요청을 받았으며, 처리 중이라는 의미 (거의 사용되지 않음)2xx: 성공 (Success)요청이 성공적으로 접수되고, 처리되었다는 의미200 OK : 요청이 성공적으로 처리202 Accepted : 요청을 받았지만 처리가 완료되지 않은 상태201 Created : 요청이 성공하여 새로운 리소스가 생성204 No Content : 요청은.. [JS] Axios(엑시오스) Axios(엑시오스)서버와 HTTP 통신을 하기 위해 가장 널리 사용되는 Promise 기반의 자바스크립트 라이브러리서버에 있는 데이터를 가져오거나(GET), 새로운 데이터를 전송(POST)하는 등 API를 호출할 때 사용하는 매우 편리한 도구💡 사용하는 이유자동 JSON 변환 : 서버에서 받은 JSON 데이터를 자동으로 자바스크립트 객체로 변환간편한 에러 처리 : 4xx, 5xx 같은 에러 응답을 받으면 바로 .catch()로 처리할 수 있음요청 취소 및 타임아웃 : 특정 시간 동안 응답이 없으면 요청을 자동으로 취소하는 타임아웃 설정이 쉬움인터셉터(Interceptors) : 모든 요청이나 응답을 가로채서 헤더에 인증 토큰을 추가하는 등 공통 로직을 쉽게 삽입할 수 있음편리한 사용 : 다른 HTTP.. [JS] Webpack(웹팩) Webpack(웹팩)보통 모듈 별로 개발을 하는데, 분리된 파일들을 브라우저에서 그대로 불러오면 네트워크 요청이 많아져 웹 페이지 로딩 속도가 느려짐.그걸 해결하기 위해서 여러 개로 나뉘어있는 자바스크립트, CSS, 이미지 등의 파일들을하나의 최적화된 파일로 합쳐주는 것을 '번들링(Bundeling)'이라고 하고이러한 번들링 작업을 자동화해주는 도구를 '모듈 번들러(Module Bundler)'라고 함 웹팩이 가장 대표적인 모듈 번들러, 최근에는 Vite, Parcel 등 많이 사용함 여행 갈 때 짐을 수십 개의 작은 가방에 나눠 담아 가지 않는 것처럼, 웹팩은 여러 파일들을 브라우저가 빠르고 쉽게 읽을 수 있도록 하나의 큰 덩어리로 묶어주는 역할 기존의 개발 방식 세 개의 모듈 모두 요청을 함 W.. [JS] NPM(Node Package Manager) / NVM(Node Version Manager) NPM(Node Package Manager)자바스크립트의 모듈을 쉽게 설치하고 관리할 수 있는 도구Node.js(자바스크립트 런타임 환경) 설치 시 자동으로 함께 설치됨🔗 npm 라이브러리 공유 NPM 프로젝트 구조 소개❏ package.json필수 파일로, 프로젝트에 대한 정보를 가지고 있음프로젝트에서 의존된 라이브러리 관리직접 생성할 수도 있고 npm init 명령어로 자동 생성할 수 있음 ❏ node_modules사용할 라이브러리들이 실제로 설치된 폴더git 등 형상 관리할 땐 제외 ❏ package-lock.json프로젝트에 설치된 모듈들의 의존성 트리를 기록이 파일을 참고하여 node_modules 디렉토리 안에 모듈을 다운받음 NPM 명령어▪︎ 새로운 프로젝트 생성npm init ▪.. 이전 1 2 3 4 ··· 15 다음
