GAZERO Blog

간단하게 말하자면, Gatsby는 JAM Stack을 활용한 정적 사이트 생성기이다. Gatsby에 대해 알아보기 전에, JAM Stack에 대해 먼저 알아보자. JAM Stack? Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. JAM Stack은 최근 프론트엔드 시장에서 빠르게 발전하고 있고, 정적 페이지 개발할 때 관련 스택으로 자주 등장하는 용어이다. 공식 페이지에서는 더 빠르게, 더 안전하게, 스케일하기 쉬운 웹을 만들기 위해 디자인된 아키텍처라고 설명한다. JAM Stack(JavaScript, API, Markup Stack)은 MarkUp으로 이루어진 웹 구성 방법이다...

네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다행히 지도 암호를 해독할 방법을 적어놓은 메모도 함께 발견했다. 지도는 한 변의 길이가 n인 정사각형 배열 형태로, 각 칸은 "공백"(" ") 또는 "벽"("#") 두 종류로 이루어져 있다. 전체 지도는 두 장의 지도를 겹쳐서 얻을 수 있다. 각각 "지도 1"과 "지도 2"라고 하자. 지도 1 또는 지도 2 중 어느 하나라도 벽인 부분은 전체 지도에서도 벽이다. 지도 1과 지도 2에서 모두 공백인 부분은 전체 지도에서도 공백이다. "지도 1"과 "지도 2"는 각각 정수 배열로 암호화되어 있다. 암호화된 배열은 지도의 각 가로줄에서 벽..

문제 설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다. 입출력 예 numbers result [2,1,3,4,1] [2,3,4,5,6,7] [5,0,2,7] [2,5,7,9,12] 입출력 예 설명 입출력 예 #1 2 = 1 + 1 입니다. (1이 numbers에 두 개 있습니다.) 3 = 2 + 1 입니다. 4 = 1 + 3 입니다. 5 = 1 + 4 = 2 + 3 입니다. 6 = 2 + 4 입니다. 7 = 3 + 4 입..

문제 설명 배열 array의 i번째 숫자부터 j번째 숫자까지 자르고 정렬했을 때, k번째에 있는 수를 구하려 합니다. 예를 들어 array가 [1, 5, 2, 6, 3, 7, 4], i = 2, j = 5, k = 3이라면 array의 2번째부터 5번째까지 자르면 [5, 2, 6, 3]입니다. 1에서 나온 배열을 정렬하면 [2, 3, 5, 6]입니다. 2에서 나온 배열의 3번째 숫자는 5입니다. 배열 array, [i, j, k]를 원소로 가진 2차원 배열 commands가 매개변수로 주어질 때, commands의 모든 원소에 대해 앞서 설명한 연산을 적용했을 때 나온 결과를 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 array의 길이는 1 이상 100 이하입니다. a..

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

문제 설명 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT 입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요. 제한 조건 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) 입출력 예 a b result 5 24 "TUE" const solution = (a, b) => { const daysOfWeek = ['SUN', 'MON', 'TUE', ..

면접 때 받은 질문, 하지만 제대로 대답하지 못한 내용이라 정리해두려고 한다. 일반 함수와 화살표 함수의 차이점에 대해 알아보기 전에, 함수 정의 방법에 대해 알아보자. 함수를 정의하는 방법은 4가지가 있다. 함수 선언식 function add(x,y) { return x + y; } 함수 표현식 const add = function (x, y) { return x + y; } Function 생성자 함수 const add = new Function('x', 'y', 'return x + y'); 화살표 함수(ES6) const add = (x, y) => x + y; 모든 함수 정의 방식은 함수를 정의한다는 면에서는 동일하지만 중요한 차이가 있다. 변수는 '선언(declaration)'한다고 하지만, ..

Git 너무 어려워(ू˃̣̣̣̣̣̣︿˂̣̣̣̣̣̣ ू) 아직도 깃 다루기가 어려운 나... 프로젝트 만들어서 push 했는데... 며용....😵‍💫 반영이 안되는 것이다! 알고 보니 다른 브랜치 생성하고 거기서 작업하고 푸시했던 것... 병합을 하려고 하다가 생각해보니 협업도 아니고 개인 프로젝트인데, 그냥 브랜치 하나에서 작업하는 게 편할 것 같았다. 그래서 가장 손쉬운 방법인 브랜치 삭제를 하게되었다...! 삭제 방법은, 로컬에서 먼저 삭제하고 그 내역을 원격에 반영하면 된다. git branch -d 삭제할브랜치명 git push -d origin 삭제할브랜치명

어느 날 리액트 프로젝트를 생성하려던 중 이런 오류를 만났다. You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. 대충 지우고 다시 시도해보라는 것 같은데, npm만 생각해서 npm uninstall만 했더니 여전히 오류가 났다. yarn을 설치한 적이 있어서 이것까지 삭제하고 다시 설치하니 오류가 나지 않았다. 내가 해결한 방법 외에 여러 가지 방법이 있어서 참고자료를 가져왔다. 오류로 프로젝트 생성을 못하는 사람들에게 도움이 되길 바란다☺️ 꼭, yarn명령어도 실행할 것!! 내가 해결한 방..

문제 설명 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요. 제한사항 놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수 처음 가지고 있던 금액 money : 1 ≤ money ≤ 1,000,000,000, money는 자연수 놀이기구의 이용 횟수 c..

문제 설명 명함 지갑을 만드는 회사에서 지갑의 크기를 정하려고 합니다. 다양한 모양과 크기의 명함들을 모두 수납할 수 있으면서, 작아서 들고 다니기 편한 지갑을 만들어야 합니다. 이러한 요건을 만족하는 지갑을 만들기 위해 디자인팀은 모든 명함의 가로길이와 세로 길이를 조사했습니다. 아래 표는 4가지 명함의 가로길이와 세로 길이를 나타냅니다. 명함 번호가로 길이세로 길이 1 60 50 2 30 70 3 60 30 4 80 40 가장 긴 가로 길이와 세로 길이가 각각 80, 70이기 때문에 80(가로) x 70(세로) 크기의 지갑을 만들면 모든 명함들을 수납할 수 있습니다. 하지만 2번 명함을 가로로 눕혀 수납한다면 80(가로) x 50(세로) 크기의 지갑으로 모든 명함들을 수납할 수 있습니다. 이때의 지갑..

앞으론 Set을 사용해야겠다! 1. Set [Set] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Set Set 객체는 ES6에 추가된 문법으로 유일한 값을 저장할 수 있다. 이를 이용해 중복요소를 제거하고자 하는 배열을 전달하면 중복 값이 제거된 배열을 얻을 수 있다. // 1. spread 사용 const array = ['🐑', 1, 2, '🐑', '🐑', 3]; // Step 1 const uniqueSet = new Set(array); // Set { '🐑', 1, 2, 3 } // Step 2 const backToArray = [...uniqueSet]; // ['🐑', 1, 2, 3] // 2...

문제 설명 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 제한 조건 strings는 길이 1 이상, 50이하인 배열입니다. strings의 원소는 소문자 알파벳으로 이루어져 있습니다. strings의 원소는 길이 1 이상, 100이하인 문자열입니다. 모든 strings의 원소의 길이는 n보다 큽니다. 인덱스 1의 문자가 같은 문자열이 여럿 일 경우, 사전순으로 앞선 문자열이 앞쪽에 위치합니다. 입출력 예 strings n return ["sun", "b..

문제 설명 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 제한사항 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. 입출력 예 arr divisor return [5, 9, 7, 10] 5 [5, 10] [2, 36, 1, 3] 1 [1, 2, 3, 36] [3,2,6] 10 [-1] 입출력 예 설명 입출력 예#1 arr의 원소 중 5로 나누어 떨어지는 원소는 5와 10입니다. 따라..

문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. 제한사항 배열 arr의 크기 : 1,000,000 이하의 자연수 배열 arr의 원소의 크기 : 0보다 크거나 ..