TIL0503 Westagram Clone Coding Review

로그인 버튼 기능

인스타그램 로그인 부분에 버튼 이벤트를 넣었다
id 와 pw 의 value 값을 가져와서 value가 비어있으면 버튼이 활성화 되지 않도록 구현하였다 버튼 스타일이 변하는 부분은 css에 미리 클래스를 만들어 놓고 add로 추가하는 방법으로 효과를 주었다
가로는 flex로 중앙정렬하고 세로는 main height 를 100vh 로 잡아서 사용자 화면 크기에 맞게 자동으로 조절되게 잡았다

// id 와 pw 가져와서 변수에 담는다
const idInput = document.getElementById('idInput');
const pwInput = document.getElementById('pwInput');
// 이벤트를 감지할 id 와 pw input 을 감싸고 있는 element 를 가져온다
const inputContainer = document.getElementById('inputWrapper');
// 활성화될 스타일을 담은 클래스 이름을 변수에 담는다 - active 가 되면 클래스 이름 추가해서 버튼 활성화
const loginBtnColor = "btnActive";
//
function showBtn() {
// 각각의 id 와 pw input value 를 가져온다
	let idInputValue = idInput.value;
  	let psInputValue = pwInput.value;
// 활성화할 버튼을 가져온다
  	let loginBtn = document.getElementByClassName('loginBtn')[0];
// if 문 실행 만약 id, pw 중 하나라도 비어있다면 버튼 활성화 x
  	if (idInputValue !== "" && psInoutValue !== "") {
// 비어있지 않다면 버튼에 클래스 추가
    	loginBtn.classList.add(loginBtnColor);
    } else {
    	loginBtn.classList.remove(loginBtnColor);
    }
}

처음에는 pw 부분에 버튼 이벤트를 줬었다(비밀번호를 먼저 입력하는 사람이 별로 없을 거라고 생각하고) 그런데 세션에서 로그인 부분 코드리뷰 중 멘토님이 id와 pw를 감싸는 컨테이너에 주면 된다 해서 혹시 몰라 내 로그인 창에 비밀번호를 먼저 입력해 보았는데 결국 오류가 났다 오류를 확인하고 바로 컨테이너에 이벤트를 넣었다 이번에 이벤트를 줄 때 너무 단편적으로만 생각했던 것 같다 앞으로 여러가지 접근법을 생각해서 기능을 넣어야 할 것 같다

// 초반 이벤트 부분
pwInput.addEventListener("keyup", showBtn);
// 오류 확인 후 수정
// inputContainer 에 keyup 이벤트가 실행되면 showBtn 함수 실행 
inputContainer.addEventListener("keyup", showBtn);

댓글 추가 기능

댓글 부분은 미리 디폴트 댓글을 두개 정도 작성해 놓고 새로운 댓글이 밑에 추가되는 형식으로 구성해보았다 엔터를 누를때와 게시 버튼을 누를 때 댓글이 게시되도록 하였고 댓글의 value 값을 가져와 값이 비어있으면 게시 버튼이 활성화되지 않게 하였다

// 댓글 input, 댓글 게시 btn 가져오기
const comment = document.getElementById('commnetA');
const commentBtn = document.getElementById('commentBtn');
//
//makeComment 함수
function makeComment(text) {
// 댓글을 감싸는 element 생성 (div 안에 a 태그와 span 태그가 들어있는 형태)
    const createWrap = document.createElement('div');
    const createTitle = document.createElement('a');
    const createText = document.createElement('span');
// 댓글 옆에 하트 아이콘
    const heartImg = document.createElement('img');
    heartImg.src = '이미지';
// 생성된 element에 클래스 추가
// classList 
    createWrap.classList.add('userCommentBox');
    createTitle.classList.add('goUser');
    createText.classList.add('userCommentText');
    heartImg.classList.add('heartSize');
// 댓글이 들어갈 부분 가져오기
    const commnetWrap = document.getElementById('addCommentArea');
// 댓글에 내용 넣기
    createTitle.innerHTML = "User";
    createText.innerText = text;
// 댓글 컨테이너 댓글 위치에 추가
    commentWrap.appendChild(createWrap);
// 댓글 컨테이너에 유저이름, 댓글 내용, 하트 추가
    createWrap.appendChild(createTitle);
    createWrap.appendChild(createText);
    createWrap.appendChild(heartImg);
}
//
//게시 버튼 클릭했을 때 댓글 추가
commentBtn.addEventListener('click', function(){
// 댓글 내용 가져오기
	const commentValue1 = comment.value;
// 댓글이 안 비어 있으면 makeComment 함수 실행
    if (commentValue1 !== "") {
    	makeComment(commentValue1);
// 함수 실행 후 댓글 창 비우기
        comment.value = "";
    }
});

엔터를 눌렀을 때 댓글이 업로드되면서 두번째 댓글부터 자동 줄바꿈이 되서 업로드가 되는 에러가 발생했다 그리고 댓글이 올라가고 나서도 댓글 인풋 부분에 포커스가 잡혀 있었다 그부분을 해결하고자 댓글이 올라가면 포커스를 아웃 시켜주기 위해 .blur() 를 주었고 두가지 문제가 다 해결되었다

//
//엔터 눌렀을 때 댓글 추가
comment.addEventListener('keydown', function(e){
	if (e.keyCode === 13) {
// 댓글 내용 가져오기
		const commentValue1 = comment.value;
    	makeComment(commentValue1);
// 함수 실행 후 댓글 창 비우기
        comment.value = "";
// 댓글창 input 포커스 빼기
        e.target.blur();
    }
});

레이아웃 부분은 생각보다 flex를 많이 쓰게 되서 flex를 한번 더 공부하는 계기가 되었다
그리고 paddign, margin 을 주는 부분을 나누는 기준을 잘 잡아야한다는 생각이 들었다

인스타그램 클론코딩 전체적인 페이지