1. 페이먼츠 모듈 미션
이번 미션은 지난 미션인 페이먼츠에서 구현해보았던 카드 정보 입력 및 검사 훅들과 모달 컴포넌트를 npm 으로 배포하는 것이었다.
1.1 PR 링크
페이먼츠 모듈 1단계 PR 링크: https://github.com/woowacourse/react-modules/pull/83
(시범 운영 중인 코드 리뷰 AI, 래빗이 리뷰를 너무 많이 달아서 코멘트 수가 98개나 되었다)
1.2. 회고
이번 페어 미션은 구현 3일 중 하루가 공휴일이었다. 그리고 5/1에 내가 약속이 있었기 때문에 페어에게 양해를 구하고 이틀 안에 미션을 구현하는 것을 목표로 삼았다.
그러나 미션 첫 날 우리는 코딩 없이 설계만 하게되었다.
서로 훅과 컴포넌트에 대한 생각과 분리, 설계 철학에 대한 이야기를 나누며 같은 방향을 보며 페어를 진행하고 싶었던 우리는 서로의 생각을 이해하고 설득하고 아이디어를 내는 데에 집중했다. 그러고나니 하루가 끝나있었다. (물론 오전 중엔 수업도 있었고 오후엔 서로 스터디 일정도 있었던 터라 시간이 부족하기도 했다)
우리는 이틀 안에 구현하기로 했으니 사실 그럼 코딩을 할 수 있는 시간은 하루남은 꼴이었다.
오늘 안에 다 끝내버리자! 각오하고 등교한 둘째날. 타임어택을 한다고 생각하니 오히려 도파민이 싹 도는 게 집중력이 극대화되는 기분이었다.
첫 날을 통으로 함께 생각을 맞추고 설계를 해보며 대화를 많이 하는 데에 쓴 만큼 막상 코딩에 들어가서는 페어와 혼란이나 갈등없이 빠르게 코드만을 구현할 수 있었다.
확실히 서로 미션을 이해하는 것도, 코드 스타일도, 철학도 다르기 때문에 페어를 할 땐 충분한 대화로 처음에 생각과 방향성을 맞추는 게 중요한 것 같다.
...
그러나 우리는 모달 컴포넌트 모듈이 모달 열림과 닫힘 핸들러도 지원하고자 했는데, 여기서 예상치 못한 난관을 겪었다.
우리의 목표는 사용자가 아래와 같이 사용할 수 있게되는 것이었다.
import { ModalComponent, useModal } from 'laireca-modal-components';
import './App.css';
function App() {
const { openModalHandler } = useModal();
const onClickHandler = () => {
openModalHandler();
};
return (
<>
<ModalComponent modalType="center" closeType="top" titleText="카드사 선택" {...optionalProps}>
{children}
</ModalComponent>
<div className="button-container">
<button className="click-me-button" onClick={onClickHandler}>
click me!!
</button>
</div>
</>
);
}
export default App;이를 위해 모달 컴포넌트 모듈에 openModalHandler함수와 closeModalHandler, isModalOpened 상태를 반환하는 useModal 이라는 훅도 존재하게 되었는데, 사용자는 간단하게 ModalComponent 하나만 작성하면 이 훅을 어디서 써도 모달이 열리도록 구현하였다.
사용자가 ModalComponent에 isModalOpened 상태를 넘기거나 따로 관리해주지 않아도 해당 훅을 쓰면 모달의 열고 닫음을 할 수 있게 구현하고 싶었던 우리는 상태를 어떻게 관리하고 전달하고 동일한 인스턴스로 유지해야하는지에 대해 고민하게 되었다.
그렇게 시도해보게된 방법은 contextAPI에 싱글톤(?) 패턴을 입혀보는 것이었는데, props drilling 도 없애고 모달 컴포넌트를 useModal 훅의 openModalHandler, closeModalHandler만 꺼내서 조작할 수 있게 되었다.
여기까지 작성했을 때 벌써 시간은 저녁 8시가 넘어있었다. 퇴실 시간은 11시...아직 훅 모듈은 구현 시작도 못했는데.........
하지만 우리는 할 수 있다!
점점 올라가는 도파민과 심박수를 느끼며 페어와 타임어택 구현에 돌입했고 결국 11시에 딱 맞춰서 배포할 수 있었다😊
npm 배포 시에 tsconfig 설정 때문에 우여곡절을 겪었던 크루들이 해결법을 공유해줘서 배포도 문제 없이 빠르게 할 수 있었다.😊😊
11시에 딱 완성하고 배포까지 성공한 뒤 페어와 후련하게 퇴근하는 그 기분이 잊히지 않는다 ㅎㅎ
config파일들이나 package.json 파일들은 평소에 꼼꼼히 들여다볼 생각을 못했던 파일들인데 학습해봐야할 것 같다.
.env 파일도 그렇고, 내 프로젝트에 존재하는 코드, 파일들은 모두 빠짐없이 설명할 수 있는 사람이 되어야겠다고 생각했다.
그리고 제출 후...
이런 식의 모달 컴포넌트를 작성하면서 많은 고민을 하고 학습해볼 수 있었기 때문에 좋은 시도였다고 생각하지만, 리팩토링 시점에서 다시 생각해보니 현재 구조의 명확한 한계점이 느껴졌다.
트레이드 오프 관점에서 리뷰어가 정리해준 현재 코드 구조의 문제점은
이점
- 하나만 작성하면, useModal 훅을 통해 손쉽게 모달의 열림과 닫힘을 제어할 수 있음
리스크
- React의 코드 구현 방식과 맞지 않음
- 모달을 여러 개 띄우는 UX 구현 어려움
인데, 확실히 얻는 이점에 비해 리스크가 크고 사용에 제한적이라는 생각이 들었다.
그래서 일단 1단계 리팩토링에선 isModalOpened 상태를 내보내고 이 상태 기반 조건부 렌더링을 사용자가 처리해주는 방향으로 수정하였지만 2단계 미션을 진행하면서 좀 더 개선점을 찾아볼 생각이다.
1.3. 학습한 점
- tsconfig 파일들
- dist 폴더에 index.d.ts가 안 생기는 문제
2. 스터디
2.1. 모던 리액트 딥다이브 스터디 (5/2)
스터디의 기존 교재였던 모던 리액트 딥다이브는 리액트의 내부 구현, 이론적인 내용을 주로 다루는데, 현재 당장 미션을 진행하며 리액트 감각을 익혀야하는 우리의 상황과 맞지 않고 방향이 흐트러진다는 의견이 많아 우선 리액트 공식 문서를 챕터 별로 읽어오면 모여서 토론하고 궁금점을 해소하며 공부하는 방향으로 학습 방법을 재설정하게 되었다.
그리고 읽어오기로 했던 페이지는 리액트 공식 문서의 UI 표현하기 챕터였다.
리액트 공식문서 UI 챕터 : https://ko.react.dev/learn/describing-the-ui
리액트의 map return jsx의 key는 꼭 지정되어야하며 index나 즉석 랜덤 생성 값 등을 지정하면 안된다는 것을 알게 되었다.
왜 Tree구조로 dom을 만들었을지도 생각해보았다.
그리고 렌더링 트리에 html 이 포함되지 않는다는 공식문서 문장에 대해서도 내가 오해를 했었다는 것을 알게되었다. 스터디원들 덕분에 스터디 시간에 이야기해보면서 의문점을 해소할 수 있었다.
return 문에 html 태그를 써도 어쨌든 바벨에서 자바스크립트 객체로 변환을 할 때는 createElement로 바뀔 수 있도록 type: “p” 이런식으로 작성된다는 것이었다.
그리고왜 하필 '트리'여야 하는가? UI 구조를 표현하는 데 트리 구조가 가장 적합한 모델이라고 단정할 수 있는가 에 대한 논제에 대해서도 토론해보았는데 나는 이에 대해서
DOM의 표현 방식에 따라 부모-자식 관계를 나타내기 쉬운 자료 구조를 선택했던 게 아닐까 생각했다.
HTML 문법도 부모 태그 안에 자식 태그 안에 자식 태그... 이런 식이고...
여러 태그들이 있다한들 우리가 보는 페이지는 하나의 DOM, 하나의 문서 객체이기 때문이다.
다양한 의견과 관점들이 나왔는데, 이 스터디에서는 이런 사소한 궁금증부터 리액트의 딥한 고민까지 크루들과 함께 의견을 나누고 공부할 수 있어서 즐겁다.
2.2. 블로그 회고 스터디 (5/2)
블로그 회고 스터디가 2시로 이번 주만 변경된 공지를 당일에서야 봐서 불참하게 되었다.
리액트 스터디가 매주 금요일 오후 2시에 해서 겹치게 되었기 때문이다...
저번 주 스터디 시간에도 말해주셨었다는데 당시에 들으면서 기억이 안 났나보다... 요즘 정신을 어디다 두고 사는 걸까?ㅋㅋ ㅠㅠ 역시 잠을 꾸준히 잘 자야한다고 느꼈다... 맨날 3-4시간 자다가 하루 10시간 잔다고 피로가 풀리진 않는 것 같다.
죄송합니다...
2.3. three.js (5/7)
2번째 three.js 스터디였다.
• Mesh란 무엇인가
• Geometry 종류 살펴보기 (Box, Sphere 등)
• Material 종류 기본 (MeshBasicMaterial, MeshStandardMaterial)
에 대해 공식 문서를 보고 학습하며 개인 과제를 해오고 스터디날 서로의 코드를 공유하며 설명해주는 방식으로 스터디를 진행했다.
내가 해간 간단한 과제이다. 이 코드를 구현해보면서 Mesh 와 hdr 렌더의 다양한 속성과 비동기 함수 호출 규칙, Material 종류들을 학습해볼 수 있었다.
나는 hdr 위주의 학습을 공유했는데, 역시 이번에도 다들 열심히 준비해오셔서 Mesh 와 카메라, 조명, Geometry에 대해 더 확실하게 공부할 수 있었다. 거의 강의였다...👍
이제 겨우 2주차인데도 다들 기본으로 해오자고한 과제보다 뭔가 더 덧붙여서 반짝반짝한 작업물들을 가져오는데, 의욕도 학습도 같이 주고 받을 수 있어서 너무 좋은 스터디인 것 같다.
무엇보다 너무 재밌다☺️ 이대로면 역시 우리 학습 끝에 같이 미니 프로젝트도...춘식이의 관찰일기 처럼........ㅎㅎㅎㅎㅎㅎㅎ
2.4. 코딩 테스트 스터디
이번 주는 별다른 공지가 없었어서 알아서 문제 두 문제만 풀고 깃허브에 올려놨다.
3. 학습 키워드 정리
- tsconfig
- package.json
- npm 모듈 배포
- contextAPI
- three.js
• Mesh
• Geometry 종류
• Material 종류 기본 - 리액트 key
+. 메모
크루가 공유해준 모던 자바스크립트 딥다이브 내용 정리 사이트
https://poiemaweb.com/
ㅋㅋ