시작에 앞서 어제 나눴던 각 팀원들의 역할을 잠시 다시 확인해보자.
김성호 : 로그인 페이지 : 회원가입 / 로그인 UI 및 회원가입 / 로그인 / 로그아웃 기능
김주훈 : 메인 페이지 : 사진 업로드 및 좋아요 댓글 기능
박진우 : 마이 페이지 : 게시물 UI 및 게시물 활동(좋아요, 댓글, 팔로우 정보 표시)
최희원 : 팔로우 / 팔로잉 : 팔로우 및 팔로잉 기능, 구독 정보 저장
여기서 내가 맡은 역할은 마이 페이지 관련 일을 분담받은 뒤, 제일 처음으로 해야 할 것을 생각해보았다.
생각해보니 메인 페이지 UI만 구성되어 있었기에 우선적으로 마이 페이지 UI를 구성해야 한다고 생각했다.
오늘 만든 마이 페이지 UI이다.
우선 <nav> 바는 메인 페이지에서 구성해두었기 때문에 해당 부분은 메인 페이지에서 가져와 사용하였다.
다음 구성을 하기 전 구역을 나누는 것에 어려움을 겪어서 어떻게 해야 할지 조금 어려워했다.
<div>를 사용하여 구역을 계속 나눠야 했기에 너무 많은 구역으로 나눠진 것 같다.
<body>
<main>
<!-- 메인 페이지 공간-->
<div class="my_page">
<!-- 프로필 표시 상단 -->
<div class="my_page_head">
<!-- 프로필 사진 -->
<div class="my_page_profile_img">
<img src="/image/r_feed3.png" alt="프로필 사진">
</div>
<!-- 닉네임&버튼(팔로우,more), (게시물,팔로워,팔로우 수), 이름 -->
<div class="my_page_head_right">
<!-- 닉네임 -->
<div class="nickname_and_button">
<p>닉네임</p>
<!-- follow 버튼 -->
<div class="buttons">
<button>팔로우</button>
<button class="more"><img src="/image/more.svg" alt="more"></button>
</div>
</div>
<div class="follows_and_followers">
<!-- 게시물 -->
<div class="follows_and_followers_margin">게시물 <b>22</b></div>
<!-- 팔로워 -->
<div class="follows_and_followers_margin">팔로워 <b>22</b></div>
<!-- 팔로우 -->
<div class="follows_and_followers_margin">팔로우 <b>22</b></div>
</div>
<!-- 이름 -->
<div>
<p class="name_text"> 이름 </p>
</div>
<!-- 소개글 -->
<div class="introduce_text">
소개글이 들어갑니다.
</div>
</div>
</div>
<!-- 게시물 표시 중단 -->
<div class="other_link">
<!-- 좋아하는 음악, 블로그, 깃허브 링크 등 -->
<div>
<a href="#"><img src="/image/music.svg">
<p class="other_link_text">Music</p>
</a>
</div>
<div>
<a href="#"><img src="/image/tistory.svg">
<p class="other_link_text">Blog</p>
</a>
</div>
<div>
<a href="#"><img src="/image/github.svg">
<p class="other_link_text">Github</p>
</a>
</div>
</div>
<!-- 게시글 목록 하단 -->
<div class="body_list">
<!-- 게시물, 저장됨, 태그됨 버튼 -->
<div class="body_button">
<button>게시글</button>
<button>저장됨</button>
<button>태그됨</button>
</div>
<!-- 하단 게시물 전체 박스 -->
<div class="body_pictures">
<!-- 각 게시글 -->
<div class="picture_boxes">
<!-- 1 -->
<div class="picture_box">
<img src="/image/r_feed3.png" alt="">
</div>
<!-- 2 -->
<div class="picture_box">
<img src="/image/r_feed3.png" alt="">
</div>
<!-- 3 -->
<div class="picture_last_box">
<img src="/image/r_feed3.png" alt="">
</div>
</div>
<div class="picture_boxes">
<!-- 1 -->
<div class="picture_box">
<img src="/image/r_feed3.png" alt="">
</div>
<!-- 2 -->
<div class="picture_box">
<img src="/image/r_feed3.png" alt="">
</div>
<!-- 3 -->
<div class="picture_last_box">
<img src="/image/r_feed3.png" alt="">
</div>
</div>
</div>
</div>
</div>
</main>
</body>
하나의 UI 페이지에 많은 구역이 사용되어서 코드 자체는 많이 길어졌지만, 이후 Backend 설정을 해주면서 왠지 더 늘어날 것 같다.
그래도 구역별로 CSS 코드들을 구성해주고 주석도 달아주면서 만드니 이해하기 쉽고 내가 원하는 구역들에 대해 관리하기가 편했다.
오늘 만든 마이 페이지 코드를 팀원들과 사용하고 기능들을 구현하기 위해 이번 프로젝트 깃허브에 올려두었다.
https://github.com/wonbbnote/insta_clonecoding/tree/jinu
GitHub - wonbbnote/insta_clonecoding: 내배캠 팀프로젝트
내배캠 팀프로젝트. Contribute to wonbbnote/insta_clonecoding development by creating an account on GitHub.
github.com
-
나는 Backend 개발을 해보고자 시작된 것이지만, 왜인지 Frontend 작업하는 실력은 조금씩 늘어가는 것 같다.
그래도 이번에 마이 페이지 UI를 추가적으로 작업하면서 Frontend 부분에 대한 이해도도 쌓아갔고, Backend라고 해서 Frontend를 놓아서 안된다는 것도 깊게 생각하고 있다.
이제 UI를 완성했으니 다음부터는 기능들에 대해 추가해갈 예정이다.
이 말은 즉, 본격적인 Backend 개발이 기다리고 있다는 것이다.
아직 막 배운 지 2주 차에 '내가 잘할 수 있을까..?' 싶기에 열심히 해야 할 것으로 예상된다.
실력도 늘려가면서 성장하는 개발자가 되도록 열심히 해보자.
:P
'TIL 및 WIL > TIL (Today I Learned)' 카테고리의 다른 글
| [TIL] 2022.05.10 (인스타 UI 클론 코딩 - 팀 프로젝트4) (0) | 2022.05.11 |
|---|---|
| [TIL] 2022.05.09 (인스타 UI 클론 코딩 - 팀 프로젝트3) (1) | 2022.05.09 |
| [TIL] 2022.05.03 (인스타 UI 클론 코딩 - 팀 프로젝트1) (0) | 2022.05.03 |
| [TIL] 2022.05.02 (인스타 UI 클론 코딩) (1) | 2022.05.02 |
| [TIL] 2022.04.28 (가위바위보 CLI게임, 인스타 UI 클론 코딩1) (1) | 2022.04.28 |
