크롭앱
3.7 CSS in Javascript part Two
CSS .active로 쉽게 색깔 바꾸기
html
<body>
<div class="hello">
<h1>Grab me!</h1>
</div>
</body>
app.js
const h1 = document.querySelector(".hello h1");
function handleTitleClick(){
h1.className = "active";
}
h1.onclick = handleTitleClick;
css
.active {
color: tomato;
}app.js 만 아래로 수정하면 빨강<->파랑 번갈아 가능(토글처럼)
function handleTitleClick(){
if(h1.className === "active"){
h1.className = "";
} else {
h1.className = "active";
}
}
- "active" string이 계속 쓰이면 에러의 위험이 있다.
일단 "clicked"로 수정 또는- const clickedClass = "clicked"로 만들어준다.
3.8 CSS in Javascript part Three
classList
sexy-font 유지한 상태로 컬러 class 추가 및 삭제하기
<body>
<div class="hello">
<h1 class="sexy-font">Grab me!</h1>
</div>
</body>
app.js
function handleTitleClick(){
const clickedClass = "clicked"
// if(h1.className === clickedClass){
if(h1.classList.contains(clickedClass)){
h1.classList.remove(clickedClass)
} else {
h1.classList.add(clickedClass)
}
}
기존
if(h1.className === clickedClass)
코드를
if(h1.classList.contains(clickedClass)
로 수정해줌으로써
기존 코드는 유지한 상태로 class 추가 및 제거 가능
toggle 사용하기
function handleTitleClick(){
h1.classList.toggle("clicked");
}
기존
if(h1.classList.contains(clickedClass)){ h1.classList.remove(clickedClass) } else { h1.classList.add(clickedClass) }toggle
h1.classList.toggle("clicked");한줄로 정리 완료
4.0 Input Values
const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const loginButton = loginForm.querySelector("button");위 코드와 아래 코드는 동일한 코드이다.
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");4.1 Form Submission
<form>
<input
required
maxlength="15"
type="text"
placeholder="What is your name?"
/>
</form>이거랑 > 대신 form으로 감싸야함
but
form으로 감싸면 클릭(로그인, submit) 할때마다
인터넷 창이 refresh(새로고침) 된다.
if(username === ""){
alert("Please Write your name");
} else if(username.length > 15){
alert("Your name is too long");
}같은 코드
form으로 submit하고, refresh도 필요한 경우
form을 사용할 때 기본적으로 submit 이벤트가 발생하면 페이지가 새로고침(refresh)됩니다. 보통 이 새로고침을 막기 위해 event.preventDefault()를 사용하는 경우가 많죠. 하지만 실제로 새로고침이 필요한 상황도 있습니다.
몇 가지 예시
1. 서버로 데이터를 전송하고 새로 고침이 필요할 때
- 예시: 전통적인 서버 기반 웹 애플리케이션에서는 폼 데이터를 서버로 보내고 나서 새로운 페이지로 이동하거나, 동일한 페이지를 다시 로드하면서 새 데이터를 반영하는 경우가 있습니다. 예를 들어, 게시판에서 글을 작성한 후 제출하면 서버로 데이터가 전송되고, 새로고침되면서 작성한 글이 목록에 표시됩니다.
- 상황: RESTful API가 아닌 고전적인 방식의 웹사이트에서 폼 제출 후 다시 페이지를 로드하는 경우.
2. 세션 유지 후 페이지 새로고침이 필요한 경우
- 예시: 사용자가 로그인 폼을 제출할 때, 서버에서 세션을 생성한 뒤 다시 새로고침이 되어야 사용자에게 로그인된 상태가 반영될 수 있습니다. 로그인 후 사용자가 특정 대시보드나 메인 페이지로 리다이렉트되는 것도 이 경우에 해당할 수 있습니다.
- 상황: 세션 기반 인증 시스템에서 로그인 후 새로운 상태를 반영하기 위한 새로고침.
3. 데이터 전송 후 결과를 새로고침을 통해 확인할 때
- 예시: 상품 구매 같은 과정에서 사용자가 결제 정보를 입력하고 폼을 제출한 후, 서버에서 처리된 결과가 반영된 새 페이지를 로드하는 경우입니다. 결제 성공 후 '감사합니다' 페이지로 리다이렉트되거나 새로고침되면서 구매내역이 반영될 수 있습니다.
- 상황: 결제 처리와 같은 중요한 작업 후 결과를 새 페이지에서 표시하거나 새로고침으로 반영할 때.
4. 파일 업로드 후 새로고침이 필요한 경우
- 예시: 파일을 업로드하는 폼에서, 파일 업로드가 완료된 후 새로고침되어 업로드된 파일 리스트가 반영되는 경우입니다. 예를 들어, 이미지 파일 업로드 후 새로고침되면서 새로운 이미지가 갤러리에 표시될 수 있습니다.
- 상황: 파일 업로드 후 업로드된 결과를 반영하기 위해 페이지가 새로고침될 때.
5. 폼 제출 후 새로고침으로 정리될 필요가 있는 경우
- 예시: 설문조사 폼을 제출하고 나서, 제출이 완료된 후 페이지가 새로고침되면서 폼이 초기화되는 경우입니다. 다시 같은 폼을 사용할 필요가 없을 때는 새로고침을 통해 폼 데이터를 정리할 수 있습니다.
- 상황: 폼 제출 후 폼 데이터를 초기화하고 다시 시작하기 위해 새로고침이 필요한 경우.
이런 상황에서는 폼 제출 후 페이지를 새로고침하면서 결과를 보여주는 방식이 자연스러울 수 있습니다.
이 외에도 form 제출 후 새로고침이 필요한 특정 요구사항은 프로젝트의 특성이나 비즈니스 로직에 따라 다를 수 있습니다.
4.4 Getting Username
greeting.innerHTML = "Hello " + username; greeting.innerHTML = `Hello ${username}`;
4.5 Saving Username
localStorage.setItem("", ); // 저장하기
localStorage.getItem("", ); // 가져오기
localStorage.removeItem("", ); // 지우기
YOLO