📚금일 학습 내용
felog 프로젝트 마무리, useState란 무엇인가, 프로젝트 컨벤션 정의
🧪Cypress
데브코스 과제의 장점 중 하나를 뽑으라면, 요구사항을 맞추면 나머지는 내 마음대로 할 수 있다는 점이다. 물론 지난 번에 한 것은 과제가 아닌 스터디였지만, Jest를 한 번 사용해봤는데 생각보다 재미있었다! 설정 과정이 어려웠지만 그건 차근차근 문제를 해결하면서 많이 해결되었고, 그래서 그때 용기를 조금 얻었다.
그래서 이번에는 과제에 cypress를 도입해보고자 했다. 물론 엄청 대단한 걸 한다기보다는 그냥 기본 테스트를 위해서 설치한 느낌이 강했고 과제를 제출하고 오늘 몇 가지 설정을 추가해보고자 했다.
❗문제점
하지만 여러 문제점이 발생했는데, 일단 window.history.state를 가져오는 과정이 잘 되지 않았고, 그렇게 컴포넌트가 바뀔 때 바뀐 것을 감지하기 위해 오히려 태그들에 className을 추가해야하는 점이 발생했다. 여기서 고민이 되는 것이 굳이 테스트를 위해 불필요한 코드를 작성해도 되는가? 이다. 물론 내가 방법을 잘 몰라서 그럴 수도 있지만, 개발을 위한 테스트가 되어야하지 테스트를 위한 개발이 되면 안되니까..
일단 시간 관계상 더 진행하지 못했는데 일단은 테스트가 동작하도록 해보고 추후 고민해봐야겠다.
💡useState의 비동기 렌더링
리액트의 진심인 우리 팀원들 덕분에 오늘도 엄청 좋은 토론 주제를 경험할 수 있었다. 리액트에 진심인 우리 희진팀... 리액트의 깊이가 없는 나로써는 너무나도 즐겁다.
음...다시 한 20분정도 복기해봤는데 여전히 이해가 안간다 :( 나는 바보다!!!!!
오늘 나왔던 내용을 정리해보면 다음과 같다.
일단 레퍼런스는 다음과 같다.
벨로그 레퍼런스
인프런 레퍼런스
스택오버플로우 레퍼런스
리액트에서의 마이크로태스크 큐, Macro태스크 큐, 그리고 렌더링의 순서를 설명하겠습니다.
-
이벤트 루프와 태스크 큐:
- 이벤트 루프는 JavaScript 실행 환경에서 비동기 작업을 처리하는 메커니즘입니다.
- 태스크 큐는 이벤트 루프가 실행할 작업들이 대기하는 곳입니다.
-
마이크로태스크 큐:
- 마이크로태스크 큐는 마이크로태스크(작은 작업)들이 대기하는 공간으로, 마이크로태스크는 다음 프레임에 실행되어야 하는 작업입니다.
- Promise의
then또는catch콜백 함수가 여기에 속합니다. - 리액트에서는 주로 상태 업데이트 이후에 실행되어야 하는 작업들이 여기에 추가됩니다.
-
Macro태스크 큐:
- Macro태스크 큐는 Macro태스크(큰 작업)들이 대기하는 공간으로, 특정 조건이 충족되거나 일정한 시간이 지난 후에 실행되어야 하는 작업이 여기에 추가됩니다.
setTimeout,setInterval, 이벤트 핸들러 등이 여기에 속합니다.- 비교적 높은 우선순위를 가집니다.
-
컴포넌트 렌더링 순서:
- 리액트에서 컴포넌트의 렌더링은 상태(State)나 속성(Props)이 변경되면 발생합니다.
- 사용자의 이벤트(클릭, 입력 등)가 발생하면 이벤트 핸들러가 실행되고, 상태가 업데이트됩니다.
- 상태를 업데이트하면 리액트에서는 렌더링을 하고, 해당 작업은 마이크로태스크 큐에 추가됩니다.
- 마이크로태스크 큐의 작업이 실행되면, 가상 돔(Virtual DOM)이 업데이트되고 변경된 부분만 실제 돔에 반영됩니다.
-
비동기 작업과 렌더링의 상호작용:
- 비동기 작업(예:
setTimeout, AJAX 요청)은 Macro태스크 큐에 추가됩니다. - 현재 실행 중인 코드가 완료된 후, 이벤트 루프가 Macro태스크 큐의 작업을 실행하여 변경된 내용을 화면에 반영합니다.
- 비동기 작업(예:
리액트는 이벤트 루프와 태스크 큐를 활용하여 상태 업데이트와 렌더링을 효율적으로 관리하며, 마이크로태스크 큐와 Macro태스크 큐를 적절히 활용하여 비동기 작업을 조절합니다. 이를 통해 웹 애플리케이션의 성능을 최적화할 수 있습니다.
라고 하는데 여전히 잘 모르겠다............
💡프로젝트 컨벤션
화려하고 멋진 기술이 아닌 핵심 기능을 커뮤니케이션을 잘 하면서 완성하는 것을 목표로 한다.
우리 팀이 이번 프로젝트를 시작하면서 가진 목표이다. 우리 모두 화려함보다는 실속을 챙기고 커뮤니케이션이 가능한 사람들이라는 것을 어필하고자 이번 프로젝트를 준비하고 있다. 특히 여러 내용을 토론할 때 우리는 왜에 대해 집중하는 점이 매우 좋다.
우선 나는 어떤 코드, 라이브러리, 프레임워크를 사용할 때 왜 사용했는가?에 대해서 많이 집중하는 편인데 팀원들이 그런 부분에서 나와 생각이 같고 대부분 타당한 이유를 가진다면 모두 의견이 잘 맞는다.
특히 우리가 채용했던 초반에 빠른 세팅을 위한 Vite와 API의 캐싱기능이 있는 Tanstackquery, 불필요한 wrapping을 방지하기 위한 tailwind 등 다 이유가 있다.
그리고... 부족하지만 내가 팀 회의 진행을 이끌어가는데 잘 따라와주셔서 너무 감사한 마음이 크다. 진행을 하다보면 좋은 의견임에도 여러 이유 때문에 반대를 하거나 흐름을 끊어야 하는 일이 발생하는데, 너무 아쉽고 마음이 아프지만... 다행히도 팀원분들이 잘 이해를 해주셔서 다행인 것 같다.
📖소회
오늘의 소회는 1줄로 정리한다. 멋진 팀원들과 프로젝트 잘 진행해보기🤜
TIL 작성 소요시간 약 35분🔥🔥🔥
비공개 이슈로 재업로드
