[Vue의 현실] 현실편..

uriyang·2021년 7월 25일
23

Vue의 현실

목록 보기
2/6
post-thumbnail

Vue를 쓰는 이유와 현실

Frontend 분야에는 React, Angular, Vue.js. 이렇게 프레임워크 3대장이 존재한다. 각각 특징들은 구글에 검색해보면 많이 나온다. Vue를 검색해보면 나오는 키워드들은 대부분 "쉽다","지원하는 라이브러리가 많다","문서화가 잘 되어있다" 정도이다.

최신 트렌드를 따라가는 흐름에 Vue.js를 사용하는 곳도 늘어나기 시작했지만, 사실상 Frontend 프레임워크 점유율은 React가 가장 많다. Vue.js는 쉬운 접근성을 내세워 주로 빠르게 결과를 내야 하는 소규모/신생 스타트업이나 정부 프로젝트, 기존 jQuery의 대체재로 사용되는 곳이 많아졌다. 그러다 보니 막상 Vue.js로 만들어진 서비스들은 Frontend 개발자 없이 시작했거나, 이제 막 입문한 신입 개발자에 의해서 만들어진 경우들이 꽤 많다.

Vue 개발자는 힘들다

서비스를 오픈한 기업들은, 운영을 하며 자연스럽게 다양한 요구사항들이 늘어나게 되고 화면에 적용해야 할 기획요소도 늘어나게 된다. 그러면서 초반에 서비스를 개발한 개발자(백엔드/디자이너/신입 개발자)는 점차 한계를 느끼기 시작한다. 그때 회사에 Frontend 개발자를 뽑아야 한다고 요구하기 시작한다. 그리고 그렇게 입사한 "Frontend 개발자"가 바로 이 글을 읽고 있는 여러분이다.

우선 처음으로 맞닥뜨리는 상황은 문서가 없는 경우들이 많다. 그래서 기존 코드를 분석하기 위해 코드를 열어보는 순간, 의도를 알 수 없는 괴상한 코드들이 머릿속에 혼란을 주기 시작한다. 주변의 개발자들에게 코드 의도에 대해 질문해봐도 대부분 잘 모르는 경우가 많다. 그리고 Frontend 개발자가 입사하는 순간부터는 "이제 담당할 사람이 왔으니, 알아서 잘하겠지" 그분들은 이제 본 업무에 최선을 다한다. 이제 "이 막막함을 어떻게 해소해야 할까?" 고민되기 시작할 때, 요구사항이 쏟아지기 시작한다. 우선 일은 해야 하니, 자연스럽게 엉망진창인 코드에 숟가락을 하나 더 얹고 만다.

그리고 그러한 상황이 반복될수록 개발자에겐 이런 점들이 점점 불어난다.

  • Frontend 개발자로서의 앞으로 커리어에 대한 걱정!
  • 코드에 대한 분노와 코드의 라인 수
  • 원래의 방식에 대한 망각과 이제 무슨 코드가 좋은건지 모르겠는 혼란 지수!
  • 덕지덕지 붙은 코드의 스파게티 지수!

이 글은 지금 고개를 끄덕이고 있는 "우리"와 같은 개발자들을 위해 시작했다. 개발하다 이런 상황의 코드를 만났을 때, 어디서부터 응급처치를 해야 할 지 직접 했던 고민들과 고민을 통해 얻는 인사이트를 공유하기 위한 글이다. 물론 개인적인 경험을 토대로 쓴 글이니, 모든 상황에 들어맞지 않을 수 있다. 그렇다면 제보해주면, 피드백을 통해 조금씩 고쳐나갈 생각이다.

그래서..

세상에 좋은 환경에서 좋은 코드만 보면서 일하는 개발자들도 많을 것이다.(정말 부럽다) 하지만 잘하고 싶고 열심히 하고 싶은데도, 현실의 벽에 부딪혀서 막막한 개발자들도 많이 있을 것이다. 이런 개발자들에게 도움이 되는 글을 쓰고 싶다.

글이 길어져 진짜 코드에 대한 이야기는 다음 글부터 올릴 예정이다. 다음 주제를 상상해보시길 바라며, 살짝 덧붙여보자면 가장 흔하게 반복되는 중복을 줄이는 방법이다.

profile
개발자들에게 위로와 힘을 주고 싶습니다. 효율적인 시스템과 개발 문화에 관심이 많아요 ^_^

12개의 댓글

comment-user-thumbnail
2021년 7월 27일

글 잘 읽었습니다! 공감되서 몇자 남깁니다 ^^;;

회사에 입사를 했는데, React 로 되어있는 프론트엔드 프로젝트가 존재
(개발팀 리드라는분이 학습하면서 하셨다는데)

주석 없음
README.md or Notion 등 관련한 문서가 없음
React.js 를 CRA 로 생성한 경우에는 .env 관련한 설정이 문서에 있으나, 본인 맥환경만 고려해서 cp 명령어로 .env 를 npm script 에 따라 물고들어감 (이야기 해줘도 고치지않음)
redux + redux-saga 가 셋팅이 되어있으나, 하는건 좋으나 production 레벨까지 콘솔보면 redux + redux-saga 관련한 로그가 10줄이상 출력이 됌
스웨거로 API 목록이 있으나, 파라미터들에 대한 설명이라던가 무엇을 주는지 명확하지 않음(그래서 작업하면서 console.log() 로 찍어보던가 postman 달고살았음)
서버단에서 처리되어야할 데이터를 프론트에서 검사하고 체크하길바람 -> 어떤 데이터를 조회해오는데 완전히 생성이 안되어있으면 list 에서 제외해야하는데, 이걸 null 로 주고 프론트단에서 체크하라고함
SEO 에 대한 개념이 없으며 SSR 을 사용하면(Vue 는 Nuxt.js, React 는 Next.js) SSR 도 서버에서 처리해주는건데 거기다가 API 다 작성해서 하면 안되냐라는 헛소리 시전 (그러시면 그냥 예전처럼 프로젝트 Monolithic 으로 하면됌;;) :

프론트엔드 개발자는 나름 괴롭습니다.
어떤 사람은 퍼블리셔수준으로 생각하는 사람도 존재를 하지요.

쓰다보니 너무 나갔네요 ㅠㅠ

자칭 17년차라는 리드 개발자가 찍먹하면서 저러니까 아주 미칠뻔했습니다..
그럼 이만 ㅠㅠ

2개의 답글
comment-user-thumbnail
2021년 7월 28일

좋은 글이네요!
아무래도 Vue커뮤니티 특성상 가이드는 해주지만, 가이드를 따르는 내에서는 자유롭게 활용하는 것을 지향하므로 보기에 어려운 코드들이 생기는 거 같습니다.
Vue repository에서는 사용방법, 개선사항 등 많은 논의가 이뤄지고 있어서 참고하시면 많이 도움이 되실거예요.
저는 많이 도움됐습니다. :)

1개의 답글
comment-user-thumbnail
2021년 7월 29일

실제로 일어날수 있는 현실적인 문제들에 대해서 좀 알겠네요.
어느정도 공감도 가고 프론트엔드 개발자를 준비하는 입장에서 충분히 저러한 개발자가 될 수 있기에 진지하게 생각하게 되네요.
다음 글도 기대하겠습니다.

1개의 답글
comment-user-thumbnail
2021년 7월 30일

Vue개발자로 제목에 이끌려 글을 봤는데요..! 오픈 카톡방에서 자주 뵈었던 어리양 ? 님 이시군요! 반갑습니다 ^^.

1개의 답글