BEYOND SW 캠프 15기 15주차 회고

부트캠프 15주차 회고를 적어본다.

학습 내용

1. Vue.js
   지난주에 이어서 Vue.js에 대한 학습이 진행되었다. 구성한 화면과 이전 백엔드 학습 시 작성한 서버를 연계하는 구체적인 예시를 다루었다.

배운 점

1. 프론트엔드와 백엔드의 연계가 중요하다는 것
   이번에 진행되는 프론트엔드 프로젝트는 지난 백엔드 프로젝트를 연계하여 화면을 완성하는 것인데, 수업에서 서버와 연결하는 부분을 보니 백엔드에서 작성한 엔드포인트나 Request, Response 객체를 그대로 사용해야 했다.

백엔드 프로젝트를 진행할 때는 화면까지 생각하지 못한 상태로 진행하다보니, 프론트 프로젝트 구성을 위해 작성한 엔드포인트나 로직을 수정해야 하는 부분이 발생하였다. 이전 기수 프로젝트를 확인해보면 프론트를 먼저 진행하거나 혹은 두 프로젝트를 함께 진행하는 경우도 많았고, 부트캠프 동기들의 이야기를 들어보니 보통 프론트가 먼저 만들어지는 경우가 일반적이라고 한다. 최종 프로젝트에서는 어떤 순서로 개발을 진행할 지도 논의해보면 좋을 듯하다. 한 번 경험해봤으니 백엔드를 먼저 진행하더라도 더 잘 할 수 있을 것으로 생각한다.

2. 프론트엔드 개발에서의 유지보수성, 재사용성 향상 작업
   프론트엔드 개발을 위해 필요한 스타일 시트를 html의 <style> 태그 안에 넣는 대신, 외부 css 파일로 분리한다거나, vue.js에 컴포넌트를 등록하는 등 유지보수성, 재사용성 향상을 위한 절차가 있음을 배웠다. 백엔드에서도 항상 작게 쪼개기, 중복 없애기, 재사용하기 등의 전략을 통해 유지보수성과 재사용성을 높이는데, 프론트엔드 개발에서도 동일한 전략을 사용하고 있었다.

유지보수성, 재사용성의 향상은 모든 개발에서 공통적인 관심 거리이기도 하고, 이전에는 백엔드와 프론트엔드의 구분 없이 개발이 진행되었다고 하니 자연스러운 현상이라고 생각된다.

문제 상황

백엔드, 프론트엔드 수업 코드 연계 시 500 Error 발생

• 설명: Products를 클릭했을 때, 화면에 상품 목록이 정상적으로 뜨지 않고 500 에러가 발생하였다.
  
• 원인: 하나의 프로젝트 안에서 강사님 코드를 받아오기 위해 별도의 패키지에 다른 이름의 엔드포인트를 설정했지만, 프론트엔드 코드에는 강사님 엔드포인트로 되어있는 게 원인이었다.
  
• 해결 방법: 위의 원인을 강사님께서 안내해주셔서, 프론트엔드 코드를 수정하여 해결하였다.
  

이 외에 403 에러가 뜨는 등 엔드포인트가 달라서 문제가 생긴 경우가 더 있었는데, 특히 Spring security 선에서 막히는 부분은 로그 등도 확인되지 않아서 디버깅이 어려웠다. 로그 만으로 디버깅이 잘 되지 않는 경우가 있으니, 코드의 흐름을 잘 파악할 수 있도록 해야겠다.

느낀 점

데이터베이스, 자바 등 배경 지식을 갖추고 온 부분과 달리 리눅스, 프론트엔드 등 배경 지식이 없던 부분은 확실히 단기간에 따라가기 쉽지 않다.
시간 날때 틈틈이, 또 부트캠프 이후까지 해서 부족한 부분을 잘 보완해 나가야겠다.