CoStudo 프로젝트 2주차 주간 회고록 🙂
2022.09.19(월)
TIL 🧐
- 프로젝트 - 메인 페이지, 생성 페이지 컴포넌트 나누기
- 리액트 스터디 - Reconciliation
주절주절 😗
드뎌 내일부터 코드를 짜야한다..!
디자인이 생각보다 일찍 나왔고, 기획도 중간중간 하면서 더 짜기로 해서 오늘 메인페이지랑 생성 페이지 일부 컴포넌트를 나눴다.
이미 파크가 버튼이랑 아바타 컴포넌트를 만들어놔서 개수가 그렇게 많지는 않았다. 그래도 headless를 처음 짜보기도 하고 확장성을 고려해서 짜기로 해서 기존에 하던 거보다 시간이 오래걸릴거 같다.
크게 row(title, description, 아이콘 묶음), tabList, 에디터(라이브러리) / 슬라이더 / input, radio, textArea 이렇게 세부분으로 나눴다. 파크는 만들어놓은 컴포넌트를 완성하고 서버를 firebase로 변경하는 작업을 하기로 해서 햄디랑 제이미랑 셋이서 나눠서 하기로 했다.
슬라이더가 옵션을 얼마나 구현할거냐에 따라 걸릴 시간이 제일 다를듯 하다. 슬라이더 라이브러리를 오랫동안 써봐서 대충 어떤 식으로 동작하는지를 좀 알아서 해보겠다고 말할지 아니면 새로운걸 해볼지 고민이다. 슬라이더가 모바일도 고려하면 옵션을 진짜 많이 만들수 있는데 프로젝트 안에서 쓸 정도로 옵션을 추가해야할 지 얼추 라이브러리처럼 만들어야할지 모르겠다. 또 이번 주까지 구현을 목표로 잡았는데 라이브러리처럼 하려면 이번 주 안에 절대 못할 듯 하다..ㅎ 그리고 너무 오랜만에 플젝하는 거라 사실 좀 걱정이다 ^_ㅠ 오늘 제이미가 피곤해서 일찍 들어가 내일 오전에 얘기해서 나눠봐야 겠다.
프로젝트 내에 역할
파크가 한명씩 역할을 정해서 해보는게 어떻겠냐고 해서 얘기를 하다가 기획쪽을 맞게 됐다. 사실 가끔 기획쪽으로 갔어야 하나 싶은 생각이 들기도 해서 재밌을거 같은데 기획의 역할이 진짜 중요하다고 생각하는 편이라..ㅎ; 잘할지 좀 걱정이다ㅠ
아쉬워요 🙁
내일부터 11시에 스크럼이라 일찍 자려고 했는데 또 새벽이다. 🤪
잘했어요 🙂
오늘 토론 때 취소, 확인 버튼 두 개 나란히 형태의 컴포넌트가 자주 쓰인다고 생각해서 제안했는데 파크가 아직 한 군데 밖에 안쓰여서 활용성을 잚모르겠다고 했다.
그래서 아직 팝업을 설계하진 않았지만 팝업 같은 곳에서도 버튼이 이런 형태로 많이 쓰인다고 말했다. 그랬더니 파크가 그럼 그 때 필요하면 만들어보는게 좋을거 같다. 쓰일걸 예상하고 만드는건 추상적이다?? 라고 했다. 그래서 햄디한테도 의견을 물어보니 버튼 두개의 형태가 자주 쓰였던거도 맞는거 같은데 아직 하나밖에 없으니 후에 만들어보자는 의견도 동의한다고 했다. 그래서 그러자고 하고 넘어갔는데 이 과정이 오늘 좋았던 것 같다. 내 의견도 말하고, 상대의 의견도 듣고, 다른 사람의 의견도 듣고, 수용하는 토론 형식이 잘 된거 같달까 ㅇㅅㅇㅋㅋㅋ
2022.09.20(화)
TIL 🧐
- 리액트 스터디 - Strict Mode
- 프로젝트 - 폴더 구조, 컴포넌트 뜯어보기
주절주절 😗
리액트는 참 신기하다.
오늘 리액트 스터디를 하면서 비교 알고리즘이랑 strict mode를 공부하고 발표했다.
비교알고리즘을 공부하다보니 리액트가 참 고민을 많이 하는구나, 아이디어가 참 좋구나를 항상 느낀다.
부모컴포넌트 타입이 바뀌면 자식은 비교하지 않고, key를 이용하여 트리 구조 비교 시간을 O(n3)에서 O(n)으로 낮추었다. 또 자세히 공부는 못했지만 fiber를 도입해 비교 속도를 더 올린 방식도 대단하다고 느꼈다.
그런데 strict mode를 공부하면서 약간의 허점을 찾았다. strict mode 안에 strict mode를 또 넣으면 어떻게 될까 갑자기 궁금해졌다. 그래서 codesandbox로 구현을 해보니 아무 에러가 뜨지 않았다. 그럼 함수를 두번 실행시키니까 두번 감싸진 컴포넌트는 총 네번 실행되나했는데 그것도 아니였다..! 이럴 경우 strict mode를 제거하고 테스트 해보고 싶을 경우 사용하던 컴포넌트에서 strict mode를 제거했는데 더 상위에서 strict mode가 있는데 그걸 모르고 있다면(에러가 뜨지 않으니 모를 상황이 생길 수 있다.) 제대로 된 테스트를 못할수도 있을거 같다는 생각이 들었다.
의도적으로 놔둔걸까? 그런거라면 이유가 궁금하다.
프로젝트 뜯어보기
지난 주에 좀 봤었지만 파크가 짜놓은 부분을 보느라 시간이 좀 걸렸다. 플젝을 너무 오랜만에 하기도 하고, 파크의 의도를 파악하면서 읽다보니 생각보다 오래걸렸다ㅠ 보다보니 폴더 구조나 컨벤션에 궁금증이 생겨서 내일 물어봐야겠다. 빨리 시작해야 하는데 걱정이다ㅠ
아쉬워요 🙁
이번 주에 슬라이더를 구현해야하는데 내일 시작해도 다 만들까 걱정된다..
잘했어요 🙂
리액트 스터디에 잘 참여했고, strict mode에서 궁금증을 찾아낸게 좋았다.
2022.09.21(수)
TIL 🧐
- 프로젝트 - 슬라이드 라이브러리 공부 및 headless로 변경 고민
주절주절 😗
슬라이드 라이브러리
headless 이론과 예시 코드는 이해했는데 내가 새로운 컴포넌트를 만드려고 하니 좀 어려웠다ㅠ
라이브러리처럼 옵션에 따라 바꿔줘야하니 그거도 고민하느라 결국 오늘 코드를 못짰다ㅠ 조금이라도 짜볼까하다가 시간이 애매해서 결국 오늘 참고한 슬라이드 라이브러리를 정리했다.
slick은 회사에서 워낙 자주 썼어서 어떤 방식인지도 알고 옵션도 많아서 해당 라이브러리처럼 하려고 했는데 js로 width를 계산해서 css를 넣어줘야하고 클래스를 이용하는 방식이라 리액트와 headless에 적합하지 않은 방식인거 같았다. 그래서 MUI를 뒤지다가 MUI와 의존 라이브러리인 React Material UI Carousel를 뜯어봤다. slick보단 옵션이 적지만 보여지는 슬라이드 개수만큼 그룹지어 넘어가는 방식이라 계산하는 로직이 필요없어 좋아보였다. 그런데 슬라이드 되는 개수를 지정하지 못해서 3개씩 슬라이드가 보여진다고 설정하면 넘어가는 슬라이드도 3개씩 넘어가는 방식밖에 안되서 고민이다. 두 라이브러리 방식을 섞어서 더 고민해야하나 해당 옵션을 빼고 일단 빨리 만들어야할지 고민이다 흠..
PR과 discussion
플젝하며 팀원끼리 PR하는 방식은 안해봤어서 이번에 파크 코드를 보고 merge하는 걸 오늘 처음해봤다.
4명 모두 토론하며 의견도 잘 냈고, 팀원의 코드를 PR 핑계 삼아 읽어보게 되서 좋았다.
근데 오랜만에 남 코들르 보기도 했고, headless 로직을 이해하느라 시간이 생각보다 오래 걸렸다. 처음이라 다들 토론도 열심히 한거도 있겠지만 계속 이렇게 하면 시간을 생각보다 많이 잡아먹을거 같기도 하고.. 하다보면 빨라지려나..??
discussion도 이번에 처음 써봤는데 토론거리를 올리고 다른 조원들이 토론했던 내용도 볼 수 있어 좋았다. 기존 폴더와 컴포넌트들을 보다가 해당 컴포넌트가 headless 컴포넌트인지 styled 컴포넌트인지 헷갈려서 코드를 열어봐야하는 것이 불편하게 느껴져 파크에게 말했다. 파크도 그럼 두 컴포넌트를 폴더로 구분하는건 어떻냐고 해서 괜찮을거 같다고 했다. import할 때 경로에 보이니까 좋을거 같다는 생각이 들었다. 해당 내용을 discussion에 올렸는데 토론하고 폴더 구조를 조금 수정을 해보면 좋을 듯 하다.
아쉬워요 🙁
낮에 잠깐 잠들었는데 생각보다 너무 많이 잤다 🥲
잘했어요 🙂
PR과 discussion 사용해봤다!
2022.09.22(목)
TIL 🧐
- 프로젝트 - 슬라이드 컴포넌트 slideToShow, slideToScroll 옵션만 받아서 기본 동작 만들기
주절주절 😗
라이브러리화 어렵다..
슬라이드를 이전에 만들어본 적 있는데 그때는 하나에 한 슬라이드만 보이고 한 개씩 넘어가게 해당 플젝에만 쓸 수 있는 슬라이드였다. 그 때도 index 계산한다고 살짝 시간걸렸는데 이번에 옴션도 넣고 리액트에 맞게 ref 안쓰고 계산하려고 머리를 굴리는 중이다.. headless로도 만들어야 해서 스타일을 뺴고 페이지에 넣을 때 스타일 컴포넌트를 이용해서 넣어보는 중이다. 근데 어떤건 되고 어떤건 안된다.. style component 돌아가는 방식도 좀 공부해야할 거 같다ㅠㅠ
아쉬워요 🙁
예상했던대로 이번 주에 다 완성 못할듯 하다ㅠㅠ
잘했어요 🙂
없음없음
