brunch

You can make anything
by writing

C.S.Lewis

by 개미 May 02. 2023

웹 프로그래밍을 독학해서 제품을 만들며 느낀 점들

무언가를 하나 온전히 배우는 것은 쉽지 않다.

이 글은 유사 시리즈물입니다.

이전 글을 보면 더 풍부한 경험을 할 수 있습니다.


1. https://brunch.co.kr/@princox/235

2. https://brunch.co.kr/@princox/236

3.https://brunch.co.kr/@princox/249




1. 경제적 독립을 위해서 개발을 시작하다.



주변에 비전공자였는데 사이트 하나를 만들어서 수억 원을 버는 지인이 생긴 이후로

나도 자극을 받아 회사 일이 끝나면 독서실에 와서 열심히 개발을 하고 있다.


제대로 된 개발은 대학원 때 해봤으니, 개발을 안 한 지는 못해도 6년은 넘었다.


나는 안드로이드 개발을 블루프린트가 없을 때 배웠고,

내가 개발할 때 가장 핫한 라이브러리가 버터나이프였으니 코딩을 떠난 지 얼마나 오래됐는지 알 수 있다.

(지금 검색해 보니 2016년이 뜬다.)


<공부가 가장 쉬웠어요>를 쓴 장승수 씨가 사법고시에 합격한 것이 32살이니까,

30대라면 마음먹으면 뭐라도 할 수 있다는 것을 느끼면서도


퇴근한 이후에 모르는 분야를 처음 배우면서

심지어 "돈"까지 버는 제품을 만들어야 하니 이게 진심으로 쉬운 일이 아니다.


그래도 열심히 한 달 정도를 했고, 얼마 전에 사이트를 하나 론칭했다.

여러 수익 모델을 찾고 있고 현재 진행 중에 있다.


이 사이트 개발을 하나 하면서도 온갖 고난과 여러 느낀 점이 있는데

오랜만에 내 개인블로그가 아닌 브런치 글을 통해 기록을 남겨두려 한다.




2. 프로그래밍을 하면서 느낀 것들


첫 번째, 서동요 기법은 유효하다.


서동요 기법이라는 것이 있다. 서동이라는 사람이 선화공주와 결혼하고 싶어서 '선화공주가 몰래 서동왕자를 만나러 간다'는 노래를 퍼뜨려서 정말로 결혼에 성공한 "서동요"에서 온 기법으로,


내 꿈이 미리 실현된 것 마냥 스스로 이야기하면서 작업을 하는 것이다.

어떤 사람은 <시크릿> 책에서 이런 것을 배우기도 하고, 어떤 사람은 긍정의 힘이라고도 한다.


어쨌든, 나는 프로젝트를 시작하기 전에 부자가 되는 것을 꿈꿔오며 나만의 제품을 만들 수 있다고 온전히 믿고 있었다.


말에는 힘이 있다고 한다. 그래서 스스로 되고 싶은 것을 계속 되뇌면 정말로 그렇게 된다고 한다.


스노우폭스 그룹 김승호 회장은 자신의 꿈을 하루에 100번씩 100일을 종이에 썼다고 하고,

고등래퍼 출신 이영지는 1등 하는 방법이 1등이 된 생활을 실제인 것처럼 상상하는 데에 있다고 했다.


나는 프로젝트를 세팅하기 전부터 주변에 웹 사이트를 만들겠다고 떠들고 다녔다.

그리고 언젠가는 IT제품을 만들어서 디지털 노마드가 되겠다고 수도 없이 결심했다.


지금은 작은 시작처럼 보이지만, 원래 페이스북도 PHP 몇 줄로부터 시작한 웹 사이트였다.



두 번째, 고도로 암기한 기억은 이해와 구분할 수 없다.


"프로그래밍은 외우는 거 아니야. 모르는 것 있으면 구글에서 검색하면 돼"


컴퓨터공학을 복수 전공할 때 교수님께서 말씀해 주셨던 이야기다.

하지만, React와 JSX 개념을 배우면서 모르는 것을 배울 때는 무조건 암기하는 것이 최고라는 결론을 내렸다.


 - 내가 JSX를 컴파일하는 Babel 코드를 다 볼 수 있는가? (X)

 - 내가 리액트 초기 코드를 보면서 Virtual DOM의 개념을 모두 익힐 수 있는가? (X)

 - 내가 CSS를 배우면서 이미지가 가운데로 정렬되는 원리를 이해할 수 있는가? (X)

 - 내가 ES5의 모든 문법을 완벽하게 공부할 시간이 있는가? (X)


나는 신입 프론트엔드 개발자가 되려는 22살짜리 컴퓨터공학 학생이 아니다.


이미 취업과 이직도 해봤고, 세상을 온전히 사는 것이 얼마나 힘든지 안다.

나는 빠른 개발이 필요하다. 지금 곱게 앉아서 우아하게 공부할 시간은 없다.


오로지 암기를 통해 이해하려고 했다. 유튜브 클론코딩을 보면서 이런 것을 구현하려면 저런 식으로 작성하면 되는구나를 익혔다.


한참을 외우고 JSX attribute를 넣으면서 이게 왜 들어가는지 궁금해하지 않았다.


일단 했다.

그러고 나서 나중에 천천히 이해하기 시작했다.


어떤 것을 시작할 때는 천재인 것처럼 다가가면 안 된다는 것을 알았다.

일단 삽부터 뜨면 왜 포클레인이 필요하게 되는지 알게 된다.



3. 어른이 된다는 것은 포기하는 것



첫 번째, 내가 좋아하는 것을 포기하다.


커피를 정말로 좋아하면, 커피를 줄여야 한다는 이야기가 있다.

그래야 오랫동안 생활에 지장 없이 커피를 즐길 수 있을 테니까.


나는 부자가 되기로 했다.


맛집을 좋아해서,

여행을 너무 좋아해서,

더 넓은 세상을 이해하고 싶어서,

부모님이 계실 때 같이 시간을 보내고 싶어서,

다른 사람 밑에서 이해가 안 되는 일을 하기 싫어서,

오전에 느긋하게 운동하면서 체력 관리를 하고 싶어서,

소중한 내 젊은 시기를 오로지 일하는 데에만 쓰고 싶지 않아서.


그래서 반대로 다 포기했다.


여행을 포기했고, 친구와의 약속을 포기했고, 적절한 사회생활을 포기했다.


여행 갈 돈으로 미국 배당성장주와 연금저축펀드(ETF)에 투자했고

친구와의 약속은 회사에서의 점심시간을 활용했으며

직장 동료와의 시간을 보내기보다 야근을 줄이기 위해 업무 시간에 몰두하면서 일을 끝내고

회식은 모두 거부했다.


정말 어쩔 수 없이 가야 하는 회식이라면 가서 술을 마시지 않았다.

그래야 끝나고 집에 와서 코드를 한 줄이라도 더 칠 수 있었으니까.


어른이 되어 온전하게 산다는 것은

내가 해야만 하는 일을 위해 하고 싶은 것을 미뤄두는 게 아닐까 싶다.


포기에 익숙해지라는 것이 아니라, 두 걸음 전진을 위해서 한 걸음 뒤로 가는 전략적인 선택이 필요하다.



두 번째, 프레임워크를 포기하다.


나는 Next.js 13.3에 있는 새로운 기술이 멋있어 보였다.

App Route라고 하는 기술이 들어갔고, 내 입장에서는 되게 편해 보였다.


그렇게 한 2주를 하다가 결국은 순수 리액트로 작업하는 것이 정답이었음을 깨달았다.

편하게 가려다가 더 어려워진 느낌이랄까.


무조건 새로운 것이 좋은 것이라고 생각했던 것이 바보였고 내 패착이었다.


첫 번째 이유는 App Route에서 yarn berry로 빌드하는 것에 대해 이슈가 좀 있다. 내부 프레임워크의 문제인데 아직 수정 중이라고 해서 결국은 다시 npm으로 돌아왔다. 문제는 이게 노트북에서 용량을 꽤나 잡아먹는다는 것이다.


두 번째 이유는 아이러니하게도 프레임워크가 너무 많은 기능을 가지고 있어서 문제다.


나는 서버비용을 아끼기 위해 static (정적) 페이지로 프로젝트를 진행하고 있다.

이 경우에는 SSG라고 해서 서버가 그리는 것이 아닌 개별 HTML로 결과물을 만들어야 하는데 이게 굉장한 곤욕이다.


Next.js는 자체 프레임워크 경로가 있어서 Image Loader, next.config.js에 output 세팅,  Image 컴포넌트의 최적화 등 너무 많은 기능들이 있다.



< 프레임워크 동작 원리를 몰라 빌드에만 38번을 실패한 바보 >


이것을 모두 다 이해하고 알아내기가 쉽지 않았고, 새로운 기능들은 심지어 검색해도 정답이 잘 나오지도 않았다. 그래서 결국 stackoverflow에 질문을 올리기까지 했으나 아직까지 답변이 없다.



내가 실제로 올린 질문들 >>

https://stackoverflow.com/questions/76122243/the-image-path-is-weird-and-i-cannot-see-any-image-after-deploying-my-next-js-ap

https://stackoverflow.com/questions/76146642/when-i-do-npm-start-after-build-in-nextjs-i-get-an-error-could-not-find-a-pro



그래서 다음 프로젝트는 순수 React로 개발하려고 한다.

괜히 서버사이드렌더링 하는 것도 아닌데 어렵고 복잡한 프레임워크에서 제공하는 기능과 컴포넌트 property만 이해하는 데에 한 세월 보냈다.


무조건 새로운 것이 좋은 건 아니다.


좋아 보인다고 무조건 하지 말고 예전 기술이라도 자기가 익숙하고 빨리 개발할 수 있는 것으로 시작하자.


이제 Next.js는 잠시 접어두고 순수 React 라이브러리로 넘어간다.


이제 React-Helmet과 React-Snap을 공부할 시간이다.


끝.







사족1) 타입스크립트는 여러 의미로 너무 좋다. 어떤 값이 어떤 데이터인지를 알면 그렇지 않을 때 오류가 뜨니 타당한 값 검증이 되고, 또 어떤 컴포넌트나 클래스가 오면 내부에 어떤 properties가 있는지 확인할 수 있다. 그런데 내가 쓰려면 잘 못 쓰겠다...



사족2) Next.js 13.3에서 새로운 라우팅 버그가 있습니다. 미친듯이 살펴보다가 전세계 모든 사람들이 겪고 있는 문제임을 발견했고, 방법을 찾아냈습니다.

https://moneytech.kr/109


 








매거진의 이전글 vscode에서 화살표 예쁘게 표기하기

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari