자신에게 친절할 것 :)

Web Developing/JS

[JS] form 만들고 저장하기 (사용자 이름 기억하게 하기)

Tashapark 2024. 3. 16. 16:32
728x90

// "Normad Coder의 초보자를 위한 바닐라 JS" 들으며, 모멘텀 클론 코딩 중//

​

기능 하나를 구현해 내는 데는 생각보다 손이 많이 간다.

코딩은 문제를 해결하는 방법을 배운다는 말이 이해가 간다.

​

연구할 때 주제를 선정하고, 해당 분석 방법을 고르고, 적용하고 해석했던 것처럼

폼을 만드는 것도

보이게 하고, 입력이 가능하게 하고, 그것을 저장하게 하고,

어떤 언어를 사용해서 어떻게 보이게 할지(인사말)도 정해야 한다.

​

확실한 것은 내가 무엇을 원하는지를 명확하게 알아야 한다는 사실이다.

<form>

이번 강의에서 처음 써 보는 태그인데 말 그대로 폼, 입력 양식을 의미한다.

로그인 창, 회원가입 폼이 해당되기에 앞으로 많이 사용할 것 같다.

​

<input>

<form>은 전체 양식으로 화면에 나타나지 않기에, 실제로 입력하려면 <input> 사용한다.

type으로 종류를 나타내고, name으로 데이터 이름, value로 기본 값을 지정한다.

​

여러 종류들이 있지만, 여기서는 쓴 것들만 정리하려고 한다.

어차피 검색하면 나오니까.

​

<input type= "">
text
일반 문자
*placeholder
입력 필드에 사용자가 적절한 값을 입력하도록 도와주는 짧은 도움말. 입력을 시작하면 사라짐.
type은 아니라 옆에 써줌. 예.< input type = "text" placeholder="홍길동">
password
비밀번호 (여긴 안 나오지만 곧 쓸 듯)
button
버튼
submit
양식 제출용 버튼

​

*위 링크 참조해서 정리

<HTML>

 

<body>
    <form class="js-form-greeting form">
      <input type="text" placeholder="What is your name?" />
    </form>
    <!--클래스를 걍 하나에 넣음. 각각 js, css 용-->
    <h4 class="js-greetings greetings"></h4>
    <script src="JS/greeting.js"></script>
  </body>

 

nico는 css와 js 할당 클래스의 이름을 다르게 해서 동시에 적음. <form class="js-form-greeting form">

무조건 쪼개라고 외치는 게 신기했는데 만들고 보면 안 겹쳐서 좋음.

​

​

<CSS>

body {
  background-color: #ecf0f1;
}

body {
  color: #34495e;
}

.form,
.greetings {
  display: none;
}

.showing {
  display: block;
}

 

언제쯤 나는 이렇게 쪼개서 생각할 수 있게 될지.. (구런 날이 오겠지??ㅜㅜ)

form이랑 greetings가 각각 하나가 보이면 하나가 안 보여야 하니까, 일단 display: none;으로 가려줌..

showing으로 나타나게 하는 것 따로 뺌 display: block;

​

근데, js에서도 가능한 거라서,, 둘의 영역을 나누는 것이 헷갈림.

나는 십중팔구 저렇게 안 하고 if 절로 js로 화면 떴을 때랑 안 떴을 때로 코드 짰을 듯... 배울 게 너무 많다..

​

​

<JS>

const form = document.querySelector(".js-form-greeting"),
  input = form.querySelector("input"),
  greeting = document.querySelector(".js-greetings");

const USER_LS = "currentUser",
  SHOWING_CN = "showing";

const form = document.querySelector(".js-form"),
  input = form.querySelector("input"),
  greeting = document.querySelector(".js-greetings");

const USER_LS = "currentUser",
  SHOWING_CN = "showing";

function askForName() {
  //이름이 없으면 이름을 물어야 해서 폼이 보이게
  form.classList.add(SHOWING_CN);
  form.addEventListener("submit", handleSubmit); //input type = "submit" 양식제출용 버튼
}

function paintGreetings(text) {
  form.classList.remove(SHOWING_CN); //색칠할거면 폼을 숨겨야 함
  greeting.classList.add(SHOWING_CN);
  greeting.innerText = `Hello ${text}`;
}

function loadName() {
  const currentUser = localStorage.getItem(USER_LS);
  if (currentUser === null) {
    // there're no users
    askForName();
  } else {
    // there're users
    paintGreetings(currentUser);
  }
}

function saveName(text) {
  //user name 기억하게
  localStorage.setItem(USER_LS, text);
}
function handleSubmit(event) {
  event.preventDefault(); //디폴트가 입력하면 보내는 거라서, 엔터쳐도 남아있게 디폴트 막게 설정값 변경
  const currentValue = input.value;
  paintGreetings(currentValue);
  saveName(currentValue);
}

function init() {
  loadName();
}

init();

 

변수를 만들 때도, 쪼개서 querySelector로 불러줌. 특히, const form = document.querySelector(".js-form-greeting"),를 보면 클래스는 불러올 때 "." 꼭 찍어줄 것. 또, input이 form 내에 있기 때문에 다큐멘트가 아닌 form을 객체로 씀.

const 내에서 여러 개 만들 때는 그냥 ","로 이어주면 됨.

​

파라미터를 대문자로 만들어 주는 것 같은데.. const USER_LS = "currentUser", SHOWING_CN = "showing";

완벽히 이해하지는 못했음.

​

어쨌든 함수를 쪼개서 saveName, handleSubmit, askForName, paintGreetings, loadName init까지 각각을 만들어줘야 한다.

사실상, 알고리즘을 배우지는 않았는데..

이게 폼 입력 후 해당 이름으로 인사말 나타내는 것까지의 정석적 알고리즘(순서)를 의미하는 게 아닌가? 순서대로 쓰여있지는 않지만..

​

function saveName(text) {

localStorage.setItem(USER_LS, text);

}

이름을 입력하면 local Storage에 각각 key와 value로 나타남.

local storage는 작은 정보를 컴퓨터에 저장하는 방법으로 원래는 URL 기반임.

+ safari에서는 요소 검사 --> 저장 공간 --> 로컬 저장 공간에서 바로 보임.

+ chrome은 검사 --> application --> local storage --> file에서 확인 가능.

​

function handleSubmit(event) {

event.preventDefault();

const currentValue = input.value;

paintGreetings(currentValue);

saveName(currentValue);

}

디폴트가 입력하면 정보를 다른 곳에 보내는 거라서, 엔터 쳐도 남아있게 디폴트를 막도록 설정값 변경

또, 글자에 색을 입히는 것도 이 값을 넣기에 여기서 페인트도 넣고, 저장까지.

​

function askForName() {

form.classList.add(SHOWING_CN);

form.addEventListener("submit", handleSubmit);

}

이름이 없으면 이름을 물어야 해서 폼이 보이게 add 해줌.

input type = "submit" 양식 제출용 버튼으로 이벤트 넣어줘야 함.

안 그러면 디폴트 안 막아서 날아감.

​

function paintGreetings(text) {

form.classList.remove(SHOWING_CN);

greeting.classList.add(SHOWING_CN);

greeting.innerText = `Hello ${text}`;

}

뜨는 인사말을 색칠할 거면 폼을 숨겨야 함.

그래서 폼 없애고, 그리팅 추가.

그리팅 inner text로 "Hello `입력한 이름`"이 뜨게 바꿈.

​

function loadName() {

const currentUser = localStorage.getItem(USER_LS);

if (currentUser === null) {

askForName();

} else {

paintGreetings(currentUser);

}

}

* null = 안 배운 것을 의미.. (통계는,, 안 뜬 건데.... ㅋ.. 하 섞이는군)

LS에 등록 안 되어 있으면 이름을 묻게,

LS에 등록되어 있으면 그리팅이 보이게 함.

​

function init() {

loadName();

}

​

init();

​

nico는 처음에 활성화 펑션을 먼저 만들어 놓고 하는 편 이랬음. ㅇㅇ

그게 명확해 보이긴 함.

728x90
반응형

'Web Developing > JS' 카테고리의 다른 글

[JS] background image 변경하기  (0) 2024.03.16
[JS] to-do list 만들기  (1) 2024.03.16
[JS] 시계 만들기  (2) 2024.03.16
[JS] classList를 써서 methods를 활용, 특히 toggle  (0) 2024.03.16
[JS] JS or CSS가 웹페이지에 적용이 안 될 때  (0) 2024.03.16

'Web Developing/JS'의 다른글

  • 현재글[JS] form 만들고 저장하기 (사용자 이름 기억하게 하기)

관련글

티스토리툴바