반응형 JS15 [JS] 로그인/회원가입 페이지 만들기 오늘은 로그인 페이지를 만들어보았어요. 로그인 페이지의 주요 기능은 1) 비밀번호의 길이에 따른 배경화면 blur 변화 2) input의 focus에 따라 애니메이션 효과 3) localStorage에 등록된 정보와 일치/불일치 회원가입 페이지의 주요 기능은 1) 이미 등록한 회원 아이디와 중복시 중복체크 확인 2) 비밀번호와 비밀번호 확인 동일 검사 3) 객체를 이용한 localStorage 저장 >>> 코딩하며 알게된 것 1) css에서 input:valid 사용시엔 html input 속성에 required가 있어야 적용됨 2) input.value로 객체 생성시엔 함수로 만들어서 실행할 것! -> 이걸로 고생했다.. 빈 객체를 계속 뽑고 있었다.. 그 이외에는 없는듯 ..? github에 코드 저.. 2020. 12. 30. [JS] To do list 제작 바닐라 자바스크립트를 이용해 혼자 to do list를 만들어보았다. localStorage를 활용해 F5시에도 list가 날아가지 않도록 짜는데 저장하는건 쉽지만 f5후 다시 거기서 가져오는 것까지 생각하니 여간 힘든 일이 아니었다... 어찌어찌 구글링하며 만들긴했는데 내가 짠 코드의 한계는 아직 수정하지 못했다... localStorage에 다른 정보가 있으면 제대로 작동하지 않는다는 점... 니콜라스쌤 강의에서는 JSON 메서드를 사용해서 거기에 걸리지않는 것같던데, 그걸 사용하지 않아서인지, 접근 방법이 좋지 못해서인지 여튼 아무리 생각해도 돌파구가 생각나지 않아 이대로 포스팅... 아쉽다... html 00:00:00 추가 css body{ background-color: #35adb1; } h.. 2020. 11. 12. [JS] var, let, const 차이점 * var - 각기 다른 변수로 중복 선언해도 error가 뜨지 않는다. - 간단한 코드에서는 유용하게 쓰일 수 있으나 코드가 길어지면 변수 값이 바뀔 우려가 있어 지양하는게 좋다. ES6 이후 이런 것들을 보완하기 위해 나온 선언방식이 let 과 const 다. * let 과 const의 공통점 - 변수 재선언이 불가 (error 뜸) :var의 단점을 보완함 * let 과 const의 차이점 - let : 변수 재할당 가능 이것을 이해하기 위해서는 변수 생성 과정을 알아야한다. 변수 생성 과정 : 선언 -> 초기화 -> 할당 * 변수 선언 - 정보를 저장할 공간을 생성한다. (let a;) * 변수 초기화 - 최초로 저장 공간 안에 정보를 넣는다. (a=5;) * 변수 할당 - 저장 공간 안에 정보를.. 2020. 10. 27. [JS] 새로운 객체 만들기 (new) 코딩을 하다가 'new'에 대한 정의가 어려워 mozilla를 통해 자세히 알아보았다. 1. 객체(Object) :속성을 가질 수 있는 실제하는 모든 것. 2. 클래스(Class) :객체를 정의해 놓은 것. 그러나 객체가 클래스인 것은 아님. 3. 인스턴스(Instance) :이 것은 객체이기도 하다. 인스턴스는 객체에 포함된다. 똑같은 설계를 가진 객체들을 인스턴스라고 부른다. 같은 속성들을 가진 객체들을 여러개 뽑아내고 싶다면, 아래와 같은 함수를 만든다. ( = 생성자함수) function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } 그리고 아래와 같이 new를 붙이며 새로운 객체들의 속성을 입력.. 2020. 10. 22. 이전 1 2 3 4 다음 728x90 반응형