profile
웹 개발을 공부하고 있는 윤석주입니다.
태그 목록
전체보기 (36)React(11)JavaScript(11)자바스크립트(11)js(9)리액트(8)프론트엔드(8)frontend(7)hooks(6)React Hooks(5)프로세스(5)react hook(4)OS(4)네트워크(4)컴퓨터 네트워크(4)front end(4)hook(4)Operating System(3)운영체제(3)useState(3)http(3)process(3)리액트 훅(3)실행 컨텍스트(2)비동기(2)execution context(2)cpu(2)CPU 스케줄링(2)DNS(2)useEffect(2)https(2)Functional Component(2)임계구역(2)프로세스 라이프 사이클(2)DOM(2)동기화(2)다단계 큐(2)Class Component(2)process life cycle(2)web(1)component(1)res(1)3 Way-Handshake(1)상호 배제(1)Render Tree(1)proto(1)promise(1)protocol stack(1)import(1)hyper text markup language(1)Semaphore(1)동기(1)web developer(1)쓰레드(1)로드밸런서(1)link(1)property attribute(1)GET(1)POST(1)이벤트루프(1)4-way Handshake(1)Error Boundaries(1)리액트 리스트(1)cpu스케줄링(1)Restful(1)브라우저 렌더링(1)리스트(1)시분할(1)PCB(1)Context Switching(1)문맥교환(1)실시간 채팅(1)single page application(1)Thread(1)REST(1)개발(1)browser(1)테스크 큐(1)Request(1)Response(1)공유자원(1)프로미스(1)react16(1)프론트앤드(1)리액트 성능 최적화(1)React.lazy(1)대칭키(1)웹개발(1)함수형 프로그래밍(1)객체(1)통신(1)memoization(1)메모이제이션(1)브라우저(1)react error handling(1)XMLHTTPRequest(1)url(1)ws protocol(1)대기 큐(1)스케줄링(1)lexical environment(1)프로토타입(1)프로세스 동기화(1)Prototype(1)await(1)Process Synchronization(1)ajax(1)event loop(1)교착 상태(1)HTTP 프로토콜(1)세마포(1)rules of hooks(1)(1)HTTP message(1)async(1)웹 통신(1)react error(1)성능 최적화(1)리액트 메모(1)고차함수(1)Higher-order Function(1)tcp(1)webpack(1)socket(1)리액트 에러(1)콜백함수(1)내부 슬롯(1)front(1)실행 컨텍스트 스택(1)리액트 컴포넌트(1)Effect(1)ready큐(1)functional programming(1)promise.resolve(1)DNS Round Robin(1)REST API(1)json(1)컴퓨터네트워크(1)프로세스 상태(1)WS(1)react bundle(1)(1)href(1)리액트 기초(1)execution context stack(1)Load balancing(1)key(1)socket.io(1)Dead Lock(1)new(1)State(1)this(1)self(1)axios(1)monitor(1)Process Control Block(1)자바스크립트 this(1)round robin(1)html(1)객체 생성(1)useCallback(1)프로퍼티 어트리뷰트(1)promise.race(1)비동기 프로그래밍(1)렉시컬 환경(1)useLayoutEffect(1)렌더링(1)introducing react hook(1)생성자 함수(1)critial section(1)프로세스 제어 블록(1)cs스터디(1)promise.reject(1)web page(1)http method(1)re-render(1)Bundling(1)다단계 피드백 큐(1)클래스 컴포넌트(1)Fetch(1)cpu시분할(1)spa(1)교착상태(1)HoC(1)code splitting(1)채팅프로그램(1)render(1)fallback page(1)bundle(1)react.js(1)모니터(1)CSSOM(1)req(1)babel(1)rendering(1)에러 바운더리(1)로드밸런싱(1)리졸버(1)선언적 프로그래밍(1)currying(1)어플리케이션(1)key attribute(1)리액트 훅스(1)synchronization(1)CA(1)내부 메서드(1)이벤트 루프(1)FE(1)closure(1)higher-order-component(1)load balance(1)websocket(1)wss(1)훅스(1)채팅(1)memo(1)Suspense(1)자바스크립트 프로미스(1)promise.all(1)생성자(1)task queue(1)react-suspense(1)html5(1)React HOC(1)리액트 입문(1)tag(1)React.memo(1)선언형(1)cpu 수행단위(1)fp(1)함수형(1)object(1)비대칭키(1)실시간(1)

useCallback Hooks

리액트 성능 최적화와 관련된 내용을 살펴볼때마다 useMemo()와 달리 제대로 이해되지 않는 부분이 많았습니다. 이와 관련하여 알게된 내용을 정리합니다.일반적으로 useMemo()와 useCallback()은 다음과 같은 방식으로 이해됩니다.useMemo() - 복잡

2022년 6월 6일
·
2개의 댓글

Rules of Hooks

Hooks는 자바스크립트 함수지만 두 가지 규칙을 지키며 사용해야 합니다. 이런 규칙은 linter plugin을 통해 자동으로 적용할 수 있습니다. Only Call Hooks at the Top Level Hooks를 루프 내부, 조건(condition), 또는 중

2022년 5월 27일
·
0개의 댓글

Using the Effect Hook

Hooks는 Class없이 상태를 관리할 수 있도록 도와준다.Effect hooks는 함수형 컴포넌트 내부에서 side effect를 실행하도록 도와줍니다.대표적인 "side effect"의 예시로 Data fetching, setting up a subscripti

2022년 5월 24일
·
0개의 댓글

Thread

"프로세스 내부에 CPU 수행 단위가 여러 개 있는 경우 CPU 수행 단위를 쓰레드라고 부른다." 쓰레드, 경량 프로세스라고 불리는 개념은 프로세스에 비해 다소 난해합니다. 그도 그럴것이 쓰레드는 프로세스보다 좀 더 나중에 기술이 발전되며 등장한 개념이기 때문입니다.

2022년 5월 17일
·
0개의 댓글

Lists and Keys

먼저 자바스크립트로 리스트를 다루는 방법을 살펴봅시다.map함수에 익숙하신 분들은 위의 doubled가 2, 4, 6, 8, 10인 것을 알 수 있습니다.리액트에서 리스트를 다룰때도 위와 비슷한 방식을 사용합니다.리액트에선 curly brace({})를 사용하여 JSX

2022년 5월 17일
·
0개의 댓글
post-thumbnail

HTML

HTML에 대한 정리

2022년 4월 22일
·
1개의 댓글

Ajax와 JSON

Ajax는 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작합니다.

2022년 4월 18일
·
0개의 댓글
post-thumbnail

Websocket과 socket.io

websocket은 HTML5 표준 기술로, 서버와 클라이언트 간 connection을 유지하며 "패킷" 형태로 양방향 통신, 데이터 전송이 가능하도록 하는 기술입니다.웹 소켓은 다음과 같은 특징을 갖고 있습니다.통산적인 HTTP 통신이 요청에 대한 응답의 단방향 통신

2022년 4월 14일
·
0개의 댓글
post-thumbnail

함수형 프로그래밍

"객체지향은 가동부를 캡슐화하여 코드의 이해를 돕는다. > 함수형 프로그래밍은 가동부를 최소화하여 코드의 이해를 돕는다." > - 마이클 페더스, 트위터에 쓴 글에서 개발자는 본능적으로 확장성 좋고 깔끔한 애플리케이션 아키텍처를 구축하고 싶어합니다. 오늘날의 웹은 비

2022년 4월 10일
·
0개의 댓글
post-thumbnail

Promise

자바스크립트는 비동기 처리를 위한 패턴으로 콜백 함수를 사용합니다. 하지만 콜백 함수는 비동기 처리 중 발생한 에러의 처리가 곤란하며, 여러 개의 비동기 처리를 한번에 처리하기 어렵고 콜백 헬이 발생합니다.ES6에서 등장한 프로미스 패턴은 이러한 단점을 보완하며 비동기

2022년 4월 5일
·
0개의 댓글

Rest API

REST(REpresentational State Transfer)는 HTTP/1.0과 1.1의 스펙 작성에 참여했고 아파치 HTTP 서버 프로젝트의 공동 설립자인 로이 필딩의 2000년 논문에서 처음 소개된 개념입니다. 발표 당시 HTTP를 제대로 사용하지 못하고 있

2022년 4월 2일
·
0개의 댓글

Hooks at a Glance

Hooks는 하위 호환성을 갖고 있습니다. 이번 포스팅에선 우리가 배워볼 hooks의 전반적인 개요를 살펴보겠습니다. 다음 포스팅부터 각각에 대해 자세히 알아볼 것입니다. State Hook 아래 예시는 counter를 렌더링합니다. 버튼을 클릭하면 값을 올려주죠.

2022년 3월 27일
·
0개의 댓글

Introducing React Hooks

React 16.8부터 도입된 hooks는 state를 비롯한 여러 리액트의 특징을 class없이 사용할 수 있도록 도와줍니다. 이번 시간에는 리액트팀이 왜 hools를 도입했고 어떤 도움을 주는지 살펴보겠습니다.hooks를 시작하기 전, 먼저 살펴볼 특징을 알아보겠습

2022년 3월 23일
·
0개의 댓글
post-thumbnail

Error Boundaries

과거에는, 컴포넌트 내부에서 발생한 자바스크립트 에러가 리액트의 internal 상태를 오염시키고 다음 렌더링에서 암호화된 에러를 방출 (emit cryptic error)했습니다. 이런 에러는 언제나 application code이전 단계의 문제로 발생했지만, 리액트

2022년 3월 21일
·
0개의 댓글

Code-Splitting

Bundling 대부분의 리액트 어플리케이션은 webpack등의 도구를 이용해 번들링을 진행합니다. 번들링이란 어플리케이션 파일 사이의 의존성을 추적하고 합치며 하나의 "번들"이라고 불리는 파일로 만드는 과정을 말합니다. 번들은 웹페이지에 포함되어 전체 어플리케이션을

2022년 3월 15일
·
0개의 댓글
post-thumbnail

브라우저의 렌더링 과정

이번시간에는 브라우저가 서버와 어떻게 통신을 주고받으며 화면을 표시해주는지 알아보겠습니다.브라우저의 핵심 기능은 필요한 리소스(HTML, CSS, javascript 등)을 서버에 요청하고, 서버로부터 응답 받아 브라우저에 시각적으로 렌더링 하는 것입니다. 서버에서 필

2022년 3월 11일
·
2개의 댓글

HOC Patterns

HOC(Higher Order Component)패턴은 리액트에서 같은 컴포넌트 로직을 사용하기 위해 사용되는 기술입니다. 리액트를 다루면 정말 자주 보이는 패턴이죠. 이번시간에는 HOC가 어떤식으로 동작하는지 예시를 통해 알아보겠습니다. 여기 두 개의 컴포넌트가 있

2022년 2월 20일
·
1개의 댓글
post-thumbnail

리액트의 발상

리액트는 프론트엔드 진영에서 가장 많이 사용되는 라이브러리입니다. 페이스북에서 만들어진 리액트는 국내/외 유수의 기업들에서 view를 담당하는 라이브러리로서 사용되고 있습니다. 리액트가 이렇게 널리 사용되는 이유가 무엇일까요? 왜 여러 기업들이 리액트를 프론트엔드 기술

2021년 12월 26일
·
0개의 댓글
post-thumbnail

교착상태

교착상태란 2개 이상의 프로세스가 다른 프로세스의 작업이 끝나기를 기다리며 더 이상 작업을 진행할 수 없는 상태를 말합니다. 교착상태는 아사현상과 비슷하지만 잘못된 정책으로 인해 프로세스의 작업이 지연되는 아사현상과 달리 여러 프로세스가 작업하는 환경에서 자연스럽게 발

2021년 11월 1일
·
0개의 댓글

프로세스 동기화

프로세스들은 작업을 진행하며 서로 데이터를 주고 받아야 하는 경우가 생깁니다. 프로세스끼리 통신을 하는 경우 누가 먼저 작업할지, 언제 작업이 끝날지 등을 서로 알려주어야 하는데 이를 "동기화"라고 합니다. 프로세스 간 통신 프로세스는 시스템 내에서 독립적으로 실행되기

2021년 10월 30일
·
1개의 댓글