TODO: 프론트엔드 스터디

역시나 공부할 거리가 많다.

2023-05-31

최근 갑작스러운 사정에 의해 시간이 많아졌다. (라고 생각했으나 오히려 더 바쁘다. 2023-06-04 업데이트) 직장과 학업을 병행하느라 개인 시간에 스터디를 하더라도 블로그에 남길만한 정신까지는 없었던 것 같다. 5년 여 만에 내 포스트들을 보는데 그 사이 기술도 많이 발전하고 변했고, 새로운 것들이 많이 나왔다. 그리고 나도 여러모로 많이 성장한 듯 하다.

우선 Jekyll 기반으로 돌아가던 블로그를 Next.js 13 기반으로 바꿔 보았고, gh-pages 브랜치로 커밋하면 돌아가던 환경을 GitHub Actions Workflow로 돌아가게끔 바꿔보았다. (기본 설정이 대부분 도와줌.)

이제 블로그도 리팩토링(?) 했고, 조금 씩이라도 스터디 하고 포스팅 하는 습관을 길러보고자 한다. 시작이 반이다. 오늘은 일단 어떤 것들을 스터디 (및 포스팅) 하고 싶은지 리스트만 작성해보자. 위에 있을 수록 우선순위가 높다.

TODO

Next.js 13 관련

App Router(with RSC, new Data Fetching)

얼핏 예제를 보면 Express와 같은 MVC 프레임워크로 웹 개발하던 시절 떠오르게도 한다. (백엔드 자원 접근) RSC는 React 18의 새로운 기능인데 Next.js는 13부터 이를 비교적 쉽게 사용할 수 있게 제공 해주는 듯 하다. 이를 사용하면 클라이언트 번들을 최소화할 수 있어 화면 상에서 JS를 받아올 때 걸리는 시간을 줄일 수 있을 것으로 보인다. 네트워크 환경이 좋지 않다면 더욱 티가 나는 기능으로 보인다. 또한 서버 컴포넌트에서 fetch 시 Access Token, REST API Key 등을 파라미터로 넘길 때 민감한 정보를 클라이언트에서 노출시키지 않을 수도 있을 것 같다. (물론 이는 rewrite 기능이나 API Routes에서도 구현은 가능할 것 같지만)

어찌됐든 제대로 스터디 해보고 싶다.

SWC, Turbopack

Rust 기반으로 돌아가는 컴파일러인 SWC와 번들러 Turbopack. 알아보자.

Tailwind

몇 년 전에 잠깐 써봤던 것 같다. 그런데 최근 Next.js 에서 create app 시 물어보는 옵션 중 하나이고 Tailwind로 예제가 많은 것을 보니 다시 관심이 간다.

Yarn Berry

zero install, pnp 등 개념을 제대로 봐볼 필요가 있겠다.

Recoil

정식 릴리즈가 되기 전에(약 3년 전) 어떠한 버그(였는지 기억은 안 나는)로 인해 잠깐 보다 말았는데 최근에는 이곳 저곳 쓰인다는 곳이 많으니 다시 봐보자.

Tan Stack (react-query)

애플리케이션 단의 Fetching 관리를 위해 실무에서도 SWR과 더불어 써본 적은 많으나, 다양한 공식 문서의 옵션 및 예제와 Best Practice를 보며 깊게 스터디를 해보자.

끝.