Sub DevLog

기술 블로그

Nextjs 15에서의 변경점

MSW,Cypress

개요 안녕하세요 몇일전 Nextjs Conf에서 Nextjs 15가 공개되었는데요. 마침 저도 새로운 프로젝트를 진행하게 되어, 이 기회를 빌려 Next.js 15를 도입해 보려 합니다. 이번 글에서는 Next.js 15의 주요 변경 사항과 새롭게 도입된 기능을 소개하면서, 실무에서 어떻게 적용할 수 있을지 함께 알아보겠습니다. 1. React...

Posted by Sub DevLog on October 26, 2024

Cypress와 MSW 충돌 해결: Intercept 동작시키기

MSW,Cypress

개요 안녕하세요 이번 포스트에서는 msw와 cypress를 같이 사용하며 cypress의 intercept,waitfor등 api연동 작업이 안되는 문제에 관해 포스팅하겠습니다. 왜 안되는지에 대해 살펴보기에 앞서 두개의 라이브러리가 어떤식으로 동작하는지 알아보겠습니다. msw의 동작방식 MSW(Mock Service Worker)는 API 요청을...

Posted by Sub DevLog on August 31, 2024

[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

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

#Web #FrontEnd Still Learn