위코드 프리코스 2주차 인스타그램 클론 도전기
위코드 부트캠프를 시작하고 10일차에 인스타그램 클론에 도전하게 됐다. 많이 부족한 html, css, javacript 실력이지만 맨 땅에 헤딩하듯 으로 인스타그램 로그인 페이지와 메인 페이지 클론에 도전했다.
1일차 - 로그인 페이지 시작
아무것도 없는 코드 창에서 시작하려니 막막했으나, 그동안 공부한 내용들을 최대한 기억해내며 로그인 요소들이 들어가는 메인 컨테이너를 만들었다. 각 요소들을 가장 메인 컨테이너에 담고 위치를 잡느라 고생했다.
2일차
개발자 도구를 활용해서 CSS를 수정하고 또 수정. 각 요소들의 패딩, 마진 값들을 수정하며 최대한 인스타그램의 페이지와 똑같이 만들려고 시도해보았다.
3일차 - 로그인 페이지 끝
로그인 페이지의 html과 CSS는 완성했고 아이디와 비밀번호를 각각 1글자 이상씩 입력해야 로그인 버튼이 활성화 되도록 JacaScrip를 작성했다. 연 이틀을 종일 HTML CSS만 쓰다 다시 JavaScript를 쓰려다 보니 어색한 기분.. DOM으로 각각의 요소에 접근하고 .addEventListener를 쓰는 것에 아직 어색하다.
4일차 - 메인 페이지 시작
거의 레이아웃 잡는데 하루종일 걸린듯.. 페이지 상단의 NAV 바를 만들고 인스타그램 로고와 검색창, 아이콘들을 넣고 배치시키는데 고생을 많이 했다.
검색창에 있는 돋보기와 '검색'이란 글은 placeholder를 쓰지 않고 img와 텍스트로 넣고 position 프로퍼티를 이용해서 집어 넣었다.
5일차
열심히 NAV바를 만들어 놓고 fixed까지는 잘 했는데 스크롤 할 때 내용이 겹쳐지는 문제를 발견했다. 구글링을 통해서 z-index를 사용해서 우선순위를 정해줘야 한다는 것을 알았다. z-index 값으로 숫자가 오는데 숫자가 높을 수록 해당 요소가 더 위로 온다는 것을 배웠다.
메인 컨텐츠 위치에 가장 큰 부모 태그를 만들고 상단,중간,하단 구역 나눠 각각의 요소들을 배치 시켰다. flex를 더 이해해야 하겠다는 필요가 느껴져서 FlexFrog 페이지를 열심히 참고했다.
6일차
댓글창에 댓글을 입력하면 '게시' 버튼이 활성화 되고 클릭이 가능하게 하는 JavaScript 기능을 구현했다. 이미 로그인 페이지에서 한 번 해봤기 때문에 여기까지는 큰 어려움 없이 할 수 있었다. '게시'버튼을 누르면 댓글이 입력되게 하는 Event 코드를 짜는데 고생을 많이 했다.
댓글을 게시할 때 내 인스타 계정과 댓글 내용이 함께 업로드 되게 만들려고 여러차례 시도했으나, 댓글이 가로로 달리거나 아이디 한줄 댓글 한줄 씩 두 줄로 달리는 문제도 발생하기도 했다.
아예 아이디가 써지는 구역과 댓글 내용이 달리는 구역을 따로 div태그로 만들고 그 div들을 부모div로 감싼후 flex-direction으로 한 줄에 넣었다.
그런 후 자식 div에는 각각 flex-direction을 column으로 줘서 댓글을 추가하면 세로로 달리게 만들었다. 정말 하루종일 고민한 걸 아침에 떠오른 아이디어로 빠르게 해결할 수 있어서 기분이 매우 좋았음
배운 점
- 각각 요소를 배치할 때 CSS에서 disply: flex가 매우 유용하다. 적극 활용할 것
- 부모태그에 display:flex를 설정한 후 자식태그들의 배치를 조절한다.
- div태그가 많이 필요하다. 하지만 불필요하게 만들 필요는 없다.
- class name을 설정할 때 통일감 있게 할 것
- id는 거의 사용하지 않는다.
- autocomplete=”off”을 input 태그에 추가하면 자동완성기능을 끌 수 있다.
어려웠던 점 & 보완 점
- 전체적인 레이아웃을 먼저 기획하고 대략적인 태그 배치를 구상할 것
- getElementsByClassName('className') 뒤에 꼭 [0] 같은 인덱스 값 넣는 걸 잊지 말자
- JS에서 너무나 당연한 게 안될 때(변수 지정한 게 console.log로 해도 읽혀지지 않을때)는 scope의 문제일 가능성이 매우 높다. 혹은 오타!
- 웬만하면 height값을 설정하지 말 것
- 부모의 태그가 flex를 쓰면 자식들의 display는 자동적으로 inline으로 변경 된다. ⭐️
- 자바스크립트로 생성한 태그에 CSS를 적용할 때 CSS파일에서 미리 클래스 값으로 선택자로 CSS를 작성 한후 자바스크립트에서 해당 태그에 클래스를 부여해준다.
