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 파일형식을 사용했으나 큰 차이는 없었다. 원인 분석 이미지 성능을 개선하기에 앞서 웹 성능에 주요한 영향을 미치는 요인들에 대해..
프로젝트 회고 여러 개발강의를 들으면서 따라했던 프로젝트를 제외하고는 한번도 기획부터 배포까지 혼자 프로젝트를 진행해본적이 없었다. 아무래도 전체적인 흐름을 파악하고, 여러가지 기술 스택을 도입하는 연습을 하기 위해서 배포된 개인 프로젝트가 있으면 좋겠다는 생각을 했고 이를 위해 진행했던 Jiphy 프로젝트를 회고 하고자 한다. 기획 오픈 api 를 활용할 것 어느 정도 복잡도가 있을 것 프로젝트를 기획하기에 앞서 가장 크게 고려했던 부분은 위 두가지였다. 처음엔 백엔드도 파이어베이스를 공부하여 간단하게 구현해볼까 생각도 했지만 api와 mock data를 만드는데 불필요하게 많은 공수가 들어갈 것이라고 판단하고 오픈 api를 활용하기로 했다. 또한 성능 최적화를 연습해보고 싶었고, 추후 다양한 기능과 ..
새로 시작한 프로젝트에서 styled-component 남용을 방지하기 위해 emotion을 도입하여 사용하기로 했다. Emotion 도입 이유 간단한 스타일이 필요한 요소는 별도로 styled-component로 생성하지 않고 시맨틱 태그와 함께 inline style을 적용하여 구현한다면 코드도 더욱 간결해지고 시멘틱 태그의 적절한 사용으로 더나은 SEO에 기여할 수 있을 것으로 생각되었기 때문이다. 에러발생 코드 ... import { css } from '@emotion/react'; const Layout = ({ children }: LayoutProps) => { return ( {children} ); }; 위와 같이 Layout 컴포넌트에 emotion을 사용하여 inline-style을..
