프론트엔드 개발자의 네트워크 공부

펄핏 Perfitt·2022년 3월 2일
8

안녕하세요! 펄핏의 웹 프론트엔드 개발자 jean입니다. 이번에는 '프론트엔드 개발자의 네트워크 공부' 에 대해 이야기를 해보고자 합니다. 조금 더 정확하게는 프론트엔드 개발자가 네트워크 공부를 왜 해야 하는지, 저는 어떻게 해왔는지, 마지막으로 그렇게 공부한 것들이 어떻게 실제 업무에 도움이 되었는지를 순차적으로 말해보고 싶습니다. 그럼 들어가 볼까요?

왜 공부를 해야 할까?

가장 먼저 '왜'를 찾아봅시다. 웹 프론트엔드 개발자가 대체 왜 네트워크 공부를 해야 할까요? 여기에는 개발자마다 각자가 생각하는 이유가 있을 것입니다. 개발을 하는데 필요한 지식이기 때문에, 그냥 커리큘럼에 있어서, 모르니까 불편해서 등등... 저도 나름대로 찾은 결론이 두 가지 있습니다. 하나는 넓은 의미의 이유, 또 다른 하나는 좁은 의미의 이유입니다.

1. 넓게 - '웹' 개발자이기 때문

넓게 생각하면 아주 단순하게, 프론트엔드 개발자이기 때문입니다. 여기서 웹은 WWW, 월드 와이드 웹의 준말로, 인터넷에 포함된 서비스 중 하나입니다. 그런데 인터넷을 풀어 쓰면 Inter-Network 라는 말이고, 이것은 결국 네트워크 통신망인 거죠. 아주 거대하고 전세계적으로 연결된 네트워크 말입니다.

그렇기에 웹을 개발한다는 것은, 네트워크라는 그물망 아래에서 모든 것을 해내야 한다는 말이기도 합니다. 어떤 국가에서 살기 위해서는 그 나라의 생활규칙과 법을 준수해야 하듯이, 웹 개발을 한다면 네트워크를 알고 네트워크의 규칙을 준수할 수밖에 없겠죠. 그렇기 때문에 네트워크 공부를 해야한다고 생각합니다.

2. 좁게 - 일할 때 필요하니까!

어찌보면 당연한 이유입니다. 개발 업무를 할 때 네트워크 지식이 필요하기 때문입니다.

어떨 땐 별로 사용하지 않는 것 같다가도, 개발하면서 네트워크 지식의 필요성을 절감하는 경우가 종종 있습니다. 아래와 같은 상황을 한번 봐볼까요?

프론트엔드: (API를 사용하던 중) 어, 에러가 나네? 백엔드 님, 이거 안돼요!
백엔드: (보더니) 이거 400번 에러잖아요.
프론트엔드: 네? 그게 왜요?
백엔드: (한숨)

400번대 오류는 HTTP 상태코드에서 클라이언트 문제로 발생하는 에러로, 그 중에서도 400번은 클라이언트의 요청이 잘못되어 발생합니다. 프론트엔드에서 보낸 데이터가 잘못 되었을 가능성이 높은 거죠.

사실 위와 비슷한 상황은 제 경험담이기도 한데요, 지금은 웃으면서 이야기하지만 당시 상황에서는 진땀을 빼기도 했습니다.

아마 네트워크에 대한 지식이 충분했다면 위 상황은 발생하지 않았을 것입니다. 그렇기에 네트워크에 대한 얄팍한 지식만 가지고 있었던 저는 제대로 된 공부의 필요성을 절감하게 됩니다. 에러가 발생할 때마다 일일이 다른 개발자 분들께 여쭤볼 수도 없는 노릇이었고, 그때 그때 공부를 하기에는 업무를 처리하기에도 시간이 빠듯했으니까요.

일을 제대로 하려면 네트워크에 대한 지식을 미리 쌓아야겠다! 이것이 제가 공부에 필요성을 느꼈던 이유 중 하나입니다.


그렇다면 어떻게?

필요성은 알았으니, 이제 어떻게 공부해야 하는지가 고민이 되는데요. 아마 요즘처럼 공부할 수 있는 자료가 많은 시대는 없을 것 같습니다. 책, 강의, 인터넷 동영상, 구글링 해서 나오는 블로그 글 읽기 등 수 많은 자료가 있죠. 하지만 저는 이 중에서도 가장 고전적인 방법인 을 선택했습니다. 단편적인 지식을 얻고자 하는 게 아니라, 하나부터 열까지 차근차근 공부해나가고 싶었기 때문입니다.

1. 모두의 네트워크

가장 처음 선택한 책은 모두의 네트워크라는 네트워크 입문 도서였습니다. 설명이 쉽고 친절하게 되어 있다고 주변에서 추천을 많이 받았기 때문입니다. 듣던대로 해당 책은 확실히 이해하기 쉬웠습니다. 내용 자체가 쉽고 간단해 한 번 읽는 것 만으로 모든 내용을 알 수 있다는 것은 아닙니다. 대신 기술서 특유의 어려운 언어 사용과 설명이 적고, 그 자리를 쉬운 언어와 간단한 그림이 채우고 있어 초심자들이 이해하기 수월한 책이라는 생각이 들었습니다. 해외 책이기에 우려했던 번역 문제도 없었고요. (대신 아재개그마저도 로컬라이징 되어있음)

저는 이 책을 위의 이미지처럼 PPT로 정리를 하면서 읽었습니다. 원래 줄글로 정리하며 책을 읽는 타입인데, 네트워크는 도식화된 내용이 많아 PPT로 한눈에 보이게 정리하는 것이 좋겠다는 CTO 님의 추천이 있었습니다. 그래서 표 같은 것들은 따라 그리면서 공부를 했는데요, 나중에도 보기 쉽고 훨씬 이해가 잘 되는 느낌이었습니다.

위 이미지는 데이터를 송신할 때 이루어지는 캡슐화 과정을 정리한 것입니다. 캡슐화 과정에서는 계층마다 데이터에 헤더트레일러가 붙게 되는데, 이 과정을 도식화하여 표현했습니다. 그냥 글로 읽을 때보다 훨씬 직관적이고 이해가 쉬워보이지 않으신가요? 저는 이런 방식으로 공부를 하면서, 평소보다 지식을 머릿 속에 잘 담을 수 있었던 것 같습니다.

책 전체를 정리해가면서 읽을 정도로 '모두의 네트워크'는 만족스러운 책이었습니다. 다만 기본서이기에 깊은 내용까지 공부하는 데에는 부족함이 느껴졌죠. 때문에 다음 단계를 이어갈 만한 책이 필요했고, 제가 찾은 것은 HTTP 완벽 가이드라는 도서였습니다.

2. HTTP 완벽 가이드

웹 개발을 한다는 사람이라면 한 번쯤은 들어봤을 유명한 책, HTTP 완벽 가이드입니다. 700페이지를 넘는 두께와 육중한 무게를 갖고 있어, 받아들자마자 포스에 압도당하게 됩니다.

HTTP는 Hypertext Transfer Protocol의 줄임말로, HTML 문서와 같은 리소스들을 가져올 수 있도록 하는 프로토콜입니다. 웹 문서를 주고 받을 때 이렇게 하겠다고 정해놓은 통신 규약인 거죠. 웹을 이루는데 매우 중요한 기술이기 때문에, 해당 도서에서는 완벽 가이드라고 이름 붙일 정도로 심도 있게 다루고 있습니다.

또한 중심 주제인 HTTP 뿐만 아니라 웹에 대한 기초 설명, HTTP와 함께하는 다른 인터넷 기술들까지 폭넓게 설명하고 있어서 네트워크 지식을 단단히 다지기에 더할 나위 없이 좋을 책이라는 생각이 듭니다.


이 지식을 어디에 쓸 수 있었는가?

지식의 필요성도 알았고, 공부도 했겠다. 그럼 이렇게 열심히 얻은 지식을 어떤 실제 업무에서 사용할 수 있었을까요?

1. 쿠키와 웹 스토리지

개발을 하다 보면 종종, 클라이언트 측에서 데이터를 가지고 있어야 하는 일들이 생기곤 하죠. 저도 사용자가 신발의 Fit을 평가하는 설문조사 웹페이지를 만든 적이 있는데 (잊지 마세요, 펄핏은 발 측정을 통해 완벽하게 Fit 되는 신발을 찾아주는 어플입니다!) 이 과정에서 유저의 설문 내용을 저장해두는 흐름이 필요했습니다.

이때 기존에 공부했던 쿠키와 웹 스토리지 개념을 떠올렸고, 각각의 특성을 비교해 선택하고 개발할 수 있었습니다. 쿠키는 저장할 수 있는 용량이 조금 더 적다거나, 웹 스토리지 중 세션 스토리지는 세션이 닫히면 데이터가 사라진다거나 하는 특성들 말이죠. 기존에 알고있던 지식을 활용할 수 있어 뿌듯했던 경험이었습니다.

2. 각종 에러

네트워크 단에서 발생하는 각종 에러를 해결하는 데에도 도움이 되었습니다. 대표적으로는 CORS 에러를 뽑을 수 있을 것 같습니다.

CORS는 Cross-Origin Resource Sharing의 줄임말로, 한 출처를 가진 리소스가 다른 출처의 리소스에 접근할 수 있도록 허용하는 정책입니다. 그러나 마구잡이로 다른 리소스에 접근할 수 있는 것은 아니라, 이 정책을 위반했을 때에는 위 이미지와 같은 에러가 발생하게 되는 거죠.

해당 에러 역시 처음 마주했을 때는 난감하고, 이걸 직접 해결해야 하는지 백엔드 개발자 분께 말씀 드려야 하는지 헷갈리기도 했지만, 지금은 나타나도 익숙하게 처리할 수 있게 되었습니다.


마치며

이처럼 여러 에러를 처리하기 수월해졌다는 점에서, 네트워크 공부의 쓸모는 충분했다고 볼 수 있겠죠?

이상으로 웹 프론트엔드 개발자로서 경험했던 네트워크 공부에 대한 이야기를 마치겠습니다. 저도 이 분야에 대해 엄청난 전문가는 아니기 때문에 조금 멋쩍게 느껴지기도 하는데요. 하지만 어떻게 공부해야 할지 갈피를 잡지 못하는 분들께 도움이 되길 바라는 마음으로 열심히 작성해 보았습니다. 이 글이 조금이라도 참고가 될 수 있다면 좋겠습니다.

그럼 끝까지 읽어주셔서 감사합니다! 펄핏의 웹 프론트엔드 개발자, jean 이었습니다.

profile
Beyond The Size Limit

0개의 댓글