React 부트캠프 TIL 12

정다롱·2024년 8월 9일

내일배움캠프 TIL

목록 보기
11/39

🖥️ 프로그래머스 입문 문제 - 핸드폰 번호 가리기

접근 방식

  • 전화번호 끝에서부터 4자리를 추출한다
  • 추출한 4자리 앞으로 전화번호 길이 만큼의 * 을 추가한다

작성 코드

function solution(phone_number) {
  return phone_number
      .slice(-4)
      .padStart(phone_number.length, '*');
}
  • slice 메소드는 (시작점, 끝점) 으로 입력한다. 만약 12345.slice(2,3) 이면 2번 인덱스의 3부터 3번인덱스 4까지만 추출하여 34 를 반환한다. 음수로 입력하면 -1을 기준으로 끝부터 추출한다.
  • ex) phone_number = 01012345678 일때 slice(-4)는 끝에서 4자리 5678을 반환해준다.
  • padStart 메소드는 (길이, 들어갈 문자) 로 입력한다. 시작점부터 입력한 길이가 될 때까지 들어갈 문자를 채워준다.
  • ex) hi = "안녕하세요" 일때 hi.padStart(8, "하세요")는 "안녕하세요하세요" 로 반환된다.

그래서 slice 로 먼저 전화번호 뒤 4자리를 추출하고 그 앞으로 원래 전화번호 길이가 될 때까지 * 를 추가해주었다.




드디어 리액트를 시작했다.

어제부로 리액트 강의를 지급받고 수강하기 시작했는데 어제는 개인 일정이 있어서 자바스크립트 주요 문법, 개념 복습 회차만 듣고 오늘! 리액트를 처음 시작했다.

yarn? npm? SPA? MPA?

당연한 말이지만 아는 것 보다 모르는 게 더 많아서 자바스크립트를 배웠어도 어려운 건 마찬가지다.


SPA / MPA

  • SPA : Single Page Application의 약자
    - 하나의 페이지로 이루어져 있는 애플리케이션을 뜻한다.

  • MPA : Multi Page Application의 약자
    - 2개 이상의 html(page)로 구성된 애플리케이션을 뜻한다.

MPA의 경우 요청시 페이지가 깜빡거린다거나, 렌더링 속도가 느리다거나 하는 등의 불편함이 있는데 SPA는 이런 불편함을 최소화하기 위해 등장했다.

하 근데 사실... 자료를 보면서 강의로 설명도 들었지만 아직 개념적으로 완벽하게 이해하지는 못했다. MPA, SPA가 무엇인지는 알겠지만 구체적으로 어떻게 작동되는지, CSR, SSR 와 같은 용어들이 어렵게 느껴지는 것 같다.

yarn / npm

  • 둘 다 앱스토어, 플레이스토어 처럼 개발자들이 만들어 올려놓은 다양한 패키지 프로그램들을 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자이다.
  • npm은 node.js를 설치할 때 자동으로 함께 설치되고, yarn의 경우 npm과 호환성도 좋고 더 빠르다는 장점이 있다

사실 아직 .. 과제도 시작 안 했고.. 실습이라곤 리액트 프로젝트 생성하구 jxs 구조, props 등 아직 이해하고 있는 단계라 다 이해하고 나만의 정보로 정리해서 작성하기엔 어려움이 있는 것 같다.

0개의 댓글