Too Early To Stop
Main
About
Portfolio
Blog
Light
Thumbnail Image
군대에서 기술 블로그를 개발하며
#Retrospection
2021년 2월 13일

주니어 개발자로서의 목표

고등학교 1학년때부터 개발을 시작했으니, 대학교에 입학하던 때인 3년 뒤에 나만의 포트폴리오형 블로그를 하나 개발하고 싶었다.

그동안 진행했던 프로젝트나 참여했던 행사, 개발 지식 글 등을 담을 수 있는 블로그를 개발하려고 여러번 시도했으나 각종 동아리 행사, 학과 수업, 스타트업 준비 등 여러 일때문에 계속해서 미뤄지다가 끝내 개발을 시작하지도 못하고 군대에 입대해버렸다.

입대 8개월 후인 2020년 11월, 자대 적응과 여러 훈련 및 평가를 끝마치고 조금이나마 여유가 생기자 그동안 생각하지 못했던 블로그 개발이라는 목표가 떠오르게 되어 바로 계획하고 개발에 착수했다.

왜 하필 목표가 블로그 개발일까?

단순히 네이버나 티스토리 블로그 계정을 하나 만들어 바로 시작해볼 수도 있었다.

하지만 내가 직접한 사이트를 운영하는 것은 여러 포털 사이트에서 제공하는 블로그 서비스를 운영하는 것에 비해 엄청나게 많은 것을 얻어갈 수 있을 것 같다는 생각이 들었다.

티스토리와 같은 서비스는 게시글만 준비하면 블로그를 생성해 글을 올릴 수 있는 플랫폼을 자동으로 생성해주고, 내가 올린 포스트를 자동으로 구글에서 보여지게 할 수 있으며, 하루에 몇 명이나 포스트를 확인했는지, 연간 몇 명의 사람들이 내 블로그에 접속을 했는지 손쉽게 확인할 수 있다.

당장 시작하기에는 너무나도 편리했지만, 웹 애플리케이션을 개발하는 개발자로서는 더 멀리 바라보고 직접 블로그를 제작하는 것이 더 의미있을 것이라 생각했다.

블로그를 제작하는 과정에서 어떻게 해야 더 좋은 사용자 경험을 제공할 수 있고, 어떻게 나만의 특성을 보다 더 잘 표현해낼 수 있을지 고민하고, 내가 올린 게시글을 어떻게 검색 결과 상단에 띄울 수 있으며, 웹 사이트를 어떻게 운영할 수 있을지 생각하면서 얻는 것들은 블로그 개발 뿐만이 아닌 어떤 프로젝트를 진행하더라도 도움이 될 수 있을 것 같았다.

어떤 기술로 블로그를 개발했나

개발 스택에 대해 꽤나 고민을 했었다.

당시 내가 했던 첫 번째 고민은 백엔드와 프론트엔드 둘 다 개발을 하느냐, 정적 사이트 생성기로 백엔드 없이 개발하느냐였다.

결론부터 말하자면 나는 후자를 택했었다.

백엔드를 다룰 수 있었기에 블로그를 개발하는 것은 너무나도 쉬운 일이었지만 애플리케이션을 구동하기 위한 서버 구매가 필요했다.

하지만 조금의 과금도 없이 블로그를 개발하고 싶었던 마음때문에 후자를 택했다.

정적 사이트 생성기를 통해 빌드한 파일을 무료로 호스팅할 수 있는 서비스가 너무나도 많았기 때문이었다.

두 번째 고민은 어떤 정적 사이트 생성기를 사용할 것이느냐였다.

가장 첫 번째로 찾아본 것은 Jekyll이었다.

단순히 HTML, CSS, JavaScript만 알면 충분히 공식 문서를 보고 개발할 수 있다는 장점이 있어 대학교 1학년때 Jekyll로 프로젝트를 만들어 개발을 시작해보려다가 Ruby 기반이라는 특성때문에 처음 세팅이 꽤나 난잡했었다고 느껴 다른 대안을 찾아보았다.

그렇게 찾은 것이 Gatsby였는데, 마침 프론트엔드 메인 스택으로 사용하고 있었던 React를 기반으로 한 정적 사이트 생성기였기 때문에 일체의 고민 없이 이걸로 개발하겠다고 생각했다.

블로그 개발을 진행하며 봉착했던 난관들

Gatsby라는 프레임워크 자체가 꽤나 잘 만들어진 기술에다가 공식 문서도 잘 되어 있기에 큰 난관 없이 블로그를 개발할 수 있겠다는 생각과는 다르게 여러 난관에 부딪혔었다.

단순히 블로그 스타터 킷을 가져와 스타일을 조금 변경해 사용할 수도 있었지만, 내가 원했던 것은 단순 블로그를 뛰어넘어 포트폴리오도 담을 수 있도록 개발을 하고 싶었다.

블로그 기능만을 구현하는 것은 쉽게 진행할 수 있었지만, 포트폴리오를 띄워주는 기능에서 막혀 해결하는데 시간이 꽤나 오래걸렸던 것 같다.

처음에 구현했던 단순히 JSON 데이터를 받아와 띄워주는 방식에서 Image Lazy Loading을 구현하기 위해 완전히 데이터를 GraphQL 상으로 마이그레이션하는 작업에서 엄청 애를 먹었다.

나는 여러 레퍼런스를 많이 참고하는 편이었는데, 내가 생각하던 방식에는 마땅한 레퍼런스가 존재하지 않았기 때문에 단순 공식 문서만을 보고 개발해야 했었다.


두 번째 난관은 다크 모드 개발이었다.

어떠한 라이브러리의 도움 없이 직접 다크 모드를 개발한다는 목표를 가지고 있었는데, 실제로 개발을 진행하면서 난이도가 높다고 생각되지는 않았다.

처음 페이지를 열 때, 브라우저 로컬 스토리지에서 기존 값을 받아 클래스를 지정해주고, 그 클래스에 맞는 스타일을 지정해주기만 하면 되는 문제였다.

모드를 변경하는 것이야 위에서 조금 응용하면 되니 크게 어려울 것은 없었다.

하지만 문제는 그 다음이었는데, 모두 개발하고 나서 보니 다크 모드 상태에서 새로고침을 하면 처음 스타일이 입혀지지 않은 백지 화면이 나왔다가 다크 모드가 적용되는 상황이었다.

이 문제를 해결하기 위해 거의 3~4일을 날린 것 같다.

그러나 이렇게 날린 시간에 비해 원인은 되게 사소했는데, 특정 모드에 따른 폰트와 배경색 변수를 지정한 곳에서 다크 모드 스타일을 적용했던 것이 문제였다.

글로벌 스타일로 폰트와 배경색 변수를 생성하고, 컨텐츠 전체를 감싸는 엘리먼트에 변수를 통해 색을 지정해주었더니 바로 해결되었다.

블로그 개발을 마무리하고

군대에서 진행한 첫 번째 프로젝트가 완전히 마무리되었다.

이번 프로젝트는 나에게 있어 새로운 도전이었던 것 같다.

입대를 하기 전에 군대를 다녀온 주변 지인들에게 나는 군대에서 꼭 공부를 열심히 하고 나올 것이다라고 말하면 항상 돌아오는 대답은 군대에서 공부하기 쉽지 않을 것이라는 말이었다.

실제로 자대 배치 후, 몇개월동안 생활을 해보니 정말 꾸준히 할 수 있을까하는 생각이 들었다.

업무 난이도도 높았지만, 해야 할 업무량이 너무나도 많았다.

그래도 이런 상황에서 꾸준히 목표 달성을 위해 시간을 내고, 노력할 수 있어야 어떤 상황에서도 꾸준함을 유지할 수 있지 않겠는가.

그래서 훈련이나 야근, 주말 출근을 하는 날을 제외하고서는 거의 매일 사지방에 가서 개발을 했었다.

일과 후 개인 정비 시간에는 알고리즘 공부를, 1시간 반 정도의 연등 시간에 블로그 개발을 진행했는데, 연등만큼은 정말 꾸준히 나갔었다.

그렇게 해서 성공적으로 개발을 마무리했고, 총 2개월 반이라는 기간동안 이 프로젝트에 매진했었다.

이렇게 군대에서 진행한 첫 프로젝트를 성공적으로 마무리하니까 여기에서 하고 싶은 것이 계속 떠올랐다.

오랜 고민 후에 정한 두 번째 프로젝트는 바로 블로그 제작 인터넷 글강의를 작성하는 것이다.

제작년, React 강의를 제작하던 당시 거의 3개월을 쏟아부어 완성했던 것을 생각하면 이번 프로젝트는 블로그 개발보다 훨씬 오래 걸릴 것 같다.

그래도 난, 이번에도 어김없이 도전해보려고 한다.

Prev
BOJ#2468 - 안전 영역 Review
Next
JavaScript 핵심 개념 - 프로토타입 체이닝#2 (Prototype Chaining)
Developer Hyun
ⓒ Copyright