Westagram clone
▶︎ 학습목표
- HTML태그를 이용하여 구조짜기
- CSS 기초 개념을 활용하여 원하는 디자인 짜기
- 개발자도구를 활용하기
- 자바스크립트로 기능 구현하기
Mission1 로그인 페이지 레이아웃
✓ Mission2 id,pw 입력 시 로그인 버튼 활성화
Mission3 메인페이지 레이아웃
✓ Mission4 댓글 내용 입력 후 Enter press, 혹은 게시 버튼 클릭 시 댓글 추가 기능
🛎 로그인버튼 활성화 자바스크립트 구현사항
id, pw 에 각각 한 글자 이상 써야 버튼이 활성화 되도록 해주세요.
원래 연한 파란색이었다가 -> 활성화 되면 파란색으로!
const thisIsButton = document.getElementsByClassName('button')[0];
const thisIsId = document.getElementById('id');
const thisIsPw = document.getElementById('pw');
// document 객체에 접근하여 원하는 값을 가진 요소를 변수에 할당했다.
// class는 같은이름을 가진 요소 여러개를 찾아내기 때문에 뒤에 원하는 버튼을 가져오기 위해 인덱스값을 부여했다.
function keyupFuction () {
const inputId = thisIsId.value;
const inputPw = thisIsPw.value;
// input 창에 입력될 값들을 각각 변수에 할당했다.
if (inputId.length > 0 && inputPw.length > 0) {
// id 와 pw 둘 다 한 글자 이상이어야 한다는 조건!
thisIsButton.disabled = true;
thisIsButton.style.backgroundColor = "#0000ff";
}
// 참인 경우에, disabled 라는 속성과 backgroundColor 속성이 적용되도록 실행코드 구현
else {
thisIsButton.disabled = false;
thisIsButton.style.backgroundColor = "#c4e1fb";
}
// 거짓인 경우에, 버튼이 비활성화 되도록 실행코드 구현
}
thisIsId.addEventListener('keyup',keyupFuction)
thisIsPw.addEventListener('keyup',keyupFuction)
// 두 개의 input창이 똑같이 적용되도록 각각의 창에 event를 지정했다.🛎 댓글 추가기능 자바스크립트 구현사항
댓글 input 창에 엔터치거나 "게시" 누르면 댓글 추가되도록 createElement로 요소 생성해서, input에 입력한 값이 추가 되어야합니다.
// 댓글input창에 엔터를 치면 추가되는 이벤트 구현
const input = document.getElementsByClassName("input")[0];
const uploadButton = document.getElementsByClassName("uploadButton")[0];
const inputComment = document.getElementsByClassName("input")[0];
// 댓글 추가기능을 위해 input과 button을 변수에 할당
function addElement(e) {
const box = document.createElement('div');
box.className = 'addedMessage';
const p = document.createElement('p');
const space = document.getElementsByClassName("feedMessage")[0];
// <p>태그와 <p>태그를 담을 <div> 를 생성하고, class 이름 설정
// <div>를 놓을 위치를 할당
if (e.key === "Enter") {
p.innerHTML = inputComment.value;
// 엔터를 쳤을 때라는 조건을 걸고, <p>태그 안에 input값이 추가되도록 실행코드 구현
box.appendChild(p);
space.appendChild(box);
inputComment.value = "";
// <div> 안에 <p>태그가 자식요소로 들어가고,
// <feedmessage> 안에 <div>가 자식요소로 들어가도록 위치지정
// 마지막에 댓글창이 리셋되도록 빈 값으로 다시 설정.!
}
}
input.addEventListener('keypress',addElement);
// 버튼을 클릭시, 댓글이 추가되는 이벤트 구현
function clickEvent() {
const box = document.createElement('div');
box.className = 'addedMessage';
const p = document.createElement('p');
const space = document.getElementsByClassName("feedMessage")[0];
p.innerHTML = inputComment.value;
box.appendChild(p);
space.appendChild(box);
inputComment.value = "";
}
uploadButton.addEventListener('click',clickEvent);
// 버튼을 클릭시라는 이벤트를 추가🙋🏻♀️Today,
레이아웃을 다 짜고, 각 로직 구현마다 하루씩 걸렸다.😭
특히 로그인 구현이 더 오래 걸렸다.
DOM이라는 것부터가 처음이라 HTML에서 불러오는 것부터 하나하나 찾아보고, 한번씩 쳐보느라 시간이 더 걸렸던 것 같다.
로그인 구현에는 삼항연산자라는 조건이 있었다.
우선은 로직구현을 위해 하기와 같이 로직을 먼저 짰다.
- 아이디, 비밀번호 Input태그와 이벤트에 적용할 button 태그 가져오기
- 아이디 값, 비밀번호 값을 변수에 할당
- 각각의 값이 1개 이상씩 들어가야한다는 조건
- 조건이 참일 때, 버튼활성화와 배경색 변경
- 조건이 거짓일 때, 버튼비활성화와 기존배경색 유지
- 값을 입력했다가 지웠을 때도 버튼 비활성화
- 이벤트 적용
삼항연산자에 집중하기 보다 구현하려는 로직이 적용되는 것을 확인 하기 위해 if문을 사용했다.
이 문제에서 막혔던 것은,
- 아이디와 비밀번호 둘 다 입력이 되어야 하는 조건이 비밀번호를 먼저 입력했을 경우에도 로그인 활성화되도록 할 것.
- 값을 입력했다가 지웠을 때 버튼 비활성화 할 것.
비밀번호를 먼저 입력하고, 아이디를 입력했을 경우에도 로그인 활성화
생각의 전환이 너무 어려웠다.
어떻게 둘 다 동시에 구현해내지? 이 생각에..ㅠㅠ
문제를 쪼개서 구현한다고 쪼갰는데도 각각 적용한다는 것을 생각을 못했다가 준식멘토님의 이벤트가 어디에 적용되어 있어요? 라는 힌트로 구현 해냈다.
백스페이스를 사용했을 때 비활성화 라는 말이 나에게 너무 어려웠다.
즉, 그냥 값이 없을 경우에 비활성화라는 것인데 이거 이해하는데에도 시간을 많이 투자했다😭
메인페이지 댓글추가 기능에도 동일하게 문제를 쪼갰다.
- 댓글창 가져오기
- 게시 버튼 가져오기
- 댓글창 값 가져오기
- 댓글창 값이 추가될 공간 만들기
- 댓글창 값이 어디에 추가될지 정하기
- 댓글창에서 엔터를 누르는 이벤트를 하면 추가되는 것으로 이벤트 만들기
- 게시버튼 클릭하면, 댓글이 추가되는 이벤트 만들기.
코드리뷰하면서 알아차린게 있다..
댓글창에 접근하는 변수를 두 개나 할당한 것이다.😭
inputComment 변수는 사실 document.getElementsByClassName("input")[0].value; 이었다.
이 코드구현은 막혀서 종택멘토님께 도움을 받았다.
우선 코드로직이 잘 적용되는지 확인하려고, <p>태그에 임의로 값을 내가 넣었다.
그 결과, 원하는 위치에 댓글도 추가가 잘 되었다.
그런데 댓글에 입력되는 값이 안가져와지는 것이다....😱😣
결국 도움의 손길을 향해 찾아갔다.
이유는 value 값을 변수에 할당해놓고 그 변수에 빈 값을 할당했다.
그랬기에 빈 값만 계속 불러 올 수 밖에 없던 것이었다.
정말 아쉬운 부분이었지만, 결과적으로 물어보길 잘한 것 같았다.
깨달았던 부분도 있기 때문에 머리에도 현재 잘 남아있다.
다음에 내가 다시 값을 재할당하지 않았는지 하고 체크를 하고 넘어가도록 주의하게 됐다.
아쉬운 점
로그인 구현 시, 삼항 연산자로 구현해야 한다.
다음 메인페이지 로직을 위해 if문으로 마무리 지었다.
코드구현의 방법은 많기 때문에 다양한 방법으로 시도 해 봐야겠다.
