2주차 2번째 과제: 메신저
📋 구현 내용
✔ Modal 컴포넌트 구현
💡 새로 알게 된 내용
✔ portal
- 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 해주는 역할.
- 주로 모달창을 만들 때 이용한다.
- 모달창은 바깥을 클릭했을 때 모달창이 꺼지도록 만들어야 한다. 기본사항
- React Modal이라는 React에서 제공하는 라이브러리가 있었다..!
✔ sass, scss
- css 문법과 동일하다.
- 자주 사용되는 스타일을 mixin으로 함수처럼 만들어 사용할 수 있다.
- sass-resources-loader 라는 웹팩을 이용하면 각 컴포넌트별로 scss파일을 관리하면서 글로벌 변수, mixin등을 사용할 수 있다.
✔ React.Children.toArray()
- map 함수를 사용하면 고유한 key값을 넣어줘야하는데 React.Children.toArray()로 감싸주면 알아서 key값을 지정해준다.
✔ css로 스크롤 하단에 고정하는 방법
- height 높이값 설정하기
- overflow-y: auto
- display:flex
- flex-direction:column-reverse
✔ tabindex
- tabindex 속성을 태그에 넣어주면 포커스 가능한 요소로 설정된다. 인덱스값으로는 정수를 지정할 수 있으며 값에 따라 tab키의 포커스 순서를 지정할 수 있다.
✨ 느낀점
✔ 이번 과제는 구현 내용만 글로 적혀있고 디자인 시안이 없었다. 그래서 어떻게 구현해야하는건지 잘 이해가 되지않았고, 팀원들과 피그마를 이용해 대충 윤곽을 잡은 뒤에야 시작할 수 있었다. 하지만 구현 내용도 조금 불친절하다고 느껴질만큼 세부사항이 나와있지않아 계속 팀원들과 의견을 나누며 진행해야했다. 실제로 이런식으로 구현 명세를 받아 작업을 해야한다면 시간도 많이 걸리고 완성도도 많이 떨어질 것 같다. 서로간의 의사소통을 위해서 구체적이고 상세한 설명이 얼마나 작업의 효율성을 높일 수 있는지, 그 중요성에 대해 깨달을 수 있었다.
✔ 모달창... 사다리타기로 각자 구현할 컴포넌트를 나눴는데 속으로 '모달창만 아니면 괜찮겠다'고 생각했더니 모달창이 걸렸다.ㅎㅎ 포탈 이용해서 하라는데 포탈이 뭔지도 몰라서 안하고싶었지만 하고나서 돌아보니 직접 찾아보면서 공부도 하고 배울 수 있는 좋은 시간이었다. 물론 모달창 붙들고 있느라 다른건 한 게 없다는게 문제... 만들어진 예제가 많아서 금방 만들 수 있을거라고 생각했는데 생각대로 잘 되지않아 오래걸렸다. 언제쯤 나도 뚝딱뚝딱 코드를 짤 수 있을까..
✔ 팀원들이 다 실력이 좋아서 처음에는 주눅들고 눈치보였는데 이제와 생각해보니 다른 팀원들의 실력이 좋기때문에 나의 부족함이 채워질 수 있어 다행인 것 같다. 팀원들에겐 민폐끼치는것 같아 미안하지만.. 최대한 피해가 덜 가도록 최선을 다하자!
기록하며 공부하기