wecode +9 (8/26) - git/github(중요!) 포함

배운 것/개발한 것/정리한 것

 - westagram : html, css, js 작업 (계속)

 

1. westagram 우측 메뉴 상단 프로필 클릭시 팝업 열기(.popup .show css 추가)

 - 처음에는 toggle기능을 이용해서 구현하였는데, 프로필 아이콘을 클릭해야만 팝업이 닫히는 현상이 발생하였다.

 - 문서 전체에 addEventlistener를 하여 click 타겟이 팝업이 아닐 경우 팝업을 닫는다. (classList.remove)

const profileClick = () => {
  document.body.querySelector(".popup").classList.add("show");
};

// 프로필 아이콘 이외의 것을 클릭시 팝업 닫기
document.addEventListener("click", function (e) {
  let isClickInside = profile.contains(e.target);
  if (!isClickInside) {
    document.body.querySelector(".popup").classList.remove("show");
  }
});

 

2. westagram 아이디/이름 검색 기능 구현

- 이전에 작성해봤던 도시 이름 검색하기를 응용

- input 창에 focus했을시 검색창이 생기고, focus 가 해제됐을 때 (addeventlistener에서는 blur라고 명명한다)는 검색창을 닫는 기능을 구현했다.

- 항상 기능을 잘게 쪼개는 연습을 하는게 좋다고 느꼈다. input창에 입력한 검색어를 기반으로 member 배열에서 찾는 함수 따로 (findMatches 함수, filter 기능을 사용했다), 반환받은 결과값인 배열에 .map을 사용하여 새로운 배열값을 표기해주는 함수를 따로 선언하였다.

const members = [
  {
    id: "youngkwon315",
    desc: "youngbin",
  },
  {
    id: "yumyumyum12",
    desc: "food",
  },
];

const searchInput = document.querySelector(".input-field");
const suggestions = document.querySelector(".searchPopup");

const searchCreate = () => {
  suggestions.classList.add("show");
};
const searchDelete = () => {
  suggestions.classList.remove("show");
};

function findMatches(word, members) {
  return members.filter((member) => {
    return member.id.match(word) || member.desc.match(word);
  });
}

function displayMatches() {
  const matchArray = findMatches(this.value, members);
  const html = matchArray
    .map((member) => {
      const regex = new RegExp(this.value, "gi");
      const memberId = member.id.replace(regex, this.value);
      const memberDesc = member.desc.replace(regex, this.value);
      return `
            <li>
                <span class="name">${memberId}</span>
                <span class="desc">${memberDesc}</span>
            </li>`;
    })
    .join("");
  suggestions.innerHTML = html;
}

searchInput.addEventListener("change", displayMatches);
searchInput.addEventListener("keyup", displayMatches);
searchInput.addEventListener("focus", searchCreate);
searchInput.addEventListener("blur", searchDelete);

 

3. westagram 가장 빈번히 사용한 기능들

 - css : toggle (댓글 좋아요 구현할 때 사용), visibility : hidden (팝업의 기본 표기값은 hidden이였다가, 특정 이벤트 발생시 새로운 css 셀렉터를 선언하여 팝업이 보여지게 변경

 - css flexbox : 제일 많이 사용하여 조금은 익숙해졌다.

 - js : .filter, .map : 많이 사용하진 않았지만 중요할 것 같으므로.. 더 많이 사용하는 연습하기

 

(중요) 4. git/github

추후 대부분의 프로젝트가 팀 프로젝트라는 점에서, 개발 기술보다 더욱 중요하고, 빨리 익숙해져야 하는 부분인 것 같다.  

(참조 2 : 터미널 에디터에 여러 줄의 Readme 작성법)

 

1. master : 최종 결과물이자 마지막 모든 branch의 수정사항이 merge 되는 코드

2. branch : 각 작업자들이 변경한 사항을 올리는 곳. (나무의 가지를 생각)

3. remote : 원격 저장소를 말함 (github)

4. local : 내 컴퓨터

 

관련해서 오늘 배운 것 : 위코드에서는 맥북으로 작업하여 branch를 commit하고, 집의 데스크탑으로 이어서 작업을 하려면 어떻게 해야할까? -> commit한 원격 repository의 특정 branch만 작업하고자 하는 local 폴더 내에 clone하면 된다 

 1. 로컬에 폴더 생성 후 git init

 2. 특정 브랜치만 clone : git clone -b (브랜치명) feature/youngbinkwon (repository 주소) https://github.com/wecode..... 

 3. clone완료 후 vsc 열어서 해당 브랜치의 파일이 들어왔는지 확인 후 작업

 

-> 내일은 다시 해당 brach에서 작업한 사항을 맥북으로 가져와보기 : fetch를 사용하는 것 같음