🚀인스타그램 클론 코딩

• 로그인 페이지
  id, pw에 각각 한 글자 이상 써야 버튼이 활성화 되도록 해주세요.
  원래 연한 파란색이었다가 -> 활성화 되면 파란색으로!
• 메인 페이지
  댓글 input 창에 엔터치거나 "게시" 누르면 댓글 추가되도록
  createElement로 요소 생성해서, input에 입력한 값이 추가 되어야합니다.

로그인 페이지

login.html

<meta name="viewport" 
     content="width=device-width, initial-scale-scale=1, 
              user-scalable-no, maximun-scale=1, minimun-scale=1">

• meta name="viewport"에 추가
• initial-scale-scale=1 다양한 디바이스의 초기 화면 배율 의미(최초의 스케일)
  처음에 디바이스에 들어왔을 때 화면이 확대, 축소 되는 것을 원하지 않음
• user-scalable=no 사용자가 디바이스 화면을 확대, 축소할 때 레이아웃에 문제가 생기는 것을 막아준다.
• maximun-scale=1, minimun-scale=1
  
  

<meta http-equiv="X-UA-Compatible" content="ie=edge">  

• 인터넷 익스플로러 브라우저에서 렌더링 되는 방식을 최신 방식으로 렌더링 되도록 설정
  
  

<meta property="og:type" content="website">
<meta property="og:title" content="Westagram">

• og: Open Graph (사이트에서 외부에 제공할 정보를 정의할 수 있다)

login.css

.main-class {
    height: 100vh;
    background-color: #FAFAFA;
    display: flex;
    align-items: center; // 세로에서 중앙
    justify-content: center; // 가로에서 중앙
}

• height: 100vh; 보이는 화면의 전체 높이를 차지
  width: 100wh; 전체 넓이
• .main-class 안에 있는 자식 요소들을 정렬하고 싶을 때
  display: flex;
  align-items: center;
  justify-content: center;로 설정 해준다.
  
• justify-content: space-between;은 공백을 같게 만들어준다.

📌 display 속성은 적용시키고자 하는 요소의 바로 부모 요소에 설정 해주어야 한다.

login.js

const info = document.getElementById('input-userinfo');
const pass = document.getElementById('input-password');

document.addEventListener('keyup', function(e) {
    if (info.vlaue !== "") {
        if (pass.value !== "") {                        
            let color = document.getElementById('loginbtn');
            color.style.backgroundColor = "#0095F6";
        }
    }
});

• .getElementById로 DOM에서 원하는 요소 선택
• .addEventListener로 이벤트를 적용

🤔 여기서 나는 const info = document.getElementById('input-userinfo');에 .value를 붙여 주면 선택한 요소의 value 값을 바로 가져올 수 있다고 생각했다.
하지만 실제로 그 값을 가져오는 것이 아니라 아래와 같이 선택한 요소 객체 자체의 값을 가져온다.

<input id="input-userinfo" placeholder="전화번호, 사용자 이름 또는 이메일" type="text">

그래서 info.value로 선언 해줘야 한다.

메인 페이지

main.html

main.html에서 특별히 기록할 것은 없지만 html요소도 많고 그 요소별로 css를 적용하는 것도 많았기 때문에 구조를 잡는 부분이 복잡하고 어려웠다.

main.css

* {
    box-sizing: border-box;    
}

• 화면에 처음에 내가 지정했던 height와 width 크기에 맞지 않게 보이는 경우가 있었다. 처음부터 위 처럼 설정 해줬어야 했는데 이 부분을 해주지 않았던 것이 원인이었다.

• 각 브라우저에서 margin과 padding 값 등이 설정 되어 있어서 항상 margin: 0; padding: 0;을 reset.css에서 기본으로 설정 해주는 것 처럼 box-sizing도 항상 기본으로 설정 해줘야 한다.
  
  

max-width: 935px;

🤔 max-width를 설정 해주고 부모 요소에 display: flex; justify-content: center;를 설정 했는데 가운데로 정렬 되지 않는 문제가 생겼다.
나중에 알고 보니 max-width를 주는 순간 그 요소 오른쪽은 전부 margin으로 설정 되어 justify-content 속성이 적용되지 않았다. 이렇게 max-width를 사용하고 가운데로 정렬 하려고 할 때는 marin: auto;로 설정 해줘야 한다.

main.js

const btnlabel = document.getElementsByClassName('label-enter')[0];

• main에서 .getElementsById()로 바로 요소를 선택하는 것과 달리 .getElementsByClassName를 사용하려면 반드시 선택한 요소의 몇 번째 class인지 배열의 인덱스로 알려줘야 한다.

📌 id는 html 내에서 태그별로 한 개만 존재할 수 있기 때문에 이름만으로 선택할 수 있다. 하지만 class는 태그 여러 개를 사용할 수 있기 때문에 선택된 이름의 class 몇 번째 요소인지 찾지 못하기 때문이다.

commentText.append(' ' + text);

🤔 append의 사용하는 것이 매우 헷갈렸다.
처음에 붙일요소.append('붙여질 위치');로 생각했는데 알고 보니 개념을 반대로 생각하고 있었다.
붙여질 위치.append('붙일 요소');가 맞다.

리뷰 후 😳

Javascript 작성

• 만들어서 DOM에 영향을 주는 element는 함수 안에서 해도 되지만 선언을 해 주는 것은 밖에서 해줘야 한다.

개발 습관

• 주석처리 해주는 습관 좋다!
  ex) main-right (메인 오른쪽)
          right-top (속한 div 이름 앞에 right 붙여 주는 것이 좋다)

• console.log로 디버깅 하는 습관! console.log 위치마다 실행 되는 것 확인할 수 있다.

• 함수 별로 기능 구분 해서 만드는 것 좋다!
  중복 되는 것을 줄이고 간결하게 표현할 수 있다.

• fontAwesome 활용! 색깔도 바꿀 수 있다.

• Network tab 활용해서 이미지 사용 가능하다

• flex 너무 좋아!! 많이 써!! 안 쓰면 바보!!

• section tag => div와 비슷한 기능하지만 의미적으로 구분 / sementic HTML