주간 회고 :: 코드잇 스프린트 3기 4주차 (회고 시작 계기)

어리바리 개발곤듀 밍밍이 🎀·2023년 12월 20일

주간회고

목록 보기

1/13

🎀 주간 회고 시작 계기

최근 "힘들어하는 주니어들을 위하여"라는 회고글을 읽게되었다.
나는 필자(BO님)의 회사 환경과 굉장히 비슷한 상황에 놓여져 있었던 것 같다.
과거 한 중소기업에 취업하여 퍼블리셔로 근무하게 되었다.
하지만 내가 생각하는 직무와 환경에 큰 괴리감을 느끼게 되었고, 자괴감과 실망감 역시 같이 느끼게 되었다.
그렇게 보낸 약 1년 8개월여의 시간은 참 끔찍했다. 🥲

그런데 저 회고 글을 읽고, 오히려 당시 회사를 대하는 내 모습을 돌아보고, 반성하는 시간을 가질 수 있게 되었다. (드디어..!)

모든 설득에는 근거가 필요하다.
"이상적인 개발환경" 이라는 환상을 쫓지 말자.
"이상적이지 않다"는 것은 "바꿀 수 있는게 많다"라는 뜻이다.

누군가에게는 그저 회고 '글'일 수 있겠지만
나에게는 엄청난 감동을 주는 글이었다. ㅎㅎㅎ 👏🏼

앞으로는 (이미 4주차가 지나가는 시점이지만) 주차마다 회고 글을 남겨볼까 한다! 🔥
참고로 나는 BO님처럼 대단하게 남길 회고는 없다.
하지만 스스로 배웠던 것, 부족했던 것들을 체크하며 되돌아볼 수 있다는 점에서 도전해 보지 않을 이유가 없는 것 같다!

👉🏻 참고했던 회고 탬플릿 5F

🎀 주간 목표 달성 확인

✅ 프로그래머스 Lv.0 문제 풀면서 블로그 포스팅 하기
✅ 4 주차 "JavaScript 중급" 강의 완료하기
✅ 옵셔널 체이닝 관련 블로그 포스팅
✅ 스크롤 이벤트 관련 블로그 포스팅
✅ ECMAScript 관련 블로그 포스팅
✅ var, let, const 관련 블로그 포스팅
✅ 브라우저 랜더링 관련 블로그 포스팅
✅ 이벤트 버블링/캡쳐링 관련 블로그 포스팅
✅ CSS will-change 관련 블로그 포스팅
✅ 로그인 / 회원가입 유효성 검사 로직 구현하기 (4주차 코드잇 위클리 미션)
✅ 4주차 미션 코드 리뷰를 통한 리펙토링

🎀 피드백

🧷 정확하게 공부하자

누군가 나에게 이벤트 버블링을 설명해 보라고 한다면, 나는 분명 버벅거릴 것이다.
머리로는 당연히 알고 있고, 사용하는 법도 숙지하고 있지만 설명을 못하는게 나의 단점이다.

앞으로는 블로그를 쓰기만 하는게 아니라 썼던 글들을 여러번 반복해서 읽으며 요약도 해보고 설명하는 것처럼 말해보는 연습을 해서 고쳐나가야겠다.

🧷 변수명 규칙 정하기

const emailInputEl = document.querySelector("#email");
const pwInputEl = document.querySelector("#password");

El은 Element를 줄인 말이고, pw는 password를 줄인 말이다.
하지만 사실, 줄이지 않고 그대로 단어를 사용해 주는 것이 명시적인 것 같다.

// 수정
const emailInputElement = document.querySelector("#email");
const passwordInputElement = document.querySelector("#password");

🧷 순수 함수 사용하기 (함수 지향)

자바스크립트를 잘 모를때까지는, 무조건 하나의 함수에 여러 기능을 넣어서 함수 갯수를 줄이는 것이 멋있는 코드인 줄 알았다.
하지만 최대한 각 기능들을 순수 함수로 다 꺼내주는 것이 가독성이나 유지보수 측면에서 매우 용이하다는 것을 알게되었다.

// email/password 정규식 확인
function checkEmailRegex(targetValue) {
    const emailRegex =
        /^(([^<>()\[\].,;:\s@"]+(\.[^<>()\[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
    return emailRegex.test(targetValue);
}

function checkPasswordRegex(targetValue) {
    const passwordRegex = /^(?=.*[a-zA-Z])(?=.*[0-9]).{8,25}$/;
    return passwordRegex.test(targetValue);
}

// email "test@codeit.com" 존재하는지 체크
function checkEmailExist(targetValue) {
    return targetValue === "test@codeit.com" ? true : false;
}

// password "codeit101" 존재하는지 체크
function checkPasswordExist(targetValue) {
    return targetValue === "codeit101" ? true : false;
}

위 코드와 같이 공통 함수를 만들어주고,
export와 Import를 활용하여 재사용해 주었다.

🧷 Early Return 사용하기

if (target.value.length <= 0) {
  // email 입력이 되어있지 않은 경우 에러 표시
  emailErrorMessage.textContent = "이메일을 입력해주세요.";
  emailValid = false;
} else if (emailRegex.test(targetValue) === false) {
  // 이메일 형식이 아닐 경우 에러 표시
  emailErrorMessage.textContent = "올바른 이메일 주소가 아닙니다.";
  emailValid = false;
} else if (
  emailInputValue === "test@codeit.com" && pwInputValue === "codeit101") {
  // 특정 이메일과 비밀번호가 입력되면 emailValid ture 반환한다.
  emailValid = true;
} else {
  emailValid = true;
}

if와 else if 가 난무했던 첫번째 코드,,,

const handleEmailFocusOut = (e) => {
    const emailValue = e.target.value;

    try {
        if (!checkEmailLength(emailValue)) {
            throw new Error("이메일을 입력해주세요.");
        }
        if (!checkEmailRegex(emailValue)) {
            throw new Error("올바른 이메일 주소가 아닙니다.");
        }
        if (checkEmailExist(emailValue)) {
            throw new Error("이미 사용중인 이메일 주소입니다.");
        }
        hideErrorMessage(emailInputElement, emailErrorMessageContainer);
    } catch (error) {
        showErrorMessage(
            emailInputElement,
            emailErrorMessageContainer,
            error.message
        );
    }
};