[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 ▪.. 온프레미스(On-premise)와 클라우드(Cloud) 01. 온프레미스(On-premise) 01) 의미기업이 자체 데이터 센터나 서버실 구축하고, 필요한 모든 IT 인프라를 직접 구매하여 소유하고 운영하는 방식소유권 : 모든 장비와 데이터가 내 소유운영 주체 : 내가 직접 모든 것을 설치, 관리, 유지보수 해야 함02) 장점외부와 완전히 분리된 자체 전산망을 구축할 수 있어 보안에 매우 유리원하는 대로 자유롭게 커스터마이징 가능함03) 단점서버, 스토리지 등 고가의 장비를 직접 구매해야 해서 초기 투자 비용이 막대함전문 인력을 고용하여 관리해야 하며, 업그레이드나 확장이 어려워 유지보수에 부담이 있음 02. 클라우드(Cloud) 01) 의미 AWS, Google Cloud, Microsoft Azure 같은 클라우드 서비스 제공업체(CSP)가 구축해 둔 .. 이전 1 2 3 4 ··· 14 다음
