풀스택 개발... svelte를 쓸까?

훗날에 사용할 일이 있을 것 같아 개인 사업을 아직 도전하고 있던 와중에, 보름 좀 넘게 일시적인 시간 여유가 있던 터라 24년 2월 경 미리 웹사이트 제작과 DB관리하는 법을 공부해서 따로 구현 해보았는데, 3월 중순 이후로는 이제 엔지니어업으로 복귀할 마음으로 결정짓고 다시 손 놓았던 구조공부를 하기 바쁜지라 새로운 기술을 익히고 있지는 않은상태다. 아래 글은 해당 기술들을 공부해보고 실제로 시도해본다음에 3월 초에 마무리하면서 막바지에 남긴 글이다. 그 이후로는 손대고 있지 않기에 미래에도 알고 있는 지식이 아닐수도 있으나, 내가 어떤 시도들을 했는지 기록을 남기면 추후에 필요할 때 미래에 추가로 나온 새로운 기술을 빠르게 익힐 때 도움이 되기에 기록으로 남긴다. (24년 초 당시에 nextjs, pocketbase 외 이것저것 다루어보다가 svelte에 관심을 가지고 마무리 하였다.)

----------------------------------------------------------------------------------------------------------------------

 

 이번 포스팅은 굉장히 뜬금 없고 개인일상에 가깝게 별 내용이 없을 수 있다. 그냥 내가 추후에 웹개발을 할 때 svelte를 쓰는 것을 고민 중이라는 것이다. 내가it업계 종사자가 아니고 그 방향으로 취업하려고 개발을 하는게 아니니 비주류 프레임 워크가 장점이 더 크다면 당연히 마다하지 않고 메인으로 쓸 생각이다.

 내가 웹개발을 할 줄 안다는 것도 내 고등학교 동문이 아니면 뜬금없는 소리인데, 최근에 필요에 따라 시도해 보았다. 이제 프로그래밍을 직접 해본 프로그래밍 언어는 matlab, python, tcl, C++, js, visual basic 이렇게 6가지가 되었고 이젠 위의 아무 언어도 다 이해하는 동시에 하나도 제대로 문법을 기억하지 못하는 상태가 되었다. 사실 처음 익힌 코딩이 다른 사람이 짜둔 프로그램 코드를 암호해석 하듯 이해하고 따라했던 것이기에 위의 언어가 아닌 것들도 처음보아도 웬만큼은 이해한다. 이것은 어찌보면 내가 피아노를 악보를 보고 못치는데, 동생이 알려준 손가락 동작을 외워서 내가 좋아하는 곡들은 칠 수 있게 된 것과 일맥상통한다.

 js를 통한 웹개발은 당장은 10일정도 공부해보고 10일정도 만들어본게 전부다. 처음 시도한 10일간 어느정도 구현이 되는지는 아래 사진을 첨부하였다. 그와 더불어 이 뜬금 없는 배경 상황을 글로 남겨 설명하려고 한다. 

 (본론에 들어가기 앞서서, 내 학습능력은 조금은 빠른 편인게 의아할 수 있는데, 내가 생각을 평소에 하던 것들에 있어서는 실질적으로 개념적인 공부는 미리 된것들이 대부분이라 비교적 빠르게 익힐 수 있다. 블로그의 다른 글에서도 적은 것처럼 평소에 개념화된 지식을 쌓아두고 있으면, 디테일한건 필요에 따라 채워 넣는 식으로 금방 배울 수 있어서, 디테일을 무시하고 진행하는 차원에선 다른 분야의 일을 하는게 마음가짐에 따라 그렇게 어려운 일은 아니라고 생각한다. 물론 간단한 수준에서 혼자 다 할 마음가짐을 가졌을 때 그렇고, 진짜 본업으로 삼아 협업을 하려면 경험과 디테일이 없으면 결국에 무력한 초짜이다. 그래서 내가 it쪽으로 업을 가질 생각을 안하는 이유이기도 하다.)

https://gkjeong.tistory.com/217

랜덤프로세스에 대한 대화 그리고 확률공간

 

지금 연습용으로 작업한 웹서비스 데모 버젼이다.

 

 

실시간 채팅 구현

 요새는 시간을 따로내서 개인적으로 웹서비스 개발을 진행하고 있다. 내가 웹서비스 개발을 시도하려고 했던것은 꽤 오래 전부터였으나(대학원 동기에게 퇴근 후에 같이 취미삼아 해보겠냐고 작년 여름부터 제안을 했었다. 그 친구도 업무가 바빠서 결국 섭외는 못하였지만...) 그 당시의 본업인 구조 엔지니어로서의 일이 바쁘고, 구조역학 공부를 매일 반복하여 하기에 바쁘다 보니 최근에야 시도하게 되었다. 물론 지금도 사업과 집안의 여러 이슈로 굉장히 바쁜 상태다. 그런데 웹개발 경험을 지금이라도 익혀둬야 추후에 엔지니어업으로 돌아가더라도 좀 더 대중적인 서비스들을 공급할 수 있지 않을까라는 생각이 들게 되었다.

 내가 구조해석 엔지니어로 일하면서 든 안타까운 부분이 구조해석 분야가 너무 대중적이지 않고 폐쇄적이라 투명성이 적다는 것이다. 그리고 작년의 여러 사건들로 구조설계가 건축설계의 재하청 구조인것에 말이 많은데, 일단 내 생각엔 구조설계가 재하청이더라도 구조설계자가 안전 검토라는 본분에 충실해야 하는 것은 변함이 없다. 물론 재하청 구조로 인해서 구조 엔지니어가 제대로 일을 하기 어려운 것 또한 사실이다. 작년이나 재작년의 경우 건설 불경기로 설계를 다 해놓고도 중도 취소된 프로젝트가 많은데 그런 경우에 건축사 측에서 중간설계과정까지 돈은 다 챙겼음에도 구조심의까지 진행되지 않았다는 이유로 구조설계자에게 합당한 분배금을 나누지 않은 경우가 허다하다. 재하청 구조에서는 그러한 리스크가 항상 공존하기에 구조심의에 다다르기 전까지 세세하게 검토하지 못하고 대략적인 검토만 하는게 업무적으로 당연하다. 그런 경우가 아니더라도, 건축설계 측이 구조 설계를 무시하고 중간 협의도 없이 설비 배치 계획등이 바뀌었다며 도면 수정을 하고 추후에 통보하는 경우도 허다하다. 진짜 협업자라 생각한다면 3자가 토론해서 보다 합당한 설계 방안을 찾는게 맞는데, 하청업체이기에 건축 설계에 구조설계를 끼워 맞추라는 경우가 너무 많다. 결국 법적인 굴레로 구조심의에 근접해서야 심의 기한에 쫒겨서 마무리 진행을 하다보면 오류가 많아지는 것도 이해가 되는 부분이다.

 그런데 본인이 충실하게 진행했다 생각해도 제대로 검토 받기 어려운 것도 사실이다. 왜냐면 너무 비대중적인 업무라 소수의 검토자만이 검토가 가능하고 그 난이도에 대비해서 지나치게 업계의 단가가 낮기 때문이다. 특히 요즘같은 불경기에 한국은 안전불감증이 큰 나라라 더욱 안전과 관련한 가격 후려치기가 심하다. 당장 나 같은 경우도 여러 프로그램을 다루고 공부도 매일같이하여 업계에서는 나름 연차대비하여 인정받는 느낌이었으나, 나와 항상 대화를 나누는 고등학교 동문들 10인 중에선 연봉이 중하위권에 속했다. (그 10인은 의사 친구는 제외한 인원이다. 그러나 그 중에서 5명은 it와 금융 종사자이기에 내 친구들은 연봉 기준으로는 상위권에 속하는 애들이 꽤 있다.) 나는 나름 10대 시절 에이스 였기에 그런 부분이 아쉬웠던 것은 사실이지만, 여러 분야의 재능이 있었어도 구조해석은 내가 좋아하는 업이기에 선택해서 매달릴 수 있었다.

 그런데 작년에 붕괴사고 등과 업계 내에서 있었던 몇가지 사고들을 보면서 위에 말한 부분들에서 업종 자체에 대한 회의감을 느꼈다. 그래서 나는 나중에라도 내가 참여한 부분에 있어서는 투명하게 공개할 수 있는 대중 서비스를 제공할 생각을 가지고 있다. 물론 거기에는 비용이 따르고 그만한 비용을 발주처에 더 요구해야 겠으나, 충분한 가치가 있고 필요한 사안이라 생각한다.

 그동안 python, matlab, tcl, visual basic 등의 언어를 사용해 이런저런 프로그램을 만든 경험은 있으나, 한번도 웹개발은 해본적이 없고, 프론트엔드부터 백엔드까지는 전부 도맡아 하기엔 양이 너무 방대하다 생각하여서 뒤로 미루고 있었는데, 그냥 시도해보고 있다. 지금 기준으로 웹서비스로 상당히 어려운 기술들을 전부 접목하고 있다. 물론 시도하기 전에, it업계에서 현업으로 일하고 있는 프론트 개발자, 백엔드 개발자, 데이터 엔지니어, 카이스트 AI 박사 등의 지인들을 오랜만에 직접 대면해서 자문을 다 구했다. 그리고 1인 개발을 고려할 때 프론트와 백엔드 언어를 자바스크립트로 통일해서 같이 쓰기 위해서 react 라이브러리에 기반한 next.js 프레임 워크를 채택했었다.

 사실 시작이 반이라고, 막상 해보면 금방 익힐 수 있는 것이 많은데, 그 동안 너무 겁낸 부분도 있었던 것 같다. 10일정도 공부하고 10일정도 진행해보니 서버 관리와 보안과 관련된 이슈들을 제외하고는 기본적인 기능들을 웬만큼 구현하는것은 가능한 상태다. 물론 처음 해보는 것이라 코드가 깔끔하지 않아서 약간 연습을 하는 느낌으로 시도 중이다. 프론트 부분에 대해서는 공식문서에 근거해서 당장 주요 기능을 구현하는데 문제가 크게 없었는데, 서버에 대한 부분은 쉽게 가려고 했더니 데이터 연동에서 많은 문제들이 발생해서 데모버젼이긴 해도 아예 갈아 엎고 다시 짜볼까 생각하면서 여러 라이브러리들의 공식문서들과 외국의 자료들을 찾는 와중이었다.

 

 그러던 와중에 프론트에서 서버와 연동하는 부분에서 자료를 같이 자료를 찾다보니 svelte라는게 눈에 들어왔는데, svelte가 훨씬 나의 상황에 적합해 보였다. 뭐랄까 나처럼 대중적이지 못한 테크트리를 타고 있는 공학인에게 가장 어울리는 프레임워크로 느껴진다. 일단 편하다. 친구에겐 기본적인 기능을 새로 익히는데 3일이면 될 거 같다고 하였는데, 사실 기본적인 기능은 그냥 코드를 보자마자 이렇게 작동하는 구나라고 바로 이해하였다. 파일을 배치하는 방식이나 bind 기술 등 나같이 다른 분야 종사자가 코드를 읽었을 때에도 상당히 고민을 많이 한 프레임 워크라는게 보였다.

 단점은 react처럼 대기업이 관리하면서 hook같은 자체 내장함수 기능이 계속 확장되고 있는게 아니라 아니라 커뮤니티 통해서 라이브러리가 개발되고 있기에 라이브러리들이 아직 조잡한게 많거나 딱 원하는 대응되는 기능이 없을 수도 있다는 것이다. 어차피 지금도 무경험의 개발자라 있는 기능도 몰라서 괜히 불필요한 함수들까지 직접 기능을 만들고 뒤늦게 더 좋은 기능이 있었구나 하고 깨닫는 나에겐 크게 문제되지 않는 부분이다. 추후에 여유가 되면 데모버젼을 svelte를 통해서 다시 구현해봐야겠다고 생각 중이다.

 

 일단은 저 고민을 하고 다음날에 nextjs 코드를 다시 수정해서 데모 버젼은 완료를 하였다. 한동안 또 여유가 없을 것 같으나, 추후에 여유가 되는대로  AI api 기능은 별도로 구현한 후 서버 최적화를 위해 처음부터 다시 작성할 생각인데, 그 때에는 svelte를 이용해서 개발을 해보려한다.