13주차 회고록
1) 13주차를 시작하며
백엔드 프로젝트가 끝나서 잠깐 숨 돌리나 싶었는데, 곧바로 그 결과물을 바탕으로 프론트엔드 프로젝트를 시작했다. 쉬는 시간은 거의 없었다. 초반부터 피그마로 화면을 잡아야 했는데 익숙하지 않아서 시간이 꽤 걸렸다. 또한, 이번 주 일요일에 SQlD 시험이 있어서 공부를 많이 하진 못했지만, 그래도 일단 끝까지 치고는 나왔다.
2) 학습 요약
2-1) 피그마 기초 정리
- 팀원들끼리 각자 맡은 기능들에 대한 프론트 페이지 예시를 피그마를 통해 구현
- 알림함과 같은 페이지를 피그마로 구현할려니 아직 익숙하지 않아서 많은 어려움이 존재
- 팀원들끼리 공통으로 쓰는 컴포턴트부터 제작
2-2) HTML
- 문서 골격:
<!DOCTYPE html>+html/head/body구조와 메타 태그 기본 세팅. - 텍스트/표현:
p,pre,mark,abbr,code,sub/sup,u/s등 의미에 맞는 태그 사용. - 목록/표:
ul/ol/dl특성과table의thead/tbody/tfoot,th/td,rowspan/colspan. - 영역 구분:
div(블록) vsspan(인라인) 사용 차이. - 미디어/링크:
img의alt필수,audio/video속성(controls,poster), 앵커a href와target. - 폼:
form action/method, 다양한input type,select/textarea,fieldset/legend,label연결.
2-3) CSS
- 적용/우선순위: 인라인/내부/외부 스타일, 명시도(ID > class > 태그)와 소스 순서,
!important최소화. - 박스 모델/단위:
content+padding+border+margin,box-sizing: border-box, 단위(px/%/rem/vw/vh). - 선택자: 기본/속성/결합자, 의사클래스(
:hover,:nth-child), 의사요소(::before/::after). - 타이포/텍스트:
font-family/size/weight/line-height,text-decoration/transform, 말줄임(text-overflow: ellipsis). - 레이아웃:
display: flex/grid중심, 전통적float/clear는 제한적으로. - 시각 요소:
background(색/이미지/포지션/크기),border/border-radius,outline. - 인터랙션:
transition(부드러운 변화),transform(이동/회전/확대),animation+@keyframes. - 시멘틱 구조 보강:
header/nav/section/article/aside/footer로 의미 있는 레이아웃.
2-4) 백엔드 코드 점검
- 인증 흐름과 토큰 저장/갱신 방식 재점검
- 알림 부분 미흡한 코드 확인 및 수정 필요
2-5) SQlD 자격증 공부
- 개념 모델링/정규화/무결성
- 조인·집계·윈도 함수 자주 나오는 유형
- 인덱스 기본 동작과 실행 계획 해석
3) 진행 상황
- 피그마로 공통 컴포턴트, 관리자가 쓰는 알림 템플릿 페이지 작성
- 백엔드 스웨거 문서 기준으로 주요 응답 스키마 재확인 및 코드 점검
- 다음주 재개되는 스프링 스터디를 위해서 서블릿 부분부터 복습하며 발표 자료 준비
4) 느낀 점
- 피그마 사용이 아직 어색해서 컴포넌트 설계에 시간이 많이 들었다. 익숙해지면 이후 속도는 날 듯하다.
- 백엔드를 먼저 해보니, 프론트에서 필요한 API 계약을 더 명확히 말할 수 있게 된 건 확실한 장점이었다.
- SQlD 준비는 충분하진 않아서 헷갈리는 문제들이 많았다. 결과는 기다려 봐야 할 것 같다.
5) 다음 계획
- 피그마로 알림 기능 관련 페이지 전부 완성하기
- 백엔드 코드 점검하여 미흡한 부분 수정하기
- 피그마로 짠 페이지 피드백 받기
- 백엔드와 프론트엔드 연동 시작하기
다음 주부터는 본격적으로 프론트엔드 프로젝트를 시작한다. 화면 하나씩 완료 기준으로 쪼개서, 가능한 빠르게 서로 연결하는 데 집중할 계획이다.
또한, 스프링 스터디(이젠 복습 스터디 느낌이 되었지만)도 다시 시작하는 만큼, 복습 준비도 철저히 해야겠다.
개발자 희망자