메가테라 FE 생존코스 12기 (11) 썸네일형 리스트형 [메가테라 FE 생존코스] 10주차 회고 3L 회고👍 Liked그동안 Page와 Component 사이의 역할 분담이 애매했었는데, 강의를 통해 각자의 역할분담에 대한 기준을 배울 수 있어서 앞으로 유용하게 사용할 것 같다.Page에서는 데이터 요청 로직, Component에서는 Store를 이용한 상태관리를 분담한다.물론 이는 정해진 것은 아니지만 이런 식으로 규칙을 잡아가는 것이 개발을 하면서 이해를 도울 수 있다고 생각한다.지난 주차때, 개발 설계시 정형화된 틀을 가지고 구현을 하다보니 이후에 나오는 작업도 그 틀에 맞도록 구현하면 되어 개발이 한층 더 쉽게 다가와서 좋았다.예를 들면, Page, Store, Component, Hook, Api, Route 이렇게 각자 역할에 따라 분리해서 해당 Page에서 필요한 것들을 틀에 맞게 추.. [메가테라 FE 생존코스] 9주차 회고 3L 회고👍 Liked쇼핑몰 프로젝트 강의를 들으면서 아샬님의 코딩 스타일을 배울 수 있어서 좋았다.Page -> Component -> Store -> Hook -> Api 이 순서대로 요구사항을 구현하니 패턴에 익숙해지고 나니 컴포넌트 재사용성도 높아지고 개발이 수월해져서 좋았다.일관된 코드를 작성할 수 있어서 좋았다.테스트 코드를 작성하니 컴포넌트를 수정할 때 자신감이 생겨서 좋았다.테스트 코드 작성 시 store 사용할 때, tsyringe를 사용할 때와 class 호출할 때 다르게 동작하는 것에 대해 배웠다.tsyringe를 사용하지 않으면 store를 관리할 수 없다.또한, 내 마음대로 다양한 테스트 코드를 작성해보면서 나만의 코드를 만들어 볼 수 있어서 좋았다.📘 LearnedStore .. [메가테라 FE 생존코스] 8주차 회고 3L 회고👍 Liked지난 주에 라우터 테스트를 배웠는데 이번 주에 직접 실습을 통해 테스트 코드를 추가 및 리팩토링 해볼 수 있어서 좋았다.지난 주 과제에서는 해당 라우터 경로일 때, 지정된 컴포넌트가 렌더링 되는지만 확인했더라면 이번 과제를 하면서 query-string 값으로 undefined 값이 전달되었을 때에 대한 라우트 테스트 코드도 추가하여 여러가지 상황에 대한 고려를 해줄 수 있었다.📘 LearnedPure CSS를 사용하면서 불편했던 점들에 대해 알게 되었고 이를 위한 해결책으로 CSS-In-JS가 등장했다는 것을 배웠다.CSS-In-JS를 사용하면 컴포넌트와 동일한 레벨에서 CSS를 관리하여 각 CSS는 지역변수로서 사용되어 개발의 유지보수성이 좋아진다.별도의 CSS 파일 없이 J.. [메가테라 FE 생존코스] 7주차 회고 3L 회고👍 Liked이제 푸드코트 키오스크 과제를 반복 숙달하니 혼자서 설명하면서도 구현을 잘 할 수 있다는 자신감이 생겼다.나중에 기업과제를 진행한다고 하더라도 푸드코트 과제를 떠올리면서 자신감을 얻을 수 있다.테스트 코드 작성에 대한 두려움이 사라졌고 컴포넌트 테스트 코드를 작성할 때 UI 보단 비즈니스 로직에 초점을 맞춰 테스트 코드를 작성하려고 노력하면서 스스로 성장하고 있다는 것을 발견하여 좋았다.📘 LearnedMSW 테스트를 잘못하고 있었다는 것을 배웠다.그동안 테스트 코드 내에서 jest.mock 함수를 호출하여 MSW 테스트 인줄 알고 해왔었는데, 그게 아니고 handlers에 테스트 하려는 API를 작성을 잘못하고 있었던 것을 바로 고칠 수 있었다.MSW 테스트를 작성하는 과정에서.. [Debug] usestore에 mock 데이터 사용하기 개요usestore-ts를 사용하여 상태관리를 해주고 있다.테스트 코드에서 상태값을 변경하여 화면에 변경된 값이 나타나는지 확인하려고 한다.처음에 describe 외부에서 상태값과 usestore mock을 생성해주었더니 컴포넌트에서 해당 상태값이 undefined로 나오는 문제가 있었다.이를 해결하기 위해 usestore mock을 describe 내부로 옮겨주었다.과연 이것이 해결방법인가? jest.mock에 대해서 먼저 알아보자.그런데, 테스트 코드에서 상태값은 변경하여도 화면에는 변경된 상태값이 나타나지 않는 문제가 발생했다.코드import { render, screen } from '@testing-library/react';import Orders from '.';import fixture f.. [메가테라 FE 생존코스] 6주차 회고 3L 회고👍 LikedRedux가 어떻게 구현되었는지 직접 눈으로 확인하고 머릿속으로 이해할 수 있어서 좋았다.지난 주에 테스트 코드를 작성을 열심히 해둬서 그런지 이제 테스트 코드 작성하는데 어려움을 있지만, 두려움은 없다.📘 Learned프로그래밍에서 관심사의 분리가 필요한 이유와 Flux 아키텍처를 사용하여 관심사의 분리를 하는 구조를 배웠다.Flux 아키텍처는 기존 MVC 패턴과 달리 단방향 데이터 흐름을 활용하여 데이터가 어떻게 흐르는지 이해하기 쉽다.View: Store에서 제공받은 데이터를 화면에 렌더링한다.Store: 데이터 및 상태를 담고있는 공간이다.Dispatcher: View에게서 전달받은 Action 객체로 특정 로직을 수행하여 Store에 접근하여 데이터 및 상태를 변경하는 .. [메가테라 FE 생존코스] 5주차 회고 3L 회고 👍 Liked 드디어 테스트 코드를 작성하는 강의를 수강해서 기대반 걱정반이지만 기분은 좋다. 단위테스트는 Jest, 컴포넌트 테스트는 React-Testing-Library, 네트워크 테스트는 MSW 각 상황별로 테스트 라이브러리를 배울 수 있어서 좋았다. 컴포넌트 테스트 라이브러리로 Storybook을 사용했었는데, 스토리북은 사용자가 직접 눈으로 보면서 해당 컴포넌트 조작 방법도 동작해보면서 사용할 때 편리한 것 같다. React-Testing-Library는 컴포넌트가 의도한 대로 작동하는지 테스트 하기위해 미리 테스트 코드를 작성해 둠으로써 추후에 유지보수성을 높이는 데 장점이 있어 두가지를 적절히 사용하면 좋을 것 같다. 그동안 QA를 진행하기 위해 직접 시나리오대로 진행했다면, 앞.. [메가테라 FE 생존코스] 4주차 회고 3L 회고 👍 Liked 이번주는 선거일이 수요일에 껴있어서 한주가 짧게 느껴져서 좋았다. 물론, 약속도 많아서 공부를 게을리한 것 사실이지만 선거일에 공부할 수 있어서 좋았다. 지난 주 데브노트를 작성하고 받은 피드백을 개선할 수 있어서 좋았다. 데브노트 작성 시 목차가 없으니 중구난방으로 글을 작성하여 가독성이 떨어지기도 하고 내 머릿속에 제대로 남지도 않았다. 이에 대한 피드백으로 자신만의 목차를 설정하여 글쓰기 연습을 해보는 것이 도움이 된다하여 기존에 작성했던 데브노트를 다시 확인하여 나만의 목차를 추가하여 수정했다. 목차는 정의 - 역사(배경) - 사용방법 - 인사이트 - 참조 순으로 정했고 목차를 정하니 개념에 대한 이해도 높아지고 다음에 다시 데브노트를 확인할 때 이해하는데 도움이 되어서 .. 이전 1 2 다음
