2024.07.14, weekly memoirs

 

 

weekly memoirs

 

 

 

 

---

 

 

기욤.....

 

 

1. 

이번 주부터 재택 근무 시작했다

집에 모니터도 없고... 잘될까 걱정했는데 생각보다 집중 잘 되어서 놀랐다;;;

 

아침에 일어나서 커피 타고 앉아서 작업하는데 한창 집중하다가 머리가 맹해진다 싶어지면 점심 시간임...

밥 먹고 설거지 하고 앉으면 한 시 반,,,,,,,, 원래는 두 시까지인데 집중 너무 잘 되어서 그냥 일한다

어차피 내일의 내가 해야할 거... 집중 잘 될 때 얼른 만들어 놓는 게 낫겠다 싶어서

열일하고 정신차리면 여섯시;;;;;;;; 

 

회사에서보다 시간이 두 배는 빨리 가는 거 같다

 

 

 

2.

요즘 리액트로 작업한다

디자인 처음 봤을 때부터 공통 컴포넌트도 많아 보이고... 진짜 리액트로 만들면 잘 만들 수 있겠다는 생각에

vite 환경부터 시작해서 컴포넌트까지... 좀 욕심내서 컴포넌트를 나누어놨는데 확실히 좋은 거 같긴 하다

컴포넌트 기계가 된 것 같은 느낌이 들었지만... 그래도 만들어 놓으니까 쓰긴 편했다...

UI단 추상화 + 재사용성 + 확장성은 최고인 거 같다

 

공통 컴포넌트 만드는데 공수가 들어서 그렇지...

사실 간단한 atom 단위의 컴포넌트는 진짜 하도 만들다보니까 금방 만드는데

문제는 UI 단위의 정리된 디자인이 없어서 진짜 css 하나하나 눌러서 확인해가며 만들다보니 생각보단 걸린 거 같다

 

특히 버튼 같은 경우엔 큰 부류로 theme 나누고 size 따로 만들어서 조합해서 쓰는 걸 좋아하는 편인데

이걸 나누려면 모든 페이지의 버튼들 css까지 뜯어봐야해서... <- 이때는 회사였지만 거북목 최고조

색깔 모아서 정리하고... 이건 진짜 하루 더 걸렸던 거 같다

 

 

3.

제대로 된 반응형 처음 해봤다

원래는 width:100% 넣어놓고 그 안에서 늘어나거나 줄어들게끔 min-width, max-width로 조절하는 정도로만 했었는데

이번엔 크기마다 nav창도 다르고 컨텐츠도 보이지 않는 것들이 있어서

컴포넌트 하나하나 미디어쿼리 css를 작성했다 (애매한 건 그냥 className으로 함...)

 

근데 미디어 쿼리 리액트 하기 전에나 방법이나 좀 알았지, 제대로 하려니 너무 힘들었다...

어렵진 않았는데 컴포넌트 하나하나 신경 써서 css 넣고 잘 되는지 브라우저 줄였다가 늘렸다가... 공수가 거의 3배였다

 

그리고 특히 nav...

단순히 가려지고 보여지는 건 간단했는데 nav가 생각보다 복잡했다;;;; nav 4개 만들어 본 건 또 처음...

 

안 그래도 nav 라우터에 넣어놔서 url 변환될때마다(새로고침시) nav 에 어떤 li가 선택되었는지 보여주는 것도 url 따서 결정해야해서 이것도 나름 손이 갔는데 (특정 페이지만 depth 있어서 기절)

어떤 nav는 사용자가 눌렀을 때만 보이도록 프론트에서 상태관리하고 있어서

 

미디어 쿼리 hook + 새로고침이나 세부 페이지 url 용 hook + nav 프론트 상태관리 

 

이거 조합하느라 진짜 머리 아팠다

그래도.... 컴포넌트 props depth도 깊지 않고 전역 관리도 안 쓰구 hook으로 관심사 별로 나눠놓아서...

나름 깔끔하게 짜서 기분은 좋다ㅎㅎㅎ

 

정성스러운 나의 nav... 나름 잘 보이려고... css 애니메이션도 넣었다ㅎ (ux +1)

 

 

 

4.

css 는 css-in-js 쓰고 있다

여럿 써보긴 했지만 느려지기만하고 굳이템이라고 생각했는데

스코프 오염 방지 + 조건부 렌더링 다시 겪어보니 좋은 거 같다.......

공통 컴포넌트도 className으로 넣는 것보다 훨씬 가독성 좋음.....

 

그리고 css-in-js 의논하다가

https://vanilla-extract.style/

vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

 

바닐라 익스트랙 이란 걸 접하게 되었는데 좋은 거 같다

문법은 기존에 있던 styeld-component나 emotion.js와 똑같진 않지만 비슷한 거 같은데

 

빌드 후에 css로 바뀌어서 작동하기 때문에 자바스크립트 스타일 객체를 읽어내리지 않아 빨라서 좋은 거 같다 (이걸 제로 런타임이라고 하는 듯) 대신 css로 올라가서 당연히 조건부 스타일링은 못 씀....

 

문법은 익숙하지만... 제대로 쓰려면 물리적인 시간을 들여서 공부해야해서 쓰진 못했지만

css-in-js의 미래인 건 맞는 거 같아 요것도 꼭 봐야하는 주제는 맞는 거 같다

재밌을 같움

 

 

 

 

5.

집에 개인적인 일이 있어서 이번 주는 너무나도 바빴다..... ㅠ

재택 아니었으면 진짜 하루종일 녹초였을 듯...

 

트러블 슈팅한 것도 정리해야하는데... 해야할 건 많고 시간은 없는 거 같당

토요일에 푹 충전했으니까 다시 심기일전해서 파이팅해야쥐.....

 

파이팅~~~~~~~~~~~~