카테고리 없음

Node.js 활용-2

silverage 2023. 8. 19. 18:29

과제

일단 과제는 2개였다!
한 섹션(챕터)가 끝나면 과제가 주어지는데, 해당 섹션에서 진행했던 내용에 약간 난이도가 추가되어 찾아보고 고민해보는 과제들이었다.

1번 과제

주민번호를 입력받은 후, 입력 값의 유효성 검사 후 맨 앞 부분을 제외한 주민번호 뒷자리는 * 표시로 바꾸는 것.

// 주민번호 만들기, quiz01.js
import { checkRRN, setFilteredRRN } from "./rrn.js"

function custoomRegistrationNumber(rrn) {
    
    const isValid = checkRRN(rrn)
    if(isValid==false) return

    const filterdRRN = setFilteredRRN(rrn)
    console.log(filterdRRN)
    
}

custoomRegistrationNumber("210510-1010101")
custoomRegistrationNumber("210510-1010101010101")
custoomRegistrationNumber("2105101010101")
// rrn.js
export function checkRRN(rrn){
    // const regex = /^\d{6}-\d{7}$/;  // 정규표현식
    const splitRRN = rrn.split("-")

    if(splitRRN.length != 2){
        console.log("에러 발생!!! 개수를 제대로 입력해 주세요!!!")
        return false
    }else if(splitRRN[0].length != 6 || splitRRN[1].length != 7){
        console.log("에러 발생!!! 형식이 올바르지 않습니다!!!")
        return false
    }
    return true
}

export function setFilteredRRN(rrn){
    return rrn.substr(0, 8) + "******"
}

일단 퍼사드 패턴을 배웠으니 최대한 사용해보려고 했다.
그래도 잘 나눈 것 같아서 만족스러움.

이때, 데이터 유효성 검사 시 생각해야 할 조건이 총 2개였는데,
코드에서도 보이다시피 에러의 종류를 다르게 출력해야 했다.

근데 나는 이때 정규표현식으로 한 번에 해결할 수 있는데 굳이? 이러면서 정규표현식에 꽂혀있었다. 정규표현식을 가지고 해결하려니 내가 작성한 코드가 난잡해보여서 정규표현식으로도 일단 해 봤다. 그래도 써져있는 조건에 맞게 작성해 보려고 했는데, 한 번 특정 방법에 꽂히니까 다른 곳으로 생각이 잘 안되어서 이 부분이 조금 힘들었다.
최대한 다양한 방법으로 풀어보는 것도 중요하다고 생각하는데, 아직까지는 내가 생각한 방법이 맞고 효율적이라고 생각하면 그쪽으로만 살짝(좀 많이?) 생각이 기울어지는데 이 부분은 꼭 개선하려고 노력해야겠다..

2번 과제

//template.js
import { checkRRN, setFilteredRRN } from '../quiz01/rrn.js';
import { checkEmail } from './email.js';
import { getWelcomeTemplateMessage } from './message.js';

function createUser({email, rrn, phone, favoriteWebsite}){

    const isEmailValid = checkEmail(email)
    const isRRNValid = checkRRN(rrn)
    if(isEmailValid==false || isRRNValid==false) return

    rrn = setFilteredRRN(rrn)

    const message = getWelcomeTemplateMessage({email, rrn, phone, favoriteWebsite})

    console.log(message)

}

const email = "aaa@aaa.com"
const rrn = "123456-1234567"
const phone = "01022223333"
const favoriteWebsite = "apple.com"

createUser({email, rrn, phone, favoriteWebsite})
// email.js
export function getWelcomeTemplateMessage({email, rrn, phone, favoriteWebsite}){

    const message =
    `
        <html>
            <body>
                <h1>코드캠프님 가입을 환영합니다!</h1>
                <hr>
                <div>이메일: ${email}</div>
                <div>주민번호: ${rrn}</div>
                <div>휴대폰 번호: ${phone}</div>
                <div>내가 좋아하는 사이트: ${favoriteWebsite}</div>
            </body>
        </html>
    `
    return message

}

과제2 문제가 2개였는데 일단 하나만 데리고 왔다. 내 마음이다.
이 과제를 하면서 이번 세션(챕터)를 완전 복습할 수 있겠다는 생각을 했다.
템플릿 리터럴도, 구조 분해 할당도 숏핸드 프로퍼티도 거의 다 쓴 것 같은데..
뭔가 특별한 것이 없었는데 은근 시간이 많이 걸렸다.
어떻게 해야 가장 깔끔하게 코드를 만들 수 있고, 가장 효율적으로 만들 수 있을까 고민을 했는데.. 괜찮은지 모르겠다. 미래의 내가 보면 더 예쁘게 코드를 만들 수 있는데 하면서 한탄할지도..

과제1에서 사용했던 주민번호 유효성 검사 및 필터링도 불러오고, 모든 것들을 다 불러온 듯 싶다.

이때 가장 생각났던 내 오류는 rrn = setFilteredRRN(rrn) 이 부분 이었다.
원래는 rrn에 덮어씌우는 것이 아니라 filteredRRN 이런 변수를 하나 더 만들어서 넣었는데, 이게 키값이랑 변수 값이 달라서 undefined로 나왔었다.
당연히 한 번에 성공할 줄 알았는데 약간은 슬펐지만, 뭐 오류난 이유 알았고 잘 수정했으니 좋은게 좋은 것이 아니겠는가?

느꼈던 점

전체적으로 강의가 정말 세세하고, 사려깊다고 느낀 강의였다.
설명도 잘 해주시고, 알기 쉽게 설명해주셔서 이해가 잘 되었다.
또한, 단순히 이런 패턴이니까, 이렇게 쓰니까 써라 이런식이 아니라 이걸 쓰게 된다면 어떤 이득이 있고, 어디서 효율적이며 왜 이걸 써야 하는지에 대해 알려줘서 더욱 도움이 되었던 것 같다.

조금 더 알아보거나 신경써야 할 부분

  • 일단 단어 정의에 대해 더 확실하게 알아야 할 필요성이 있다고 생각.
  • 퍼사드 패턴과 구조 분해 할당은 조금 신경써서 코드를 쳐야 한다고 생각.
  • 하나의 방식에 꽂혔다고 그거만 파고들지 않기. 다른 방법으로도 문제 해결해보기.

휴 오늘 스터디 정리는 여기서 끝!
뭔가 처음 써서 그런지 정신없고 아무 말이나 쓴 것 같은데 이건 차차 나아질 것이라 믿는다... 일단 기록용으로 적어놓는 거니까 꾸준히 기록하고 있다는 것 만으로 나에게 칭찬을!