우당탕탕 Typescript + React 공부

목표 설립

이번달의 목표는 Typescript와 React를 익히고, 이걸로 뭔가 개인 프로젝트를 진행해서 쓸만한 걸 만들어보자! 라는 한달만에 이루기에는 조금 과할수도 있는 목표를 잡아봤다. 어차피 방학이기도 하고, 할 일도 크게 없어 마침 심심하던 차라 자기계발을 해보자! 라는 느낌으로 목표를 잡았다.

진행

출근한 김에 강남 교보문고 가서 원쌤의 리액트 퀵스타트 with 타입스크립트라는 책을 사왔다. 원래 개발을 할 때에는 무작정 공식 도큐멘테이션 보면서 따라하면서 기초를 익히고, 아무거나 만들면서 익히는 편인데, 리액트만큼은 한 번 제대로 배워보자 싶어서 책을 샀다. 근데 처음에만 살짝 보다가 던져둔 지 오래다. 그래서 책 내용에 대한 평가는 못하겠고, 역시 사람이 살던대로 살아야..

아무튼 예전에 JavaScript에서 뭐 타입만 더해지고 달라진거 있겠어? 하면서 무작정 Typescript 코드를 슬쩍 봤다가 음 못 건드리겠군 싶어서 덮어두었던 기억이 있기 때문에, Typescript 문법이나 제대로 익혀야겠다는 마음가짐으로 공부를 시작했고, 이제는 얼추 익숙하게 다룰 수 있는 정도는 된 것 같다.

아직도 쿼리 날려서 받아온 데이터나, JS로 쓰여있는 라이브러리 갖다 쓸 때 이거 타입이 뭘까.. 하면서 구글링하다가 모르겠으면 무지성으로 any 박아버리긴 하는데, 그래도 다시 한번 생각해보기는 한다는 점에서 Javascript로 코드 짤 때 얼마나 생각 없이 짰었나 하면서 되돌아 볼 수 있는 부분이기도 하다. 블로그 사이트 만들면서 대충 짠 코드 누가 볼까 부끄럽긴 하지만 이것도 다 내 능력이고 인생의 좋은 경험이라고 생각하고 해야지, 방법이 없습니다.

원래 JS로 React를 깔짝거려본 적은 있는데, 제대로 활용해본다거나 한 적은 없어서 이 참에 뭔가 쓸 데 있는거 하나 만들어보자 싶어서 개발 블로그를 한 번 만들어보자 마음먹었다. 남들은 velog든 medium이든 이미 있던거 잘 쓰는데 왜 굳이굳이 처음부터 만드느냐.. 하면 그것이 홍대병이니까? 음.. 홍대병은 좀 그렇고 건대병인걸로..

아무튼 공부하면서 훅 그래서 뭔진 알겠는데 어따씀? 싶었지만 블로그 만들면서 아 이럴때 useEffect쓰는구나, 아 커스텀 훅은 이럴 때 만드는구나 처럼 나름 얻어간 것도 많았다.

결과

그래서 Typescript + React로 블로그 겸 개인 포트폴리오도 정리할 겸 해서 개인 웹사이트를 하나 만들었다. Next.js도 고려해봤지만 어차피 블로그 + 별로 바뀔 일 없는 웹페이지 몇 개 묶음 정도인 수준이라 SSR까지는 필요없을 것 같아 Gatsby로 정하고 개발을 시작했다.

아주 친절하게도 Gatsby에서 Blog용 Starter를 제공해서, 완전히 바닥부터 블로그를 만들었다거나 그런건 아니었지만.. 그래도 내가 블로그에 넣고 싶은 기능(검색이라든가, $\LaTeX$ 지원이라든가..) 들을 하나씩 채워간다는 느낌으로 개발해서 완전히 '나만의' 블로그를 갖게된 것 같아서 기분이 좋다. 이제 글 쓸 일만 남았는데, 2018년 쯤에 한창 Jekyll 유행할 때 어디서 템플릿 하나 끌고와서 블로그 만들어보겠다고 난리치다가 포스트 몇 개 안 쓰고 접어버린거 생각하면 얼마나 갈 지 모르겠지만.. 일단 그때 쓴 글도 어차피 Markdown이니 끌고와볼까도 생각중이다.

개발하면서 아쉬운 점도 많았는데.. 이걸 이렇게 하는게 최선인가? 싶은게 몇몇 있긴 했다. 일단 가장 생각나는 걸 몇 개 써보자면, 웹사이트 메인의 로고 애니메이션을 CSS로 만들어야지 했는데, CSS의 conic-gradient는 애니메이션이 안먹는다! 정확히는 @property를 쓰면 어떻게 되긴 한다고 하는데, 모든 브라우저에서 지원하는게 아니라(내가 메인으로 쓰는 Safari는 아직 지원을 안한다!) 그냥 setInterval로 무식하게 애니메이팅했는데, 아무래도 디바이스 성능따라 애니메이션 속도도 다르게 보이고, 아름답지 못하게 코드를 짠 느낌이라 더 좋은 방법을 찾아서 바꿔 볼 예정이다. 또 한가지 꼽자면, 네비게이션 바의 FOUC 문제인데, 이건 그냥 귀찮아서 냅두고 있는 거라 시간날 때 한 번 갈아엎어볼 예정이다.

아무튼 오랜만에 뭔가 '만들고 싶은 것'을 만드는 기분이라 굉장히 재밌게 개발했던 것 같다. 이거 만든다고 밤낮이 바뀌어서 한동안 씨게 고생했지만..

개발하다가 Docusaurus라는 놈도 알게되었는데.. 진즉 알았으면 이쪽으로 갔을 것 같기도 하다. 그냥 Docusaurus에서 제공해주는 기능을 직접 만들어보았다 정도에서 위안을 삼도록 하자.

앞으로는?

아직 Redux같은 상태 관리 라이브러리에 익숙해지지 못해서, 좀 적용해보고 싶은데 블로그 코드 리팩토링이나 간간히 하면서 필요하다 싶으면 써볼까 생각중이다. 또 다른 프로젝트를 진행해보고 싶긴 한데 벌려놓은 일이 좀 있어서 어느정도 잠잠해졌다 싶으면 개인적으로 프로젝트를 몇 개 더 진행해볼까 생각중이긴 하다.

그래서 프론트엔드 개발자할거야?

아직 진로에 대해 확실히 정한 바가 없어서 확실하진 않다. 이렇다 할 첫 프로젝트를 안드로이드로 시작하기도 했고.. 그 후로도 안드로이드 아니면 웹만 주구장창 하고 있었기 때문에.. 아직 백엔드쪽은 한 번도 손을 대본적이 없어서 찍먹해볼 엄두도 안 난다는게 제일 발목을 잡고 있는 것 같기도 하다. 기회가 된다면 백엔드에도 발을 한 번 담가보고 또 재미들리면 한동안 그쪽만 파겠지만.. 한동안은 안드로이드나 웹만 계속 붙잡고 있지 않을까.

길고 긴 겨울방학의 끝

대학교 들어오고 처음 있는 겨울방학인데, 생각보다 너무 길었다. 작년 이맘때쯤에는 친구들이랑 술마시러 다닌다고 정신 없었던 것 같긴 한데.. 올해도 술마시면서 진탕 노느니(사실 술 같이 마실 친구도 별로 없다마는) 뭔가 의미있는 일을 해보자 싶어서 나름 공부 아닌 공부도 해봤고.. 또 앞으로 정신없이 보낼 1학기도 기대가 된다.

수강신청은 원하는 과목 그대로 잡아서 나름 만족스럽다. 수업 시작이 10시 - 10시 반 정도라 한 학기동안 아주 아침형 인간으로 살아야겠지만.. 이렇게라도 하지 않으면 너무 폐인처럼 살 것 같으니까 오히려 좋아?

지난 학기에 주 24시간 3일 풀타임으로 학원 일 하면서 학교까지 다녔는데, 너무 힘들어서 이제 파트타임으로 바꿨으니 학교 생활에도 조금 더 집중할 수 있지 않을까.

이번 학기부터 비빔밥 운영진도 맡게 돼서 아마 바쁠 것 같긴 한데.. 암튼 자료구조 수업이랑 객지프좀 열심히 듣고 전기프도 열심히 해서 이번 학기 좀 잘 살아보고 싶다.

아무튼 2023년 2월 끝!