분류 전체보기 154

[프로그래머스] 기능개발 (LV2 - JavaScript)

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한사항 작업의..

[TS] 타입 추론과 타입 단언

타입스크립트(TypeScript)는 정적 타입 시스템을 통해 코드의 안전성을 높이고, 버그를 줄이는 데 유용한 언어입니다. 그중에서도 타입 추론과 타입 단언은 TypeScript의 강력한 기능입니다. 목차 1. 타입 추론 (Type Inference) 2. 타입 단언 (Type Assertion) 3. 타입 추론과 단언의 차이 4. 타입 추론과 단언 혼합 사용추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. 타입 추론  (Type Inference)타입 추론은 변수나 함수의 타입을 명시적으로 지정하지 않아도, TypeScript가 자동으로 타입을 결정하는 기능입니다. TypeScript는 코드 작성 시에 데이터의 초기 값을 기반으로 타입을 추론해 변수의 타입을 설정합니다. 이 기능 덕분에..

[React & TS] Kakao 지도 API 추가

1. 애플리케이션 추가 및 키 발급 Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com위 주소에서 애플리케이션을 등록하고 로컬 환경을 도메인으로 추가했다.  키도 발급 완료했으니 공식 문서를 보면서, 화면에 지도를 띄워보겠습니다. 2. 지도를 그리는 JavaScript API 불러오기index.html에 직접   서버를 실행시켜 확인해 보니, 내 api key가 개발자 도구에 그대로 노출되고 있었다. 3. API Key env로 관리하기API Key를 Github이나 서버에서 개발자 도구로 확인하지 못하게 하기 위해 .env에서 환경변수로 관리하기로 했..

[프로그래머스] [1차] 캐시 (LV2 - JavaScript)

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제지도개발팀에서 근무하는 제이지는 지도에서 도시 이름을 검색하면 해당 도시와 관련된 맛집 게시물들을 데이터베이스에서 읽어 보여주는 서비스를 개발하고 있다.이 프로그램의 테스팅 업무를 담당하고 있는 어피치는 서비스를 오픈하기 전 각 로직에 대한 성능 측정을 수행하였는데, 제이지가 작성한 부분 중 데이터베이스에서 게시물을 가져오는 부분의 실행시간이 너무 오래 걸린다는 것을 알게 되었다. 어피치는 제이지에게 해당 로직을 개선하라고 닦달하기 시작하였고, 제이지는 DB 캐시를 적용하여 성능 개선을 시도하고 있지만 캐시 크기를 얼마로 해야 효율적인지 몰라 난감..

[React & TS] 프로젝트 생성, 초기 설정

1. 프로젝트 생성터미널을 이용해 프로젝트를 생성합니다.npm create vite@latest ts_project -- --template react-ts 위 명령어에서 ts_project는 프로젝트 폴더 이름입니다. 원하는 이름으로 변경할 수 있습니다.프로젝트 폴더가 생성되었다면 폴더로 이동 후 패키지를 설치합니다.cd ts_projectnpm install 설치가 완료되면, 프로젝트의 기본 구조와 주요 파일들이 자동으로 생성됩니다. 2. 프로젝트 구조Vite와 TypeScript 템플릿을 사용해 생성된 프로젝트는 기본적인 파일 구조가 설정되어 있습니다.src: 소스 코드가 포함된 폴더로, 컴포넌트와 유틸리티 파일들을 여기에 배치합니다.assets: 이미지, 아이콘, 폰트등 정적 파일을 저장하는 폴더..

[프로그래머스] 행렬의 곱셈 (LV2 - JavaScript)

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제2차원 행렬 arr1과 arr2를 입력받아, arr1에 arr2를 곱한 결과를 반환하는 함수, solution을 완성해주세요. 제한사항 행렬 arr1, arr2의 행과 열의 길이는 2 이상 100 이하입니다. 행렬 arr1, arr2의 원소는 -10 이상 20 이하인 자연수입니다. 곱할 수 있는 배열만 주어집니다.입출력 예arr1arr2return [[1, 4], [3, 2], [4, 1]] [[3, 3], [3, 3]] [[15, 15], [15, 15], [15, 15]] [[2, 3, 2], [4, 2, 4], [3, 1, 4]] [[..

[React & TS] 프로젝트 기술 스택 선정

목차 1. Vite 2. React 3. TypeScript 4. Vite + React + TypeScript 장점추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. ViteVite는 최근 많은 개발자들 사이에서 주목받고 있는 빌드 도구입니다. 기존의 Webpack을 대체하는 대안으로, 빠른 빌드 속도와 개선된 개발 환경을 제공합니다. Vite를 선택한 이유는 다음과 같습니다.빠른 개발 서버 : Vite는 코드 변경 시 전체 프로젝트를 다시 빌드하는 대신, HMR( 핫 모듈 리플레이스먼트)를 통해 변경된 부분만 빠르게 업데이트하기 때문에 개발 서버가 매우 빠릅니다. 이로 인해 개발 중에 빠른 피드백을 받을 수 있어 생산성이 크게 향상됩니다.ES 모듈 기반 : Vite는 ES 모듈을 기반으로 ..

[TS] 타입스크립트의 유용한 유틸리티 타입

타입스크립트를 사용하다 보면 여러 타입 변환이나 특정 속성만을 추출하고 싶은 상황이 자주 생깁니다. 이때 유용하게 활용할 수 있는 것이 타입스크립트가 제공하는 유틸리티 타입입니다.  목차 1. Record 타입 2. Pick 타입 3. Partial 타입 4. Omit 타입 5. Readonly 타입 6. Required 타입추천글위의 목차를 클릭하면 해당 글로 자동 이동 합니다. 1. Record 타입Record 타입은 키(key)와 값(value)의 타입을 정의하여 객체 타입을 생성할 때 사용됩니다. 특정 키에 해당하는 값 타입을 일괄적으로 설정하고 싶을 때 유용합니다.Record// Keys: 객체의 키 타입을 지정 (key의 union 타입도 가능)// Type: 객체 값의 타입을 지정type U..

[프로그래머스] 할인 행사 (LV2 - JavaScript)

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제XYZ 마트는 일정한 금액을 지불하면 10일 동안 회원 자격을 부여합니다. XYZ 마트에서는 회원을 대상으로 매일 한 가지 제품을 할인하는 행사를 합니다. 할인하는 제품은 하루에 하나씩만 구매할 수 있습니다. 알뜰한 정현이는 자신이 원하는 제품과 수량이 할인하는 날짜와 10일 연속으로 일치할 경우에 맞춰서 회원가입을 하려 합니다. 예를 들어, 정현이가 원하는 제품이 바나나 3개, 사과 2개, 쌀 2개, 돼지고기 2개, 냄비 1개이며, XYZ 마트에서 14일간 회원을 대상으로 할인하는 제품이 날짜 순서대로 치킨, 사과, 사과, 바나나, 쌀, 사과, ..

[프로그래머스] n^2 배열 자르기 (LV2 - JavaScript)

프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 1. 문제정수 n, left, right가 주어집니다. 다음 과정을 거쳐서 1차원 배열을 만들고자 합니다.n행 n열 크기의 비어있는 2차원 배열을 만듭니다.i = 1, 2, 3, ..., n에 대해서, 다음 과정을 반복합니다.1행 1열부터 i행 i열까지의 영역 내의 모든 빈 칸을 숫자 i로 채웁니다.1행, 2행, ..., n행을 잘라내어 모두 이어붙인 새로운 1차원 배열을 만듭니다.새로운 1차원 배열을 arr이라 할 때, arr[left], arr[left+1], ..., arr[right]만 남기고 나머지는 지웁니다. 정수 n, left, right가 매..