[패스트캠퍼스] 프로그래밍 기초. 자바스크립트코드의 프로젝트 적용

박세준·2022년 10월 10일

4주차 K디지털기초역량훈련 국비지원교육 내일배움카드취업 패스트캠퍼스 프로그래밍기초

프로그래밍 첫걸음 시작하기

목록 보기

5/6

개요

국비지원으로 진행되는 패스트 캠퍼스 강의. 4주차내용 정리이다.
강의에서 제공되는 HTML,CSS 코드를 기주으로 javascript 코드를 작성하여 기능들을 추가하였다.

화면을 구성하는데 필요한 유저정보, 피드들 데이터는 data.js 라는 파일에서 전역적인 변수로써 할당함으로 사용하였다.

내용

페이지별 기능 요약

헤더
1.기본 기능
현재 머물고 있는 탭에 밑줄 긋기
사진들 보기 탭
1. 기본 기능
- data를 받아와서 피드들을 보여주기
- 피드의 좋아요를 눌렀을 때 data 변수 및 화면에 반영되기
2.정렬 기능
- 최신 순 정렬
- 좋아요 순 정렬
3. 필터 기능
- 내 사진 필터
- 좋아요한 사진 필터
- 내가 팔로우한 회원 사진
사진 올리기 탭
1. 사진의 설명을 적을때 해당 값이 반영되어 화면에 현재 글자수가 표시 되는 기능
p.s 사진을 업로드 하는 기능은 실습에서 추가하지 않았다.
내정보 탭
1. 내 정보 수정
- 수정을 반영하면 전역적인 값이 변경 되는 것(메모리상에서만 적용. 디스크를 수정하지는 않음. 즉 data.js는 변경되지 않음)
-수정을 취소하면 이전의 값으로 data를 되돌리는 것

실습

실습은 전체적으로 CSS와 함께 이루어 진다.
예를 들어 포커스를 얻기위해 쿼리 셀렉터로 요소를 고른 후 ON CLASS를 추가하거나 제거함으로 스타일을 지정한다.(현재 머물고 있는 탭에 밑줄 긋기)

정렬기능, 필터기능의 경우 메모리에 있는 원본을 수정 해서는 안되기 때문에 피드들을 랜더링 하는 show 함수의 내부에 지역변수를 한개 만들고 해당 지녁변수에 설정된 필터 및 정렬 방식을 적용하고 그 지역변수를 랜더링 하는 식으로 이루어져 있다.

정렬기능, 필터기능의 경우 확장성을 위해 어떤 정렬을 할지, 어떤 필터를 이용할지는 매개변수로 전달 받는 방식으로 코드를 구성했다.

let filters = {
  all: function (it) {return true;},
  mine: function(it){return it.user_id === my_info.id;},
  like: function(it){return my_info.like.indexOf(it.idx)> -1},
  follow : function(it){return my_info.follow.indexOf(it.user_id)>-1}
}
위처럼 filter의 조건을 전역변수로 현재 적용될 
필터를 담을 변수로 하나 만든다.

let filter = filters.all;

랜더링 함수는 위 필터를 기준으로 랜더링을 하고 
필터를 변경하기 위해서는 다음과 같은 코드를 이용한다.

function setFilter(_filter){
  document.querySelectorAll("#filters li").forEach(function(filterLi){
    filterLi.classList.remove("on");
  })
  document.querySelector("#filters li."+_filter).classList.add("on")
  filter = filters[_filter];
  showPhotos();
}
_filter에 해당하는 class 이름을 가진 요소들에 대해
활성화 되어 있는 on 을 다 때고, 해당 요소로 on을 옮기며,
필터를 알맞게 변경한 뒤 랜더링 한다.

좋아요기능과 내정보 수정의 경우는 위의 필터나 정렬과 달리 원본 데이터의 수정역시 필요하기 때문에 data.js 에 있는 변수에 접근해서 알맞게 변화를 적용시키는 방식으로 코드가 짜여있다.

실습을 다 진행했을 경우 얻을 수 있는 화면이다.

발전과제

해당 강에 대한 발전 과제이다.

모든 썸네일들을 새로 생성해 넣지 않고 (즉 showPhotos를 호출하지 않고)
각각의 좋아요를 토글하려면 어떻게 짜면 될까요?

힌트

각 썸네일의 좋아요 버튼을 querySelector로 선택할 수 있도록 함
showPhoto 함수에서 각 썸네일에 클래스나 아이디를 지정할 수 있음

구현

현재 코드의 경우 좋아요를 토글했을 때도 전체 피드를 지우고 새로 생성하는 식으로 짜여있다.

이는 불필요한 리랜더링을 일으키기 때문에 좋아요를 누른 피드에 대해서만 리 랜더링을 하게 하는 방식으로 발전을 시키라는 과제이다.

현재는 생성된 피드들을 구분할 방법이 없도록 코드가 짜여져 있기 때문에, 피드들을 생성할 때 해당 피드들을 구분짓는 구분자를 추가하도록 한다.
각 데이터가 유일하게 가지고 있는 키인 idx로 구분자를 추가하되 css selector의 경우 숫자로시작 할 수 없기 때문에, idx${photo.idx} 로 클래스를 추가한다.

그 후 좋아요를 다루는 함수에서 이 요소만을 선택해 리 랜더링을 할 수 있도록 코드를 수정한다. 좋아요를 다루는 함수는 이미 idx를 인수로 받고 있기 때문에 구현 내용만 살짝 바꾸면 된다.


+| let photoNode = document.querySelector(`section#gallery article.idx${idx}`);
+| photoNode.querySelector(".like").innerHTML = photo.likes;
+| if (my_info.like.indexOf(photo.idx) > -1) {
+|   photoNode.querySelector(".like").classList.add("on");
+| }else{
+|   photoNode.querySelector(".like").classList.remove("on");
+| }
-| showPhotos();

  쿼리 셀렉터로 해당하는 피드를 고르고 like와 관련된 사안을 다시 그리고 있다.
  그리고 원래 전부 그리던 showPhotos()를 제거했다.