내일배움캠프 AI - 23일차 TIL, 2022.05.19

Dongwoo Kim·2022년 5월 19일
0

TIL / WIL

목록 보기
25/112

스파르타 코딩클럽

내일배움캠프 AI 웹개발자양성과정 2회차

2022.05.19. 23일차- TIL

1. 와이어프레임 제작

09:00-12:00 와이어프레임 제작

어제의 기획회의에 이어서 오늘 오전까지 남은 부분을 진행했다. 어제 DB설계와 API문서 작성까지 모두 마쳤기 때문에 오늘은 와이어프레임 제작을 시작했다.
와이어프레임은 figma를 이용해보았는데 처음 사용하는 툴이라 처음에 낯설고 많이 서툴렀다. 하지만 레이아웃을 배치하고 부분부분마다 기능을 적어놓는 것 등 편리한 점이 많았다. 그리고 와이어프레임을 짜면서 웹 사이트의 테마와 우리 팀의 로고와, 컬러를 정하게되었다. 뭔가 우리팀만의 아이덴티티가 생긴 것 같아 기분이 좋았다.

2. 개발 준비

12:00-13:00 점심시간
13:00-14:00 개발 rules 작성

와이어프레임을 모두 만든 뒤 각자 개발 역할 분담을 하였다. 나는 메인페이지의 UI와 기능 구현을 맡았다. 지난 프로젝트에서는 메인 페이지가 아닌 서브 페이지를 맡아 개발해서 나름 좋은 기회라고 생각했다. 그리고 본격적인 개발에 들어가기 앞서서 협업하기 위한 개발 rules를 정했다. 프로젝트 진행상황을 일일 단위로 공유하기로했고 같이 작성해야할 프로젝트 파일의 경로, 파일 이름 작성 가이드, git 사용 규칙 등 세부적인 부분까지 작성하여 협업하면서 발생할 수 있는 문제를 사전에 줄일 수 있도록 노력했다.

3. 본격적인 개발 시작

14:00-17:00 메인페이지 UI 제작
17:00-18:00 진행상황 공유 & 코드 병합

드디어 본격적인 개발을 시작했다. 앞서 말한 것과 같이 내가 맡은 부분은 메인페이지로 사용자가 이미지를 업로드하면 그 이미지에 대한 검색결과를 보여 줄 수 있도록 UI를 만들어야 했다. 다만 먼저 헤더부분을 만들면서 전체적인 테마를 생각해보았고 우리 팀 컬러는 생각해서 로고와 배경 색을 정했다. UI를 만드는 것이 크게 중요하다고 생각하지는 않았지만 그래도 메인페이지인 만큼 어느정도 성의있는 느낌이 들 수 있도록 사진과 구성요소에 입체감이 들도록 노력했다.

메인페이지 UI

이후에는 팀원들과 각자 작성한 UI을 공유하고 리뷰하는 시간을 가졌는데 대부분의 팀원들이 모두 잘 만들어주었다. 그리고 중요했던 시간이 이렇게 각자 작성한 코드들을 github로 합치는 과정이었다. 코드 작성에 있어서 첫단추를 잘 맞출 수 있을지 살짝 긴장도 되었다. 결과적으론 다행히 별 문제없이 모두 잘 병합할 수 있었다. 다만 한 팀원이 sourcetree가 아닌 github desktop을 사용해서 푸쉬하거나 풀하는 사용법을 몰라 잠깐 헤맸었다. 하지만 코드적으로 문제가 있는 건 아니라서 결국엔 잘 해결할 수 있었다.

4. 이미지 업로드 기능

18:00-19:00 저녁시간
19:00-20:00 코드 리뷰 & 문제 해결
20:00-21:00 일일회고 및 TIL 작성

저녁시간 이후에는 낮에 작성했던 본인의 코드들을 보완하고 추가 작업을 하는 시간을 가졌다. 그 중에 이미지 업로드 기능을 맡은 팀원이 업로드하는 사진이 다른 사진이 업로드되어도 화면에서 사라지지않아 계속 누적되는 문제가 있어고 다같이 화면공유하면서 해결하는 시간을 가졌다.

먼저 업로드 기능을 스스로 구현한 것이 아니라 외부 코드를 가져와서 구현해놓아서 일단 코드를 이해하는데 시간이 걸렸다. javascript의 filereader를 이용한 코드였는데 코드 흐름상 removeALL() 메소드나 jquery의 empty() 메소드가 먼저 호출되고 그다음 append가 되여야할 것 같은데 그렇지 않았다. 찾아보니 filereader.onload 함수가 비동기함수였기 때문이었고 filereader의 공식문서를 보고 쉽게 해결할 수 있었다.

문제를 수정한 함수, input(type=file)태그의 onchage 이벤트에서 호출된다.

5. 개발 문서 & 코드

profile
kimphysicsman

0개의 댓글