전체보기

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 중 하나가 첫째 줄에 주어진다.  출력입력으로 주어진 글자의 아스키 코드 값을 출력한다.  입출력 예inputoutputA65z122   내가 작성한 답안const fs = require('fs');const input = fs.readFileSync('/dev/stdin').toString().trim();console.log(input.charCodeAt());  아스키코드란?아스키(ASCII)란 미국 국립 표준 협회에서 표준화한 정보 교환용 7비트 부호 체계로, 영문 알파벳을 사용하는 대표적인 문자 인코딩이다. 문자 인코딩은 사용자..

Etc.

[ESLint] Unable to resolve path to module

오류 발생 경로React + TypeScript 프로젝트에 eslint, prettier를 적용하던 중 src 하위에 파일 경로가 제대로 있음에도 다음과 같은 에러가 발생했다.   오류 내역Unable to resolve path to module   오류 원인 및 해결 방법  "settings": { "import/resolver": { "node": { "extensions": [".js", ".jsx", ".ts", ".tsx"] } } } .eslintrc.js 파일에 위와 같은 구문을 추가한다.   이후 .eslintrc.js 파일을 저장해보면 이전과 같은 파일임에도 불구하고 에러가 나지 않는 ..

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으로 세팅해 주었다.    당장 필요하지 않은 ..

Etc.

[GitHub] 협업을 위한 Organization 만들기

깃허브에서는 팀 작업용 조직 계정을 사용해 협업을 진행할 수 있다. 개인 계정으로 조직 계정에 참여해 공유 프로젝트에 대해 공동 작업을 할 수 있는데, 바로 Organization이다.   Organization 생성하기 GitHub 상단 네비바의 + 버튼을 누르면 New 관련 메뉴들이 나오는데, 그중 New organization을 클릭한다.    학업용 프로젝트를 위한 organization이므로 무료인 Create a free organization을 클릭한다.    Organization account name에는 해당 조직 계정의 이름, Contact email에는 조직 계정과 관련해 컨택할 수 있는 이메일을 입력한다. 비즈니스용 조직 계정이라면 A business tor institution,..

Front-End/Algorithm

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

문제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..

Front-End/Algorithm

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

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

Front-End/Algorithm

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

문제아무 원소도 들어있지 않은 빈 배열 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)); ..

Front-End/Web

[Browser] Web Storage(Local Storage, Session Storage) 알아보기

Web Storage란?HTML5에서 제공되는 웹 스토리지는 클라이언트의 로컬에 키(key)와 값(value)의 형태로 데이터를 저장하는 API이다.    Cookie와의 차이점 및 특징웹 스토리지가 나오기 이전에는 응용프로그램이 데이터를 서버에 요청할 때마다 매번 쿠키에 그 정보를 저장해야 했다.쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 데이터가 서버로 전송되지 않는다.이러한 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있는데, 제한 용량은 5MB 이상이나 브라우저에 따라 다를 수 있다.서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 모두 JavaScript 내에서 수행된다.키(key)와 값(value)은 반드시 문자열이어야 한다. 숫자나 객체 등 다..

Diary/Retrospective

[항해99 수료 회고] 🚢 99일간의 항해를 마무리하며

비전공자의 개발 입문 이유"남들은 러닝화 신고 레이스를 달리는데 나는 그 트랙에 맨발로 서있는 기분이야."재작년 커리어 전환을 준비할 때 친구에게 털어놓았던 고민이다. 준비하던 유학이 코로나로 인해 무산되며 이제 어떻게 해야 하나 많이 힘들었지만, 가만히 있을 수만은 없어 무엇을 하면서 살건지 정말 치열하게 고민했다. 그중 가장 큰 도움이 됐던 '내게 맞는 일을 하고 싶어'라는 책을 읽으며 아래와 같이 직업 선택을 위한 체크 리스트를 정리했다.  ✅ 단순 작업이 반복되는 직무는 나와 맞지 않는다.✅ 어려워도 꾸준히 성장할 수 있는 업무가 더 좋다.✅ 일반 사무직으로는 성취감을 느끼기 어려웠다.✅ 내가 하는 일이 직접적으로 나의 스펙 또는 성과가 되길 원한다.✅ 자기 주도적으로 일할 수 있었으면 좋겠다.✅..