Github : https://github.com/shinsewon/instagram/tree/master/sewonshin

• HTML,CSS,Javascript 소스 코드

메인 페이지

앞서 로그인 페이지를 만들다 메인 페이지를 만들때 자신감이 와르르 부셔져 내리는 느낌이었다.
html,css,javascript 구현 및 최종 수정까지 총 4일, html과 css를 너무 만만히 보았다.
로그인 페이지와는 다르게 엄청나게 코드량이 많아 벨로그 가독성을 위해 깃허브로만 공개하겠다.
(어차피 여기 나열해도 짤려서 제대로 보이지도 않고 눈만 아파요..)

메인 페이지의 기능 구현 사항은 다음 아래와 같다.

• 메인 페이지 레이아웃 구축

1. 무분별한 div 태그 사용을 지양한다.
2. flex 속성을 활용하여 레이아웃을 구축한다.
3. javascript로 인스타그램 피드 댓글 내용 입력 후, Enter press, 혹은 '게시' 버튼 클릭 시 댓글 기능을 추가한다.

1. html

처음 메인메이지를 만들기 전에 시맨틱 태그를 사용하여 레이아웃을 이렇게 짜보았다.
메인 페이지를 만들다보니 컨테이너 안에 또 다른 컨테이너를 넣고 그러다보니 결국 시맨틱 태그로 레이아웃을 만드려고 해도 나중가면 div태그로 도배를 하게 된다.
나중에 이렇게 계속 하다보면 레이아웃 짜는 요령이 생겨서 div 태그를 적게 사용하리라 믿는다.

2. CSS

메인 페이지를 작성하면서 제일 시간을 많이 잡아먹었던 부분이다.
시간을 많이 투자한 만큼 많은 것을 알게 되었고, 제일 기억에 남는것은 flex의 사용법과
이미지 삽입시 이미지 경로에 대해 많이 알아보았다.

인스타 우측 섹션이 스크롤을 내려도 위치가 고정되게 만드는 과정에서 꽤 애를 먹었다.
고정 시키려면 position:fixed를 하고 top,bottom,left,right 값을 설정하면 원하는 위치에 맞게 설정 할 수 있었지만, 노트북으로 볼때와 모니터로 볼때 화면 크기의 차이에 따라 위치가 변하는 현상이 생겼다.
구글링하면서 알아보니, fixed는 뷰포트를 기준으로 하기에 어떠한 경우 불편할 경우가 있어,
맨위에 있는 nav바가 아닌 sidebar나 중간 content에 있는 어떠한 div요소들은 사용하기 힘들다고 한다.

그래서 이럴 때 쓰는게 새로나온 CSS의 프로퍼티인 sticky이다.

순수 css만으로 fixed와 같은 효과를 낼 수 있다.
fixed는 부모요소의 relative, fixed를 기준으로 하지만 sticky는 그런거 없이 그 요소만 스티커처럼 달라붙어 고정된다.

적용하는 것은 위의 코드처럼 position속성의 프로퍼티로써 sticky를 쓰고, 그리고 스크롤 할 시 기준으로 해야되서 보통의 경우 top:0px; 등을 하면 된다.

하지만 아직 나온지 얼마안되어 브라우저 지원범위가 상당히 작다.

3. Javascript

const textBox = document.querySelector(".inputBox"); //input 변수 할당
const summitButtonClick = document.querySelector(".buttonBox"); //버튼 변수 할당
const feedComment = document.querySelector(".new_comments"); // 새로운 댓글이 달릴 div 할당
const profileId1 = document.querySelector(".my_profile_id"); //s_sewon 이름 할당


// 게시 버튼 눌렀을때 댓글 기능 추가
summitButtonClick.addEventListener("click", clickButton);

function clickButton() {
  const commentBox = document.createElement("span");
  const profileId = document.createElement("span");
  const br = document.createElement("br");
  commentBox.className = "newCommentBox";
  commentBox.innerHTML = textBox.value;
  profileId.className = "newCommentBox1";
  profileId.innerHTML = "s_sewon";

  if (textBox.value !== "" && textBox.value.trim() !== "") {
    feedComment.appendChild(profileId) +
      feedComment.appendChild(commentBox) +
      feedComment.appendChild(br);
    textBox.value = null;
  }
}

// 엔터 쳤을때 댓글 기능 추가
textBox.addEventListener("keypress", enter);

function enter(e) {
  const commentBox = document.createElement("span");
  const profileId1 = document.createElement("span");
  const br = document.createElement("br");
  const profileId = document.querySelector(".my_profile_id");
  const textBoxTrim = textBox.value.trim();
  profileId1.className = "newCommentBox1";
  commentBox.className = "newCommentBox";
  profileId1.innerHTML = "s_sewon";
  commentBox.innerHTML = textBox.value;

  if (
    textBox.value !== "" &&
    textBox.value.trim() !== "" &&
    e.key === "Enter"
  ) {
    feedComment.appendChild(profileId1) +
      feedComment.appendChild(commentBox) +
      feedComment.appendChild(br);
    textBox.value = null;
  }
}


//글자 타이핑 했을때 '게시' 색깔 바뀌는 기능 추가
textBox.addEventListener("keydown", colorChange);

function colorChange() {
  if (textBox.value !== "" && textBox.value.trim() !== "") {
    summitButtonClick.style.color = "#0095F6";
  } else if (textBox.value.trim() == "") {
    return (summitButtonClick.style.color = "#C0E0FD");
  }
}

역시 javascript는 날 실망시키지 않는다. 항상 공부할때는 조건문,반복문,객체,배열 이런 이론만 공부하다가 DOM으로 접근하는 방법을 익히는데 많이 애먹었다.

• 게시 버튼 눌렀을때 댓글 기능 추가: 피드 div요소 밑에 요소를 생성하여, 댓글을 입력하고 게시버튼을 누르면 댓글이 달리는 기능을 구현

1. 댓글을 입력 했을때, ID가 댓글 앞에 붙고 그 다음 문구가 들어와야 한다.
2. 공백(space)을 치고 게시 버튼을 눌렀을때는 댓글이 달리면 안된다.

• 엔터 쳤을때 댓글 기능 추가:피드 div요소 밑에 요소를 생성하여, 댓글을 입력하고 엔터버튼을 누르면 댓글이 달리는 기능을 구현

1. 댓글을 입력 했을때, ID가 댓글 앞에 붙고 그 다음 문구가 들어와야 한다.
2. 공백(space)을 치고 게시 버튼을 눌렀을때는 댓글이 달리면 안된다.

• 글자 타이핑 시 '게시' 색깔 바뀌는 기능 추가

1. 댓글을 입력 했을때, 게시색깔이 변해야 한다.
2. 공백(space)을 치면 색깔이 변하면 안된다.