TIL 2021.03.29 ~ 04.02

TIL이라 쓰고 일기라 읽는다.
사진은 오늘 타코집에서 먹은 비프 치아 어쩌고

블로그는 나한테 일기또는 지식 메모장 같은 느낌이라 그냥 주절주절 의식의 흐름대로 글을 써놓곤 하는데 이상하게 방문자가 많다.

누구세요?
😂😂😂

Code 작성글보다 주절주절 TIL이 더 조회수가 높을 때가 있어서 매우 민망하다.

뭐 하여튼

이번 일주일이 어떻게 지나갔는 지 잘 기억이 안난다.
특정 키워드로 인스타 정보를 크롤링하여 렌더링하는 패이지를 제작했고, 블로그 검색 결과를 react-slick 라이브러리를 사용하여 슬라이드 형태로 렌더링 될 수 있는 코드를 구현했다.

슬라이더 구현을 했던 게 제일 기억에 남는데..
react-slick 은 api 문서를 확인해보면 간단하게 사용할 수 있다. 기본으론 div로 감싸진 엘리먼트들을 반복해서 렌더링 할 수 있는데 기본값이 쉽게 얘기하자면 flex-row 처리된 것들이 보이지 않는 양쪽에 숨겨져있다가 밀거나 리스트 dot을 누르면 스르륵하고 나오는 틀이다.

문제는..tailwindcss 라는 class명에 css속성을 부여하는 라이브러리를 전체 코드에서 사용 중인데 react-slick 에서 커스텀 컴포넌트 Slider 를 사용해야 한다.
나는 한 슬라이드에 3개의 아이템이 row-3 형태로 렌더링 되길 원했는데 이 Slider 컴포넌트를 쓰면 이제 엘리먼트들을 자기 멋대로 알아서 뚝딱하고 만드는 바람에 거기서 만들어진 엘리먼트의 주소값을 useRef로 잡을 수가 없어서 고민을 상당히 했었다.

물론 DOM으로 Slider 내부 엘리먼트 들을 받아와 클래스명을 부여하는 작업도 해봤지만, 라이브러리 자체에서 적용된 기존 css속성이 덮어쓰기기 안되는 ..도저히 작동하지 않는 문제가 있었다.

그러다가 api 문서를 다시 보고 혹시나 하는 마음에 rows라는 속성을 다시 적용했는데 그제서야..원하는 그림이 나왔다.

이미 해봤었는데...그때 안돼서....안될 거라고 생각하고...4시간 삽질했는데...아마 중간에...변수가 있었던 것 같다...api문서를 꼼꼼히 읽겠다며 다시 반성을 한 계기가 되었다.

그리고 오늘은 메인 페이지 작업을 시작했다.

새로 오신 디자이너님이 열심히 만들어주신 와이어프레임을 받고 모바일 반응형을 먼저 만들고 웹용도 제작할 예정인데 일단 디자인이 너무 맘에 든다.

기존 사이트 메인 페이지가 굉장히 좀.. 별로인 것 같다라는 생각을 했었는데 오늘에서야 알았다.

선배님이 아마 없으셨을 때인지..퍼블리셔 분들이 외주로 미인페이지 제작을 맡아주셨다고....

대충 보니까 제이쿼리랑 이런 게 쓰였던데 제이쿼리 써 본 적도 없고 레이아웃이 아예 달라져서 기존 메인은 참고하지도 않았다.

하여튼 이번 작업에서 제일 중점을 두고 있는 부분은 파악하기 쉽고 재사용성이 높고 유지보수가 쉬운 그런 퀄리티의 코드를 만드는 것이다.

지난 일주일이 넘는 기간동안 선배님의 코드를 보며 감탄을 금치 못했던 ㅋㅋㅋㅋㅋㅋ 그리고 코드리뷰를 받았던 내용들을 계속 떠올리면서 레이아웃 구조를 파악하고 뭘 반복할까 뭘 쓰면 효율적일까 생각하느라 팔짱을 끼고 모니터를 바라보고 있는 시간이 많았다 🤣🤣

예전처럼 큰 생각없이 쭉쭉 만들면...막말로 하드코딩이 되는 것이나 다름 없다는 걸 많이 느꼈다. 내가 그동안 작성했던 코드는...하드코딩이 반이었구나..하는 반성을 많이 했더랬지

디자인 보고 그냥 생각없이 만들면 금방 만들 순 있겠지만 퀄리티 있는 코드는 절대 아니라는 것을 이제야 알게됐다.

일단 이번 메인페이지 레이아웃에는 비슷한 틀의 요소가 몇 개 있어서 이를 메인 컴포넌트 상위에 react 엘리먼트를 리턴하는 함수를 하나 더 선언하고 반복되는 메인 요소들을 children 속성으로 넣어 재사용하도록 했다.

이외 기능이 다른 것들이라 판단되는 것들은 별도 컴포넌트로 분기처리를 하고, 메인에 노출되던 유저들의 하드코딩된 리뷰 리스트는 데이터로 저장해 가지고 올 수 있도록 작업을 해놨다.

이 리뷰 데이터들도 ㅋㅋㅋㅋ react-slick 라이브러리를 통해 슬라이더로 만들려고 했는데 얘가 자꾸 root 바로 밑 엘리먼트의 마진에서 노출되고 있어서 2시간 씨름하다가 일단 다른 것 먼저 작업했다.

내일부터 주말이니까 그것 좀 해결하고 싶은데 아직도 왜 그런 지 모르겠다. 퇴근하면서도 왜그럴까 생각했는데 모르겠다. 상위 요소에 flex 속성이 들어가서 그런가 해서 이것저것 뜯어보고 맛보고 grid로 바꿔서 해봤는데도 안되는 중이다.

왜 안되지? Flex grid 이해가 부족한 건가 싶어서 내일 결제해놓은 인프런 강의도 좀 들어보고 다시 작업을 해봐야 할 것 같다.

내가 메인페이지를 구현할 거란 얘기를 처음 듣곤 “내가???? 서비스의 메인을???? 내가??? 그래도 돼????” 라는 생각이 들었다. 과연 나같은 코딱지가 저런 사이즈를 맡아도 되는 건가 하는 의구심과 기대에 대한 부담감이 있었는데 오히려 선배님들이 믿음을 주셔서 열심히 하고 있는 것 같다.

다른 분들의 노력이 헛되이 되지 않도록 나도 최고의 결과물을 내기위해 노력하고 있고 계속 달릴 것이다 빠샤👍🥰