내일배움캠프 AI - 14일차 TIL, 2022.05.06

스파르타 코딩클럽

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

2022.05.06. 14일차- TIL

1. 개인 페이지 개발

09:00-12:00

오늘부터 본격적으로 개인별로 맡은 페이지를 만들기 시작했다. 나는 유저페이지를 맡았다. 제일 먼저 사진이 들어가야했기 때문에 사진이 들어갈 자리를 만들고 각종 UI를 구성하는데 집중했다.

가장 먼저 발생한 이슈로는, 처음엔 이미지의 크키가 일정한 것만 고려했는데 생각해보니 사진마다 가로 세로 비율이 다를수도 있기 때문에 이를 고려해야했고 css에 object-fit 이라는 속성을 추가해서 사진의 크기를 맞출 수 있었다.

.user_post_row
   > .user_post_img_box
       > img {
   width: 100%;
   height: 100%;

   object-fit: cover;
   position: absolute;
   top: 0;
}

다음으로는 모달창을 만드는데 시간을 많이 쓴 것 같다. 모달창 UI를 만드는 것은 쉬웠지만 모달창을 javascript로 구현하는 것을 이해하는데 시간이 좀 걸렸다. 모달창이 생성되었을 경우 모달창 밖의 부분을 고려하지않기위해 큰 div로 감싸주고 모달창을 띄울때만 .show를 토글하여 배경으로 오게끔 했다.

/*모달창 배경 부분*/
.user_follower_box {
    z-index: 999;

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background-color: rgba(0, 0, 0, 0.4);
}

.user_follower_box.show {
    display: block;
}

/*모달창 바디 부분*/
.user_follower_body {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    text-align: center;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
    transform: translateX(-50%) translateY(-50%);
}

2. 팀원과 소통하기

12:00-13:00 점심시간
13:00-15:00 팀원과 소통 및 발표준비

오후에는 3시부터 프로젝트 중간발표 및 피드백 시간이 있었기 때문에 사전에 발표 준비를 위해 팀원들과 진행상황을 공유하고 프로젝트에 대해 소통하는 시간을 가졌다. 이때 내가 다른 팀의 프로젝트와 구별되는 우리 팀 프로젝트만의 기능을 넣자는 의견을 제시했고 친밀도 시스템이라는 기능을 넣기로 했다. 말 그대로 좋아요나 팔로우, 댓글 등을 통해 유저끼리의 친밀도를 측정하여 보여주는 기능이다. 아주 간단하면서 다른 팀들과 구별될 수 있는 특징을 만들 수 있어서 좋은 기능이 될 것 같다.

3. 중간 발표 및 피드백

15:00-18:00

대략 1시간 30분정도 모든 팀들이 중간발표를 하였고 우리팀도 11번째 순서로 발표를 마쳤다. 다른 팀들의 발표를 보면서 놀라웠던 점은 우리팀의 진행상황에 비해 엄청 많이 진행되었다는 사실이다. 벌써부터 DB와 연동하여 기능을 구현시킨 팀도 있었다. 아니면 테마부터 팀원들과 상의하여 아이덴티티를 확실하게 잡고 출발하는 팀도 있었다. 우리팀은 아직 UI도 모두 만들지 못했는데 말이다. 하지만 그만큼 프로젝트 설계와 문서 퀄리티에 있어서는 우리팀이 완성도가 높았다고 생각한다. 예상외로 튜터님과의 피드백은 별내용없이 지나갔다. 아직 우리팀이 본격적으로 기능 구현을 시작한 것이 아니라 UI를구성하고 있었기 때문이다.

4. 타임어택

18:00-19:00 저녁시간
19:00-20:00 타임어택
20:00-21:00 타임어택 해설

캠프를 3주가량 진행하면서 처음으로 타임어택이라는 걸 하게되었다. 타임어택은 개인기량을 측정하기위해 1시간동안 주어진 문제를 해결하기위한 코드를 개인별로 작성하는 것인데 이번 문제는 게시판 만들기였다.

회원가입/로그인 구현, 게시판 구현 등등 여러 조건들이 있었는데 우선 나는 회원가입에서부터 막혔다. 아직 회원가입/로그인에 해쉬와 JWT를 적용하라고 되어있었는데 나는 아직 그 개념을 몰랐기 때문이다. 물론 계속 모른채로 있을 생각은 없었고 프로젝트에서 로그인 회원가입을 맡은 팀원과 내가 구현한 내용과 트레이드하며 개념을 배울 생각이었는데 이렇게 개별과제로 나오니 변명거리도 되지않았다.

그래도 타임어택 이후 튜터님께서 해설 시간을 진행해주셔서 대충 어떤 의미를 가진 기능들인지 알 수는 있었다. 이번 프로젝트에서 내가 직접 구현할 기회는 없지만 앞으로 계속 사용할 기능이기 때문에 프로젝트가 끝나고 리뷰할 때 좀 더 주의깊게 봐야겠다.

5. 프로젝트 정보

1) github
https://github.com/ai-web-9-team/59stargram

2) notion workspace
https://www.notion.so/kimphysicsman/7db33adca12b403a8a19df5ccce01b70