Study (4) 썸네일형 리스트형 useSyncExternalStore로 외부 상태 안전하게 구독하기 주제 선정 이유 최근 이력서를 넣은 회사에서 사전과제를 진행했는데 처음 사용하는 기술이 있어 그에 대해 좀 더 공부하고자 포스팅을 했다.과제 내용은 상태관리 라이브러리를 구현해보는 것이었는데 이때 외부 store와 연결을 위해 useSyncExternalStore 라는 함수를 사용했다. 동시성 렌더링 (Concurrent Rendering) useSyncExternalStore를 이해하려면 먼저 Concurrent Rendering(동시성 렌더링) 개념을 이해할 필요가 있다.이 개념은 React 18에서 도입된 것으로 UI 렌더링 작업을 보다 유연하고 끊김 없이 처리해 앱의 성능과 사용자 경험(UX)을 개선하는 것을 목표로 한다. 예를 들어 입력창에 텍스트를 입력할 때 입력한 값을 실시간으로 화면에 렌더.. Sorting 알고리즘 코드를 짜는 과정에서 데이터를 일정한 기준에 맞춰 나열하는 '정렬(Sort)'은 가장 기초적이면서도 필수적인 개념이다.이번 기회에 다양한 정렬 알고리즘의 핵심 원리와 작동 방식을 공부해보고 각 알고리즘을 코드로 하나씩 직접 구현해 보았다.Big O 표기법알고리즘의 퍼포먼스 나타내는 표기법Big O 표기법은 시간 복잡도를 다룸시간 복잡도 : 알고리즘 실행 속도공간 복잡도 : 알고리즘을 수행할 때 필요한 공간 (리소스)데이터 입력 n(faster) O(1) (slower)이 글에서 다루는 정렬을 시간 복잡도 순으로 나열하면 아래와 같다.버블 정렬 – O(n²)선택 정렬 – O(n²)삽입 정렬 – O(n²) 퀵 정렬 – O(n log n)합병 정렬 – O(n log n)선택 정렬 (Selection sort.. Cypress로 테스트 코드 작성하기 ※ 이 글은 2019년도에 작성된 글을 기반으로 작성되었습니다. (원본참조) 내가 테스트 코드를 알게된 건 신입때였다. 그 당시 다니던 회사에는 개발을 완료하면 QA팀에서 검수를 하여 피드백을 받는 식으로 작업을 했었는데 QA팀에 일이 몰려 검수가 늦어지고 검수 중에 자잘한 피드백이 많이 발생해 마감일정이 미루어지는 일이 비일비재 했었다. 그래서 QA 검수 기간을 줄여보고자 여러 방안을 모색하던 중 테스트 코드란 것을 접하게 되었다.처음에는 jasmine과 karma를 사용하여 테스트 코드를 작성했는데 한 페이지에 대한 테스트 코드를 작성하려면 그 페이지에서 사용하는 모듈들을 전부 import해야하는 번거로움이 있었다.(지금 생각해보면 내가 하고 싶었던 것은 E2E 테스트이고 jasmine과 karma는.. 브라우저 렌더링 (Browser rendering) 브라우저 렌더링 이란웹 페이지의 리소스(HTML, CSS, Javascript)를 분석하여 시각적으로 표시되는 과정브라우저의 Rendering Engine과 Javascript Engine에서 실행Rendering Engine : 문서의 구조(HTML)와 스타일(CSS)을 분석하여 화면에 출력하는 역할Javascript Engine : 문서의 JS 코드를 분석하고 실행하는 역할 브라우저 렌더링 과정 브라우저 렌더링 과정을 간략히 표현하면 리소스 불러오기 -> 리소스 분석 (parsing) -> 화면 출력 으로 이루어져 있다. 1. 리소스 불러오기브라우저 렌더링 첫번째 단계는 해당 페이지의 리소스를 불러오는데서 시작한다.아래는 브라우저가 리소스를 받아오는 과정이다.브라우저 주소창에 URL을 입력되면 먼저 .. 이전 1 다음
