Sub DevLog

기술 블로그

[React] React 19버전 톫아보기

React

개요 안녕하세요 react 19 rc버전이 나온지도 어느덧 3달정도 흘렀네요. 처음엔 나왔을땐 회사일이 바빠 대강 쓱 훑고 넘어갔었는데 내용 정리 겸 19버전을 직접 사용해보며 해당 기능별로 정리해보았습니다. Form을 처리하는 방식의 변화 React 19에서는 다양한 기능들이 추가되었는데요 먼저 폼의 사용방식의 변화와 훅내부에서 비동기함수를 사...

Posted by Sub DevLog on July 29, 2024

[Web] Frontend에서의 성능측정

Web

이번 포스트에서는 웹사이트의 성능측정에 관해 알아보겠습니다. 성능 측정을 하는 이유? 사용자가 페이지를 방문한 후, 아무런 요청을 하지 않고 떠나는 비율을 이탈률이라고 합니다. 위 그래프를 보면 알 수 있듯이, 페이지 로딩속도에 대한 이탈률을 보면 로딩시간이 3초일 때 이탈률 32%,5초 90%,6초 106%이런식으로 계속 늘어납니다. 아무리 ...

Posted by Sub DevLog on December 29, 2022

[React] NextJS 13 변경점 (2)

NextJs

이전 게시물에 이어서 NextJs 13에서의 변경점에 대해서 살펴보죠 Server Compoent Server Component를 살펴보기에 앞서 react에서 렌더링되는 환경은 client와 server 이 두가지가 있습니다. client client는 사용자들의 요청을 받아 서버로 보내고 서버의 응답을 사용자와 상호작용할수 있는 부분. ...

Posted by Sub DevLog on November 4, 2022

[React] NextJS 13 변경점 (1)

NextJs

개요 안녕하세요 몇일전에 NextJS가 13버전이 발표가 되었습니다. 아직까진 정식 버전은 아니고 베타 버전이지만 NextJS에서 몇가지 부분이 바뀌어서 한번 적어보게되엇습니다. 먼저 NexJs 공식 문서상으로는 크게 5가지로 간추려집니다. app/Directory - layouts,react server components,streami...

Posted by Sub DevLog on November 3, 2022

[React] React 18버전에서의 바뀐점

React

개요 안녕하세요 어제부로 리액트 18버전이 정식 버전으로 바뀌었습니다.👏👏👏 사실 알파 버전으로 업데이트 된지는 꽤 되었지만 업데이트 사항 복기겸 작성해 보겠습니다. 동시성 react 18에서의 가장 중요한 추가 사항은 동시성입니다. 동시성은 그 자체로 기능이 아니며 React가 동시에 여러 버전의 UI를 준비할 수 있도록 해주는 배후 매커니즘입니...

Posted by Sub DevLog on March 30, 2022

[React] React에서의 성능개선에 관한 고찰

안녕하세요 이번 포스팅에선 React에서의 성능개선과 자주 사용되는 실수들에 대해서 정리해보는 시간을 가져보겠습니다. 1.Render 함수에서 인라인 함수 정의 피하기 React에서의 인라인 함수는 React가 비교하여 검사를 수행할 때 항상 prop값의 비교를 잘 하지 못합니다. 또한 화살표 함수는 jsx속성에서 사용되는 경우 각 렌더링에서 함수의...

Posted by Sub DevLog on March 26, 2022

[Crawling] Playwright를 이용한 크롤링_2

Crawling

이번 포스팅은 slack이란 채팅앱을 이용해서 크롤링을 연동해보려고 합니다. slack과 nodejs연동 먼저 코드를 살펴보기에 앞서 slack과 node js를 연결시켜보겠습니다. https://api.slack.com/에 들어가셔 먼저 app을 만들어주시기 바랍니다. 상단에 From scratch를 선택해줍니다. 워크스페이스와 App이름을 ...

Posted by Sub DevLog on September 26, 2021

[Crawling] Playwright를 이용한 크롤링_1

Crawling

안녕하세요 이직 후에 처음으로 쓰는 포스팅이네요 이것저것 준비할 것도 많고 정신이 없어서 한동안 블로그 글을 못쓰고 있었는데 오늘을 블로그 포스팅할 거리도 생긴김에 이렇게 포스팅해 봅니다^^ 포스팅을 2번 나눠서 올릴거라 이번 포스팅은 크롤링 보단 간단하게 headless브라우저를 어떻게 사용하는지만 알려드린다고 보시면 됩니다. 모두들 크롤링은 아실...

Posted by Sub DevLog on September 22, 2021

[WebGL] WebGL PipeLine

기초지식

최근 면접을 몇번 보며 여러가지 질문을 받아봤는데 그중에서 말문이 턱 막히게 되는 질문이 있었다. WebGL의 PipeLine에 대해서 설명해보란 질문이였는데 매번 3D 렌더링에 관련된 프로젝트를 진행 할떄마다 three.js란 라이브러리의 도움을 받아 초기 렌더링을 했었어서 내부 렌더링과정에선 신경쓰지 않고 넘어갔었었다. 결국 그 면접과정에서 질문의...

Posted by Sub DevLog on August 7, 2021

[React] React와 Redux

기초지식

들어가며… React프로젝트의 관계성이 깊어질수록 자식으로 넘겨주어야하는 props도 마찬가지로 점점 깊어집니다. 깊어지면 깊어질수록 state를 관리하기가 힘들어 내가 언제 어디서든 원하는 state를 사용할 수 있는 redux가 나왔다. Redux는 React에 종속된 라이브러리가 아닙니다.Js에서 State를 관리하기 위해 등장한 라이브러리입...

Posted by Sub DevLog on July 17, 2021

FEATURED TAGS
-Algorithm Javascript React -백준 -DFS 이벤트 -그리디 HeadlessBrowser NextJs
ABOUT ME

#Web #FrontEnd Still Learn