[ 2023-02-13 ] 코딩 WIL 일지 (일주일을 돌아보면서 쓰는 일지)

이번주는 정신이 너무 없었다...
아니, 정신이 없었다라는 것보다는 많이 멍했다는 표현이 더 맞는 것 같다.

요 근래 나는 열심히 트위터 클론 코딩을 하고 있었다.
계속해서 공부를 이어나가다 보니 여러 가지 의문점이 생겼던 거 같다.
파이어베이스는 정말이지, 손 쉽게 로그인, 회원가입, CRUD 등의 기능을 쓸 수 있게 해준다.
프론트엔드 개발자들이 복잡하게 로직을 짤 일이 없다는 뜻이다.

난 말 그대로, 파이어베이스를 쓰는 방법을 익히면서 로직을 짜는 방법도 함께 공부하려고 트위터 클론 코딩을 시작했다.
그런데, 웃기는 것은 정작 파이어베이스 덕에 로직을 많이 다룰 일이 없다는 것이었다.
그때부터 머리가 아파오기 시작했다. 공부를 잘못하고 있다는 생각이 자꾸만 들었다.

그때부터 불안함에 정보를 열심히 모으기 시작했다.
프론트엔드 개발자를 준비하는 사람들의 경우, 대부분 공부를 할 때 파이어베이스를 쓴다고 한다.
하지만 현업에서는 파이어베이스를 다룰 일이 거의 없다고 한다.
백엔드들이 서버를 다루고, 서버를 짜서 프론트엔드 개발자들에게 넘겨주기 때문이었다.

서버를 다루고 그와 관련된 로직들을 다루는 게 백엔드 개발자라면 프론트엔드 개발자들이 하는 일은...?
뭔가 잘못되었다는 것을 여기서 확실히 느껴버렸다.
주변에 있는 백엔드와 프론트엔드 현업 개발자들에게 여러 차례 질문을 해본 결과,
로그인, 회원가입 등은 서버와 관련된 로직이며 백엔드들이 대부분 담당을 한다고 한다.
프론트엔드들이 그와 관련된 로직을 다룰 일은 거의 없다고 했다.

그 말을 듣고 머리가 많이 띵했던 것 같다.
지금껏 프론트엔드끼리 프로젝트를 이어왔기 때문에 서버 관련된 로직을 우리가 다 짜왔었는데
현업에서는 굳이 그렇게 할 필요가 없단다.
그럼 프론트엔드들이 하는 일은? 정말이지, 마음이 너무 복잡했던 것 같다.
물론 세 달이 지나도록 프론트엔드 개발자와 백엔드 개발자의 영역을 제대로 알고 있지 못하는 나도
너무 웃기긴 했다... 지금껏 뭘 위해서 이렇게 공부를 해온 건지...

지금부터 내가 들은 답변을 여기에 올려보도록 하겠다.

로그인/회원가입의 직접적인 로직 (DB의 유저 정보를 조회, 생성, 삭제하고, 이에 맞는 응답 전송, 또는 인증 과정 진행 등)은 프론트의 손이 닿지 않는 영역인건 맞습니다.(물론 그렇지 않은 회사도 있습니다) 본인이 풀스택 개발자를 희망하고 있지 않는 이상, 해당 로직을 직접 짜보는 과정이 필수는 아니라고 생각해요.

물론 서버의 동작 코드도 직접 구현해보면 어떻게 웹이 동작하는지 더 확실하게 파악할 수 있죠. 그리고 서버를 구축할 수 있는 능력이 자신만의 강점이 될 수도 있다고 생각합니다.

 

01.

우선 첫번째로 프론트엔드가 하는 일은, 화면 단위의 사용자 인터렉션을 서버 API 요청/응답으로 연동시켜주는 작업입니다.
만약 사용자가 사이트에 접속해 로그인을 한다고 가정하면 서버와의 통신 로직 구현 / 통신을 원활하게 하기 위해 수행하는 로직들을 구현하는 것이 프론트의 일이겠죠.
EX) 로그인 버튼 클릭

• 쿠키 값을 조회해 Access Token과 Refresh Token이 있는지 확인
  • 둘 다 없을 경우
    • 로그인 페이지로 이동 → Input에 사용자가 아이디, 비밀번호 입력 → 해당 값을 이용해 회원 정보 조회 (API 호출)
      • 회원 정보가 있을 경우 : 로그인 완료 및 발급받은 쿠키 클라이언트에 저장
      • 회원 정보가 없을 경우 : 회원가입 유도 과정
  • Access Token만 있을 경우
    • 로그인 → Refresh Token 갱신해 쿠키 저장
  • Refresh Token만 있을 경우
    • Refresh Token 서버 전송 → Access Token 재발급 → 쿠키에 저장 (자동 로그인)
  • Access Token, Refresh Token 둘 다 있을 경우
    • 로그인 → Refresh Token 갱신해 쿠키 저장

<aside> 💡 예시이므로, 웹 기획서에 따라 로직이 다를 수 있습니다.
</aside>

02.

다음으로 제가 생각했을 때 프론트엔드 개발자가 하는 일은, 웹의 사용성 개선이라고 생각해요.
디자이너를 하셨다고 들었습니다. 프론트 개발자는 웹의 직접적인 사용성에 관여하기 때문에, 기획자와 디자이너 분들이 기획서에 포함시키는 사항들 외에도 개발자 자신의 역량으로 구현해야 할 부분들이 많습니다.
예를 들어 몇가지가 있을 것 같아요.

• 사이트를 접속했을 때 Input에 자동으로 focus를 맞춘다.
• depth가 많은 카테고리를 타고 들어가다가 뒤로가기 버튼을 눌렀을 시, 카테고리 자체가 닫히는 것이 아닌 이전 depth로 이동해야 한다. (브라우저 히스토리 관리)
• 사용자에게 더 빠른 페이지 랜딩을 위해, 웹 최적화를 진행한다. (리소스 크기, 요청 갯수를 줄이거나, 리플로우 과정을 최소화 시키는 스타일 코드를 작성한다. / lazy loading, 웹 워커 등 적용이 있을 수 있겠네요)
• 모달이 열렸을 때 esc를 누르면 닫혀야 한다, enter를 누르면 다음 작업으로 넘어가야 한다.
  • 여러 key에 대한 당연한 로직 구현 등

물론 이러한 사항들에 대해 자세하게 기획서에 적어주는 분들도 많습니다.
또한 스타일 관련된 부분은 퍼블리셔 분들이 담당하시는 회사도 많죠.
하지만 이러한 웹의 사용성에 대해 계속해서 고민하고, 자신의 역량으로 구현하는 것도 프론트 개발자의 일이라고 생각합니다.

Ect.

이외에도 프론트 영역에서 고민할 사항들은 정말 많은 것 같아요.
어떤 툴을 사용했을 때, CSR SSR 등의 여러 방식 중 어떤 것을 선택했을 때,
우리 도메인에 맞는 웹을 적절하게 구현할 수 있을지
어떻게 하면 퍼블리셔 분들, 백엔드 분들과 원활하게 협업할 수 있을지,
웹 번들 사이즈를 줄이기 위해 어떤 방식으로 레포를 구성할 것인지,
컴포넌트 단위는 어떻게 설정할 것인지,, 일하면서 고민할 사항들이 정말 많다고 생각합니다.

결론적으로 말씀드리자면, 프론트는 보이는 영역에서의 모든 인터렉션
백엔드는 DB와 직접 연동이 필요한 작업들을 구현한다고 나눌 수 있겠네요. :)

 

Fin

프론트엔드 개발자가 되기 위해서는 해당 부분들 공부하시면 좋을 것 같습니다.
네트워크 CS 지식 / 브라우저 동작 원리 + 다른 부분에 대한 기초적인 CS 지식 (운영체제, DB 등)
JavaScript 기초 / CSS, SCSS 문법 / React 또는 Vue 등 라이브러리 하나 / Git
시간이 괜찮으시다면 요즘 많이들 사용하는 SSR Framework 하나(Next.js) / 전역 저장소 라이브러리 하나 (Recoil / Redux 등) / TypeScript

결국은 프론트엔드 개발자의 경우 가장 기초인 자바스크립트가 정말 탄탄해야 한다고 한다.
어느정도 기초가 다져지고 나서 프로젝트를 하면서 여러 가지를 경험하는 것이 가장 좋은 방식.

아니, 그런데 내가 프론트엔드 개발자들이 하는 업무와 관련된 것들을 학원에서 배웠었나...?
오히려 백엔드 개발자들처럼 로직 짜는 방법을 더 많이 배웠던 것 같다. 그러니 이렇게 마음이 싱숭생숭하지.
학원에 와서 아예 얻은 게 없는 건 아니지만, 정말 개발자가 되고 싶은 분들이라면 학원을 신중하게 알아보셨으면 좋겠다...
자칫하면 가장 중요한 기초인 자바스크립트를 2주 정도 겉핥기 하고 프로젝트만 죽어라 할 수도 있으니까...
시간이 조금 더 오래 걸리더라도 기초를 잘 잡아주는 곳에 가는 것이 현명한 선택이라고 생각한다.

대부분의 국비학원들은 기간과 돈이 한정되어 있기 때문에 프론트엔드 개발자가 되고 싶은 사람들에게
확실한 해답을 줄 수 없으리라 생각된다. 자칫하다가 나처럼 캠프가 거의 끝나가기 직전에서야 프론트엔드 개발자들이
하는 일의 영역을 깨닫게 될 수도 있다... ( 주변에 현업 개발자가 없으면 못 깨닫고 수료할지도 모른다 거짓말이 아니다 )

제발 돈 벌겠다고 개발자가 되고 싶은 학생들의 간절한 마음을 이용해먹는 그런 학원은 잘 걸러내길 바란다...
학원은 꼭, 돈이 들더라도 프로젝트시 백엔드와 협업시켜주는 곳으로 가기를...

• 아니 코딩 테스트 치는 한이 있더라도 대기업 부트캠프(프로그래머스, 네이버, 배민, 카카오 등...)를 가는게 좋다고 한다...

커리큘럼과 지원해주는 게 급이 다르다고...
쨋든 더 얘기해봐야 나만 짠내나니까 여기서 얘기를 끝맺겠다... 갑자기 술 마시고 싶다...
나도 빨리 트위터 코딩 끝내고 자바스크립트부터 다시 공부할 거다...^^

프론트엔드 개발자를 준비하는 분들이라면 이 글을 꼭 한 번쯤 읽어봤으면 좋겠다.
진짜 얼마 전 이 모든 사실들을 알고나서 한 며칠동안 너무나도 다 포기하고 싶었고 뭘 제대로 할 수가 없었다.
정보 하나 제대로 알아볼 생각도 하지 않고 시킨대로만 공부해온 내가 너무 한심해지는 순간이었다.