1. 스크롤 위치기억 (feat. 화면 이동방식 변경 끝!)
화면 이동방식을 변경하는 작업이 드디어 끝이 났다. file changed가 126개였다. 기간은 일주일정도 소요되었다. 지금와서 돌아보면 분리해서 작업해야 하는게 맞았을 것 같지만 화면이동방식 변경과 함께 화면 스크롤 구조도 변경하고 디렉토리 구조와 변수명도 함께 정리했다. 작업을 하다보면 분기처리를 해야될 지점을 놓치고 후루룩 해버리게 된다. 코드 리뷰나 관리측면에서 분리해서 작업하는게 맞는데, 연습이 더 필요할 것 같다.
이번에 화면의 스크롤 구조를 변경하면서 기존에 스크롤 위치를 기억하고 복원해주던 커스텀 훅이 제대로 동작하지 않게 되어 다시 만들었다. 이 글을 가장 많이 참고하면서 훅을 다시 만드는데 성공했다.
React-Router에 scroll restoration 적용하기
이번에 프로젝트를 진행하며 만들어본 약간 임시 방편일 수 있는 scroll restoration 기능을 글로 남겨봅니다. 이번 프로젝트에서 글 리스트가 있고, 리스트 중 하나를 클릭하면 글 페이지로 넘어가
godsenal.com
여러 검색을 하다보니 요즘 브라우저에서는 기본적으로 제공해주는 기능이 있다고 한다. 지금 내가 만드는 구조는 window 자체의 scroll이 아니라 Container 안의 일부가 scroll 되는 형식이어서 그런지 그 기능이 적용되는 범위가 아닌가 싶다. history의 state에 scroll 위치를 담고있다는 의미인가 싶기도 하고. 더 들여다 봐야겠다.
Browsers are starting to handle scroll restoration with history.pushState on their own in the same manner they handle it with normal browser navigation. It already works in chrome and it’s really great.
* 출처: https://v5.reactrouter.com/web/guides/scroll-restoration
2. 포토부스 side-p
이번주에는 그동안 워크샵 준비한다, 일한다 하면서 미뤄둔 포토부스 작업을 본격적으로 시작했다. 어려운 점은 사진 촬영과 인쇄, 두가지였다.
- 사진 촬영
카메라를 켜는 것까지는 어찌저찌 했는데 촬영부터가 복잡해서 일단 기한을 맞춰야 하니 라이브러리를 사용했다. react-webcam이라는 라이브러리였는데 덕분에 촬영도 금방 할 수 있었다.
- 인쇄
그 다음 넘어야 할 산은 예상치 못하게 "인쇄"였다. 그냥 window.print()만 하면 될걸로 생각했다. 그런데 만들면서 보니 1)화면의 특정 영역을 2)꽉차게 인쇄해야 했다. 먼저 react-to-print라는 라이브러리를 사용해보았다가, "꽉차게" 인쇄해야 한다는 점에서 다시 라이브러리가 아닌 window.print() | @media print{} | @page{} 를 사용해서 시도하고 있다. 일단 꽉차게는 했지만 조금 넘쳐서 2쪽이 되고, 사진을 인쇄하는 그 프린터기의 인쇄용지 사이즈는 또 특이하니 기기로 테스트를 해봐야 해서 마음이 조급하다.
3. 썬데이 모각글 나홀로 회고
오늘은 썬데이 모각글 4회차였다. 이제 마지막 한회차를 남겨두고 있다. 막바지가 되었는데 갑자기 어젯밤에는 후회스러운 생각이 마구 들었다. 슬랙 채널에 물장구 좀 칠걸. 멤버분들 글도 한번씩 코멘트 하면서 공유도 하고, 외부의 좋은 글도 올리고, 나도 제때제때 글 완성해서 공유할걸. 이런 여러가지 생각이 들어 잠이 잘 오지 않았다. 나는 "모각글"을 하는 시간만 정기적으로 가져도 충분할거라 생각했다. 그런데 지나고 보니 멤버분들께 모티베이션을 드리려 노력을 하는 것이 곧 나 스스로에게도 모티베이션을 주는 거였을 거라는 생각이 들었다.
부끄럽다. 잘 리딩할거라 자부하고 시작했는데 이런 후회들이 들어서. 오늘 모임에서는 내 머리속으로도 다 정리되지 않은 내용을 질문하려다가 장황하게 늘어놓기도 해서 더 부끄러웠다. 다음에 또 어떤 모임을 리딩하게 된다면, 나 스스로를 리드한다는 생각으로 조금 더 체계적으로 움직일 것이다. 좀 더 분발하자.😟
4. ETC
- Next.js 공부
팀장님께 코드리뷰를 요청드리고 나면 잠깐 시간이 뜰것같다고 말씀드리니, 곧 Next.js를 쓸 것 같으니 이어서 공부를 하고 있으라 하셨다. 노마드코더에 당근 클론코딩 Next.js 강의를 가지고 있는데, 그것보다는 Next.js만 다루는 강의를 듣고 싶어 Udemy에서 Complete Next.js with React & Node - Beautiful Portfolio App 라는 강의를 구매해서 듣고 있다.
영어로 진행되는데 발음이 유창한 강사분이 아니어서 알아듣는데 조금 어려움이 있지만, 적당히 알아들을만은 한것 같다. 초반은 리액트 기초가 대부분이어서 아직은 수월하게 넘어가고 있다. 지금까지 Next.js에 대해 새롭게 배운거라면 1)_app.tsx와 index.tsx의 역할과 2)pages 폴더 안에 파일을 생성하면 그 이름 그대로 페이지가 생긴다는 점이다.
- 화상영어
곧 유럽에서 외국인 친구가 놀러오는데 영어를 안쓴지 너무 오래 되어서 얼마전부터 영어수업을 듣고 있다. 이번주에 2, 3회차 수업을 들었는데 선생님도 딴얘기로 너무 새지 않게 수업을 잘 가이드 해주시고, 나에게 도움이 되는 표현을 대화의 흐름이 끊기지 않는 선에서 피드백 해주셔서 너무 만족스럽다. 지금까지 많은 외국어 수업방식을 시도해봤었지만 가장 마음에 드는 수업방식과 선생님이다.
- 코로나
드디어 나도 코로나에 걸렸다. 하루 정도 온몸이 몸살온 것처럼 아프고, 그 다음부터는 약먹고 푹 자니 괜찮아지고 있다. 미열있고, 콧물나고, 으슬하고, 가래있고 한건 다 감기랑 비슷한데 가래만 좀 더 심한 것 같기도 하다. 다음주에 친구 결혼식이 있는데, 다행히 빨리 발견해서 격리기간이 그 전에 끝나 다행이다.