인스타 UI 클론 코딩.. 조금 더 열심히 만들어보자!
현재까지 성장한 나의 실력을 이끌고 기능들을 최대한 구현해보려고 노력했습니다!
저번주에 이어 만들어둔 UI에 기능들을 추가하고 수정 사항이 있으면 바꿔보면서 공부 겸 프로젝트를 열심히 진행했습니다.
우선 맨 첫번째로 하단 Feed 부분에 hover 기능을 추가해봤습니다.
해당 사진에 마우스를 올리면 마우스 커서가 변경되면서 opacity 설정을 통해 투명도를 설정해주었습니다.
.picture_box img:hover {
opacity: 0.7;
cursor: pointer;
}
그리고 고치지 않은 상태에서 상단 nav 부분의 우측에 있는 활동(heart icon)과 프로필(profile img)을 누르면 겹쳐서 생성되었는데, 이 부분을 겹치지 않게끔 코드를 고쳐주었습니다.
// 활동 버튼을 누르면 실행되는 함수
function openActivity() {
if ($("#activity").css("display") == "block") {
$("#activity").hide();
} else {
$("#activity").show();
$("#profile_and_logout").hide();
}
}
// 프로필 버튼을 누르면 실행되는 함수
function openProfile() {
if ($("#profile_and_logout").css("display") == "block") {
$("#profile_and_logout").hide();
} else {
$("#profile_and_logout").show();
$("#activity").hide();
}
}
Javascript를 이용하여 해당 박스가 열릴 때(show) 다른 박스는 닫히도록(hide) 추가해주었습니다.
그리고 활동(heart) 박스의 최대 height를 설정해주고 텍스트가 넘어가면 스크롤을 이용하여 내릴 수 있도록 설정해주었습니다.
/* 활동(heart) 박스 */
.activity {
width: 500px;
max-height: 300px;
overflow: auto;
margin-top: 5px;
background-color: white;
position: fixed; /* 고정하기 위해 사용 */
text-align: center;
border: 1px solid #DBDBDB;
border-radius: 1%;
display: none;
}
/* 활동(heart) 박스에서 스크롤바가 안보이도록 설정 */
.activity::-webkit-scrollbar {
display: none;
}
overflow를 통해 스크롤이 생성되도록 해주었고, -webkit-scrollbar의 display : none;을 통해 해당 박스의 스크롤바가 보이지 않도록 설정해주었습니다!
이제 UI 수정을 끝마치고 Backend 부분을 만들어주었습니다.
총 2가지 구현을 역할로 맡았고, 무엇을 먼저 만들까.. 하면서 고민하여 결정했습니다.
원래는 2가지 구현을 목표로 잡았으나 추후에 한가지가 더 추가되어서 총 3가지가 됐습니다.
1) 활동 박스에서 팔로우, 댓글, 좋아요를 받을 때 표시하기
해당 사진에서는 테스트용 데이터를 사용해서 댓글, 팔로우, 좋아요 목록이 나타나지만, 안타깝게도 코드를 합치는 과정에서 구현하지 못하는 부분이 생겼습니다.
원래는 좋아요와 댓글 목록도 추가하려고 했으나 기간 부족으로 인하여 급하게 마무리가 되어 많이 아쉬웠었습니다..
그래도 팔로우 목록은 잘 표시되는 것을 확인했기에 '이런식으로 구현할 수 있겠구나' 라는 생각을 가지면서 다음을 기약했습니다.
2) DB에서 이미지 데이터를 가져와 하단 Feed 부분 사진 추가하기
해당 화면에서도 우선적으로 테스트용 데이터를 사용하여 코드를 구현했습니다.
처음에는 사진이 공간을 무시한채 우측으로 뚫고 나가거나 했지만, 이후 오류를 고치고 사진들이 가로로 3개씩 표시되면서 3개가 넘으면 세로로 공간이 생기면서 해당 공간에 사진이 추가되게끔 설정해주었습니다!
3) 마이 페이지 소개글 등록하기
소개글 등록 칸은 마지막날에 급하게 제작해서 퀄리티가 그렇게 좋지 않았습니다.
POST로 작성한 유저의 id와 소개글 내용을 DB에 넣었고, 해당 DB의 내용을 GET을 사용하여 가져오는 식으로 만들어두었습니다.
마지막날 시간에 쫓기면서 만들어서 그런 것인지, 댓글을 다는 형식으로 만들어졌기에 다소 아쉬움이 남았습니다.
팀 프로젝트, 인스타 UI 클론 코딩 끝!
저번주 5월 3일 화요일부터 시작하여 이번주 5월 11일 수요일까지 진행된 팀 프로젝트, 인스타 UI 클론 코딩이 끝이 났습니다.
팀원 분들과 함께 마지막날 늦게까지 코드를 살펴보면서 팀 프로젝트를 진행했습니다.
하루가 지나면서 '어떻게 하면 잘 만들 수 있을까?' 라는 고뇌도 하고, 오류를 계속 접하던 날을 생각하니..
그래도 모두 함께 고생하면서 프로젝트를 마친 팀원분들께 정말 고생 많았다고 말씀드리고 싶습니다..!!
새벽이 지나고 날이 밝은 뒤 프로젝트 제출과 함께 발표 준비를 했습니다.
저희 팀은 사다리타기로 발표자를 뽑았는데, 왜인지는 잘 모르겠지만 발표자 추첨에서는 거의 제가 맡는 일이 일어났습니다.
처음에는 발표 어떻게하지!! 했는데, 계속 하다보니까 익숙해지기도 했고 발표 연습하는 계기가 된다! 라며 긍정적으로 생각하고 있습니다.
저희 팀 프로젝트 시연 영상을 해당 링크를 통해서 볼 수 있습니다!
https://drive.google.com/file/d/1JhPZ05qpFbO3dAya-IcG_jtGjHWHkvwF/view
2022-05-11 11-59-04.mp4
drive.google.com
그리고 이번에는 Git과 Github를 이용하여 프로젝트를 관리하려고 했으나..
사용 미숙으로 인해 그렇게 능수능란하지 못한 모습을 보여서 관리를 잘 해주진 못한 것 같습니다 ㅠㅠㅠ
그래도 이번 팀 프로젝트 Github 링크도 살짝..!
https://github.com/wonbbnote/insta_clonecoding
GitHub - wonbbnote/insta_clonecoding: 내배캠 팀프로젝트
내배캠 팀프로젝트. Contribute to wonbbnote/insta_clonecoding development by creating an account on GitHub.
github.com
프로젝트가 끝났어도 공부는 계속된다!
이제 막 팀 프로젝트가 끝난 것이지 아직 완전히 끝난 것은 아닙니다!!
이번주에는 팀 프로젝트로 조금 미뤄두었던 Git-Github 사용법과 머신러닝에 대해서 배워봤습니다!
Git과 Github는 프로젝트를 하면서 조금씩 접해보기도 했지만, 머신러닝은 아예 처음이라 '잘할 수 있을까?'하는 걱정도 되고 그랬네요!
이번엔 공부해보자, Git과 Github!
드디어 공부해보게 되었습니다! Git!
Git이 무엇인지, Git의 명령어에는 무엇이 있는지, Git을 어떻게 사용하는지 등등..
Git에 대한 공부를 하고, Github에 파일도 올려보면서 개념과 실습을 번갈아가면서 공부했습니다.
공부를 끝마치고도 이해가 되지 않는 부분이 조금씩 있었지만 개념도 보고 실습 해설도 보면서 모르는 부분을 계속 채워가야겠다고 생각했습니다!
아직은 오류도 많이 일으키고 내 마음대로 굴러가진 않는 것 같지만..
그래도 사용법을 익히고 나니 모르고 사용할 때보다는 꽤 괜찮아진것 같습니다!!
공부한 내용은 TIL에서 자세히 볼 수 있습니다!
https://sdrtst.tistory.com/38?category=1017392
[TIL] 2022.05.12 (Git-Github, 머신러닝0)
오늘은 Instagram Clone Coding 팀 프로젝트 일정으로 인해 미뤄두었던 Git-Github 강의를 듣고 오늘부터 시작된 머신러닝 강의를 추가로 공부했다. Git 이란? - 형상 관리 도구 - 프로젝트를 진행함으로써
sdrtst.tistory.com
어라.. 이건 진짜 처음인데.. 머신러닝?
저는 머신러닝이라는 단어를 이때 제대로 접해본 것 같습니다.
예전에도 얼핏 들은 것 같긴한데, 너무 오래되서 그런지 기억이 가물가물..
맨 처음 머신러닝 공부를 시작했을 때는 회귀가 뭔지.. 분류가 뭔지.. 선형회귀?? 논리회귀??? 으아악 수학이랑 그래프다!
.. 계속 이랬던 기억이 있네요.
그래서 진도는 그렇게 쭉쭉 나아가진 않고 이해하려고 노력했습니다.
한번 정독을 끝마치면 다시 복습해보면서 이해하는 쪽으로 정리하면서 공부를 했습니다.
많이 어렵다고 느낀 공부가 머신러닝이 아니었을까.. 싶습니다.
그래도 조만간 머신러닝을 가지고 프로젝트도 만들면서 직접적으로 부딪힐 기회가 생길 것 같으니 더욱 열심히 공부해야한다고 생각했습니다!
머신러닝에 대해 공부한 내용은 해당 TIL에서 볼 수 있습니다!
[TIL] 2022.05.13 (Machine Learning, 머신러닝1)
오늘은 머신러닝(Machine Learning)에 대해 공부했다. 머신러닝이란 무엇일까? 머신러닝 (Machine Learning) - 컴퓨터를 인간처럼 학습시킴으로써 컴퓨터가 스스로 새로운 규칙을 생성하도록 하는 인공지
sdrtst.tistory.com
이번주의 마무리
팀원분들과 함께 팀 프로젝트도 끝마치고, 부족했던 Git-Github 개념과 사용법도 익혀보고, 처음 접해보는 머신러닝에 대해서도 공부해봤네요.
이제는 조금씩 익숙해지는 과정이 되는 것 같습니다.
처음 막 시작했을 때보다는 꽤 좋게 성장한 것 같으면서도 내가 알지 못하는 것은 아직도 많다는 것을 느끼고 있습니다.
팀원 분들도 처음 접해보는 분야임에도 노력도 많이 하시고 실력도 많이 늘어가시는 것 같습니다.
조금씩이나마 모두 같이 성장하고 있다는 생각이 드네요.
모두 열심히 힘내서 능력있는 개발자가 되길 생각해봅니다.
'TIL 및 WIL > WIL (Week I Learned)' 카테고리의 다른 글
| [WIL] 22.05.23 ~ 22.05.27 (사물인식 팀 프로젝트 끝, Django 시작) (0) | 2022.05.27 |
|---|---|
| [WIL] 22.05.16 ~ 22.05.20 (머신러닝 강의, 사물인식 팀 프로젝트) (0) | 2022.05.20 |
| [WIL] 22.05.02 ~ 22.05.06 (시작, 팀 프로젝트) (0) | 2022.05.06 |
| [WIL] 22.04.25 ~ 22.04.29 (프로젝트의 연속, 개인 프로젝트) (0) | 2022.04.29 |
| [WIL] 22.04.18 ~ 22.04.22 (첫 만남부터 첫 미니 프로젝트까지!) (0) | 2022.04.22 |
