Yoonsang's Log

Concurrent Mode React 앱이 빠른 반응속도를 유지하고 사용자 장치 및 네트워크 속도에 적절하게 맞추는 기능 집합체 차단과 인터럽트 렌더링 Git과 같은 버전 관리 툴이 있기 전에는 브랜치라는 개념이 없어서 협업에 어려움이 있었음. React에서 업데이트 렌더링(새로운 DOM 노드 생성 및 컴포넌트 내 코드 실행)을 시작하면 이 작업은 방해받지 않는다. 즉, 렌더링을 차단할 수 있다. Concurrent Mode에서는 렌더링은 차단되지 않지만 인터럽트가 가능하다. 차단 필터링을 예로 들어, 목록 필터를 입력하고 모든 키를 누를 때마다 버벅거림이 있었다면 이를 debouce나 throttle 기법 등을 통해 해결할 수 있었지만 이들은 최적이 아니다. 버벅거리는 원리를 알아보면, 일단 렌더링이..

WEB 2022. 6. 2. 22:34

React를 사용하면서 Next.js에 대해 알게 되었다. Next.js를 사용하니 참 편했다. 페이지 라우팅을 페이지 폴더에 이름 맞춰서 넣기만 하면, 알잘딱깔센... (이럴 때 쓰는 게 맞나 ㅎㅎ) 뭐 SSR? 서버 사이드 렌더링? SEO? 검색 엔진 최적화? 잘 해준다고 하는데, 그게 뭐죠? 라고 물어봤을 때 대답할 자신이 없다. 그래서 오늘 확실하게 정리해보려 한다. SSR(Server Side Rendering) 서버에서 렌더링 준비하는 것을 허용하여 클라이언트에게 전체 웹페이지의 구성을 빠르게 전달할 수 있다. 그림을 보고 이해해보자. SSR 구조의 웹 페이지가 구성되어 있을 때, 클라이언트가 해당 웹 페이지에 들어가는 상황이라면, 서버는 HTML과 CSS을 파싱하여 HTML이 렌더링 될 수 ..

WEB 2022. 4. 24. 21:41

브라우저는 요즘 사람들이 가장 많이 사용하는 소프트웨어일 것이다. 대부분이 크롬과 같은 크로미엄 기반의 브라우저를 사용하고 있다. 빠른 속도를 만들어내지 못하고 모바일 생태계에서 살아남지 못한 인터넷 익스플로러의 시대가 끝나고 2012년 이후로 크롬의 시대가 왔다. 아래 그림은 StatCounter 브라우저 통계에 따른 2021.03 ~ 2022.03까지의 브라우저 점유율이다. 크롬이 약 65%로 대부분을 점유하고 있고, 그 뒤를 사파리가 약 19%정도 점유하고 있다. 그 뒤를 Firefox나 Edge가 3~4% 정도로 점유하고 있다. 인터넷 익스플로러가 저~ 아래에 있긴 하다. 오늘은 브라우저에 대해 알아보고 브라우저가 렌더링 되는 과정에 대해 포스팅하려 한다. 브라우저의 구성요소 우선 브라우저의 구성..

WEB 2022. 4. 14. 19:03

[React] 상태관리 라이브러리를 사용하지 않고 다른 색깔 찾기 게임 제작 Numble에서 열리는 2월 4일부터 2월 13일까지 10일간 게임을 만드는 챌린지에 참여했다. 지인들이 참여하는게 재밌어보이길래 참여했는데 하필 딱 2월 4일부터 다른 일정이 겹쳐서 시간이 많이 부족했다. 조금 급하게 개발한 감이 있지만 게임은 성공적으로 완성했고, 일단 무엇보다 재밌다.. 제작한 게임 링크 : https://selecolor.vercel.app Selecolor | Home Select a different color box. Very simple game! selecolor.vercel.app 아래에는 프로젝트 과정과 느낀점 및 개선할 점 등을 정리했다. 챌린지 소개 우선 챌린지에 대해 간단하게 소개하자면,..

WEB 2022. 2. 13. 22:05

Udemy에서 열리는 우테코 프론트엔드 강사님들께서 진행하시는 세션에 참여했다. 최근 여러 컨퍼런스들을 많이 들었지만 사실 가장 중요한 내 마음이 확실히 잡혀있지 않았는지 이번 세션이 많이 와닿았고 좋은 말이 많았다고 느낀 것 같다. 프론트엔드 개발자가 생각하는 고민들, 걱정되는 부분들에 많이 다루어주셨고 부담스럽게 느꼈던 부분들을 덜 수 있는 기회였고 학습 지향점을 찾을 수 있어 복잡했던 생각이 정리가 되는 세션이었다. 조금 더 흥미가 생기게 된 계기가 된 것 같아 알찬 시간이었고 머리속에서 떠나기 전에 꼭 글로 기록해놓고 싶은 소중한 이야기들이기 때문에 분명 다양한 측면에서 부딪히는 무언가 생긴다면 다시 이글로 돌아와 마음을 다잡을 수 있을 것이다. 아래에 도움이 되었던 내용들을 소감과 함께 리마인드..

WEB 2021. 12. 25. 15:24