로그인 기능
Q. id 값과 password값 둘 다 입력했을 때, 로그인 버튼이 활성화되게 해라.
필요하다고 생각했던 기능.
- 아이디와 비밀번호 입력 칸에 무언가 입력되었나를 확인하는 기능
- 두 곳 모두 빈 칸이 아니라면 버튼 색을 달리하여 활성화시키는 기능
- 버튼을 클릭 했을 때, 다음 페이지로 넘어가는 기능
- 입력하고 조건에 충족했을 때, enter를 치면 다음 페이지로 넘어가는 기능
몰랐던 부분
- form 태그 안에 버튼은 submit(제출)을 하게 한다. 그러면 값이 입력되기 전에 새로고침이 되는데 여기서 preventDefault()기능을 사용하여 새로고침의 기능을 차단한다.
이때, button의 type속성은 button이 되면 엔터키가 사용되지 않는다.- disabled 속성 : 비활성화시키는 기능
- 삼항연산자 : 조건 ? true : false;
조건의 부분이 참이라면 true부분의 동작을, 거짓이라면 false부분의 동작을 실행한다.
때에 따라서 if문 보다 간결하게 코드를 작성할 수 있다.- location.href = "이동할 위치" : 무언가 동작했을 때, 원하는 곳으로 이동하게 할 수 있다.
댓글 구현 기능
Q. 댓글 달기 칸에 텍스트를 입력 후, 엔터 혹은 클릭 버튼을 누르면 댓글이 달리게 해라.
필요하다고 생각했던 기능.
- 댓글 달기 칸이 빈칸이 아니라면 댓글이 달리게 하는 기능
- 클릭 혹은 엔터를 쳤을 때, 댓글이 달리는 기능
- 댓글이 달릴 때, 사용자의 이름과 코멘트를 댓글 칸 맨 아래에 위치시키는 기능
몰랐던 부분
- appendChild()
first.appendChild(second);이렇게 작성하면 first안에 second의 내용이 뒤에 들어가게 된다.
그렇기 때문에 댓글을 작성하면 댓글이 지정했던 곳 뒤에 붙게 된다.
- template literal
백틱(``)안에 내용을 입력하여 변수와 내용을 함께 사용할 수 있다. 변수는 ${변수명} 혹은 ${변수.value} 변수의 값을 담아서 사용할 수 있다.- entry point
변수는 변수끼리, 함수는 함수끼리 작성하고 마지막에 Event가 일어나는 곳에서만 이벤트와 관련된 부분을 작성하여 가독성을 높히게 작성하는 방법.
가치 있는 같이