인스타그램 클론+주저리

내가 직접 만들어보는 첫 화면이었기에 여러가지 시도도 해보고 부딪혀보며 배웠던 것을 간단히 적어보고자 한다.

로그인 페이지 사진

이 사진이 원래 인스타그램의 첫 페이지 이다.
여기에서 가입하기 를 누르면

이런 화면이 나온다.
이 화면 중에서 내가 만든 모습은..

이 정도만 이다.

지금은 이렇게만 만들었지만 후에 인스타그램 첫 페이지로 다시 만들어보고 싶다.

---

이 로그인 페이지에서 전체적인 틀로는

전체 회색 틀을 만들 div
instagram 이미지
form과 input(text, password, button)으로 입력칸 만들기
div에 글씨 넣기

로 구성이 되었다.
그리고 각 input에 부모 div를 만들어 margin이나 padding을 조절했다.

javascript를 통한 기능으로는
전화번호, 사용자 이름 또는 이메일을 적는 칸에 한 자 이상 써져있으며 비밀번호 칸에 한 자 이상 써져 있어야 로그인 버튼이 활성화 되도록 만들었다.

->위에만 충족된 경우

---

-> 둘 다 충족 된 경우

---

-> 위에꺼 지웠을 경우

---

이렇게 두 칸에 모두 한 자 이상 써져있지 않으면 로그인 버튼의 색도 연한색으로 되어있고 버튼 자체가 활성화 되지 않도록 했다.

활성화와 비활성화에서는
.disabled = false 또는 .disabled = true를 사용하였다.

---

메인 페이지

기존 인스타 그램의 메인 첫 페이지. 들어가자마자 캡쳐한 부분.

스크롤을 조금 내렸을 경우

---

내가 만든 인스타그램 메인 페이지. 들어가자마자 캡쳐한 부분

스크롤을 조금 내렸을 경우

두 번째 피드 밑 부분

---

원래는 피드를 1개만 할 까 하다가 2개로 늘려보았다.

그래서 댓글 삭제 javascript도 두 가지 방법을 사용해서 만들었는데

1.버튼을 눌러 댓글 삭제하기

여기에서 댓글을 입력하고

게시 버튼을 누르면

내 아이디로 댓글이 추가 되었다.
내 아이디의 저 옆에 x버튼은 해당하는 댓글을 지워주는 기능을 한다.

버튼을 눌러 사라지게 했다!

이 때, html에서는 새로운 댓글들이 들어올 div 틀 하나만 만들어주고
나머지는 js를 통해
게시 버튼의 click event를 받아
한 댓글을 감쌀 div
id의 span
텍스트의 span
하트이미지 생성
삭제 버튼 생성
innerText인 x
까지 생성되게 했다.

html에는 class를 주지 않고 css에 class 적어놓고
js에서 새로 생성되는 댓글 span 두 개와 button에 classList.add() 를 통해 class를 추가해 주었다.
그리고 버튼을 click했을 때 삭제하는 함수를 호출해주는 addEventListener를 사용하였다.

이때 flow는 사용하지 않아도 되었고 positoin relative를 각 댓글의 부모 div에 주었고 하트 이미지와 삭제 버튼이 오른쪽 끝 쪽으로 가도록 position absolute와 right를 이용했다.

---

잠시 막혔던 부분과 깨달은 점 주저리

한 css의 class에 position과 display:flex를 같이 쓰면 안된다.

막혔던 부분은 오른쪽에 있는 내 프로필과 스토리, 회원님을 위한 추천이 스크롤을 올렸을 때 고정이 되야 하는데 fixed를 사용하면 위치가 자꾸 망가지는 것이다.

이 때, 기성님이 도움을 주셨는데 하나의 안보이는 div 이자 오른쪽 전체를 가지고 있는 div의 부모 div를 width와 margin같은 걸로 원하는 위치에 놓고 position fixed를 준 뒤, 자식 div인 오른 쪽 전체를 position absolute를 주면 고정이 된다는 것이었다.
너무너무 신선한 충격이었다.

잠시 주저리 타임: 인스타그램 할 때에도 그렇고 지금 enemy rain에서도 함께 얘기하며 이 방법 저 방법 공유 해보니 한 기능을 위해 여러 방법이 있고 어떤 조건 속에서 다른 방법들이 나오는 지 알게 되는 것이 너무 신기하고 재밌었다. 이런게 커뮤니티의 힘인가 싶었다

---

스크롤 내려도 오른쪽 고정시키기

이것이 오른쪽 전체의 부모 div이자 position fixed를 준 div.

이것이 고정되어야 해서 positoin absolute를 준 div.

여태까지 부모에게 positon relative를 주고 자식에게 position absolute를 주었는데, 부모에게 fixed를 주고 자식에게 absolute주는게 이런 효과를 낼 수 있다는 것을 배웠다.

인스타그램은 css에 익숙해 지는데 조금 도움이 되는 친구였다.

---

산에서 산으로 포스팅 되었지만....
댓글 삭제 두 번째 방법

2.div를 선택해 댓글 삭제하기

두 번째 피드에서는 div전체를 선택 해 댓글 삭제하게 만들었다.
이 방법은 js에서 3줄이면 되었다.

이렇게 댓글을 2개 달았을 때,
저 댓글의 어디를 클릭해도 그 div가 삭제된다.
아이디를 클릭해도 댓글을 클릭해도 하트를 클릭해도..

저 하늘색 칸 어디를 클릭해도 댓글을 삭제 할 수 있다.
물론 위에 '오래오래 건강하자' 댓글을 클릭해도 클릭한 댓글만 삭제 된다.

이게 가능하려면,
이 피드의 댓글을 생성하는 js의 함수 내에서
맨 마지막에 click이벤트를 넣어주면 된다.

이렇게! 하면 생성된 div중에 선택한 div가 삭제된다.

---

부족한 점, 아쉬운 점

지금 만든 페이지에서 아쉬운 점은 매우 많다.

1. 스토리에서 무지개 색 원 띠를 둘러주고 싶다.
2. 피드에서 div사이에 작은 공백이 생기는데 없애고 싶다.
3. 댓글을 좀 더 예쁘게 올리고 싶다.
4. 1번을 하게 되면 많은 스토리를 넣어서 scroll기능을 넣고싶다. overflow: scroll을 하면 내가 원하는 기능을 넣을 수 있다고 한다.

등등 아직 부족한 점이 많고 많지만 내가 클릭을 했을 때, 원하는 기능이 실행되고 다양한 방법이 있고 다양한 코드가 있다는 것에 재미를 느끼고 기쁨을 느끼는 부분에 대해서 처음 만든 것 치고 조금은 성공했다고 생각해도 되지 않을까 싶다 :)
앞으로 얼마나 많은 것들을 만들어 볼 지 몇 년 뒤에는 어느 정도 성장 해 있을 지 기대가 된다.
느리더라도 꾸준히 하자!