프로젝트 개발환경을 세팅하면서 가장 먼저 설정하는 것이 ESLint와 Prettier이다. 다수의 프로젝트를 진행하면서 본인 역시 ESLint와 prettier를 설정하는 경험을 했지만, 제대로 된 이해 없이 구글링으로 나오는 코드들을 복붙하여 사용하였다. 본 포스팅은 ESLint와 Prettier 를 좀 더 깊이 있게 이해하여 활용능력을 높이고 Custom하여 사용할 수 있는 방법을 익히고자 작성하였다. ESLint와 Prettier은 무엇인가? ESLint는 linter로써 문법 상의 오류를 방지하고 일관된 코드 스타일로 코드가 작성될 수 있도록 도와주며 Prettier는 formatter로써 코드 스타일을 통일하고 교정하기 위해 사용한다. 다시 말해 "ESLint는 코드 퀄리티를 보장해주는 도구이며..
출처 : 백준 온라인 저지 - 25501번: 재귀의 귀재 ✅ Solution const input = require('fs').readFileSync('dev/stdin').toString().trim().split('\n'); input.shift(); let answer = ''; // 1. 주어진 문자열이 팰린드롬인지 확인하기 위한 isPalindrome 함수 생성 function isPalindrome(str, cur, cnt) { // 1-1. 팰린드롬 여부를 확인하기 위해서는 index의 역순에 위치한 문자열과 비교해야 하므로 // 결과적으로 문자열의 절반까지만 확인을 하면 된다. => length 변수는 재귀함수를 실행될 마지막 index // 문자열이 홀수이면 중간에 숫자가 하나 비기 때문..
1. index 값을 찾기 위해 입력값 내림차순 정렬 배열 만들기 (input 배열과 별도인 arr 배열) 2. 내림차순 정렬된 배열로 index 배열 만들기 ( lineUp 배열 ) 3. 입력값 배열의 값을 index 배열의 index 값으로 바꾸기 ( arr 배열의 값을 lineUp 배열의 값과 비교한 후 그 index 값으로 교체) 4. index 로 교체된 입력값 배열 출력하기 ( index 값으로 교체된 arr 배열을 출력하기) ❌ Solution (시간초과) const input = require('fs').readFileSync('dev/stdin').toString().trim().split('\n') input.shift(); let answer = ''; //1. 좌표 배열 정렬하기 c..
클로저란? 클로저란 함수와 렉시컬 환경의 조합으로 함수가 생성될 당시의 외부 변수를 기억하고 생성된 이후에도 계속 접근이 가능한 것을 의미한다. 클로저를 이해하기 위한 사전 지식 1. 실행 컨텍스트 (Execution Context) 실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하는 객체이다. 자바스크립트 코드가 실행되면 자바스크립트 엔진은 콜스택에 전역 실행 컨텍스트를 담고, 코드를 한줄씩 읽어나가며 코드가 선언되었을때의 환경을 실행컨텍스트에 저장하게 된다. 이 과정은 생성 단계(Creation Phase) 와 실행 단계(Execution Phase) 를 거치면서 이루어지는데, 생성단계에서는 실행 컨텍스트를 생성하고 선언문 코드만 실행하여 환경 레코드(Environment Record)에 기록한..
HTTP 의 개념 설명 HTTP 의 사전적 정의는 HyperText Transfer Protocol, 즉 World Widw Web을 위한 데이터 통신의 기초이자 웹 사이트를 이용하는데 쓰는 프로토콜이다. 이를 한 단계 풀어서 설명하자면 컴퓨터 내부에서 혹은 컴퓨터 사이의 데이터 교환방식을 정하는 규칙체계가 존재하는데, 이것이 프로토콜이다. 인터넷에서 컴퓨터들이 서로 정보를 주고 받는데 쓰이는 프로토콜은 대게 OSI 7계층 모델로 설명되거나 TCP/IP 4계층 모델로 설명된다. 이 중에 애플리케이션 계층은 웹 서비스, 이메일 등 서비스를 실질적으로 이용하는 사람들에게 제공한다. HTTP 는 FTP, SSH, DNS 등과 함께 응용 프로그램이 사용되는 프로토콜 계층인 애플리케이션 계층이다. HTTP는 HT..
❌ Solution ( 14.3 / 100 ) function solution(bridge_length, weight, truck_weights) { const totalTrucks = truck_weights.length; let timer = 0; let load = 0; const onBridge = []; const complete = []; while(totalTrucks !== complete.length) { if( load + truck_weights[0] bridge_length) { const del = onBridge[onBridge.length-1]; if (del !== 0) load = load - del; complete.push(del); onBridge.pop(); } co..
1. numbers 를 가지고 만들 수 있는 조합들을 순열로 result 배열을 만든다. 2. result 배열에서 중복되는 조합과 소수가 아닌 인자들을 삭제한다. 2-1. 중복되는 조합은 Set 을 사용하여 삭제하고, 소수가 아닌 인자들은 isPrimeNumber 함수를 사용하여 삭제한다. 3. result 배열의 길이를 return 한다. 예외처리)) 0부터 시작하는 조합을 제외시켜줘야 한다. 처음에 newFixed[0] !== '0' 을 사용했으나, parseInt 를 사용하는 것이 더 깔금하고 예외 발생 가능성이 적다. 🔺 Solution ( 정확성 75 / 100 ) function solution(numbers) { var result = new Set(); function getPermuta..
출처 : 프로그래머스 - 코딩테스트 연습 - 스택/큐 - 올바른 괄호 ❌ Solution( 84.8 / 100.0, 정확성: 69.5 효율성: 15.2) 1. 문자열 s의 인자를 반복문으로 체크하는데 열린 괄호일 경우에는 +1, 닫힌 괄호일 경우에는 -1을 한다. 2. 반복문이 끝났을 때 값이 0이라면 올바른 괄호들로 이루어진 문자열이므로 true, 아닌 경우 false를 출력한다. 3. 만약 닫힌 괄호가 맨 처음 온다면 이 문자열을 올바른 괄호로 이루어질 수 없으므로 false를 출력한다. function solution(s){ let chk = 0; for(let i = 0; i < s.length; i++) { if( s[i] === '(') { chk++; } else if( s[i] === ')..
출처 : 프로그래머스 - 코딩테스트 연습 - 정렬 - H-index ❌ Solution ( 정확성 6.3 / 100 ) function solution(citations) { let answer = 0; const newArr = citations.sort((a,b) => b-a); for(let i = 0; i = standard) count++; }) if( standard >= count ) answer = standard; } return answer; } 1. h의 최댓값을 찾기 위해 논문을 인용된 횟수 순으로 ..
최근 개인적으로 진행하고 있는 사이드 프로젝트의 화면이다. gif 파일을 검색하고 공유할 수 있는 플랫폼인 giphy.com을 클론하고 있다. 스크린샷에서 알 수 있다시피 대부분의 data가 img, video 파일들이다. 현재 진행상황은 랜더링과 검색기능만 간단하게 구현된 상태이며, 추가 기능 구현에 앞서 더 나은 ui를 위해 성능최적화 작업을 진행 중에 있다. 라이트 하우스로 웹 성능을 측정해본 결과 형편없는 점수가 나왔다. 이미지 파일의 크기를 줄이기 위해 기존에 사용하던 img 태그 대신 next/image 를 사용하여 리팩토링을 진행했고, gif 파일형식 대신 webp 파일형식을 사용했으나 큰 차이는 없었다. 원인 분석 이미지 성능을 개선하기에 앞서 웹 성능에 주요한 영향을 미치는 요인들에 대해..
