[포스코 x 코딩온] 웹개발 풀스택 코스 7주차 교육 회고 feat. 백엔드 시작

이번주는 2가지의 일이 있었다.

 

1. 프론트엔드 프로젝트 발표

2. 백엔드 수업 시작

 

 

---

 

1. 프론트엔드 프로젝트 발표

우리 팀은 1등을 했다!!!!!!

 

다른 팀들도 매우 우수하게 제작을 해서 우리팀이 1등을 할거란 생각은 못했다.

그런데 많은 분들이 우리의 페이지를 좋게 봐주셨고, 투표 결과 우리팀이 1위를 하게 되었다.

 

너무 기뻤다. 일단 팀원들의 노고가 잘 반영되어 각자 뿌듯한 결과를 얻었다는 점이 좋았고,

나 스스로에게도 대견스러웠고, 잠을 못잔 보람도 느껴졌다.

물론, 1등을 안했어도 결과와 상관없이 최선을 다했다고 내 자신을 보듬아 주었겠지만,

막상 1등을 하니 보상 받는 느낌도 있어서 너무나 좋았다.

많은 아쉬움이 있었는데... 좋은 결과를 받아서 기뻤고, 한편으로는 앞으로 더 잘해야겠다는 동기부여가 생겼다.

 

프로젝트 팀이 꾸려지고, 작업을 하는 동안 평균 수면시간 4시간 정도 한 것 같다.

처음 하는 팀 프로젝트였고, 재대로된 결과물을 내는 것도 이번이 처음이라 열정이 넘쳤던거 같다.

피곤 보다는 우리가 원하는 그림을 어떻게 어떤 기술로 구현을 할지,

코드를 어떻게 효율적으로 만들지 등등

프로젝트를 위한 고민이 더 앞섰다.

 

아래는 우리 팀의 결과물이다.

https://nimble-cajeta-971434.netlify.app/

Netflix Music

로그인 화면을 넘어가야 인트로와 메인페이지가 나온다.

로그인은 회원가입을 눌러 진행하면 된다.

아직 백엔드를 배우지 않았기에, 임시적으로 웹브라우저 자체내에 내장된 로컬스토리지를 이용하였다.

크롬을 이용해 위 링크를 들어가 회원가입을 하면, 크롬 브라우저 자체 내장 메모리에 회원 정보가 저장이 된다.

그런데 이건 보안이 안되므로 궁금하신 분은 기존에 사용하는 이메일과 비밀번호를 입력하지 말고,

임의로 작성하여 회원가입을 완성하면 된다.

그 후에 로그인을 하면 우리가 공을 들여 만든 인트로가 나오고 바로 메인페이지로 넘어간다.

 

인트로 동영상 화면

메인베너 영상 삽입 및 스와이퍼 기능과 뮤트 기능들

이제부터는 아쉬웠던 점을 남겨볼까 한다.

 

첫 째는

시간 관계상 해당 음악들의 mp3파일이나 스트리밍을 연결하지 못했다.

그리고 외부 음악 사이트에서 제공하는 무료 API도 사용하지 못했다.

프론트엔드 프로젝트인 만큼, 눈에 보여지는 부분의 기능구현에 초점을 두고 진행했다.

추후에 백엔드와 DB를 배우게 되면, 이 부분들은 보완해야할 것 같다.

일단 프론트적인 기능 구현에 포커스를 두고 보면 좋을거 같다.

 

두 번째는

클론 코딩이라는 피드백을 받았다. 이 부분은 기획 단계에서도 충분히 감지된 리스크였다.

좀 더 창의적인 것은 없었을까하는 아쉬움은 남는다.

하지만, 메인 배너와 음악이 노출 되는 부분 등은 기존 웹페이지랑은 다르며, 코드의 구조 자체도 기존 페이지와 다르기 때문에 구현을 위한 기술적 설명을 자세히 덧붙인다면, 충분히 좋은 포토폴리오라는 긍정적인 평도 받았다.

 

세 번째는

발표에 대한 아쉬움이었다. 개발자로써 발표를 하는 것은 처음이라 어떻게 방향을 잡고 발표를 할지 조금은 갈피를 잡지 못한거 같다.

개발자 다운 발표는 기능 구현을 어떤 기술로 했는지, 어려운 점은 어떻게 기술적으로 풀어냈는지 등등을 좀 더 디테일한 설명이 있어야 한다. 그런 점에서 부족했다는 지적을 받았고, 그 포인트를 잡지 못한 것이 아쉬웠다.

우리가 메인배너를 기존 넷플릭스와 다르게 스와이퍼로 구성하였고, 스와이퍼 라이브러리의 내장된 이벤트 기능을 잘 활용하여 페이지가 넘어갔을 때 영상의 재생여부 및 초기화 기능도 구현을 했다. 그리고 스크롤 이벤트 기능을 넣어 사용자가 스크롤을 메인 섹션으로 넘겼을때 영상이 일시정지 되도록 기능도 구현했다. 이렇게 사용자의 동작이 있을 때, 반응해야하는 부분들을 즉, 영상의 재생여부 및 리로드 여부, 뮤트 기능 버튼의 활성화 여부, 리플레이 버튼의 활성화 타이밍 등 여러 요소들을 상황에 맞게 반응할 수 있도록 구현을 했다.

그런데 이런 부분들이 발표때 잘 녹아들지 못했다.

그뿐만 아니라 객체 배열을 통해 장르 섹션과 Top차트 섹션들을 효율적으로 처리한 방식이나, 필터기능이나 스와이퍼를 컨트롤 했던 부분들 등 우리 팀이 겪은 어려운 숙제들을 힘을 모아 풀어냈다는 점을 어필하지 못했다.

백엔드 프로젝트가 우리를 기다리고 있는데, 그때는 이런 부분들을 잘 녹여서 개발자 다운 발표가 될 수 있도록 해야겠다.

 

 

---

2. 백엔드 수업 시작

프로젝트 발표가 월요일에 끝낙고 화요일부터는 백엔드 파트에 돌입했다.

이제부터는 본격적인 Node.JS를 배우는 단계였다.

Node.JS설치와 NPM을 설치하여 필요한 패키지도 설치하였다.

eslint나 prettier 등 코드 작성시에 필요한 기능들을 추가하였는데, 너무나 편리하였다.

사전에 문접적인 오류도 잡아주고, 필요없는 공간들은 자동으로 지워주어 코드가 예쁘게 작성되도록 해주었다.

기능들이 너무나 신기하였다.

 

그 후에 express나 body-parser와 같은 데이터를 주고 받는 기능을 하는 패키지를 설치해 점점 더 깊게 진행이 되었다.

정말 신기했던 것은 프론트 쪽에서 form태그를 이용해 정보를 넘겨주면, 백에서 처리해주는 부분이었다.

부분적으로 배울 때는 큰 그림이 잡히지 않았는데, 이렇게 직접 데이터를 주고 받아 보니 정말 제대로 된 웹사이트를 만들 수 있겠다는 생각이 들었다.

 

남은 기간 동안 백엔드라는 방대한 범위를 배워야 하다보니 강사님도 속도가 점점 빨리 지셨다.

그래도 쉬는 시간이 점심시간, 그리고 수업 중간에라도 손을 들면 강사님이 친절히 알려주시고해서

이해를 아예 못하고 넘어가는 부분은 없었던 것 같다.

 

그리고 프론트 수업 보다 이해도적인 측면에서 높은 집중력을 보여야 했다.

프론트의 경우 원리 자체는 어렵지 않고 배치나 구현에 있어 어려움이 있지만, 백엔드 코드의 경우 패키지 내에 정의된 약속을 알아야 코드를 작성할 수 있었다. 그래서 강사님의 설명을 되도록 빠트리지 않고 이해하려고 했던 것 같다.

수업 시간에 작성한 코드

 

---

백엔드를 해보니 데이터를 주고 받는 것이 너무나 재미있다.

모든 걸 다 이해했다고는 말 못하지만, 현재까지 수업을 통해 이해 못한 부분은 없었다.

항상 친절하게 설명해주시는 강사님이 이번 주도 매우 감사했다.