사전캠프 14일차 - 웹개발 3주차

학습 목표

※ jQuery + fetch 로 웹페이지 제어 마스터하기 (복습)

1. jQuery를 사용하려면 먼저 jQuery 라이브러리를 HTML 문서에 포함시켜야 함.

<head>

<link

href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"

rel="stylesheet"

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"

crossorigin="anonymous"/>

script src는 제이쿼리

밑에 bootstrap은 부트스크랩 링크

추억앨범을 가지고 와서 추억 기록하기 버튼을 누르면 밑에 포스팅 박스가 열렸다 닫혔다 하는 걸 자바스크립트로 구현.

1. <script>

function openclose() {

}

</script>

2. 바디에 있는 추억 기록하기 버튼태그에 onclick = "openclose" 함수 넣어주기.

1.2번 내용이 추억 기록하기 버튼을 누르면 ! 까지 한거임 그다음 ' 포스팅박스'를 열고 닫기 작업 ㄱㄱ

3. 포스팅 박스에 id값을 넣어서 이름 넣어주기 css class 선언하는 거랑 똑같은 거임.

4. 스크립트 안에 3번으로 이름 넣어준걸로 효과 넣기 열고 닫기 함수는 - > toggle(). 이라고 함

결과

function openclose() {

$('#postingbox').toggle();

}

</script>

</head>

<body>

</div>

실제로 사진이랑, 값을 입력해서 카드를 생성해내기.

1.function makecard(){} 함수 만들기

이 함수를 어디에 넣을거냐 ? 기록하기 버튼을 눌르면 작동해야 하니까 기록하기 버튼에 함수 넣어주기

function makecard(){

let image = $('#image').val();

let title = $('#title').val();

let content =$('#content').val();

let date = $('#date').val();

let temp_html = `

<img src="${image}"

class="card-img-top" alt="...">

<h5 class="card-title">${title}</h5>

<p class="card-text">${content}</p>

</div>

</div>

</div>`;

$('#card').append(temp_html);

이번건 어려움 ㅇㅇ

let image = $('#image') html문서 안에 image라고 아이디값을 가지고 있는 애를 가지고 와라는 뜻.

let temp_html은 무슨 뜻이지 모르겟네 ..

암튼 나만의 추억앨범 페이지에 값을 입력하면 그대로 카드가 나오게 함.

맨 밑에 $('#card).append(temp_html) append는 새로 삽입 한다는 말. 입력해서 카드를 삽입한다는 말이니까 append 사용

카드값은 id="card"임.

암튼 어렵노 ..

3-2 스파르타 플릭스로 복습 해보기

1. 영화 기록하기 버튼을 누르면 포스팅 박스가 열리고 닫히기 혼자서 함 해보기.(성공♥)

우선 function openclose() {

$('#postingbox').toggle()

}

영화 기록하기 버튼안에 onclick = "openclick" 설정해주고 포스팅박스 id 만들고 토글 이벤튼 넣으면 끝.

function openclose( ){

$('#postingbox').toggle()

}

</script>

</head>

<body>

<div

class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"

href="/"

class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"

<svg

class="bi me-2"

width="40"

height="32"

role="img"

aria-label="Bootstrap"

</svg>

</a>

<ul

class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"

<li>

<a href="#" class="nav-link px-2 text-danger">spartaflix</a>

</li>

<li>

</li>

</ul>

<input

type="search"

class="form-control form-control-dark text-bg-dark"

placeholder="Search..."

aria-label="Search"

</form>

</button>

</div>

</header>

병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한

역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직

세자뿐이다.

</p>

영화 기록하기

</button>

</div>

1. 펑션 메이크 카드 만들고 변수 선언해서 이미지, 타이틀, 추천이유, 별점 변수 넣기

그 안에 들어가는 데이터들은 내가 입력해서 넣는다는의미인 $('#image').val 넣기

2.let temp_html= ' `안에 들어가는 데이터는 카드 한장이 들어간다는 의미로

바디에 있는↓ 밑에 코드 넣어주기

<img

src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top"

alt="..."

</div>

3. 그리고 안에 이미지소스랑 타이틀 , 별 , 추천이유는 입력값넣는다는 의미로 ${image} 넣어주기.

그리고 $('#card').append(temp_html) 카드는 템프에이치티엠엘 값을 삽입(append)한다는 의미로 이 함수를 넣어줌.

물론 $('#card') 이거 id 설정 밑에 바디에서 해줘야함 ㅇㅇ

완성코드↓

function makecard() {

let image = $("#image").val();

let title = $("#title").val();

let reason = $("#reason").val();

let star = $("#star").val();

let temp_html = `<div class="col">

<img src="${image}"

class="card-img-top"

alt="..."

<h5 class="card-title">${title}</h5>

<p class="card-text">${reason}</p>

</div>

</div>`;

$('#card').append(temp_html);

}

</script>

</head>

<body>

<div

class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"

href="/"

class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"

<svg

class="bi me-2"

width="40"

height="32"

role="img"

aria-label="Bootstrap"

</svg>

</a>

<ul

class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"

<li>

<a href="#" class="nav-link px-2 text-danger">spartaflix</a>

</li>

<li>

</li>

</ul>

<input

type="search"

class="form-control form-control-dark text-bg-dark"

placeholder="Search..."

aria-label="Search"

</form>

</button>

</div>

</header>

병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한

역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직

세자뿐이다.

</p>

<button

onclick="openclose()"

type="button"

class="btn btn-outline-light"

영화 기록하기

</button>

</div>

<input

type="email"

class="form-control"

id="image"

placeholder="영화 이미지 주소"

</div>

<input

type="email"

class="form-control"

id="title"

placeholder="영화 제목"

</div>

</select>

</div>

<input

type="email"

class="form-control"

id="reason"

placeholder="추천 이유"

</div>

기록하기

</button>

</div>

API

API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다. * GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회 * POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원 가입, 회원 탈퇴, 비밀번호 수정

예를들어 **은행 ***점은 서버이고 그 은행 안에 창구가 여러개 있을 것 ( 예금, 적금, 상환 등)

그 각각의 창구가 API 라는 것.

좀 더 쉽게 예를 들자면

음식 배달 앱 예시:

음식 배달 앱을 열어서 음식을 주문한다고 가정해봅시다.
음식점에서 주문을 받는 시스템(서버)이 있습니다. 그런데, 이 음식점의 시스템은 직접 음식을 주문할 수 있는 앱을 제공하지 않아요.
그 대신, 음식 배달 앱은 음식점 시스템과 연결되는 API를 사용합니다. 이 API는 음식을 주문하는 정보를 음식점 시스템으로 전달하고, 음식점에서 주문이 처리되면 그 정보를 배달 앱에 다시 보내줍니다.

API가 하는 역할:

음식 배달 앱은 음식점 시스템에 직접 접근할 수 없지만, API를 통해 주문을 전달하고 결과를 받아옵니다.
이때 API는 주문 정보를 보내고(주문하기), 결과(주문 상태, 배달 시간 등)를 다시 받아오는 중개자 역할을 합니다.

즉, API는 음식 배달 앱과 음식점 시스템이 서로 대화할 수 있게 해주는 다리 역할을 하는 거예요. 우리가 배달 앱에서 음식을 주문하면, API가 그 주문을 음식점 시스템으로 보내고, 음식점에서 처리가 완료되면 다시 그 정보를 배달 앱에 전달해주는 구조죠.

따라서 API는 서로 다른 시스템이 쉽게 서로 정보를 주고받을 수 있게 해주는 통로라고 생각하면 됩니다!

fatch란 무엇이냐 ?

개발자 코드츄

사전캠프 14일차 - 웹개발 3주차

음식 배달 앱 예시:

API가 하는 역할:

티스토리툴바