따-란⭐️
어느덧 TIL를 적은 지 3주차.
응애단계를 간신히 넘어가 개발자의 'ㄱ'까지 말할 수 있는 단계에 도달한 림졍은...
이제.. TIL에 쓸 말이 많이 없다! (이유인즉슨.. 강의에서 내용이 중복되기 때문이다..!)
뭐 여튼 그래서.. 이번에는 지난 데일리 정리에서 사용된 코드를 많이 활용될 예정입니다.
가보자구요-! 스딷호.
맛보기 - 오늘 배웠던 내용은 말이죠..
오늘 딱 강의를 fetch를 배우기 전까지 들었는데요..
딱 한마디로 정리하면, 'JQuery로 다양한 곳에 적용해 보기' 랄까요..?
준비물은 Day_2의 추억앨범, 이거면 충분합니다.
코드첨부하기엔... 너무 긴 스크립트라 따로 첨부 대신 링크를 드리겠읍니다.
(맨 밑 최종코드를 복사하시는 것을 매우 권장드립니다.)
JQuery 응용 0단계 - 적용하기 전, 제대로 짚고 넘어가기
JQuery 란 무엇인가... 간단하게 설명하자면
누군가가 "일일이 스크립트 쓰기 귀찮으니 냅다 이거로 대체해서 쓰삼~"하고 만들어놓은 JavaScript 라이브러리올시다.
(최대 장점 : JavaScript를 보다 쉽게 조작가능)
그리고 미리 작성된 JavaScrip 코드 즉, JQuery를 가져와 <head>에 삽입하는 것을 임포트라고 하는데,
하지 않으면.. JQuery를 사용할 수가 없다는 점. 참고하자.
본격적인 활용에 앞서 Day 2 코드에는 JQuery 코드가 없으니,
<head> 내부에 반드시 추가해 주자. (이것이 임포트!)
사용될 JQuery 코드 (복사해서 붙여주자. 해당 코드는 반.드.시. <head> 사이에 넣어줄 것.)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
JQuery 응용 1단계 - onclick 속성과 .toggle() 메서드
Day 2의 결과물에서 기록하는 박스가 보는 입장에서는 생각보다 거슬릴 것이다.
(안 그래도 그렇게 생각합시다. 다들 이쁜 것만 보고 싶지, 작성 부분까지 보고싶지 않잖아요. 그렇죠?)
그래서 새롭게 [추억 저장하기] 버튼을 클릭하면 페이지가 열렸다 닫혔다 할 수 있게 만들어 볼 예정이다.
해당 기능을 사용하려면 우선 onclick 속성과 toggle(토글) 메서드를 알아야 한다.
1. onclick
onclick 은 HTML에서 특정 요소(버튼 등)를 클릭했을 때 자바스크립트 함수를 실행시키는 역할을 하는 속성이다.
우리는 사용자가 버튼을 클릭하면 어떤 행동이 일어나도록 만들어야 하므로
onclick 에 함수를 연결하여 버튼을 클릭할 때 함수를 실행시킬 예정이다.
onclick을 버튼에 적용한 모습 (해당 코드는 <body> 바로 밑부분에 위치)
<!-- 버튼을 누르면 함수인 openclose가 실행되도록 만든 코오드 -->
<div class="mytitle">
<h1> 나만의 추억앨범 </h1>
<button onclick="openclose()"> 추억 저장하기 </button>
</div>
2. .toggle()
우리는 냅다 openclose() 라는 함수 설정만 해놓고, 해당 함수를 작동하게 만드는 스크립트를 빼먹은 상태이다.
이 함수에 우리는 토글(toggle)이라는 메서드를 사용해 볼 것이다.
.toggle()은 jQuery에서 사용하는 함수 중 하나로, 특정 요소의 보임/숨김 상태를 전환하는 기능이 있다.
즉, 어떤 요소가 보여진다면 toggle()은 그걸 숨기고, 반대로 숨겨져 있으면 다시 보여주는
한마디로.. 청개구리 같은 친구랄까...? (개굴 🐸!)
우리는 박스를 클릭할 때마다 보였다가, 다시 클릭하면 사라지도록 만들 예정이기 때문에
요소 뒤에 .toggle()을 사용하여 상자의 상태를 전환할 것이다.
따라서 만들어진 스크립트는 다음과 같다.
(스크립트까지 연결해 놓은 상태이므로, 전체를 복사했을 경우 <body> 밖에 넣어주길 바란다.)
<!-- 박스가 클릭할 때 보였다가, 다시 클릭하면 사라지게 만드는 마법의 코오드 -->
<script>
function openclose() {
$('#postingbox').toggle();
}
</script>
아, 참고로 postingbox 영역이 활성화가 되려면 해당 div에 id를 입력해줘야한다.
그래서 해당 부분에 대한 내용 또한 수정하길 바란다. (class = "mypostingbox" 가 적혀있는 div 옆에 넣어주면 된다.)
<!-- 해당되는 부분만 가져왔으므로, 여러분들은 밑에 코드가 더 있어야합니다. 없으면 안돼요! -->
<div class="mypostingbox" id="postingbox">
해당 부분들을 제대로 수정해주었다면, 위의 gif처럼 결과물이 출력될 것이다.
자, 이제는 박스에 입력된 내용물이 새로운 게시물로 만들어지게끔 코딩을 해볼 것이다.
JQuery 응용 2단계 - val 과 append 메서드
??? : 아니 Day 2에서 만든 박스, 데이터를 적어도 왜 작동을 안해요?
라고 생각하셨다면.. 코딩이 되어있지 않은 상황이라서 그렇다.
(이제부터 배울겁니다. 잘 따라오세요.)
우리는 이제 입력한 데이터를 val과 append 메서드를 활용해서 변수를 담아볼 예정이다.
설명에 앞서 간단하게 메서드에 대해 알아보자.
1. val()
val()은 입력된 요소의 데이터(=값)를 가져오거나 설정할 때 사용하는 jQuery 메서드로,
주로 <input>이나 <textarea> 같은 폼 요소에서 값을 다룰 때 사용된다.
이를 활용하여 1)값을 가져와 변수에 저장하거나 [$('#id').val();]
2)입력 필드에 특정 값을 설정[$('#id').val('값');]할 수 있다.
(저희는 1)을 사용할 예정입니다. 알고계십쇼.)
let title = $('#title').val(); // 사용자가 입력한 값을 변수에 저장
2. append()
append()의 경우 Day 6의 "JQuery 연습하기 (2-11)" 에 백틱과 함께 잠깐 설명을 적어놓은 적이 있다.
간단하게 특정 요소에 새 내용을 추가하는 메서드로 원하는 태그는 백틱 사이에,
태그 내부에 들어갈 변수는"${}"에 넣어주면 된다.(단, 변수에는 자료가 있어야 한다!)
한꺼번에 넣을 요소의 경우 "$('#Id')" 로 선택 후 .appnd(변수)를 넣어주면 된다.
/* html : 새로운 카드의 코드, card : 코드를 추가할 위치 */
$('#card').append(html);
추가적으로, append()를 사용하면 기존 내용 뒤에 새로운 내용이 추가되기 때문에
카드가 새로 생성시, 기존 카드들은 그대로 유지되고 새로운 카드가 추가되는 것을 볼 수 있다.
JQuery 응용 3단계 - 메서드를 활용한 카드 생성하기
자, 이제 배운 내용을 활용하여 카드를 생성해 볼 것이다.
우선 데이터가 입력되는 부분(input)에 새롭게 id를 부여해야 한다. (값을 변수에 저장해야하므로)
또한 '기록하기' 버튼을 클릭하면 해당 함수가 실행되도록 만들 예정이기 때문에,
기록하기 input에는 onclick = "makeCard()" 라는 새로운 함수와 속성을 지정해줄 것이다.
부여된 결과는 아래에서 볼 수 있다. (붙여넣기는 해당 부분을 덮어쓰는 형식으로 하길 바란다.)
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<!-- id에 각각의 이름 부여 -->
<input type="email" class="form-control" id="image" placeholder="name@example.com">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="name@example.com">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="content" placeholder="name@example.com">
<label for="floatingTextarea">앨범 내용</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="date" placeholder="name@example.com">
<label for="floatingInput">앨범 날짜</label>
</div>
<div class="mybtn">
<!-- makeCard 함수 지정 필요 -->
<button onclick="makeCard()" type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
또한 기존 카드 뒤에 append()로 카드를 추가할 예정이므로, mycards div에 새롭게 해당 div에 id를 입력해줘야한다.
해당 부분을 수정한 결과값은 다음과 같다.
/* mycards에 넣으면 레이아웃이 꼬이므로 꼭 밑부분에 넣어주기! */
/* 옆으로 4개 만들기 위해 md-3 to md-4로 변경된 부분에 id 넣어줄 것. */
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4" id = "card">
카드가 추가될 부분인 mycards 라는 div에 id를 부여하는
makeCard에 넣을 함수들에 대한 내용은 코드블럭 내 주석을 활용하여 설명을 대체하도록 하겠다.
(이제 우린.. 다 알 수 있는 개발자들이잖아요..? 아님말고.. 🙄)
카드생성 스크립트 코드
function makeCard() {
let image = $('#image').val(); // 이미지 URL 입력값 가져오기
let title = $('#title').val(); // 제목 입력값 가져오기
let content = $('#content').val(); // 내용 입력값 가져오기
let date = $('#date').val(); // 날짜 입력값 가져오기
/* temp_html : 입력한 데이터를 임시로 저장하는 변수 */
/* 들어간 내용들은 mycards의 양식을 따름 */
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-muted">${date}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
}
해당 부분들을 수정하면 아래와 같은 결과값이 나올 것이다.
(아, 이미지는 이미지주소를 활용해야 한다. 참고하자.)
마무리 - 고생해서 만들었는데.. 왜 사라지는거야 ?🥲
자, 여러분 마술을 보여드릴게요. 새로고침을 하면 있잖아요?
?????????????
제가 일부러 그런건 아니고요...
놀랍게도 사라지는게 당연한겁니다.
저희의 데이터는 해당 페이지에서만 존재하고 있기 때문이죠.
따로 데이터를 저장하는 "저장소"를 두지 않았기 때문이죠.
"저는 이곳에 데이터를 저장 하고싶어요!" 라고 하신다면... 서버에 대해 아셔야 함을 미리 알려드리겠습니다.
(아직 배우질 않아서.. 지금의 저로서는 무리랍니다.. 😞)
대신 내일 TIL에 외부 서버에 있는 데이터를 가지고 할 수 있는 친구들을 데려오겠습니다.
바로 Fetch, 페치라는 것이죠.
그러니.. 우선 오늘 배운 내용을 익혀놓는 시간을 가져보아요 우리 ^-^b
그럼 이만. (후다닥)
최종 코드 (복사해서 빈 공간 안에 넣어주면 된다.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 추억앨범</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- JQuery 코드는 무조건 넣어주자. (임포트 필수!) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@100;200;300;400;500;600;700;800;900&display=swap');
* {
font-family: "Gothic A1", system-ui;
font-weight: 200;
font-style: normal;
}
.mytitle {
background-color: gray;
height: 250px;
color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url('https://ifh.cc/g/zNytfw.jpg');
background-position: center;
background-size: cover;
}
.mytitle>button {
width: 150px;
height: 50px;
background-color: transparent;
color: gray;
border: 3px solid white;
border-radius: 10px;
margin-top: 20px;
}
.mycards {
width: 1200px;
margin: 30px auto 0px auto;
}
.mypostingbox {
width: 500px;
margin: 30px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
border-radius: 5px;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mybtn > button {
margin-right: 10px;
}
.card-body {
margin-bottom: 1rem; /* 카드 내용과 날짜 사이의 간격 조정 */
}
.card-footer {
margin-top: 0.5rem; /* 카드 바닥과 날짜 사이의 간격 조정 */
}
.form-floating {
margin-bottom: 1rem; /* 폼 필드 간의 간격 조정 */
}
</style>
</head>
<body>
<div class="mytitle">
<h1> 나만의 추억앨범 </h1>
<button onclick="openclose()"> 추억 저장하기 </button>
</div>
<div class="mypostingbox" id="postingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="name@example.com">
<label for="floatingInput">앨범 이미지</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="name@example.com">
<label for="floatingInput">앨범 제목</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="content" placeholder="name@example.com">
<label for="floatingTextarea">앨범 내용</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="date" placeholder="name@example.com">
<label for="floatingInput">앨범 날짜</label>
</div>
<div class="mybtn">
<button onclick="makeCard()" type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4" id = "card">
<div class="col">
<div class="card h-100">
<img src="https://ifh.cc/g/wD0WFV.png" 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>
<div class="col">
<div class="card h-100">
<img src="https://ifh.cc/g/429HYa.jpg" 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>
<div class="col">
<div class="card h-100">
<img src="https://ifh.cc/g/fctWdS.jpg" 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>
<div class="col">
<div class="card h-100">
<img src="https://ifh.cc/g/dvQ7H2.jpg" 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>
</div>
</div>
</body>
<script>
function openclose() {
$('#postingbox').toggle();
}
function makeCard() {
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-muted">${date}</small>
</div>
</div>
</div>`;
$('#card').append(temp_html);
}
</script>
</html>'React TIL' 카테고리의 다른 글
| [React] Day_11 데일리 정리 (3) | 2024.10.01 |
|---|---|
| [React] Day_10 Git 특강 정리 (튜터님 열람금지) (0) | 2024.09.30 |
| [React] Day_8 맨땅에 헤딩하는 실습일기 Part 2 - (2) (3) | 2024.09.07 |
| [React] Day_7 맨땅에 헤딩하는 실습일기 Part 2 - (1) (3) | 2024.09.06 |
| [React] Day_6 데일리 정리 (이어서) (0) | 2024.09.05 |
