JavaScript
[Level 1] 콜라츠 추측
[Level 1] 콜라츠 추측
2022.02.24문제 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 입력된 수가 6이라면 6→3→10→5→16→8→4→2→1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야하는지 반환하는 함수, solution을 완성해 주세요. 단, 작업을 500번을 반복해도 1이 되지 않는다면 –1을 반환해 주세요. 제한 조건 입력된 수, num은 1 이상 8,000,000 미만인 정수입니다. 문제 ..
[Level 1] 평균 구하기
[Level 1] 평균 구하기
2022.02.24문제 설명 정수를 담고 있는 배열 arr의 평균값을 return 하는 함수, solution을 완성해보세요. 제한 조건 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상, 10,000 이하인 정수입니다. 문제 풀이 const solution = (arr) => { const sum = arr.reduce((a, b) => a + b); return sum / arr.length; }; const inputs = [ [1, 2, 3, 4], [5, 5], ]; inputs.forEach((input) => console.log(solution(input))); 배열 요소들의 평균은 모든 요소의 합을 더한 후 요소의 개수로 나누면 구할 수 있습니다. 요소의 합은 Arra..
[Level 1] 하샤드 수
[Level 1] 하샤드 수
2022.02.24문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. 제한 조건 x는 1 이상, 10000 이하인 정수입니다. 문제 풀이 const solution = (x) => { const sum = Array.from(String(x)).reduce((a, b) => a + Number(b), 0); return x % sum === 0; }; const inputs = [10, 12, 11, 13]; inputs.forEach((input) => console.log(solutio..
[Level 1] 핸드폰 번호 가리기
[Level 1] 핸드폰 번호 가리기
2022.02.24문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 phone_number는 길이 4 이상, 20 이하인 문자열입니다. 문제 풀이 const solution = (phone_number) => { const [left, right] = [phone_number.slice(0, -4), phone_number.slice(-4)]; return left.replace(/\d/g, '*') + right; }; const inputs = ['01033334444', '..
[Level 1] 행렬의 덧셈
[Level 1] 행렬의 덧셈
2022.02.24문제 설명 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 제한 조건 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. 문제 풀이 const solution = (arr1, arr2) => { return arr1.map((col, i) => { return col.map((item, j) => { return item + arr2[i][j]; }); }); }; const inputs = [ // 입력 케이스 1 [ // arr1 [ [1, 2], [2, 3], ], // arr2 [ [3, 4], [5, 6], ], ..
[Level 1] x만큼 간격이 있는 n개의 숫자
[Level 1] x만큼 간격이 있는 n개의 숫자
2022.02.24문제 설명 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 제한 조건 x는 -10,000,000 이상, 10,000,000 이하인 정수입니다. n은 1000 이하인 자연수입니다. 문제 풀이 const solution = (x, n) => { // (_, i)에서 i는 현재 참조 중인 요소의 인덱스입니다. // 콜백함수의 첫 번째 인자는 요소의 값인데, 초기에는 어차피 undefined라 _로 처리했습니다. return Array.from({ length: n }, (_, i) => (i + 1) * x); }; const inputs = [..
[Level 1] 직사각형 별찍기
[Level 1] 직사각형 별찍기
2022.02.24문제 설명 이 문제에는 표준 입력으로 두 개의 정수 n과 m이 주어집니다. 별(*) 문자를 이용해 가로의 길이가 n, 세로의 길이가 m인 직사각형 형태를 출력해보세요. 제한 조건 n과 m은 각각 1000 이하인 자연수입니다. 문제 풀이 process.stdin.setEncoding('utf8'); process.stdin.on('data', (data) => { const [n, m] = data.split(' ').map((item) => parseInt(item)); for (let i = 0; i < m; i++) { for (let j = 0; j < n; j++) process.stdin.write('*'); console.log(); } }); 별찍기 문제는 2중 반복문을 사용하면 해결할 수 ..
자바스크립트로 코딩 테스트 준비하기
자바스크립트로 코딩 테스트 준비하기
2022.02.22코딩 테스트 준비하기 이번 글은 나중에 코딩 테스트를 비롯한 문제 해결이 필요할 때 참고하려고 간단하게 작성했습니다. 개인적으로 정리한 글이지만, 프론트엔드 개발자에 지원하는 분들께 도움이 되었으면 좋겠습니다. 코드 설명이 필요한 분들은 댓글 달아주시면 최대한 빨리 답변드릴게요. 피드백도 환영합니다. 본문에 포함된 예제는 모두 자바스크립트 ES6 기준으로 작성했습니다. 탐욕 알고리즘 탐욕 알고리즘(Greedy)은 현재 상황에서 문제 해결을 위한 가장 좋아 보이는 것을 고르는 방법입니다. 이렇게 매순간 최적의 해라 생각되는 방법을 토대로 반복하여, 결과적으로 최적의 해에 도달하는 것입니다. 탐욕 알고리즘은 알고리즘에 대한 사전 지식을 많이 요구하지 않는 대신, 문제 해결에 대한 창의적인 접근이 필요합니다...
쿠키런 소식 페이지 만들기 - [4] Scss 적용하기
쿠키런 소식 페이지 만들기 - [4] Scss 적용하기
2022.01.19Sass [Scss] CSS를 사용하는 것은 정말 쉽지만, 프로젝트의 규모가 커짐에 따라 불필요한 선택자의 남발이 발생하는 등 아쉬운 상황이 많았습니다. 이런 애로사항 때문에 CSS의 문법과 기능을 확장한 전처리기(Preprocessor)라는 것들이 등장했습니다. 전처리기에는 Sass, Less, Stylus 등이 있는데, Sass가 많이 사용되고 있습니다. 그래서 본 시리즈에서는 프로젝트에 Sass를 적용해 볼 예정입니다. Sass(Syntactically Awesome Style Sheet)는 문법적으로 정말 뛰어난 스타일 시트라고 합니다. 얼마나 뛰어나길래 이런 이름을 가지고 있는 걸까요? 한 번 CSS와 Sass의 문법을 비교해 봅시다. /* test.css */ ul { display: flex..
쿠키런 소식 페이지 만들기 - [3] 바벨 적용하기
쿠키런 소식 페이지 만들기 - [3] 바벨 적용하기
2022.01.19Babel 자바스크립트는 현재도 계속해서 새로운 문법과 함께 꾸준히 발전하고 있는 언어입니다. 이렇게 빠르게 발전하는 자바스크립트를 지원하기 위해 크롬, 엣지, 파이어폭스 같은 모던 브라우저들도 ECMAScript 명세를 열심히 반영하고 있습니다. 하지만 인터넷 익스플로러(IE)와 같은 구형 브라우저들은 지원이 끊겼기에 더 이상 업데이트되지 않습니다. 그럼에도 아직까지 사용하고 있는 사용자층이 있기에 구형 브라우저에서도 최신 문법이 지원될 수 있도록 해야 합니다. 이를 위해 우리는 바벨(Babel)이라는 트랜스파일러의 도움을 받을 계획입니다. 트랜스파일러(Transpiler)란 어떤 언어로 작성된 코드를 비슷한 수준의 코드로 바꿔주는 도구입니다. 최신 문법의 코드가 어떤 식으로 변경되는지 확인해 보고 싶..
쿠키런 소식 페이지 만들기 - [2] 웹팩 적용하기
쿠키런 소식 페이지 만들기 - [2] 웹팩 적용하기
2022.01.19Devtools 오늘날에는 프론트엔드의 코어 기본기(HTML, CSS, JavaScript)와 함께 개발 도구를 능숙하게 다루는 것 또한 중요해졌습니다. 구형 웹 브라우저와의 호환성을 위해 트랜스파일러의 도움을 받기도 하고, 수많은 리소스를 하나의 파일로 압축해 주는 번들러의 도움을 받기도 합니다. 이 외에도 프론트엔드에서 사용되는 개발 도구는 정말 많습니다. 그래서 이번 쿠키런 소식 페이지 만들기 시리즈를 작성하게 되었고, 이전 장에서 만든 쿠키 뉴스에 개발 도구를 같이 적용해 보면서 익숙해지시면 좋겠습니다. 이전 글인 화면 만들기에 이어서 진행되니, 되도록이면 시리즈 첫 장부터 진행해 주세요 😆 개발 도구 설치는 모두 npm으로 진행하니, 진행에 앞서 Node.js를 설치해 주세요. (LTS v16 ..
쿠키런 소식 페이지 만들기 - [1] 화면 만들기
쿠키런 소식 페이지 만들기 - [1] 화면 만들기
2022.01.18프론트엔드 기본기를 함께 익혀봐요 🚀 프론트엔드의 코어 기본기는 HTML, CSS, JavaScript 이렇게 세 가지가 있습니다. 기본의 중요성은 백날 말해도 모자라지 않은데요. 그런데 이들과 함께 중요한 것들이 더 있습니다. 그중에서도 개발 도구를 다루는 것이 있습니다. 요즘은 리액트와 같은 라이브러리를 사용하는 방법도 알아야 하지만, 웹팩 또는 바벨과 같은 도구를 설정하고 적용하는 것 역시 알아야 합니다. 그래서 지금까지 공부한 기본기들을 이용해 시맨틱 한 쿠키런 소식 페이지를 만들고, 많이 사용되는 도구들을 하나씩 적용해보려 합니다. 저도 아직은 개발 도구를 다루는 것이 미숙하지만, 이번 기회에 같이 만들면서 연습해봐요! 예제에 사용된 코드와 이미지는 GitHub 저장소에서 확인 가능합니다 ❤️ ..