TIL 2021.03.22 ~ 03.26

입사 후 첫 일주일이 지났다.

일주일 동안 회사 코드를 계속 읽었다.

사실 내내 읽었다기보단 초반 이틀은 서버파일 셋팅에 애를 먹어서 시간을 조금 잡아먹었다.

서버에선 엘릭서를 쓰고있었는데..node, nest만 쓰다가 처음보는 언어의 서버 셋팅을 하려니 이것저것 에러가 넘 많이 났던 것 같은데 결국 다른 분들이 도와주셔서 해결할 수 있었다.

그리고 회사 코드를 읽으면서 계속 놀랐던 것 같다.

그동안 내가 봐왔던 코드들은 구글링해서 나온 잘린 일부 코드들이나, 팀플을 하며 보았던 팀원의 코드가 전부였는데, 실제 서비스를 하고 있는 코드를 보고 있자니 그 양이 실로 방대했고, 코드의 결 자체가 달랐다.

회사에선 typescript, react, tailwindcss, useContext / useReducer (상태관리)등을 핵심으로 사용하고 있었는데, 출근 길에 읽은 cleanCode는 어떤 것인가에 대한 내용이 그대로 적용되어있었다.

코드 열 줄을 읽고 싶다고 읽을 수 있는 게 아니었다. 각 코드가 담고있는 정보들에 대해 파일을 헤집으면서 구글링 하면서 겨우겨우 읽을 수 있었다. 이런 퀄리티의 코드를 볼 수 있다는 거 자체가 너무 좋았던 것 같다.

알고 있던 지식의 경계를 넘어선 것들의 집합을 보면서 ... 잊혀졌던 지식도 다시 한 번 되짚어 볼 수 있는 좋은 기회였다.

아직 전체 코드 반에 반에 반도 못읽었지만...읽은 것도 좀 지나면 잊혀지는 것 같아서 주석을 달고 이해한 것을 바탕으로 코드 설명을 진행하는 시간을 가졌었다. 이해가 되지 않은 부분은 설명을 해주셨고, 무심코 지나갔던 부분도 다시 한 번 짚어주셨는데 너무 유익했던 것 같다. 

그리고 tailwindcss 라는 css 프레임 워크를 사용했다고 했는데, 간단하게 말하자면 class명에 css 옵션을 부여할 수 있는 기능이었다.

그 과정에서 rem과 em을 마주하게 되었다.

이번 주 내내 기본적인 다른 코드들을 확인하다가, tailwind 프레임워크에 대한 이해 없이 그냥 로직만을 읽고 있는 것 같아서 오늘은 tailwindcss 프레임워크를 실제로 사용해서 체화하기 위해 간단하게 피그마 작업을 진행했다. 

엄청난 디자인이 필요한 게 아니고 프레임워크 이해를 위해 간단하게 만들어 볼 만한 게 필요했었기 때문에 간단하게 하나 만들었다.

그리고 tailwindcss 를 적용하는데 후,,, 지금까지 나는 반응형이라 하면 그냥 미디어 쿼리로 width를 분기처리해서 px값으로 absolute 값을 부여했었는데, 실제 서비스 코드 내부에선 모두 rem을 통해 css 구현이 이루어지고 있었다. 

그래서 tailwind를 통해 직접 적용을 해보려했는데, 오늘은 사무실 이사 준비와 내부 데모데이 등등 외적인 요소로 구현하지 못하긴 했다.

주말에 구현하면서 css에 대한 이해도 다시 잡아봐야 할 것 같다.

 

그래서 배운 것은?

useContext

useReducer

em / rem

git stash ( 로컬에서 파일 변경 후 origin pull이 안돼서 강제로 git reset을 썼다가 커밋 다 날릴 뻔 )

event bubbling / event capture / e.preventDefault()

scrollTo (스크롤 위치 정표 변경)

tailwindcss (기본 셋팅)

Docker / 멜릭서 초초초초기본 셋팅