부스트코스 웹 프로그래밍(풀스택) 과정을 마치며...

해당 글은 네이버 커넥트 재단에서 운영하는 부스트코스 "웹 프로그래밍(풀스택)" 과정을 마친 후 이 과정을 통해 얻을 수 있었던 경험에 대해 작성한 회고 글입니다 :)

 

과정 시작 동기 및 간단한 소개

저는 유튜브 ‘생활코딩’ 채널의 ‘웹 n 시리즈’ 과정을 통해 처음으로 웹 개발을 배웠습니다. ‘웹 n 시리즈’ 과정을 통해 HTML, CSS, JavaScript의 기본적인 사용법과 HTTP, IP, DNS 등 웹의 기본적인 개념을 학습할 수 있었습니다. 하지만 이 과정만으로는 웹 개발을 하기에 부족하다고 생각하여 제가 직접 주도적으로 코드를 설계하고 작성할 수 있는 프로젝트 기반의 본 과정을 시작하게 되었습니다.

 

해당 과정은 프로젝트를 수행하기 전 강사분들께서 기초적인 지식만 설명하신 후 수강생이 혼자 알아서 단계별 프로젝트(자기소개 홈페이지, 투두리스트, 예약관리시스템)를 프론트엔드와 백엔드 모두 처음부터 끝까지 구현해야하는 과정이었습니다.

 

웹 프로그래밍(풀스택)

 

 

웹 프로그래밍(풀스택) 과정을 통해 배운 점

👬 백엔드 개발자와 프론트엔드 개발자간 협업의 중요성

우선 이 과정을 통해 백엔드 개발자와 프론트엔드 개발자간 협업의 중요성을 느낄 수 있었습니다. 프론트엔드 개발자는 웹 페이지를 구성할뿐만 아니라 사용자의 이벤트(클릭, 입력 등)를 통해 사용자와 인터랙션(상호작용)하는 일이 많습니다. 이때 클라이언트에서 API 호출을 통해 서버로부터 데이터를 응답받아 이를 통해 웹 페이지를 동적으로 구성하는 일이 많기 때문에 백엔드 개발자는 프론트엔드 개발자가 이 데이터를 처리하는 관점에서 설계해야되고 프론트엔드 개발자는 데이터 처리 사항에 대해서 백엔드 개발자에게 구체적이고 명확하게 설명해주어야 합니다. 즉, 개발자들은 개발 역량도 중요하지만 의사소통 능력 역시 중요하다는 것을 본 과정을 통해 배울 수 있었습니다.

 

저는 백엔드 개발자가 되는 것을 목표로 하고 있지만 추후 프론트엔드 개발자와 협업하는 일이 있을 때 이번 과정을 통해 배운 경험들을 통해 프론트엔드 개발자 입장에서 데이터를 어떻게 처리하는지 생각해보고 또한 원활하게 의사소통할 수 있는 방법에 대해서 고민해야할 필요성을 느꼈습니다.

 

우선 이 과정을 통해 백엔드 개발자와 프론트엔드 개발자간 협업의 중요성을 느낄 수 있었습니다. 프론트엔드 개발자는 웹 페이지를 구성할뿐만 아니라 사용자의 이벤트(클릭, 입력 등)를 통해 사용자와 인터랙션(상호작용)하는 일이 많습니다. 이때 클라이언트에서 API 호출을 통해 서버로부터 데이터를 응답받아 이를 통해 웹 페이지를 동적으로 구성하는 일이 많기 때문에 백엔드 개발자는 프론트엔드 개발자가 이 데이터를 처리하는 관점에서 설계해야되고 프론트엔드 개발자는 데이터 처리 사항에 대해서 백엔드 개발자에게 구체적이고 명확하게 설명해주어야 합니다. 즉, 개발자들은 개발 역량도 중요하지만 의사소통 능력 역시 중요하다는 것을 본 과정을 통해 배울 수 있었습니다.

 

저는 백엔드 개발자가 되는 것을 목표로 하고 있지만 추후 프론트엔드 개발자와 협업하는 일이 있을 때 이번 과정을 통해 배운 경험들을 통해 프론트엔드 개발자 입장에서 데이터를 어떻게 처리하는지 생각해보고 또한 원활하게 의사소통할 수 있는 방법에 대해서 고민해야할 필요성을 느꼈습니다.

 

🧑‍🔧 유지보수가 용이한 코드 작성의 중요성

또한 어떤 기능을 구현함에 있어서 코드를 작성할 때는 기능 구현도 중요하지만 서비스 운영 시 유지보수 관점에서 네이밍 컨벤션 준수, 가독성 있는 코드 작성 등을 고려하여 코드를 작성하는 것의 중요성을 배울 수 있었습니다. 특히, 마지막 프로젝트 “예약관리시스템”의 경우 기능 구현에 초점을 맞춘 코드를 작성했다가 “메인 화면”, “상세 화면”, “예약 하기”, “한줄평 쓰기” 등 프로젝트의 규모가 커질수록 오류 발생 시 오류의 원인을 발견하기 어려웠을뿐만 아니라, 코드 수정 시 많은 시간이 소요되거나 코드 관리가 어려워지는 문제가 발생했습니다.

 

추후 코드 리뷰와 함께 지속적인 리팩토링을 통해 불필요한 코드를 줄여나가고 코드를 서비스 기능별로 체계화함으로써 이러한 문제를 해결할 수 있었는데, 이러한 과정을 통해 느낄 수 있었던 것은 코드를 작성하기 앞서 먼저 최대한 서비스 기능별로 체계화하는 것이 중요하다는 것이었습니다.

 

이를 성공적으로 마치면 기존 코드를 재사용하기 용이하고 오류가 발생하거나 수정이 필요한 경우에도 손쉽게 유지보수할 수 있었습니다. 또한 변수명이나 메서드명을 작성함에 있어서 이름만 보고도 속성과 기능을 알 수 있도록 작성하는 것 역시 추후 유지보수면에서 필수적임을 느낄 수 있었습니다. 기능 구현에 집착하면 이러한 점을 소홀히 하기 쉬웠기에 추후 프로젝트 시에는 이러한 점을 염두해두고 프로젝트를 수행해야 할 필요성을 많이 느꼈습니다.

 

👩‍💻 테스트의 중요성

어떤 기능을 구현하고나면 그 기능이 제대로 돌아가는지를 확인하고 다음 단계(step)으로 넘어가는 것이 중요하다는 것을 배울 수 있었습니다. 위에서와 마찬가지로 기능 구현에 집착하다보면 이러한 과정을 건너뛰고 개발하게 되는데, 이는 잠재적 리스크를 가지고 있게 됩니다. 점점 프로젝트의 규모가 커질수록 오류를 발견하기 어려워지는데, 만일 이전에 테스트를 제대로 했다면(정상적으로 동작했다면) 최근에 코드를 작성한 부분에서 오류가 나온 것으로 쉽게 유추해볼 수 있었습니다. 하지만 이 테스트 과정을 거치지 않았다면 처음 작성했던 부분부터 고려해야하는데, 기능별로 얽히고 얽힌 프로그램에서 이를 발견하기란 쉽지 않은 일이었습니다.

 

당장은 귀찮아도 차근차근 이러한 과정을 밟다보면 오히려 더 빠른 시간 내에 프로젝트를 정상적으로 구현시킬 수 있다는 것을 느낄 수 있었습니다. 향후에 프로젝트를 진행 시에도 이러한 테스트를 기반으로 프로젝트를 추진해야할 필요성을 느낄 수 있었습니다. 또한 웹 애플리케이션의 경우 다수의 사용자가 접속하게 되므로 이를 Home Server를 통해 주변 지인들에게 배포하여 동작 확인을 해보는 것도 하나의 좋은 방법이었습니다. 이는 스스로 테스트할 때 발견하지 못했던 부분들을 발견할 수 있도록 도와주었습니다.

 

⚔️ 첫째도 보안, 둘째도 보안

이 과정을 거치기 전 저는 코드를 작성할 때 사용자가 입력하는 데이터에 대해 무심코 이를 받아와 서버에 전송하는 등 해당 데이터들을 의심하지 않았었습니다. 하지만 이번 과정을 통해 사용자가 입력하는 데이터는 반드시 검증해야한다는 것을 배울 수 있었습니다. 우선 브라우저 단에서 HTML 또는 자바스크립트(유효성 검사 등)를 통해 1차적으로 사용자 입력 데이터를 제한했습니다. 그리고 “브라우저 개발자도구”를 통해 이를 우회하는 경우를 대비해 해당 데이터를 전송받는 서버 단에서 다시 한번 더 검증하도록 함으로써 사용자 입력 데이터로 인해 발생할 수 있는 문제들을 미연에 방지시킬 수 있었습니다.

 

보안과 관련된 코드 리뷰

 

보안 역시 서비스 기능 구현과 직접적으로 연결되는 부분은 없지만 서버 내 오류, 개인 정보 유출 등의 심각한 문제를 초래할 수 있는 만큼 추후 프로젝트를 추진 시에도 이러한 보안적인 관점에서 코드를 작성해야할 필요성을 많이 느낄 수 있었습니다.

 

👨‍🏫 코드 리뷰의 중요성

또한 코드 리뷰의 중요성을 느낄 수 있었습니다. 기술적(쿼리 성능 등)인 부분이나, 유지보수적(네이밍 컨벤션 등)인 부분이나, 보안적(사용자가 입력하는 데이터는 무조건 비신뢰 등)인 부분 등 현직 개발자들이 실무를 처리하는 관점에서 제 코드의 부족한 점을 확인할 수 있었고 코드를 작성함에 있어서 기존의 자기 생각에 매몰되지 않고 다양한 관점에서 코드를 바라볼 수 있는 안목을 기를 수 있었습니다.

 

코드 리뷰어의 리뷰

 

웹 프로그래밍(풀스택) 과정 중 코드 리뷰어와의 질의 응답

 

🏋️ 스스로 문제를 해결할 수 있는 능력

이 과정을 진행하면서 프로젝트의 기능 구현과 기술요구사항 등을 충족시키기 위해 수많은 고뇌와 구글링 그리고 다양한 참고 서적 또는 강의 영상을 참고해야했습니다. 이때 누군가의 설명에 의존하지 않고 자기주도적으로 학습해나감으로써 성장하는 자신을 발견할 수 있었습니다. 특히, 아무도 가르쳐주지 않는 상황에서 어떻게 스스로 문제를 해결해야하는지를 배울 수 있었던 것이 이번 과정에서 얻은 가장 큰 수확이었다고 생각합니다.

 

부스트코스 웹 프로그래밍(풀스택) 수료증

 

구현 영상 🎥

자기 소개 홈페이지

 

 

To do list

 

 

예약관리시스템

 

 

 

향후 계획 🏃‍♂️

본 과정은 사실 “실제 서비스”를 제공하는 웹 사이트라기보다도 마치 제품을 출시하기 전 시제품 같은 “프로토타입” 형태로 이를 다 구현했다고 하더라도 실제 서비스를 운영할 때와는 많은 차이가 있을 것이라고 생각합니다. 하지만 본 과정을 통해 웹이란 무엇이고, 이 웹이 어떻게 구성되어있고 어떻게 구현되는지 등 웹 프로그래밍의 전반적인 흐름을 배웠다고 생각합니다.

 

향후에는 코드스쿼드 2022 마스터즈 코스 "Java 웹 백엔드" 과정을 통해 컴퓨터 과학(Computer Science)이나 Spring 세부 기술 등 이번 과정에서 채우지 못했던 기술적인 부분들을 좀 더 보완하고자 합니다. 또한 프론트엔드부터 백엔드까지 혼자서 개발했었던 이번 과정에서 배우지 못한 실제 다른 개발자들과 의사소통하고 협업하는 스킬을 익히고자 합니다.

 

즉, 이번 과정에서는 누군가의 도움 없이 스스로 문제해결을 하는데 초점이 맞춰져 있었다면 다음 마스터즈 코스 과정에서는 팀원(Team Player)이라는 마음으로 문제 해결에 있어서 나의 성과보다는 팀이 성과를 잘 낼 수 있도록 문제에 접근하는 등 협업하는 방법을 배우고자 합니다. 또한 협업하는 과정에서 팀원들간 문제에 대해 많은 의사소통을 하게 될텐데 이러한 과정에서 나의 부족한 점을 발견하고 개선해 나가는데 집중하고자 합니다.

 

아울러, 이번 과정에서는 프로토타입 형태의 3가지 웹 서비스를 개발해보았지만 마스터즈 코스 과정에서는 실제 서비스를 제공하여 이를 사용자들이 사용할 수 있는 정도의 웹 애플리케이션을 개발하고자 합니다. 그 과정에서 추가적으로 배워야할 부분들은 많겠지만, 이번 과정을 통해서 배운 문제 해결 능력 등을 통해 충분히 수행해낼 수 있을 것이라고 생각합니다.