[React] 리액트로 이력서 만들기

진짜임

아니 왜 굳이?

그동안은 이력서를 노션에 써서 냈는데, 시니어 개발자분들은 pdf를 선호하시는 경향이 있는 것 같아 pdf로 이력서를 만들 필요성을 느끼게 되었다. 노션이 사용성이 굉장히 편리하고 좋지만, 이를 pdf로 변환해버리면 미묘하게 글자 크기나 여백이 마음에 안드는 경우가 많아서 골치가 아팠는데, 이 참에 pdf로 만들자! 하고 구글 docs를 딱 켜니 기능도 얼마 없고 너무 못생겨서 고민이었다. 그렇다고 인터넷에 돌아다니는 템플릿을 쓰기엔 너무 흔해 빠진 것 같고.. 그래서 figma로 만들까 하다가 아무래도 내가 개발자이기도 하고 코드가 더 손에 익으니 코드로 쳐서 만들어야겠다! 라는 생각을 하게 되었다. 솔직히 꼭 코드를 쳐야만 할 수 있는 건 아니지만 그냥 코딩이 하고 싶었던 맘이 제일 컸다. 게다가 github에 올려서 버전 관리를 하면 좋을 것 같다는 생각이 들었다. 난 그동안 정말 다양한 경험을 했기 때문에 모든 이력을 다 때려넣은 마스터 이력서를 만들고, 이력서를 낼 기업에 맞게 적절히 변형해가면서 낼 예정인데 그 때 git을 이용하여 버전을 관리하면 조금 더 편하지 않을까 하는 생각이 들었다. 그래서 굳이 이런 길을 택했다.

왜 React인가?

난 백엔드 개발자다. 그러나 이력서는 보여지는 것이 우선이기 때문에 프론트 작업이 필요했다. 이력서 멘토링을 몇 번 받으며, 이력서는 내용도 중요하지만 같은 내용이더라도 어떻게 보여주느냐가 생각보다 중요하다는 것을 느낀 적이 많다. 많은 프레임워크와 라이브러리 중에서 리액트를 선택한 이유는 그냥 리액트를 오랫동안 써왔기 때문에 그게 손에 익어서 편하기 때문이다. 바닐라JS로도 만들 수 있지만 굳이 편리한 라이브러리를 놔두고 그래야할 이유가 있을까? 그 때 리액트는 내게 최선의 선택이었다. 우선은 급하게 이력서를 낼 곳이 있기 때문에 적당히 json으로 데이터를 관리 하지만 나중에 시간적 여유가 조금 더 생긴다면 아예 정보를 입력받는 api 서버와 데이터베이스를 구축해서 조금 더 간편하게 만들까 하는 욕심이 들기도 했다. 나만 쓸거지만.. 내 시간은 귀하니까.

 

정말 이 방식이 최선일까?

그런데 막상 리액트로 프로젝트를 만들면서 느낀 것은.. 정말 이 방식이 최선일까? 하는 것이었다. 왜냐면 너무 힘들었기 때문이다. api를 안쓰고 정적 페이지를 만드는데 굳이 이렇게까지? 하는 생각이 들기도 했고 생각보다 내가 해온 프로젝트가 많아서 이걸 일일이 JSON으로 적는 것도 관리하기가 좀 까다로웠다. 게다가 난 디자이너는 아니기 때문에 생각만큼 예쁜 디자인이 나오지 않아서 아쉬움이 있었다. 그냥 이력서 내용을 채우는 것도 힘든데 이력서를 코딩으로 만들 미친 생각을 하다니... 내가 과연 잘하고 있는건가? 라는 의심이 몇 번 들었다. 게다가 난 마크다운이 너무 편한데, html 태그로 마크다운을 하고 있는 게 상대적으로 불편하게 느껴지기도 했다. 하지만 오히려 시멘틱 태그를 연습할 좋은 기회라고 생각하고 더 열심히 만들었다.

아주 약간의 코드 맛보기

컨텐츠를 리스트로 나열하는 컴포넌트를 살펴보면, item의 내용을 나열하고 싶은데, 부분 부분 bold 처리로 강조하고 싶은 부분들이 있었다.
이런 부분을 어떻게 적용하면 좋을지 고민하다가 dangerouslySetInnerHTML라는 속성을 알아냈는데, HTML을 넣으면 그게 적용되어 렌더링해주는 기능이 있었다. 이름에 dangerous가 붙었듯이, 보안상 좋지 않아서 사용을 권장하지는 않는데, 나만 보고 나만 수정하는 private repo라서 부담없이 적용할 수 있었다.

import { ContentList, ContentUL } from "./Styled";

interface ContentULSectionProps {
  items: string[];
}

const ContentULSection = ({ items }: ContentULSectionProps) => {
  return (
    <ContentUL>
      {items.map((item) => (
        <ContentList dangerouslySetInnerHTML={{ __html: `• ${item}` }} />
      ))}
    </ContentUL>
  );
};

export default ContentULSection;

완성하며

원래 코드로 짠 물건이 그렇듯이, 한 번 프레임을 구축해놓고 나니까 역시 이력서를 관리하기가 굉장히 편했다. 디자인이 막 그렇게 예쁜 건 아니지만 적당히 내가 원하는 만큼 깔끔하게 나오기도 했고 내용 배치도 내가 마음대로 css를 줘서 바꿀 수 있어 편했다. 주로 팀플을 해왔어서, 간만에 혼자서만 하는 거지만 이왕 하는 김에 TypeScript를 썼고, 디렉토리 구조도 나름 신경써서 했다. 클린코드로 짜기 위해 변수명, 컴포넌트 명 함수명 등 모두 신경써서 짰고 컴포넌트도 더이상 쪼갤 수 없을 때까지 쪼개어 분리했다. 그러다보니 생산성이 엄청 올라가서 내용을 채우는 것은 정말 금방이어서, 더 이상 다른 것에 신경쓰지 않고 내용만 채우면 되는 단계에 금방 도달할 수 있었다.

총 9장 중 맛보기로 몇개만...

느낀 점

처음에 리액트로 이력서를 만든다고 했을 때, 동료가 굉장히 불안한 눈빛으로 그렇군요, 라고 했었다. 말리고 싶은 눈치지만 이젠 내 성격을 알아서 냅두는 것 같은 기분. 나도 괜한 오기를 부리는 것일까 하는 두려움은 있었다. 그렇지만 막상 완성하고 나니 굉장히 뿌듯했고, 불안한 눈빛으로 보던 동료도 굉장히 호평했다. 거기에 더해 아래와 같은 많은 이점을 얻을 수 있었다.

혼자 개발하는 즐거움

요즘 협업의 중요성을 강조하며 많은 개발자들이 팀 프로젝트를 한다. 나도 내 프로젝트들 중 상당 부분이 팀프로젝트이다. 그러나 계속 팀플만 하다 보면 혼자서는 개발하는 묘미를 잊어버릴 수 있다. 내가 처음부터 끝까지 빌드해볼 수 있다는 자신감, 틀려도 되니까 부담없이 새로운 것을 적용해볼 수 있는 자유로움과 시간에 쫓기지 않아도 되는 여유 등이 그것이다. 그리고 결국엔 동료와 함께 개발하는 것이 그리워진다는 점. 인간관계에 이런 말이 있는데, "혼자서도 잘 사는 사람이 다른 사람과도 잘 지낼 수 있다." 나는 이 말이 개발에서도 마찬가지라고 생각한다. 조금 변형이 필요하지만.
개발은 "혼자서도 잘 해야 하고, 다른 사람과도 잘 해야 한다!"

git으로 버전 관리

의도했던 대로 git으로 버전 관리가 되는 게 너무 좋다. 이력서를 종종 뜯어고치는데, 노션으로 관리를 하면서 느꼈던 버전 관리의 불편함이 깃을 쓰면서 해소되는 것 같다. 어떤 회사에는 어떤 버전으로 지원을 했는지, 어떤 식으로 변화했는지 캡쳐를 떠서 Readme나 pdf만 넣어놔도 실행시키지 않고도 손쉽게 볼 수 있다.

코딩에 익숙해지고 재미가 붙는다. 특히 리액트에도

백엔드 개발자로 취업하고 싶은데 리액트를 붙들고 있는 것이 감점이 될까 싶어 아쉽지만, 나는 개발은 다 비슷하다고 생각한다. 분야마다 특성이 있지만, 개발은 개발이고, 뭐든 잘하면 좋지 않을까? 나는 언젠가 아키텍처를 설계하고, 팀을 리딩하는 시니어 개발자가 되고 싶다. 그러기 위해서는 한가지만 알아서는 안된다고 생각한다. 나는 이것 저것 다 경험해보고 다 잘하고 싶다. 그런데 사람들은 말한다. "그렇게 빠른 시간 안에 이걸 다 한다고? 에이~ 못해" 그러면 나는 대답한다. "저 모르세요? 저 ㅇㅇㅇ(내 이름)이에요~"

클린 코드를 적용해볼 수 있는 기회

그동안 클린 코드와 클린 아키텍처 책을 읽으며 무슨 말인지 알 듯 모를 듯 아리송했었는데, 이것을 코드에 적용하기 위해 동료들과 더 많이 이야기를 나누고 더 많은 시도를 해보며 노력하는 중이다. 리액트로 이력서를 만드는 것에는 특별한 아키텍처가 필요하다고 생각하진 않지만, 클린 코드를 생각하면서 체화시킬 수 있는 좋은 기회였던 것 같다. 테스트 코드도 짤까 했지만 그건 여기서 필요하지 않은 것 같다는 생각이 들어 관뒀다. 내 이력서는 테스트 통과 여부보다는 눈에 보이는 것을 더 믿어야 한다고 생각했기 때문이다.

이력서를 다시 쓰면서...

짧지 않은 시간동안 꽤 많은, 다양한 프로젝트와 스터디를 하고, 경력을 쌓으면서 내가 꽤 많이 성장했다고 느꼈다. 난 정말 헛되이 살지 않았구나. 내가 꾸준히 노력하는 사람이구나 라는 걸 다시 한 번 느끼게 되면서 한동안 잃어버렸던 자신감을 되찾았다. 누군가는 내게 왜 이렇게 짧은 시간동안 많은 것을 하냐고, 깊이가 없어보인다고 하지만 글쎄... 이젠 나만큼의 깊이 있는 주니어를 어디가서 찾을 수나 있을까 싶다. 섣불리 오만하다고 판단하지 마라. 오랜 기간동안 꾸준히 공부하며 많은 팀 프로젝트와 스터디를 통해 수많은 동료들을 보고 내린 결론이다.

주변의 반응

"진짜 광기"라는 말을 많이 들었다. 아직 광기는 조금도 보여주지 않았다고..?

그리고 열심히 해온 게 느껴진다고 했고, 디자인도 깔끔하고 괜찮다는 평을 들었다.

이 이력서를 보는 회사에게 하고 싶은 말

저를 데려가주세요...