Programming/Javascript

Vanila 프로젝트 후기

보간 2024. 12. 31. 14:24

 

Board page

기기거래 외 전체 게시판 표시 페이지

*Layout : RegionMenu 유기체 컴포넌트 - 현재 아이디 기반 지역 표시(pocketbase)
버튼 카테고리 - 주제 클릭 시 주제목록 표시, '같이해요' 클릭 시 '같이해요'게시판 이동
게시글 컴포넌트 - pocketbase에서 같이해요와 질의응답 페이지를 조인하여 출력 및 각 카테고리 양식 최적화 
*Layout: Header 유기체 컴포넌트 - clickEvent를 index로 받아 한 아이콘만 클릭할 수 있게 제작
 

  • 단순 게시글 표시 이미지에 빈 alt속성 부여, 텍스트와 중복되는 alt속성 삭제

  •  조도 개선

- 웹 접근성 70->100 향상

BoardWith page

  • 주제 선택 시 주제에 해당하는 게시글 출력
  • 최근작성, 모집 중인 글만 확인 가능

  • h1 뒤 h3 등 혼용하던 제목태그 순서대로 수정

웹 접근성 100

SearchActivities, WriteActivities, WithWho 

글쓰기 페이지

 

 

  • 팀원 제작 Back네브바, input, 제출 버튼 컴포넌트를 CSS조정하여 사용. 
  • CSS는 변수화하여 현재페이지의 태그에서 변수를 수정하는 방식으로 조정함 
  • 현재 위치 인기활동을 제목으로 추천

  • 같이해요 게시판에 필요한 요소들을 input으로 지정받아 글쓰기 완료
  • input id와 label이 일치하지 않는 접근성 이슈 개선 

회고 겸 쓰는 느낀 점
첫 컴포넌트를 만들 때는 어디에서 데이터를 받아오는 지 생각하지 못해서 자식 컴포넌트 안에 너무 많은 데이터를 불러왔다. 페이지 단위로 데이터를 불러오는 것이 더 효율적임을 알게 되었다. 
다음 컴포넌트를 만들 때는 빠르게 만들어지는가 싶더니, 이벤트의 순서가 꼬여있어서 페이지를 전부 만들고서야 함수를 다시 점검하였다. 그 다음 컴포넌트를 만들 때는 이벤트의 순서를 전달하는 것부터 로직을 짰다.
컴포넌트를 작은 것부터 전부 만들다가 세세한 조정을 전부 컨트롤하기 어려워 개선의 필요성을 느끼게 됐다. 시스템을 개선하고 2주 동안 만든 것과  4일 동안 생산한 요소 개수가 비슷했다.
직접 결과물을 내고 팀원들과 소통하는 것이 성장에 얼마나 중요한 것인지 느끼게 되는 프로젝트였다. 다음 프로젝트에서는 코드의 성능에 더 힘을 써 보고 싶다.