취준생

2024-10-01 수정문제 설명https://school.programmers.co.kr/learn/courses/30/lessons/92341 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr 문제 풀이 방법 구현 문제이며, 입력으로 주어지는 각 차량의 출입 기록을 split 메서드를 이용해 잘 분리하면 데이터의 정리는 끝났다고 볼 수 있다. 이 문제에서 가장 중요한 로직은 시간 계산 로직이다. 이 문제에서는 분 단위로 계산하기 때문에 24간을 나타내는 1440분에서 1분 뺀 1439분을 잘 이용해야 한다. 1439 - (각 차량의 출입에서의 시간)을 이용해..

문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 사항 phone_number는 길이 4 이상, 20이하인 문자열입니다. 문제 풀이 방법 우선 repeat 메서드를 이용해 * 문자를 주어진 phone_number의 마지막 뒤 4자리만 뺀 길이만큼 반복해준다. 그리고 slice 메서드를 이용해 phone_number의 마지막 4자리를 더해준다.(slice(-4) 이런 방법으로) 내가 작성한 코드 const solution = (phone_number) => { retu..

저번 시간에 Portal을 이용해 모달을 구현하려 했지만 상단 header바에 사용하기 적합하지 않다는 팀원의 의견을 반영해서 독립된 컴포넌트를 만들어 적용하기로 했다. 우선 헤더에 사용할 모달 컴포넌트의 코드를 보자 import { ReactComponent as HomeSVG } from 'assets/svg/home.svg'; import { ReactComponent as SettingSVG } from 'assets/svg/setting.svg'; import { ReactComponent as LogoutSVG } from 'assets/svg/logout.svg'; import { Link } from 'react-router-dom'; interface UserInfo { accountMo..

모달을 처음 만들어 보기도 하고 타입스크립트도 처음 다루어서 정말 어려웠다.... 오늘 완성은 하지 못했지만 React의 Portal이라는 기능을 이용해 fullPage 모달에 사용할 모달을 만들었다. React Portal이란? 부모 컴포넌트의 DOM 계층 구조의 밖에 있는 DOM노드로 자식(children)을 렌더링하는 방법을 제공할 수 있게 해주는 친구 ReactDOM.createPortal(child, container) 위와같이 사용해주면 되는데, child에 포탈을 통해 밖으로 보낼 대상이 되는 컴포넌트, container는 포탈을 통해 child가 이동할 곳 한마디로 child를 렌더링할 DOM Element를 넣어준다는 것이다. Portal을 통해 모달을 만들려면 모달 컴포넌트가 렌더링 될..

프로젝트 진행을 위해 공부를 속성으로 마치고, 처음으로 할당된 업무... 상단 헤더 제작이였다. 우선 헤더는 Figma에서 설계한대로 제작했다. 위와 같은 모양으로 제작을 했으며 헤더가 위아래 스크롤시에도 고정되게 했다. 결과는 아래와 같다. 아이콘 이미지의 모듈화 또한 했으며 코드는 아래와 같다. import { Link } from 'react-router-dom'; import icon from 'statics/img/icon/gamalda_icon.png'; import 'styles/components/modules/icon/icon_default.scss' type Test = { link: boolean } // link Prop을 이용해서 이미지만 필요할 때와 link와 같이 사용할 때 구..

Generic 제네릭 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다. function getSize(arr: T[]): number{ return arr.length; } const arr1 = [1, 2, 3]; getSize(arr1); const arr2 = ['a', 'b', 'c']; getSize(arr2); const arr3 = [false, true, true]; getSize(arr3); const arr4 = [{}, {}, {name: "Tom"}]; getSize(arr4); interface Mobile { name: string; price: number; option: T; } // option에 제네릭을 이용할 수 있다. 혹은 객체의 모습이 정해저 있다면 다..