조용할 날이 없는 나의 개발자 입문기.. 그 4주차
이제 HTML과 CSS를 어느정도 사람답게 사용할줄 알게 되었다고 자부하고 있는 와중에 드디어 프론트엔드의 가장 베이스가 되는 언어인 javascript 강의 수강에 들어가게 되었다.
지금 진행중인 부트캠프를 준비하면서 pre course로 자바스크립트를 처음 접하게 되었고, 초반에는 엑셀 vba와 비슷한 느낌이라 방심하고 있던 나에게 배열과 객체에서 고난과 시련을 안기면서 기초 테스트와 코딩테스트에서는 여러번의 좌절을 안겨준 녀석...
그래도 처음 배열과 객체를 접했을 때에는 이해가 안되는 부분이 많아서 같은 내용의 강의를 여러번 돌려볼 만큼 어려웠지만, 그동안 여러 문제들을 풀어보면서 공식문서를 참고하여 공부한 결과 이제는 어떤 메커니즘으로 언어가 작동하는지 설명 가능한 수준이 된듯 하다.
그래서 무난하게 지나갈거라 생각하던 4주차 자바스크립트 초급 강의들을 수강하던 와중에 DOM 문서객체 모델이 등장했다.
사실 강의 자체는 어렵지 않았으나 4주차 과정에서 가장 크게 좌절을 맛보았던 부분은 미션 제작과정에서 였다.
이미 제작해놓은 HTML문서에 script 문서를 추가하여 로그인 페이지에 여러 동작들을 추가하는 내용이었는데,
강의에서는 간단하게 생각하고 넘어간 부분들이 사실은 하루아침에 배울만한 내용이 아니었던 것이다.
그래서 최대한 강의 내용과 구글링을 활용해서 작성해 보았지만... 처음 맛보는 DOM의 매운맛에 코드들은 전부 나사 하나가 빠져있는 듯한 내용들로 만들어졌는데 시간안에 미션도 다 제작을 못해서 미완성인 상태로 멘토님께 PR을 제출했다...
아래는 결국 팀원분들과 멘토님의 도움으로 빠진나사들을 테이프로 연결하는 느낌으로 수정해서 만든 코드 일부다.
const emailInput = document.querySelector('#email');
const passInput = document.querySelector('#pass')
const signinForm = document.querySelector('.signin');
//이메일 유효성 검사
function validateEmail(email) {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email.value);
}
//에러 메세지 함수
function errorMessage (input, message) {
//에러메세지 중복 삭제
if (input.parentElement.lastChild.className === 'errorMessage') {
input.parentElement.lastChild.remove();
}
const Error = document.createElement('p');
Error.classList.add('errorMessage');
Error.style.color = '#FF5B56';
Error.textContent = message;
input.parentElement.appendChild(Error);
//inputbox 색상 변경
if (input.parentElement.lastChild.className === 'errorMessage') {
input.style.borderColor = '#FF5B56';
}
}
//이메일 에러 메세지 출력
function emailErrorMessage (e) {
//에러메세지 - 값이 없을 경우
if (emailInput.value.trim() === '') {
errorMessage(emailInput, '이메일을 입력해주세요.');
}
//에러 메세지 - 형식에 맞지 않을 경우
else if (!validateEmail(email)) {
errorMessage(emailInput, '올바른 이메일 주소가 아닙니다.')
}
}
//비밀번호 에러 메세지 출력
function passErrorMessage (e) {
//에러메세지
if(passInput.value.trim() === '') {
errorMessage(passInput, '비밀번호를 입력해주세요.');
}
}
//로그인 시도
function submitForm (e) {
//현재페이지에서 테스트
e.preventDefault();
if (emailInput.value === 'test@codeit.com' && passInput.value === 'codeit101') {
window.location.href = "./folder";
} else {
errorMessage(emailInput, '이메일을 확인해주세요.');
errorMessage(passInput, '비밀번호를 확인해주세요.');
}
}
emailInput.addEventListener('focusout', emailErrorMessage);
passInput.addEventListener('focusout', passErrorMessage);
signinForm.addEventListener('submit', submitForm);DOM을 너무 얕게 배우고 급하게 만든 코드들이라 확실히 보기 부끄러운 수준이지만 그래도 이걸 만드느라 많은 시간과 고민을 쏟아낸걸 보면 아직 갈길이 멀은건 분명하다.
처음엔 너무 어렵게 생각해서 모든 코드들을 한번에 뭉쳐서 만드는식으로 접근하였는데, 멘토님도 내가 너무 어렵게 접근하시는것 같다고 캐치 해주셔서 일단은 하나하나 쪼개어서 구현을 해보았다.
솔직히 조금 더 간결하고 깔끔한 방식이 있을거라 생각하지만 그걸 위해서 계속 깎아나가다 보면 어느순간 배우지 못한 부분에서 헤메이다 다시 원점으로 돌아오는것 같다 아직 DOM트리도 제대로 못다루는 나에게 4차원을 들여다보는 느낌이랄까?
이런 부분들에서 몇시간을 헤메이던 날 보면서 팀원분들과 멘토님께서 한마디 해주셨는데, 혼자서 오랫동안 고민하고 찾아보는것 보다는 다른분들께 조언을 구하는게 낫다는 결론이 나왔다. 그동안 해결이 안된부분이 있으면 하루종일 혼자 고민하고 헤메었으니까...
확실히 같은 과제를 진행하는 팀원들도 내가 어느 부분에서 헤메이고 실수했는지 바로 알고 짚어주는 센스가 대단하였는데 앞으로는 소통으로 더 해보면서 문제해결을 위한 노력을 기울여야겠다.
여기서 한가지 재밋는건 팀원들 모두가 같은 주제로 진행하는 과제도 서로 다르게 제작해왔다는 점이다.
다른분들이 작성한 코드를 보면 각자 성격이 너무 다르게 묻어나와서 성격테스트하는 느낌도 들고는 한다.
팀원분들이 과제의 내용에 접근하는 방식을 보고 더 나은방법이 있다면, 그걸 내가 적용해보는것도 중요하다고 생각하게되는 부분이었다.
5주차 미션 전에는 이 어지러운 코드 내용들을 다시 다듬어보고 설계를 다시한번 고민해봐야겠다.
멘토님께 들은내용 그대로 유지보수가 쉬운코드로 아자아자!
