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를 함께 사용하..
문제알파벳 소문자, 대문자, 숫자 0-9중 하나가 주어졌을 때, 주어진 글자의 아스키 코드값을 출력하는 프로그램을 작성하시오. 입력알파벳 소문자, 대문자, 숫자 0-9 중 하나가 첫째 줄에 주어진다. 출력입력으로 주어진 글자의 아스키 코드 값을 출력한다. 입출력 예inputoutputA65z122 내가 작성한 답안const fs = require('fs');const input = fs.readFileSync('/dev/stdin').toString().trim();console.log(input.charCodeAt()); 아스키코드란?아스키(ASCII)란 미국 국립 표준 협회에서 표준화한 정보 교환용 7비트 부호 체계로, 영문 알파벳을 사용하는 대표적인 문자 인코딩이다. 문자 인코딩은 사용자..
📢 본 게시글의 명령어는 윈도우를 기준으로 하고 있습니다. 1. GitHub에서 프로젝트 repo 생성하기 GitHub에서 프로젝트용 repo를 생성한다. repo 생성 시에는 README 파일 없이 생성해 주었다. repo 생성을 완료하면 README가 없는 레포가 위와 같이 만들어진다. 2. Local에서 CRA로 TS 프로젝트 만들기VSCode로 해당 프로젝트를 만들 루트 폴더에 진입하고 아래와 같이 CRA로 프로젝트를 생성한다. yarn create react-app 프로젝트명 --template typescript 예전에는 npm보다 yarn이 속도가 빨랐지만 요새는 큰 차이가 없다고 한다. 나는 고양이를 좋아하니까(💙😺💙) yarn으로 세팅해 주었다. 당장 필요하지 않은 ..
문제i팩토리얼 (i!)은 1부터 i까지 정수의 곱을 의미합니다. 예를 들어 5! = 5 * 4 * 3 * 2 * 1 = 120입니다. 정수 n이 주어질 때 다음 조건을 만족하는 가장 큰 정수 i를 return 하도록 solution 함수를 완성해 주세요.i! ≤ n 제한사항0 입출력 예nresult36288001073입출력 예 #110! = 3,628,800입니다. n이 3628800이므로 최대 팩토리얼인 10을 return 합니다. 입출력 예 #23! = 6, 4! = 24입니다. n이 7이므로, 7 이하의 최대 팩토리얼인 3을 return 합니다. 내가 작성한 답안function solution(n) { let i = 1; let mul = 1; while (i n) return..
문제아무 원소도 들어있지 않은 빈 배열 X가 있습니다. 양의 정수 배열 arr가 매개변수로 주어질 때, arr의 앞에서부터 차례대로 원소를 보면서 원소가 a라면 X의 맨 뒤에 a를 a번 추가하는 일을 반복한 뒤의 배열 X를 return 하는 solution 함수를 작성해 주세요. 제한사항1 ≤ arr의 길이 ≤ 1001 ≤ arr의 원소 ≤ 100 입출력 예arrresult[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)); ..
Web Storage란?HTML5에서 제공되는 웹 스토리지는 클라이언트의 로컬에 키(key)와 값(value)의 형태로 데이터를 저장하는 API이다. Cookie와의 차이점 및 특징웹 스토리지가 나오기 이전에는 응용프로그램이 데이터를 서버에 요청할 때마다 매번 쿠키에 그 정보를 저장해야 했다.쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 데이터가 서버로 전송되지 않는다.이러한 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있는데, 제한 용량은 5MB 이상이나 브라우저에 따라 다를 수 있다.서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 모두 JavaScript 내에서 수행된다.키(key)와 값(value)은 반드시 문자열이어야 한다. 숫자나 객체 등 다..
정의블록(block) 타입의 요소를 정렬하기 위해서는 다음과 같은 방법을 사용 가능margin 속성을 이용한 가운데 정렬position 속성을 이용한 좌우 정렬float 속성을 이용한 좌우 정렬 margin 속성을 이용한 가운데 정렬 margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬됨이때, 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어짐따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 함 position 속성을 이용한 좌우 정렬 절대 위치 지정 방식(absolute position)으로 위한 요소는 정상적인 레이아웃에서 벗어나 다른 ..
float 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만듦현재는 웹 페이지의 레이아웃을 작성할 때 자주 사용됨 clear float 속성이 적용된 이후 나타나는 요소들의 동작을 조절함컨테이너 요소에 float 속성이 적용되면 그 이후 등장하는 모든 요소들은 정확한 위치를 설정하기 어렵기 때문따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 허용하여 이후 등장하는 요소들이 더 이상 float에 영향을 받지 않도록 설정해야 함 clear를 설정하지 않으면 위와 같이 원하는 의도대로 배치되지 않음 overflow float 속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소가 크면, 해당 요소가 일부 밖으로 흘러넘치게 됨이때, ov..
정의요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표HTML 요소가 위치를 결정하는 방식을 설정 (요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표)요소의 위치를 결정하는 방식은 다음과 같은 4가지 방식이 있음 정적 위치(static position) HTML 요소의 위치를 결정하는 기본값top, right, bottom, left 속성값에 영향을 받지 않음단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식정적 위치 지정 방식을 제외한 나머지 다른 방식(relative, fixed, absolute)들은 전부 어떤 기준에 대해 해당 요소의 상대적인 위치를 설정하는 방식임 상대 위치(relative position) HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식 고정 위..
