Front-End

Front-End/JavaScript

[JavaScript] 객체 내부에서의 getter, setter

업무를 하면서 객체 내부에서도 get, set을 쓸 수 있다는 것을 배웠다. 객체 내부에서 굳이 get, set을 사용하는지 궁금했는데, 이번 기회에 정리해보게 되었다.  객체의 getter, setterconst person = { firstName: 'Olivia', lastName: 'Kim', get fullName() { return `${this.firstName} ${this.lastName}`; }, set fullName(name) { [this.firstName, this.lastName] = name.split(' '); }};console.log(person.fullName); // Olivia Kimperson.fullNam..

Front-End/JavaScript

[JavaScript] 객체의 속성에 접근하는 점 표기법(마침표 표기법)과 대괄호 표기법 (ft. 좋은 코드)

객체의 프로퍼티에 접근하는 두 가지 방법 객체의 프로퍼티(key-value)에 접근할 수 있는 방법으로는 점 표기법(마침표 표기법)과 대괄호 표기법 두 가지 방법이 있다.  const name = { firstName: 'olivia', lastName: 'kim'} 위와 같은 name 객체에서 firstName값에 접근하려면 아래와 같이 표기할 수 있다.점 표기법: name.firstName대괄호 표기법: name['firstName']   점 표기법과 대괄호 표기법으로 프로퍼티에 접근하기  대괄호 표기법의 경우 키의 이름은 반드시 따옴표로 감싼 문자열이어야 한다. 키의 이름을 따옴표로 감싸지 않으면 ReferenceError가 발생한다.   프로퍼티의 키가 숫자인 경우  다만, 프로퍼티 키가 숫자일 ..

Front-End/JavaScript

[JavaScript] 특수 언어가 있는 문자열 배열을 정렬하는 방법, localeCompare()

요소가 한국어인 배열을 sort()로 정렬하기 설정한 조건에 따라 배열 안의 요소를 정렬해주는 sort() 메서드는 배열 안의 모든 요소를 '문자형'으로 변환한 후, 유니코드 단위의 값을 비교한 뒤 재정렬한다.  이때 배열 안의 요소 값이 '한국어'일 때 sort()를 사용하게 되면 설정한대로 오름차순, 내림차순으로 정렬이 이루어질까?  const kors = ['대한민국', '호주', '독일', '가나'];const nums = ['100', '1', '3', '0', '000', '99'];// 일반적인 sortconsole.log(kors.sort((a, b) => a - b)); // [ '대한민국', '호주', '독일', '가나' ]console.log(nums.sort((a, b) => a -..

Front-End/Algorithm

[프로그래머스 / JavaScript] Lv.1 완주하지 못한 선수 (ft. js의 Map 알아보기)

문제 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해 주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participant completion return ["leo", "kiki"..

Front-End/TypeScript

[React / TypeScript] 리액트 + 타입스크립트에서 ESLint + Prettier 설정하기

1. ESLint, Prettier Extension 설치 VS Code에서 ESLint, Prettier Extension을 설치한다. yarn add eslint prettier typescript --dev VSCode 터미널에서 위의 명령어를 입력해 타입스크립트 버전의 ESLint와 Prettier를 설치한다. 2. 플러그인 설치 yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev eslint에서 TS를 활용하기 위한 플러그인을 설치한 후, yarn add eslint-config-prettier eslint-plugin-prettier --dev 위의 명령어를 입력해 ESLint와 Prettier를 함께 사용하기 위..

Front-End/Algorithm

[백준 / JavaScript] 11654 아스키 코드 (ft. 자바스크립트 유니코드 변환)

문제 알파벳 소문자, 대문자, 숫자 0-9중 하나가 주어졌을 때, 주어진 글자의 아스키 코드값을 출력하는 프로그램을 작성하시오. 입력 알파벳 소문자, 대문자, 숫자 0-9 중 하나가 첫째 줄에 주어진다. 출력 입력으로 주어진 글자의 아스키 코드 값을 출력한다. 입출력 예 input output A 65 z 122 내가 작성한 답안 const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().trim(); console.log(input.charCodeAt()); 아스키코드란? 아스키(ASCII)란 미국 국립 표준 협회에서 표준화한 정보 교환용 7비트 부호 체계로, 영문 알파벳을 사용하는 대표적인 문자 인코딩이다. 문자 인..

Front-End/TypeScript

[React / TypeScript] CRA로 React + TS 프로젝트 세팅하기

📢 본 게시글의 명령어는 윈도우를 기준으로 하고 있습니다. 1. GitHub에서 프로젝트 repo 생성하기 GitHub에서 프로젝트용 repo를 생성한다. repo 생성 시에는 README 파일 없이 생성해 주었다. repo 생성을 완료하면 README가 없는 레포가 위와 같이 만들어진다. 2. Local에서 CRA로 TS 프로젝트 만들기 VSCode로 해당 프로젝트를 만들 루트 폴더에 진입하고 아래와 같이 CRA로 프로젝트를 생성한다. yarn create react-app 프로젝트명 --template typescript 예전에는 npm보다 yarn이 속도가 빨랐지만 요새는 큰 차이가 없다고 한다. 나는 고양이를 좋아하니까(💙😺💙) yarn으로 세팅해 주었다. 당장 필요하지 않은 파일들은 다 지우고,..

Front-End/Algorithm

[프로그래머스 / JavaScript] Lv.0 팩토리얼

문제 i팩토리얼 (i!)은 1부터 i까지 정수의 곱을 의미합니다. 예를 들어 5! = 5 * 4 * 3 * 2 * 1 = 120입니다. 정수 n이 주어질 때 다음 조건을 만족하는 가장 큰 정수 i를 return 하도록 solution 함수를 완성해 주세요. i! ≤ n 제한사항 0

Front-End/Algorithm

[프로그래머스 / JavaScript] Lv.1 약수의 개수와 덧셈

문제 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해 주세요. 제한사항 1 ≤ left ≤ right ≤ 1,000 입출력 예 left right result 13 17 43 24 27 52 입출력 예 #1 다음 표는 13부터 17까지의 수들의 약수를 모두 나타낸 것입니다. 수 약수 약수의 개수 13 1, 13 2 14 1, 2, 7, 14 4 15 1, 3, 5, 15 4 16 1, 2, 4, 8, 16 5 17 1, 17 2 따라서, 13 + 14 + 15 - 16 + 17 = 43을 return 해야 합니다. 입출력 예 #2..

Front-End/Algorithm

[프로그래머스 / JavaScript] Lv.0 배열의 원소만큼 추가하기

문제 아무 원소도 들어있지 않은 빈 배열 X가 있습니다. 양의 정수 배열 arr가 매개변수로 주어질 때, arr의 앞에서부터 차례대로 원소를 보면서 원소가 a라면 X의 맨 뒤에 a를 a번 추가하는 일을 반복한 뒤의 배열 X를 return 하는 solution 함수를 작성해 주세요. 제한사항 1 ≤ arr의 길이 ≤ 100 1 ≤ arr의 원소 ≤ 100 입출력 예 arr result [5, 1, 4] [5, 5, 5, 5, 5, 1, 4, 4, 4, 4] [6, 6] [6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6] [1] [1] 내가 작성한 답안 const solution = (arr) => { let X = ''; arr.map(e => X += ` ${e}`.repeat(e)); r..

Olivia Kim
'Front-End' 카테고리의 글 목록