#3. JS 실습

이전 회차에서 실습으로 진행했던 '나만의 추억 앨범 만들기' 코드를 활용하여 진행한다.

새 앨범을 만드는 기능과, 앨범 기록 칸의 On/Off 하는 토글 기능을 만든다.

 

실습 진행

JS에는 Toggle() 함수를 통해 특정 객체의 On/Off 기능을 추가할 수 있다.

function openclose()
{
	$('#PostBox').toggle();
}

 해당 기능을 사용하면, 웹페이지에서 PostBox 가 사라지는데, 이는 실제로 사라진 것이 아니다.

F12를 통해 확인하면 쉽게 알 수 있는데, display 의 값이 none 이 된 것 뿐, 데이터는 그대로 유지되고 있다.

 

값을 받아올 때 : Val()

function MakeCard()
{
	let images = $('#image').val();
	alert(images);
}

여기서 let 은 변수 images의 자료형이다. val() 함수를 통해 image 객체의 데이터를 받아오고, 이를 alert() 를 통해 알린다.

 

새로 값을 만들 때 : Append()

let temp_html = `
        <div class="col">
                <div class="card h-100">
                    <img src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
                        class="card-img-top" alt="...">
                      <div class="card-body">
                        <h5 class="card-title">앨범 제목</h5>
                        <p class="card-text">앨범 내용</p>
                      </div>
                      <div class="card-footer">
                        <small class="text-body-secondary">앨범 날짜</small>
                    </div>
                </div>
            </div>`;
 $('#card').append(temp_html);

코드가 조금 긴데, <div> 부터 마지막 </div> 까지는 모두 Body의 card 를 이루는 구성이다.

이를 벡틱 ` 기호 안에 넣어 temp_html 변수 안에 할당하고, 이를 Append() 함수를 통해 새로 생성한다.

 

이 예시를 보면 여러 card들이 이미 만들어져 있다는 것을 예상할 수 있는데,

이는 모두

<div id="card" class="row row-cols-1 row-cols-md-4 g-4">

이 코드로 여러 card 들을 하나의 단락으로 묶은 항목에서 가져온 것이다.

 

여기서 앨범 제목, 앨범 내용 등 텍스트로 들어간 부분을 원하는 값, 즉 변수로 바꾸고 싶을 때는

let temp_html = `
	<div class="col">
		<div class="card h-100">
			<img src="${images}"
			class="card-img-top" alt="...">
			<div class="card-body">
				<h5 class="card-title">${titles}</h5>
				<p class="card-text">${contents}</p>
			</div>
		<div class="card-footer">
		<small class="text-body-secondary">${dates}</small>
		</div>
	</div>
</div>`;

다음과 같이 ${변수 이름} 의 형태로 넣을 수 있다.

 

여기까지 실습을 하고 나면, 카드를 생성하면 새롭게 추가되는 것을 볼 수 있다.

하지만 페이지 새로고침을 하면 다시 사라지는데, 이는 아직 서버에 연결되지 않았기 때문이다.

 

클라이언트 - 서버 기초 개념

일반적인 브라우저에서 어떠한 동작이 저장되는 것은 그 값이 브라우저가 아니라 다른 곳, '서버'에 저장되어있다. 해서 우리가 보는 웹페이지의 모든 데이터들은 이 서버에 저장되어서 우리의 브라우저에 띄워주는 과정을 거치는 것이다.

지금 만든 코드들은 모두 서버 연동이 되어 있지 않고 단순한 브라우저만 제작했기에 값이 저장되지 않고 새로고침 시 그대로 삭제되는 것이다.

 

서버 > 클라이언트 : JSON 사용

JSON은 데이터의 표준 형식 이라고 볼 수 있다. Key : Value 로 이루어져 있다.

클라이언트 > 서버 : GET 요청

www. ~ 주소와 같은 개념으로, 서버에게 어떠한 데이터를 달라고 요청하는 과정이다.

여기서 API 가 사용된다.

 

API란 Application Programming Interface 의 준말로,

OS와 exe(응용 프로그램) 사이의 통신에 사용되는 언어, 메세지 형식을 말한다.

 

예를 들어 어떤 한 은행이 서버 라고 했을 때, 고객과 은행을 연결하는 소통 창구를 API 라고 볼 수 있다.

중간전달자의 역할인 것이다.

또한 허락된 곳에만 접근을 허용한다는 특징을 가지고 있다.