[Instargram Project] 2022.03.07~2022.03.10

프로젝트를 진행하며 나는 html 구조잡는 게 제일 힘들었다.

어떻게 잡아야할지, 어디서부터 시작해야할지..막막한 상황

주변에 개발자 친구들에게 물어보고 구글링으로 구조잡는것부터 시작!

 

구조를 잡지않고 바로 코드부터 작성하려고하는 습관은

아주 좋지 못한 습관이라 한다.

일단 머릿속으로 어떻게 단락을 나누고

어떻게 속성을 넣을지를 먼저 생각해야한다고......ㅎㅎ

 

-login 페이지

1. 로그인 페이지 레이아웃
2. id, pw 입력 시 로그인 버튼 활성화 기능
3. 로그인 버튼 클릭시 alert 기능

-main 페이지

1. 메인 페이지 레이아웃
2. 댓글 내용 입력 후 enter press 댓글 추가 기능
3. 하트 버튼 토글 기능

 

:: 구현 목표 

메인페이지 댓글 창 구현

=> 댓글에 키를 입력했을 때, '게시'버튼이 비활성화 되었다가 키를 떼었을 때 '게시'버튼 활성화.
=> enter키를 눌렀을 때, 댓글 달리게 구현.

 

:: 구현 사항 설명 

enter키를 눌렀을 때, 댓글이 게시되는 것을 구현하고 싶었다. 그러기 위해선 enter라는 키의 값을
알아야 하는데.... 구글링을 한 결과 keycode 13은 enter와 같다는 것을 알게 되었고,
shift | 16
ctrl | 17
키마다 고유의 번호가 있다는 것을 알게됨.
if 조건문을 사용하여 키가 눌렸을 때 뭔가를 실행하는 함수를 만들었고 그 키가 엔터일 때
commentupdate() 함수를 실행하도록 하였다.

 

:: 성장 포인트 

1. 로그인 페이지
   => 로그인 페이지를 만들 땐, 전에 리플릿 시간에 만들었던 box상자와 비슷해서 레이아웃은 쉽게 작업
   하지만 자바스크립트 코드를 작성할 땐, 어떤 식으로 접근할지를 몰라 많이 헤맸다.
   리플릿을 풀며 익혔던 DOM API를 되뇌이며, document.queryselector로 접근하는 방법을 알게 되었고,
   함수 로직은 아이디 값을 입력할 경우/ 입력하지 않을 경우로 나누어지는 것을 생각하니 '조건문'을 떠올리게 되었다.
   혼자 코드를 작성해보고 싶었지만 코드 작성이 익숙하지 않아 구글링의 힘을 받아 완성하였다.
2. 메인 페이지
   => 메인 페이지를 만들 땐, 마크업 구조 잡는 것부터 막막했고,
   일단은 만들어보자는 생각으로 html 코드를 작성하였는데 이때부터 잘못된 걸 깨닿게되었다.
   <1차 수정>
   마크업 태그가 정돈되질 못하니까 css 작업을 하는데 제가 원하는 속성 값이 먹히지 않게 되었고,
   우선 수정할 수 있는 div태그는 수정 후, ( 차마 손대지 못한 것도 있음.)
   css 박스를 padding으로 감싸 깔끔한 레이아웃을 잡도록 노력했다.
   line-height 이나 height 속성 등을 최대한 없애고, 꼭 필요한 속성만 넣도록 작업해 보았다.
   <2차 수정>
   테블릿, 핸드폰에서 반응하는 반응형은 아니더라도, 모니터 크기에는 지장이 없는
   웹 페이지를 만들고 싶었다. 하지만 sidebar가 계속 화면을 따라오게 되고,
   작은 화면일 때는 헤드의 끝부분에 정확히 맞았지만 큰 모니터로 확인하면 헤드 끝부분에
   요소들이 고정되질 않아 고민하였다.
   <해결방법>
   position: fixed;
   top: 75px;
   left: 620px;
   right: 0;
   margin: 0 auto;
   max-width: 280px;
   이렇게 속성을 주니 크기에 변화 없이 화면에 잘 고정되었다.

이번 위스타그램 코딩을 진행하면서 느낀점?

1. 마크업 구조는 무조건 머릿속으로 그림을 그리고 시작하자
2. 무분별한 div태그는 자중하자
3. css 속성에 padding 값을 넣어서 깔끔하게 만들자
4. bttom-up방식 자식 요소의 크기를 먼저 정하자
5. 클래스명은 잘 지어야 한다.
6. 태그 들여쓰기 잘하자.

예시 페이지)