초보 개발자의 성장 일기

바닐라 자바스크립트는 브라우저 엔진으로만 실행이 가능하지만 node.js는 브라우저가 아니더라도 실행이 가능하다. calc.js const add = (a, b) => a + b; const sub = (a, b) => a - b; module.exports = { moduleName: 'calc module', add: add, sub: sub, }; 모듈을 내보낼 때 객체로 내보낼 수 있다. index.js const calc = require('./calc'); console.log(calc.add(1, 2)); console.log(calc.add(4, 5)); console.log(calc.sub(10, 2)); require로 경로를 불러와 사용이 가능하다. 터미널창에 node [파일명.확장자..

문제 설명 정수 배열 array와 정수 n이 매개변수로 주어질 때, array에 들어있는 정수 중 n과 가장 가까운 수를 return 하도록 solution 함수를 완성해주세요. 가장 가까운 수가 여러 개일 경우 더 작은 수를 return 합니다. 나의 문제 해결 방법 function solution(array, n) { let closestNum = array[0]; array.forEach(num => { if (Math.abs(num - n) < Math.abs(closestNum - n) || (Math.abs(num - n) === Math.abs(closestNum - n) && num < closestNum)) { closestNum = num; } }); return closestNum; ..

문제 설명 연속된 세 개의 정수를 더해 12가 되는 경우는 3, 4, 5입니다. 두 정수 num과 total이 주어집니다. 연속된 수 num개를 더한 값이 total이 될 때, 정수 배열을 오름차순으로 담아 return하도록 solution함수를 완성해보세요. 나의 문제 해결 방법 처음 시작할 값을 정하고 num의 길이만큼 1을 더하여 배열을 만든다. 첫 값은 total값을 num으로 나눈 후에 내림을 해주고 num값에 2를 나누고 내림한 값을 다시 빼주면 배열의 첫번째 값이 된다. num이 짝수일떄는 처음값에 1을 더한다. function solution(num, total) { let firstNum = Math.floor(total/num) - Math.floor(num/2); let answer ..

SPA SPA(Single Page Application)은 하나의 페이지 요청으로 전체 웹앱을 사용하는 방식으로 유저는 웹페이지를 사용하며 모바일 앱 같은 경험을 느낀다. 리액트는 SPA 방식이다. React Router를 통한 SPA 내 화면 전환 및 주소 값 변경은 서버가 아니라 클라이언트 측에서 일어나기 때문에 Client-Side Routing이라고 한다. Client-side routing 기술을 활용, 페이지 진입 시 리로드없이 라우팅한다. AJAX 기술을 활용, 페이지 이동 시 서버에 데이터만 요청하여 자바스크립트로 페이지를 만든다. MPA와 다르게, 여러 페이지를 하나의 앱의 구성요소로 보고 여러 페이지 간의 스타일, 컴포넌트를 재활용하는 방향으로 구현한다. 자바스크립트만을 활용해 전체 ..

문제 설명 정수 n을 기준으로 n과 가까운 수부터 정렬하려고 합니다. 이때 n으로부터의 거리가 같다면 더 큰 수를 앞에 오도록 배치합니다. 정수가 담긴 배열 numlist와 정수 n이 주어질 때 numlist의 원소를 n으로부터 가까운 순서대로 정렬한 배열을 return하도록 solution 함수를 완성해주세요. 나의 문제 해결 방법 배열의 첫번째부터 마지막까지 반복문을 돌려서 n과 빼기 연산을 했을 때 절대값이 가장 작은 순서대로 배열을 정렬한다.(거품정렬) 그리고 만약 절대값이 같을경우 뒷 숫자가 클 때 앞 배열과 위치를 바꾼다. function solution(numlist, n) { let temp = 0; for (let i = 0; i < numlist.length - 1; i++) { for..

문제 설명 소수점 아래 숫자가 계속되지 않고 유한개인 소수를 유한소수라고 합니다. 분수를 소수로 고칠 때 유한소수로 나타낼 수 있는 분수인지 판별하려고 합니다. 유한소수가 되기 위한 분수의 조건은 다음과 같습니다. 기약분수로 나타내었을 때, 분모의 소인수가 2와 5만 존재해야 합니다. 두 정수 a와 b가 매개변수로 주어질 때, a/b가 유한소수이면 1을, 무한소수라면 2를 return하도록 solution 함수를 완성해주세요. 나의 문제 해결 방법 분모와 분자를 기약분수로 만들고 유한소수의 조건을 만들기 위해서는 분모를 2나 5로 나눠서 몫이 1이 되면 유한소수로 판별 하면 된다고 생각했다. function solution(a, b) { let topNum = a; let bottomNum = b; fo..

비 구조화 할당 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담는것이다. 배열의 비 구조화 할당 const fruitList = ['apple', 'banana', 'orange']; 배열이 있을때 이 배열을 각각 호출하려고 한다. const apple = fruitList[0]; const banana = fruitList[1]; const orange = fruitList[2]; 먼저 각각의 변수에 배열의 인덱스를 넣어서 호출했다. 하지만 이 방법은 같은 배열을 불필요하게 반복하게 된다. let [apple, banana, orange] = fruitList; 배열안에 변수를 선언하고 배열을 할당하게 되면 각각 인덱스에 맞게 데이터가 할당이 된다. let [apple, banana, oran..

문제 설명 프로그래머스 치킨은 치킨을 시켜먹으면 한 마리당 쿠폰을 한 장 발급합니다. 쿠폰을 열 장 모으면 치킨을 한 마리 서비스로 받을 수 있고, 서비스 치킨에도 쿠폰이 발급됩니다. 시켜먹은 치킨의 수 chicken이 매개변수로 주어질 때 받을 수 있는 최대 서비스 치킨의 수를 return하도록 solution 함수를 완성해주세요. 나의 문제 해결 방법 처음에 시킨 치킨의수를 10으로 나누고 내림을 하면 서비스로 받을 수 있는 치킨의 수가 된다. 서비스로 받은 치킨의 수가 10보다 크거나 같은 조건을 만족하면 10으로 나눠서 내림 후에 앞서 받았던 서비스 치킨의 수와 더한다. 10보다 작을때까지 반복한다. function solution(chicken) { let getChicken = Math.flo..

문제설명 영어 점수와 수학 점수의 평균 점수를 기준으로 학생들의 등수를 매기려고 합니다. 영어 점수와 수학 점수를 담은 2차원 정수 배열 score가 주어질 때, 영어 점수와 수학 점수의 평균을 기준으로 매긴 등수를 담은 배열을 return하도록 solution 함수를 완성해주세요. 나의 문제 해결 방법 map 함수를 이용하여 영어 점수와 수학 점수의 평균을 반환하는 새로운 배열을 만들고 정렬하여 각각의 인덱스 번호를(랭킹) 주는 변수를 만들어서 평균을 반환했던 배열을 정렬한 배열에서 찾아 인덱스 번호를 반환하고 인덱스는 0번부터 시작하므로 마지막에 + 1을 해준다. function solution(score) { const newScore = score.map(n => (n[0]+n[1])/2); le..

CSS import CSS(혹은SCSS, Sass) 파일을 import 해서 사용한다. 필요한 모든 CSS스타일을 하나의 파일에 작성하여, 자바스크립트 파일과 코드 분리가 가능하다. 단순히 CSS 파일만을 import 하여 사용할 수 있어 편리하다. 컴포넌트가 많지 않을 경우, 하나의 CSS 파일에 코드를 관리하는 것도 가능하다. CSS파일은 분리할 수 있으나, namespace를 나눌 수 없다. 스타일이 겹칠 경우 cascading rule에 따라, 마지막에 나온 룰이 덮어 씌워진다. Button.JS import'button.css' functionButton({children}) { return( {children} ) } Button.CSS .button { background-color: ora..