본문 바로가기

전체 글

 (138)
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, 자바스크립트, 이미지, 폰트 파일 등 렌더링..
2023.8.29일 기록 ✍️ 하루 시작 규칙적인 생활 목표 2일차! 어제부터 규칙적인 생활 습관을 시작했고, 가장 먼저 새벽 늦게까지 공부하던 습관을 버리고 일찍 자고 일찍 일어나는 습관을 가지려고 노력하고 있다. 물론 어제 하루였지만, 어쩌면 내가 가지고 있는 취업에 대한 걱정, 불안감과 부정적인 걱정들은 조금 줄어든 것 같다. 오늘도 학습 계획을 세우고 마스터즈 동료들과 공유하고 꾸준하게 성장하는 하루를 만들어야겠다. 오늘의 학습 목표 - 면접 후기 정리 - 세컨핸드 : 카테고리 모달 수정 - React : React 라우터를 활용한 SPA 다중 페이지 만들기 학습 - DeepDive - 38장. 브라우저의 렌더링 과정 + 브라우저 렌더링 과정 추가 느낀점 오늘은 본가로 이동하는 시간으로 많은 시간을 공부에 투자하지 못했다. ..
2023.8.24일 TIL useMemo()로 최적화 하기 // useMemo 사용 전 // App.js function App() { const [listTitle, setListTitle] = useState('My List'); const changeTitleHandler = useCallback(() => { setListTitle('New Title'); }, []); return ( Change List Title ); } export default App; import React from 'react'; import classes from './DemoList.module.css'; const DemoList = (props) => { const sortedList = props.items.sort((a,b) => a..
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..

티스토리툴바