Instagram_v1_memoir.md

인스타그램 클론코딩 v1 (퍼블리싱) 후기

코드

글을 쓰기 앞서

회고록을 처음 작성하기 때문에 많이 부족한 글입니다.
많이 부족하지만 읽어주셔서 감사합니다. ^=^;

시작하게 된 이유

HTML을 끝내고 CSS를 공부하며 학교 선배의 추천으로 클론 코딩을 시작하게 되었습니다.
그렇게 시작하게된 클론코딩이 인스타그램 만들기 입니다!

진행날짜

2022.05.02 ~ 2022.05.11

진행 과정

첫번째 난관

먼저 인스타그램 상단에 있는 Top Line 만들기 부터 시작하였다.
그렇게 Top Line을 만드면서 당연하지만 인스타 그램의 개발자 도구를 참고하였다.
개발자 도구에서는 홈 아이콘 등들이 이미지인줄 알았던 나의 생각과는 다르게 HTML의 기본 태그들을 활용 하여서 만든 모양이었다.
처음 목표는 어떻게든 만들자 였기 때문에 내가 아이콘 자체를 figma를 활용하여서 만들기도 하였고, 검색을 통해서 가져오기도 하였다.

두번쨰 난관

그렇게 Top Line을 완성하고 instagram post를 만들던 와중

와 이미지가 padding과 margin이슈로 원하는 위치에 들어가지 않았다.
나는 이 문제를 해결하고자 CSS position과 top코드를 사용하게 되었다.
position코드를 사용할 때 나는 absolute코드를 사용했다... (이게 나중에 큰 문제로 return할줄은....)

세번째 난관

instagram 화면 자체는 모두 구현을 완료하였다.
완성하여 Top Line과 스토리 옆 instagram 친구 추천란과 설명란을 화면 고정을 마무리 작업으로 하게 되었다.
하지만 이게 큰 문제가 생겨 버렸다...
두번째 난관 때 absolute코드를 남발한 덕분에 화면 고정한 것들이 전부 그 이미지, 박스 뒤로 숨기 시작하였다.
이게 참 뭐라고 오래도 걸렸는데..
결국에는 CSS코드인 z-index코드로 문제를 해결하였다.(이 문제 덕분에 약이 올라있던 상태라 z-index값을 십만씩 줬다가 맞을뻔 했...)

드디어 완성?!?!?

많은 난관을 헤치어 결국엔 완성하였다.

진행 중 느낀 점

코딩을 진행하면서 공부와 활용하여 무언가를 만든다는 것은...
참 천지차이라는 것을 느꼈다.
내가 쓴 코드들은 가독성 상태가 심각하다는 것을 느껴버렸따..(본인도 본인 코드 찾기 힘들어함 ㅋㅋ...)
하여간 이 코딩을 진행하면서 HTML과 CSS의 이해도가 이것저것 상승하는 것을 느낀 좋은 기회가 됐다.(마치 레벨업!)

앞으로 배워야 할 점

내 코드들의 심각한 가독성을 고쳐줄 코드 작성법!
코드 문제를 해결할 때 여러 코드를 덕지덕지 붙히는 방법을 사용하는데 이걸 고치는 것!

다음 버전은 어떻게?

다음 버전은 반응형을 배워서 여러 요소들을 활성화 시키고 싶다!
(음! 숨을 불어넣고 싶군!)

결과물 사진