.png)
부트캠프에서 일주일간 공부한 HTML, Javascript , CSS를 바탕으로 드디어 첫 결과물을 내놓게 되었다! 일주일이 어떻게 지나갔는지 모를 정도로 호다닥 지난 만큼 기억해두고 싶은 내용들을 정리해 봐야겠다👻
1. LoginPage
구현 기능
-
id, password 미입력시 로그인 버튼 비활성화.
-
로그인시 id = 이메일 형식, password = 숫자 5자리 검증 (validation)
-
반응형 구현해보기
javascript 기억할 점!🧐
로그인 버튼을 활성화 시키는 기능을 할 때, 클릭/Enter키 모두 구현하느라 중복되는 코드가 많아졌다. 처음엔 if문을 두번씩 사용했으나 이 후, 리팩토링에 대해 배우게 되어 중복되는 부분을function으로 뽑아내니 가독성 측면에서도 훨씬 좋아지는 것을 느낄 수 있었다! 앞으로 코드를 작성할 때에도 이러한 부분을 유념하고 작성해야겠다.
const changeBtnColor = () => {
let idValue = userId.value;
let passValue = userPassword.value;
if (idValue && passValue) {
loginBtn.disabled = false;
loginBtn.classList.add("changeColor");
} else {
loginBtn.classList.remove("changeColor");
loginBtn.disabled = true;
}
};
const validateId = () => {
let idValue = userId.value;
if (!isEmail(idValue)) {
alert("email 형식이 맞지 않습니다!");
} else {
alert("로그인 성공");
}
};
const validatePassword = () => {
let passwordValue = userPassword.value;
if (!isPassword(passwordValue)) {
alert("password는 숫자 5자 이상, 10자 이하로 작성해야 합니다.");
}
};
const isEmail = (value) => {
let regExp =
/^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i;
return regExp.test(value);
};
const isPassword = (value) => {
let regExp = /[0-9]{5,10}$/;
return regExp.test(value);
};정규표현식을 사용해 이메일과 숫자5자리에 관한 조건을 손쉽게 구현할 수 있었다. 정규표현식은 이 후에도 유용하게 사용할 수 있을 것 같으니 꼭 기억해두자.
2. MainPage
구현 기능
-
댓글 생성, 삭제 기능
-
댓글 좋아요 기능
기억하고 싶은 코드
댓글 생성 (append)
🍺 : 클릭 할 때마다 댓글을 생성하는 부분에서 text뿐만 아니라 같이 넣어준 이미지 까지 생성해줘야 하는데 같은 level에 있는 element가 생성되지 않아 헤맸었다. 이 후, 구글링을 통해 알아보니 appendChild가 아닌 append, prepend라는 webAPI를 사용하면 내가 원하는 구조를 짤 수 있다는 것을 알 수 있었다.
divTag.appendChild(userInfoTag);
divTag.appendChild(optionIcons);
optionIcons.append(heart);
optionIcons.append(redHeart);
optionIcons.append(trash);
userInfoTag.prepend(spanTag);
userInfoTag.append(pTag);append는 해당 코드를 선택자 통해 호출한 element 뒤에!!prepend는 해당 코드를 선택자 통해 호출한 element 앞에!!
댓글 삭제
🍺 : 역시 동적으로 생성한 element에 대한 제어가 서툴러 한참 해멨었다...
해결 방법은 동적으로 생성할 당시 바로 eventListener를 걸어주는 것이다.
같이 배우는 동기들에게 물어보고 함께 고민해보니 내가 생각치 못한 insight들을 얻을 수 있는 것 같다! 다음 프로젝트 부터는 좀 더 적극적으로 함께 해서 댓글이 삭제될 때 느꼇던 짜릿함을 더 많이 맛보고 싶다!!🤓🤓
주의 사항
-
처음엔 댓글의 텍스트 부분만 생각하여 input태그의 부모의 부모태그를 찾아 댓글을 삭제했다.
Node.parentNode.parentNode(기능 구현에만 너무 치우쳐 다른 생각을 하지 못한것 같아 부끄럽...😭) -
하지만 이같은 방법을 사용할 경우, 이후의 코드 유지보수나 변경점에 상당히 취약하기 때문에 가급적 다른 방법을 생각하는 것이 좋다!
리팩토링의 중요성
내 목표는 내가한 코드를 한 번 하고 치워버리는 것이 아니다!! 성능적으로든 가독성 측면에서든 효율적이고 확장성 있는 코드, 유지보수가 용이한 코드를 작성할 줄 아는 개발자가 되는 것이 목표이기 때문에 리팩토링도 상당히 중요한 개발자의 덕목이라는 생각이 들었다. 아래는 기본적으로 지켜주면 좋은 convention(?) 들을 정리한 것이다.
-
id,class명 : 직관적, 알아볼 수 있게! -
시멘틱 태그 :
div남발하지말고 시멘틱태그를 활용해 좀 더 가독성 + SEO의 측면을 생각해주자. -
CSS 순서 : css도 순서를 뒤죽박죽 넣어주기 보다는 아래와 같은 기준을 적용해 나열해 주자
- Layout Properties (position, float, clear, display)
- Box Model Properties (width, height, margin, padding)
- Visual Properties (color, background, border, box-shadow)
- Typography Properties (font-size, font-family, text-align, text-transform)
- Misc Properties (cursor, overflow, z-index)
프로젝트를 마무리하며..
정신없이 프로젝트를 마무리하고 이후에 동기분들의 코드를 보니, 내가 생각치 못한 부분들이 많이 보였다. 댓글 추가 부분을 li태그로 한번에 넣어준다던지, 함수를 더 잘게 잘게 쪼개 기능상의 구분을 명확하게 해준다던지 (ex - login 글자수 제한과 validation 부분을 분리시켜 함수화 ) 등등... 다음 react 세션에 들어가면서는 코드를 좀 더 깔끔하게 짜보고 싶다!!!!! 🍊
아직 프로젝트라 하기에도 민망한 결과물이지만 내손으로 직접 만들어보며 javascript, HTML, CSS와 좀 더 친해진 계기가 된 것 같다. 다음에는 이 결과물을 react로 바꿔보는 포스팅으로오~~ 😀
