14주차 회고록
1) 14주차를 시작하며
본격적으로 Vue를 배우기 시작하면서 프론트엔드 프로젝트도 드디어 본 궤도에 올라가기 시작했다.
이전에 백엔드만 붙들고 있을 때와는 달리, 이제는 내가 만든 API들을 실제 화면에서 호출하고, 버튼을 눌렀을 때 데이터가 오가도록 만드는 작업을 하다 보니 확실히 눈에 보이는 재미가 있었다.
다만 프론트엔드와 백엔드 사이의 연결이 아직 익숙하지 않아서, 작은 부분 하나가 어긋나도 어디에서 막히는지 찾는 데 시간이 꽤 걸렸다. 주소를 잘못 적거나, 응답 형식을 제대로 이해하지 못해서 계속 에러가 나는 상황도 자주 있었다.
그래도 하나씩 연결이 성공하면서 화면에 데이터가 떠오를 때마다 조금씩 자신감이 붙는 한 주였다.
2) 학습 요약
2-1) Vue 기초
-
Vue 프로젝트 구조 살펴보기
- src 폴더 기준으로 main 영역, 페이지 컴포넌트, 공통 컴포넌트 구분
- 컴포넌트 기반 개발 방식에 조금씩 적응 중
-
템플릿, 스크립트, 스타일 구조
- 템플릿에서 데이터 바인딩과 이벤트 바인딩 연습
- 스크립트 영역에서 데이터, 메서드, 라이프사이클 훑어보기
- 스타일은 공통 디자인을 맞추는 쪽으로 정리
-
기본 디렉티브 사용
- v if, v for, v model 등을 이용해 조건 분기와 목록 렌더링 구현
- 간단한 입력 폼과 리스트 화면까지는 혼자 만들 수 있는 수준으로 상승
2-2) 컴포넌트 설계와 재사용
-
알림 관련 페이지 레이아웃 잡기
- 알림 목록 카드, 리스트, 상단 아이콘 영역 등을 컴포넌트로 분리
- 피그마에서 잡았던 디자인을 기준으로 Vue 컴포넌트 구조로 옮기는 작업 진행
-
공통 컴포넌트 정리
- 버튼, 카드, 모달 등 프로젝트 전체에서 쓸 수 있는 요소들을 공통 컴포넌트로 만들기 시작
- 프론트 팀원들과 어떤 속성을 공통으로 둘지, 어떤 부분을 각자 커스터마이징할지 논의
2-3) 프론트엔드와 백엔드 연동
-
API 연동 흐름 이해
- 백엔드에서 정의한 엔드포인트와 요청 방식, 응답 스키마 재확인
- 프론트에서 어떤 데이터 형식으로 넘기고, 어떤 형식으로 받을지 다시 정리
-
연동하면서 겪은 어려움
- 경로 오타, 응답 필드 이름 불일치 등 사소한 실수로 인해 요청이 실패하는 경우가 많았음
- 네트워크 탭을 보고 응답 코드를 확인하는 습관을 들이는 중
- 백엔드에서 에러 메시지를 어떻게 내려줘야 프론트에서 처리하기 쉬운지도 몸으로 체감
-
느낀 점
- 프론트와 백엔드 연결은 단순히 주소만 맞추는 일이 아니라, 계약을 정확히 이해하고 맞춰야 하는 작업이라는 걸 다시 실감
- 백엔드를 먼저 해본 경험이 있어서 응답 구조는 이해가 잘 되는 편이지만, 프론트 관점에서 어디에 어떤 데이터를 배치해야 할지 고민이 필요
2-4) 스프링 스터디 복습
- 서블릿, 필터, 인터셉터 흐름 다시 정리
- 로그인, 인증 흐름을 프론트까지 고려해서 다시 보는 연습
- 알림 관련 백엔드 코드도 한 번 더 살펴보며, 나중에 Vue와 어떻게 묶을지 상상해 보기
2-5) 기타
- 피그마에서 만든 화면과 실제 Vue 컴포넌트 사이를 번갈아 보면서 레이아웃 맞추기
- 팀원들 페이지 구조를 참고하면서, 중복되는 부분은 최대한 공통화하려는 연습
3) 진행 상황
-
알림 관련 화면의 기본 레이아웃을 Vue로 구현
- 알림 리스트 영역, 상단 바, 간단한 필터 영역까지 초안 완성
-
일부 백엔드 API와 실제로 연동해, 화면에 더미가 아닌 실제 데이터가 보이도록 구현 하기
-
스프링 스터디를 위한 서블릿, 필터 관련 내용을 다시 정리하면서 발표 자료 초안 구상
-
프론트와 백엔드 사이에서 어떤 데이터 흐름을 기준으로 삼을지, 팀원들과 논의 시작
4) 느낀 점
- 본격적으로 Vue를 배우면서, 프론트엔드 프로젝트가 이제 진짜 시작됐다는 느낌을 받았다. 예전에는 화면이 그냥 결과물처럼 느껴졌다면, 이번 주부터는 설계 단계부터 내가 관여하고 있다는 느낌이 강했다.
- 다만 프론트엔드와 백엔드 사이를 연결하는 작업은 생각보다 더 어렵게 느껴졌다. 머리로는 요청 보내고 응답 받아서 화면에 뿌리면 된다고 아는데, 실제로 구현해 보면 작은 실수 하나에 계속 막히는 일이 반복되었다.
- 그래도 백엔드를 먼저 경험한 덕분에, API 계약을 이해하는 데에는 확실히 강점이 있다고 느꼈다. 이제는 그 이해를 프론트 코드에 자연스럽게 풀어내는 연습이 필요하다.
5) 다음 계획
- 알림 기능 관련 Vue 페이지들을 우선순위대로 완성하기
- 프론트와 백엔드 연동에서 자주 막히는 부분을 따로 정리해서, 공통 패턴을 만드는 연습하기
- 팀원들에게 페이지에 대한 피드백을 받아 레이아웃과 컴포넌트 구조 개선
- 스프링 스터디 발표 준비를 끝내고, 실제 코드와 연결해서 설명할 수 있도록 정리
이번 14주차에는 컨디션이 좋지 않아 병원에 다녀오느라 조퇴를 두 번이나 하게 되어 많이 아쉬웠다.
진도가 막 끊긴 것은 아니지만, 몸 상태가 받쳐주지 않으니 집중력도 떨어지고, 작은 실수도 더 자주 나오는 느낌이었다.
요즘 독감도 유행이라는 이야기를 많이 듣는데, 그 말이 남 일 같지 않게 다가왔다.
남은 기간 동안 프론트엔드와 백엔드 연동도 열심히 해야겠지만, 그만큼 몸 관리도 잘해서 더 이상 건강 문제로 흐름이 끊기지 않도록 신경 써야겠다고 다짐하게 된 한 주였다.
