부스트코스 4. 웹 앱 개발[프로젝트 4-2]

 

프로젝트 구현 영상

---

아래의 정보들은 후에 하나의 페이지로 자세하게 풀어낼 예정입니다. 이 페이지에서는 프로젝트 사용한 범위내에서의 정보만 코드 없이 개념만 설명하고 넘어가겠습니다. (잘못 설명된 개념이 있으면 언제든지 알려주세요~~!!)

 

1. jquery 라이브러리

 

 우리가 보는 브라우저는 Html을 Dom(Document Object Model) tree형태로 저장을 합니다. 

텍스트 문서로 되어있는 웹문서를 렌더링 엔진이 파싱하여 브라우저가 이해할수 있는 형태로 구조로 구성을 하여야 하는데 이때의 구조가 DOM이고 이 DOM은 tree의 형태를 가진다.

즉 우리가 봐왔던 head,body,p,a 모든 태그들은 객체가 되어 저장이 된다.

 이렇게 저장이 되어있는 객체들을 javascript의 method들을 통해 저장되어있는 객체들을 가져올수 있다. 그중에 몇가지를 열거하자면

• document.querySelector
• document.querySelectorAll
• document.getElementById
• document.getElementsByClassName

등등 javascript에서 제공하는 위와같은 method들을 통해 객체를 가져와 사용할수 있었다.

 

위의 기능들을 더 편리하게 이용할수 있게 만들어 놓은것이 jquery 라이브러리 이다.

• $(".className")
• $("#idName")   
• $(".className").text()
• $(".className").attr(attribute,content)

  과 같이 보기에도 간단하고 위의 함수들을 간편하게 쓸수있고 아래 두개의 함수와 같은 기능들을 이용하면 속성을 바꾸는등 다양한 기능이 많다.

 

첨부해놓은 document를 보면 코드를 짜는데 필요한 함수를 찾을수 있다.

https://api.jquery.com/

jQuery API Documentation

---

2. handleBar 라이브러리

 

 프로젝트3를 진행할때 templating작업을 하기 위해 우리는

1. html문서 하단에 작성해놓은 script태그의 html코드 불러오기
2. 데이터베이스에서 정보 가져오기
3. replace함수를 통해 2번의 정보를 1번의 코드에 치환시켜주기
4. 3번의 replace가 완료된 코드를 원하는 객체에 appendChild 시켜주기

 위의 작업을  더 쉽게 만들어 주는 것이 handleBar 라이브러리이다. 

지금부턴 프로젝트를 진행하면서 공유하고싶은 handleBar기본 사용법에 대해 이야기 하겠다.

<script type="template" id="matchTemplate">
 <li>
 	<img alt="{{desc}}" src ="{{imageName}}"></image>
    <a>{{name}}</a>
    <p>{{desc}}</p>
    
    {{#each reply}}
    	<p>{{this}}</p>
    {{/each}}
    
 </li>
</script>

위와 같은 script내에 template코드가 들어있다. 

handleBar 라이브러리를 사용할때는 데이터와 바꿔주고 싶은 변수명을 {{ }} 대괄호 두개를 이용하여 감싸준다.

var data = {
	name : "자바",
   	desc : "자바스크립트와 자바는 다릅니다",
    	imageName : "img/11_12",
    	reply : [
    	"최고에요", "별로에요"
    	]
};

template코드와 data를 매칭 시켜주기 위한 과정은 간단하다.

 

1. 핸들바와 템플릿 코드 매칭시켜주기
2. 코드와 매칭된 핸들바에 데이터 넣어주기

 

 이를 코드로 구현을 해보면

var html = document.querySelector("#matchTemplate"); //템플릿 코드 가져오기
var bindTemplate = Handlebars.compile(html); //핸들바와 템플릿 코드 매칭시켜주기
var addHtml = bindTemplate(data); //코드와 매칭된 핸들바에 데이터 넣어주기

 위의 코드를 통해 데이터에 있는 변수들은 자동으로 매칭이 되고 {{#each}} {{/each}}와 같은 기능을 이용하면 데이터의 변수가 복수개의 값을 가질때에 그 개수에 맞게 mapping을 시켜주니 기존의 복잡했던 과정도 단순해지고 코드또한 짧아지게 된다. 

handleBar에는 registerHelper와 같이 다양한 기능이 많으므로 더 다양하게 쓰일수 있다.

---

3. 무한슬라이드

 

 이번 프로젝트를 수행하면서 애먹었던 기능중 하나이다.

이미 프로젝트3 에서 구현한 적이 있지만 어떤 이유에선지 필자는 그때와 같은 방법으로 구현을 하는데 애를 먹었었다.

구현했던 방법은 이러하다(더 좋은 방법은 많다!!). 프로젝트에서 주어진 조건은 기타이미지가 존재하는 경우 두개의 이미지가 이미지 슬라이드를 구성하게 된다. 이 두개를 이용해 무한슬라이드를 만들면 된다.

 

슬라이드 구성 : 1a 2a

 

첫째, 슬라이드의 구성을 변경한다

 

슬라이드 구성 : 2b 1a 2a 1b

 

둘째, ul의 속성변경을 통해 슬라이드 동작 하기전 보이는 화면을 1a이 보이게 한다.

셋째, 버튼을 눌러서 슬라이드가 끝에 도달하게 된다면 transition속성을 주지않아 transform을 할때 invisible하게 만들고 1b에있다면 1a로 2b에 있다면 2a로 translate를 시켜준다.

 

이미 프로젝트3의 프로모션 무한 슬라이딩 구현에 성공한 분이라면 위와 같은 방법이 아니더라도 구현을 더 나은방식으로 할수 있을것으로 본다.

---

4. 객체 리터럴

 

 자바스크립트에서는 객체를 이용하면 코드를 더 수월하게 짤수 있다. 자바스크립트에서 객체를 만드는 표현방식을 객체 리터럴이라고 한다. 코드를 먼저 살펴보고 가려한다.

var Person = {};
Person.name = "부스트코스"
Person.job = "developer"
Person.talk = function(){
	return Person.name + "의 직업은 " + Person.job;
};


//위 아래 코드의 차이는 단지 표현의 차이!!

var Person = {  
	name : "부스트코스",
    	job : "developer",
    	talk : function(){return this.name + " 의 직업은 " + this.job;}
};

 객체 리터럴을 사용한 방식이다.

위와같은 방법으로 객체를 생성 할수 있고 코드부분의 상단 같이 빈객체를 생성해 변수를 넣어줄수도 있고 하단 같이 간편하게 객체의 함수와 변수까지 동시에 생성해줄수 있다.

기존의 Object()생성 함수를 이용하지 않고 위와 같이 간단하게 객체를 생성해줄수 있어 코드가 더 간결해지고 가독성 있게 된다.

 

---

5. 후기

 객체리터럴 방식에 대해 이해를 못하고 있다가 리뷰후에 알게되어 급하게 코딩을 구성하느라 생각과 다르게 쫒기면서 진행을 하게 되어 아쉬웠다. 단순한 부분에서조차 실수가 많았고 시행착오를 계속 겪는 코딩 스타일이여서 시간이 많이 소비 되었던것 같다. jquery와 handlebar, 객체리터럴 방식에 대해 더 알아야할 필요성을 느꼈다.

 

• 출처 : https://www.edwith.org/boostcourse-web/lecture/16699/,https://poiemaweb.com/js-dom

DOM | PoiemaWeb

[LECTURE] 2) DOM과 querySelector : edwith