nomadcoder

[JS]2021-1107 localStorage - If 문으로 정보 저장 여부 확인

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다. if 문으로 localStorage 정보 저장 여부 확인하기 브라우저에 정보 저장 여부로 표시되는 화면의 내용이 달라지게끔 만들고자 한다. 로그인 정보가 있다면, 로그인 화면 없이 바로 인삿말이 뜨도록, if 문을 활용해 만들 수 있다. const savedUsername = localStorage.getItem(USERNAME_KEY); //로컬 스토리지에 담긴 username을 변수로 선언한다. if(savedUsername === null) { //만약 로컬 스토리지에 담긴 username이 null값, 즉 없다면 loginForm.classList.remove(HIDDEN_CLASSNAME); //form의 hidden상..

[JS]2021-1107 localStorage - CSS,HTML 조작

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다. JavaScript로 CSS 조작하기 - classList 활용 Log in 사용자가 이름을 입력하고 버튼을 클릭해 submit을 하는 동시에, 로그인 폼이 사라지고 인사말이 뜨도록 해야 한다. form과 h1 모두 hidden이라는 클래스를 주고, 아래와 같이 css를 작성해 주었다. .hidden { display: none; } classList를 사용해 html의 class를 추가, 삭제, 변경할 수 있다. 반복해서 사용되는 string의 경우, 철자 오류 방지를 위해 변수로 선언해주는 것이 바람직하다. const HIDDEN_CLASSNAME ="hidden"; function onLoginSubmit(event) { ..

[JS]2021-1107 localStorage로 사용자 정보 저장

nomadcoders VanilaJS #4.3~7 강의를 정리한 내용입니다. localStorage 브라우저 상에 데이터를 저장할 수 있는 웹 스토리지 api로, key와 이에 대응하는 value를 가진다. localStorage는 key에 대응하는 value값 찾기 혹은 삭제하기 등 여러 method가 있는데, 예를 들어 localStorage.getItem("key"); 이런 식으로 사용하면, "key"라는 key값에 대응하는 value를 return 해주며, key와 value는 항상 string이다. 만약 해당하는 데이터가 없다면 null 값을 반환받는다. 참고로 Web Storage에는 localStorage와 sessionStorage 두 가지가 있다. localStorage는 웹페이지의 세션..

[JS]2021-1104 form태그, event.preventDefault()

nomadcoders VanilaJS #4.1~2. form 태그를 쓰는 이유 html태그로, 사용자로 부터 정보를 받아올 수 있는 다양한 기능을 제공한다. 로그인, 회원가입 등 사용자가 입력한 정보를 서버로 전달할 필요가 있을 때 사용! (로그인 기능 만들 때 왜 div 안에 넣지 말고 form에 input을 써야하는지 잘 몰랐었는데, 오늘 알게됨.) Log in 위와 같이 input 태그를 통해 간단한 유효성 검사를 할 수 있다. input 태그를 사용하지 않고, 이를 자바스크립트로 작성하면 아래와 같다. function onLoginSubmit() { const username = loginInput.value; if (username === "") { alert("Please write your ..

[JS]2021-1016 (노마드코더 VanilaJS #2.9~2.16)

[Object, Function 복습] const calculator = { add: function (a,b) { console.log(a+b); }, minus: function(a,b) { console.log(a-b); }, divide: function(a,b) { console.log(a/b); }, powerOf: function(a,b) { console.log(a**b); } } calculator.add(10,5); calculator.minus(10,5); calculator.divide(10,5); calculator.powerOf(10,5); [Return] return을 사용하는 이유 : 함수의 결과 값을 반환시켜 활용도를 높일 수 있다. const calculator = { a..