본문 바로가기

이것저것 스터디📚

 (107)
OSI 7계층 1. OSI(Open System Interconnection) 7계층이란? 국제 표준화 기구 (ISO)가 1984년에 발표한 것으로 컴퓨터 통신 구조의 모델과 앞으로 개발될 프로토콜의 표준적인 뼈대를 제공하기 위해 개발된 참조 모델이다. 쉽게 말해서 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것을 말한다. 2. OSI 7계층을 나눈 이유는? 통신이 일어나는 과정을 단계별로 파악하기 위함이다. 7단계 중 특정한 곳에 이상이 생기면 다른 단계의 장비 및 소프트웨어를 건들이지 않고도 이상이 생긴 단계만 고칠수 있기 때문이다. 3. OSI 7 계층에 대한 설명 * 데이터가 만들어지는 과정은 7, 6, 5계층을 통해서 만들어진다. 3.1 7계층 - 응용 계층(Application Layer) - 이 계층..
React 공식문서 -useCallback - useCallback은 리렌더링 사이에서 함수 정의를 캐시할 수 있게 해주는 React 훅이다. Parameters(매개변수) - fn : 캐시하려는 함수 값. 어떤 인자도 받을 수 있고 어떤 값이라도 반환할 수 있다. - dependencies : fn 코드 내에서 참조된 모든 반응형 값의 배열 Returns(반환 값) - 초기 렌더링에서 useCallback은 전달한 fn 함수를 반환한다. - 렌더링 중 : 마지멕 렌더링에서 이미 저장된 fn 함수 또는 렌더링 중에 전달했던 fn 함수 반환 * How is useCallback related to useMemo(useCallback과 useMemo는 무슨 관련이 있을까요?) - 공통점 : 자식 컴포넌트를 최적화하려고 할 때, 두 가지 모두 유용하다..
React 공식문서 -useMemo - useMemo는 리렌더링 사이의 계산 결과를 캐시할 수 있는 React 훅이다. Parameters(매개변수) - calculateValue : 캐시하려는 값을 계산하는 함수, 순수해야하며 인자를 받지 않고 반드시 어떤 타입이든 값을 반환해야 한다. React는 초기 렌더링 중에 함수를 호출하고, 이후 렌더링에서는 의존성이 이전 렌더링 이후 변경되지 않았다면 동일한 값을 반환한다. - dependencies : calculateValue 코드 내에서 참조되는 모든 반응형 값들의 목록. React는 Object.is 비교 알고리즘을 사용하여 각 의존성을 이전 값과 비교한다. Returns(반환값) - 초기 렌더링에서 useMemo는 인자 없이 calculateValue를 호출한 결과를 반환한다. - 이..
React 공식문서 -useState - useState는 컴포넌트에 state 변수를 추가할 수 있게 해주는 React 훅이다. Avoiding recreating the initial state(초기 state 다시 생성하지 않기) - useState의 매개변수에는 초기 state 값으로 설정할 값이 들어가고, 값은 모든 데이터 타입이 허용된다. - 초기 state 값으로 함수를 전달하면, 이는 초기화 함수로 취급되며 이 함수는 순수해야 하고 인자를 받지 않아야 하며 반드시 어떤 값을 반환해야 한다. - 즉, React는 컴포넌트를 초기화할 때 초기화 함수를 호출하고, 그 반환값을 초기 state로 저장한다. function TodoList() { const [todos, setTodos] = useState(createInitialTo..
DeepDive - 38장. 브라우저 렌더링 과정(HTTP) - 대부분의 프로그래밍 언어는 운영체제나 가상 머신 위에서 실행되지만, 웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. * 파싱 - 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 일련의 과정 - 파싱이 완료된 이후에는 파스 트리를 기반으로 중간 언어인 바이트 코드를 생성하고 실행한다. * 렌더링 - 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것. * 브라우저 렌더링 과정 1. 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링..
React 공식문서 -Reusing Logic with Custom Hooks(커스텀 훅으로 로직 재사용하기) Custom Hooks: Sharing logic between components(커스텀 훅: 컴포넌트간의 로직 공유) import { useState, useEffect } from 'react'; export default function StatusBar() { const [isOnline, setIsOnline] = useState(true); useEffect(() => { function handleOnline() { setIsOnline(true); } function handleOffline() { setIsOnline(false); } window.addEventListener('online', handleOnline); window.addEventListener('offline', h..
React 공식문서 -Removing Effect Dependencies(Effect 의존성 제거하기) - Effect를 작성하면 린터는 Effect의 의존성 목록에 Effect가 읽는 모든 반응형(예: props 및 state)을 포함했는지 확인한다. - 이때 불필요한 의존성으로 인해 Effect가 너무 자주 실행되거나 무한 루프를 생성할 수도 있다. To remove a dependency, prov that it's not a dependency(의존성을 제거하려면 의존성이 아님을 증명하세요) - Effect의 의존성을 "선택"할 수는 없다. - Effect의 코드에서 사용되는 모든 반응형 값은 의존성 목록에 선언되어야 한다. - 반응형 값에는 props와 컴포넌트 내부에서 직접 선언된 모든 변수 및 함수가 포함된다. - 만약 의존성을 제거하려면 해당 의존성이 의존성 배열에 추가될 필요가 없다는 것..
React 공식문서 -Separating Events from Effects(이벤트와 Effect 분리하기) - 이벤트 핸들러는 같은 상호 작용을 다시 수행할 때만 다시 실행된다. - 이벤트 핸들러와 달리 Effect는 prop 또는 state 변수와 같은 일부 값을 마지막 렌더링 때와 다른 값으로 읽게 되면 다시 동기화된다. - 이 챕터에서는 값에 대한 응답으로 다시 실행되는 Effect와 그렇지 않은 Effect의 혼합이 필요한 경우에 어떻게 이를 수행하는지 알아본다. Effects run whenever synchronization is needed(Effect는 동기화가 필요할 때마다 실행됩니다) - 이벤트 핸들러는 특정 상호 작용에 대한 처리를 할 때 사용한다. - Effect는 코드를 사용자가 수행한 특정 상호작용과는 무관하게, 코드가 실행되었을 때 실행되는 내용에 사용한다. Reactive va..

티스토리툴바