![[자바스크립트] DOM 숨기기 (3)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-31T06%3A22%3A34.652Z-5a3bc5d7-dcb0-4e18-963c-65f31184de0b&w=2048&q=75)
DOM 숨기기를 해보기 전, DOM 을 잘 설계해야 하는 이유가 있다.
아래의 기본기를 잘 알고 시작하자.
SSR (Server-Side Rendering, 서버사이드 렌더링)
서버사이드 렌더링(SSR, Server-Side Rendering)은 웹 페이지의 콘텐츠를 서버에서 미리 렌더링하여 클라이언트에 전달하는 방식이다.
클라이언트가 get 요청하면 서버가 무조건 html 로 바꿔서 주니까 전체 페이지를 reload 해준다. 항상 F5 가 발생하는 것.
ex. 섹터 3개중에 bottom 부분만 변경해서 보냈는데도 전체 페이지를 응답해주니까(SSR 서비스) 서버의 부하가 크다. (페이스북처럼 트래픽이 많은 대규모 서비스에서는 서버 부하가 더욱 문제됨)
AJAX 통신
AJAX(Asynchronous JavaScript and XML)는 자바스크립트를 사용해 서버와 비동기적으로 데이터를 주고받는 기술이다. AJAX는 웹 페이지를 다시 로드하지 않고도 서버와 데이터를 주고받을 수 있게 해준다.
위의 예시처럼 섹터 3개 중에 가장 아래 bottom 부분만 변경하고 싶을 때, ajax 로 통신하면 데이터만 돌려준다. 그림 안의 데이터만 돌려주는 것.
자바스크립트로 데이터만 받으면 서버 reload 를 하지 않는다.
JSON 형태로 데이터를 돌려주면 화면이 reload 가 되지 않고, 데이터만 받고 끝.
bottom 부분을 찾아야겠지? → 고것을 DOM 으로 찾는다.
그 부분을 다시 찾아, CSR (클라이언트 사이드 렌더링) 한다.
CSR (Client-Side Rendering, 클라이언트사이드 렌더링)
클라이언트사이드 렌더링(CSR, Client-Side Rendering)은 클라이언트 측에서 웹 페이지를 렌더링하는 방식을 의미한다. CSR에서는 서버가 주로 빈 HTML 틀만 제공하고, 자바스크립트가 클라이언트(브라우저)에서 실행되어 동적으로 콘텐츠를 구성하고 렌더링한다.
브라우저는 HTML 을 받으면(서버로부터) 전체 페이지를 reload 하는 것이 기본 로직인데,
이건 HTTP 요청이 아니라, ajax 요청이다. (→ 데이터만 줘, 기본 프로토콜 신경 쓰지 말고 나는 요청한 데이터만 줘)
이 경우, 서버가 DB 에서 데이터 받아서 HTML 로 안만들고 JSON 으로 응답한다.
(form 태그는 무조건 HTTP 요청)
JSON 통신
JSON 통신은 서버와 클라이언트 간에 데이터를 주고받기 위해 JSON (JavaScript Object Notation) 형식을 사용하는 통신 방식이다. JSON은 데이터 교환 형식으로서, 특히 웹 애플리케이션에서 서버와 클라이언트 간의 데이터를 교환할 때 널리 사용된다.
JSON 은 HTTP 메서드 GET, PUT, DELETE, POST 다 된다.
HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 서버와 통신할 수 있으며,
이때 데이터의 형식 content-type 은 application/json 으로 설정 해야 한다.
변수에 담긴 데이터를 기반으로 DOM 을 설계하고, 부분 리로딩을 해준다. (서버의 부하를 줄여줌)
DOM 설계를 잘 해야 한다.
리턴 되어 변수에 들어오는 데이터를 가지고, DOM 을 찾아서 코딩을 해야한다. 바꿔치기 해줘야함.(→ 클라이언트 측에서 렌더링 하는 개발자가 바로 프론트엔드 개발자, 그림 그리는걸 language 로 하면 프론트엔드 개발자)
페이스북의 사례 → 이러면 form 태그랑 ajax 랑 섞이니까 코드가 헷갈린다.
그래서 서버사이드 렌더링을 아예 쓰지 말고, 전부 다 ajax 로 하자!
원래는 페이지를 계속 바꿔치기 했다면, index html 하나에서 부분을 reload (바디를 부분으로 잡으니까 부분이 큼) 한다. 이것이 SPA
SPA
SPA는 웹 애플리케이션 또는 웹사이트의 구조 중 하나로, 사용자와 상호작용을 위해 한 개의 HTML 페이지를 사용한다. 이 방식은 페이지의 전체를 새로 로드하는 대신, 동적으로 콘텐츠를 변경하여 업데이트. (SPA 예시. Facebook: 뉴스 피드를 스크롤하면서 콘텐츠가 동적으로 로드된다.)
전부 다 ajax 로 전체를 잡으면 여러 페이지 같아 보이지만,
한 페이지에다가 지우고 다시 그리고~ 이런 개념이다.
그렇게 완전 ajax 로 바뀌게 된다. (SPA : 웹 애플리케이션 구조의 하나로, 자바스크립트를 통해 클라이언트 측에서 페이지를 동적으로 업데이트하는 방식)
단점은 id 를 DOM 으로 찾는 게 어렵다.
그래서 돌아가려는게 리액트 React.
React 리액트
리액트(React) 는 페이스북(Facebook)이 개발한 오픈소스 JavaScript 라이브러리이다. 리액트는 사용자 인터페이스를 구축하기 위해 사용되며, 특히 단일 페이지 애플리케이션(SPA)과 복잡한 사용자 인터페이스를 효율적으로 관리할 수 있도록 설계되었다.
React 는 이 데이터를 관리한다. 이 데이터는 이동,~~ 매칭 시켜놓음
리액트가 알아서 해준다.
상태 데이터만 관리해주면 됨, 데이터 바꿔치기 하면 그림이 다시 그려진다.
상태가 바뀌면 그림이 다시 그려진다. WOW
jQuery 제이쿼리
이제 제이쿼리를 써보자.
제이쿼리(jQuery)를 사용하려면, 제이쿼리 라이브러리를 HTML 문서에 포함시켜야 한다.
아래의 스크립트를 head 안에 꼭 넣어 주자.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>CSS 선택자
제이쿼리(jQuery) 에서는 CSS 선택자를 사용하여 DOM 요소를 선택하고 조작하기 때문에, 제이쿼리를 사용할 때 CSS 선택자는 매우 중요하다.
‘p’ 태그 선택자 <p>
’.myClass’ 클래스 선택자 class=”myClasss”
’#myBtn’ 아이디 선택자 id=”myId”
이제부터 이렇게 쓰도록 한다. GO
아래의 이전 코드와 동일한 내용, 위의 빨간 박스는 document.getElementById(”myBtn”); 와 같은 말이다. 제이쿼리를 사용하면 코드를 훨씬 간단하게 쓸 수 있다.
<button id="myBtn">Click me</button>
<script>
const myBtn = document.getElementById("myBtn");
myBtn.addEventListener("click", function() {
alert("Hello World!");
});
</script>그러니 이제부터 document.getElementById(”myBtn”); 쓰지 말자^^
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="myBtn">Click me</button>
<script>
$("#myBtn").on("click", function () {
alert("Hello World!");
});
</script>
</body>document.querySelector(); (제이쿼리는 아님)
document.querySelector(”#myBtn”); 를 사용해보자.
button 은 onclick 이라는 속성을 갖고 있어서 <button onclick=””> 도 사용 가능하다.
(이 메서드는 제이쿼리와 유사한 기능을 제공하지만, 바닐라 자바스크립트의 일부분이라서 아래의 제이쿼리 라이브러리 src 없이도 실행됨!)
document.querySelector(”h1”); 하면 <h1> 이라는 태그를 찾고,
document.querySelector(”#myBtn”); 하면 id=”myBtn”인 태그를 찾는다.
더 이쁜 쿼리셀렉터, 이제부터 이걸 사용해보겠다.
DOM 숨기기
이제 DOM 숨기기 기능을 알아보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
/*클래스 box*/
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>숨기기</h1>
<button onclick="hideDisplay()">display로 숨기기</button> <!-- button 은 onclick 이라는 속성을 갖고있음 -->
<button onclick="hideVisible()">visible로 숨기기</button>
<div class="box">
<div class="box" id="innerBox1">
내부박스1
</div>
<div class="box" id="innerBox2">
내부박스2
</div>
</div>
<script>
function hideDisplay() {
let el = document.querySelector("#innerBox1");
el.style.display = "none"; /*display=none 이면 영역도 없애버림*/
}
function hideVisible() {
let el = document.querySelector("#innerBox2");
el.style.visibility = "hidden"; /*visibility 로 숨기면 영역을 남겨놓고 날아감*/
}
</script>
</body>
</html>실행 했을 때의 화면
F12 를 열어서 해당 영역을 같이 보자.
display로 숨기기 를 눌렀을 때,
style 속성을 display = “none” 으로 설정해두니, 영역도 사라진다.
function hideDisplay() {
let el = document.querySelector("#innerBox1");
el.style.display = "none"; /*display=none 이면 영역도 없애버림*/
}
visible 로 숨기기 를 눌렀을 때,
영역은 존재하는데 hidden 으로 숨겨진다.
function hideVisible() {
let el = document.querySelector("#innerBox2");
el.style.visibility = "hidden"; /*visibility 로 숨기면 영역을 남겨놓고 날아감*/
}
제이쿼리 사용 할 때 참고링크
W3Schools.com → JQUERY 메뉴
여기서 제이쿼리 기능들을 보고, 연습해 볼 수 있다! 참고할 것.
제이쿼리 기능
위에서 배운 style 에 적용한 것들은 화면에는 없지만 코드에는 남아있는 것을 확인 할 수 있다.
제이쿼리 사용법 → 선택자를 찾아서 기능만 넣어주면 끝
hide() 기능과 remove() 기능을 사용해보자.
<script>
function hideDisplay() {
$("#innerBox1").hide(); // display = none
}
function hideVisible() {
$("#innerBox2").remove(); // dom 을 삭제해준다.
}
</script>
hide() 는 style=”display: none” 으로 화면에서 사라지고 코드는 남아있지만,
remove() 는 코드까지 완전히 삭제되는 것을 알 수 있다. → style 을 주는 게 아니라 dom 자체를 삭제해준다.
Share article
![[자바스크립트] DOM 추가하기 (5)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-31T09%3A24%3A48.422Z-33f3bb66-905c-4725-b521-412d697e2331&w=750&q=75)
![[자바스크립트] DOM 나타내기 (4)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-31T07%3A16%3A00.665Z-02f39e68-5295-46c2-aba9-6834b8b49f39&w=750&q=75)
![[자바스크립트] 이벤트 Event (2)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-29T15%3A22%3A55.889Z-b9f59d6a-7aed-4740-b6dd-fab6bd83ee64&w=750&q=75)
![[자바스크립트] 기본 문법 (1)](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2024-08-29T15%3A01%3A23.549Z-ad4c35fe-94df-426c-9c7c-6b02f6eaacfc&w=750&q=75)