패스트캠퍼스 환급챌린지 47일차 : 김민태의 프론트엔드 아카데미 : 제 1강 JavaScript & TypeScript Essential 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.
https://fastcampus.info/4n8ztzq

250816(토) 47일차

프로세싱 - 형태의 변환 - 문자열을 형태가 다른 문자열로 변환하기

 

목표 – 공백 구분 문자열 → camelCase 변환
camelCase 규칙
첫 단어: 모두 소문자
이후 단어: 첫 글자만 대문자, 나머지는 소문자

 

convertCamelName – 반복문 기반 구현

function convertCamelName(name) {
  let camelName = '';
  let newSpace = false;

  for (let i = 0; i < name.length; i++) {
    if (name[i] === ' ') {
      newSpace = true;
      continue;
    }
    if (newSpace) {
      camelName += name[i].toUpperCase();
      newSpace = false;
    } else {
      camelName += name[i].toLowerCase();
    }
  }
  return camelName;
}

console.log(convertCamelName('KIM MIN TAE')); // kimMinTae

특징: 인덱스 기반 문자 접근, 상태 변수(newSpace)로 다음 글자 대문자 여부 판단
장점: 로직 흐름이 직관적이고 한 글자 단위의 세밀한 제어 가능
단점: 조건문과 변수 관리가 많아져 코드가 길어짐

 

simpleCamel – 배열 메서드 기반 구현

function simpleCamel(text, splitter = ' ') {
  return text
    .split(splitter)
    .map((word, wi) =>
      word
        .split('')
        .map((ch, ci) =>
          wi > 0 && ci === 0 ? ch.toUpperCase() : ch.toLowerCase()
        )
        .join('')
    )
    .join('');
}

console.log(simpleCamel('KIM MIN TAE')); // kimMinTae

특징: split → map → join으로 연속 변환, 중첩 map으로 단어와 글자 단위 처리
장점: 불필요한 상태 변수 없이 선언적으로 데이터 변환 가능
단점: 배열 메서드 체이닝에 익숙하지 않으면 읽기 어렵고 디버깅이 까다로울 수 있음

 

반복문 스타일은 직관적이고 디버깅이 쉬워서 초기에 작성하거나 복잡한 조건 처리가 필요할 때 적합
배열 메서드 스타일은 선언형 접근 덕분에 간결하고 재사용성 높음, 특히 데이터 변환 파이프라인 구성에 유리
같은 로직이라도 팀 문화, 코드베이스 스타일, 협업 환경에 따라 적합한 방식을 선택하는 것이 중요
두 방식을 모두 익혀야 다양한 상황에서 적응 가능

 

이번 강의는 어떤 스타일이 더 좋은가를 가르치기보다 같은 문제를 서로 다른 접근 방식으로 해결하는 사고 훈련을 제공했다
반복문 방식은 로직의 흐름을 제어하는 힘을, 

배열 메서드 방식은 데이터 변환을 선언적으로 표현하는 능력을 길러준다

두 스타일을 모두 익혀둔다면 협업 시 동료의 코드 스타일에도 유연하게 대응하고 상황에 맞는 최적의 구현을 선택할 수 있을 듯