본문 바로가기
반응형

IT/Javascript64

나누어 떨어지는 숫자 배열 (코딩테스트 문제) 문제 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 제한조건 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. 입출력 예 array divisor return [5, 9, 7, 10] 5 [5, 10] [2, 36, 1, 3] 1 [1, 2, 3, 36] [3,2,6] 10 [-1] 풀이방향 나누어 떨어지는 숫자를 구한다 오름차순으로 정렬한다 문제풀이 function divisibl.. 2022. 7. 12.
같은 숫자는 싫어 문제 배열 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보다 크거나 같고 .. 2022. 7. 12.
자릿수 더하기 문제 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한조건 N의 범위 : 100,000,000 이하의 자연수 풀이방향 숫자를 쪼개서 더하기 문제풀이 function sumDigit(num) { var sum = 0; while (num > 0) { sum += num % 10; num = Math.floor(num / 10); } return sum; } export { sumDigit }; import { sumDigit } from "../src/sumDigit"; describe("sumDigit", () => { it("should return 6 as.. 2022. 7. 12.
문자열 내림차순으로 배치하기 문제 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. 제한조건 str은 길이 1 이상인 문자열입니다. 풀이방향 대문자가 소문자 보다 작게 처리한다 문제풀이 function descString(str) { let answer = &#39;&#39;; let strArr = str.split(&#39;&#39;); //문자 배열을 descending 순서로 정렬 strArr.sort((a, b) => { return (a < b) ? 1 : -1; }); //정렬된 문자 배열을 이어붙이기 for (let i = 0; i < strArr.length; .. 2022. 7. 12.
정수 내림차순으로 배치 문제 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 제한조건 n은 1이상 8000000000 이하인 자연수입니다. 풀이방향 입력값을 나누고 정렬하는 방법을 찾아보자. 문제풀이 function descendingOrder(n) { return parseInt(n.toString().split(&#39;&#39;).sort().reverse().join(&#39;&#39;)); } export { descendingOrder }; import { descendingOrder } from "../src/descendingOrder"; describe("descen.. 2022. 7. 12.
다트 게임 (2018 카카오 Blind 채용문제) 문제 카카오톡 게임별의 하반기 신규 서비스로 다트 게임을 출시하기로 했다. 다트 게임은 다트판에 다트를 세 차례 던져 그 점수의 합계로 실력을 겨루는 게임으로, 모두가 간단히 즐길 수 있다. 갓 입사한 무지는 코딩 실력을 인정받아 게임의 핵심 부분인 점수 계산 로직을 맡게 되었다. 다트 게임의 점수 계산 로직은 아래와 같다. 다트 게임은 총 3번의 기회로 구성된다. 각 기회마다 얻을 수 있는 점수는 0점에서 10점까지이다. 점수와 함께 Single(S), Double(D), Triple(T) 영역이 존재하고 각 영역 당첨 시 점수에서 1제곱, 2제곱, 3제곱 (점수1 , 점수2 , 점수3 )으로 계산된다. 옵션으로 스타상(*) , 아차상(#)이 존재하며 스타상(*) 당첨 시 해당 점수와 바로 전에 얻은 .. 2022. 7. 12.
콜라츠 추측 (코딩테스트) 문제 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 이상 8000000 미만인 정수입니다. 입출력예 n re.. 2022. 7. 12.
시저암호 (코딩테스트) 문제 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. 제한조건 공백은 아무리 밀어도 공백입니다. s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. s의 길이는 8000이하입니다. n은 1 이상, 25이하인 자연수입니다. 입출력 예 s n result "AB" 1 "BC" "z" 1 "a" "a B z" 4 "e F d" 풀이방향 n 은 1에서 25 이하이니 신경 쓰지 않는다 대문자, 소문자를 구분해서 처리한다.. 2022. 7. 12.
2016년 (코딩테스트) 문제 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 | 풀이방향 날짜 함수를 사용하여 요일을 구한다 문제풀이 let year = 2016; let month = a.. 2022. 7. 12.
자바스크립트 오브젝트 Object 특징 오브젝트 생성 오브젝트는 브레이스 {} 로 생성합니다. const ecom = { name: &#39;coupang&#39;, developer: &#39;CPNG&#39; }; 속성 추가 삭제 ecom.year = 2021; delete ecom.year; 속성 접근방법 console.log(ecom.name); console.log(ecom["name"]); toString() 으로 변동적인 key 값을 줄 수 있습니다. const getKey = { toString() { return &#39;developer&#39; } } console.log(ecom[getKey]); 상속 object 는 Object 를 상속 받습니다 ecom.__proto__ === Object.prototype; cons.. 2022. 7. 12.
Tailwind Css Purge tailwind css 를 사용하면서 production 용으로 용량을 줄이려고 build 를 하는데 용량이 줄여지지 않았다. module.exports = { purge: [ &#39;./index.html&#39;, &#39;./js/index.js&#39; ], darkMode: false, // or &#39;media&#39; or &#39;class&#39; theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } 설정대로 했는 데 왜 안되는 거야 Production 환경일 때만 purge 가 된다 Optimizing for Production 문서를 보면 {% quote tailwindcss https://tailwindcss.co.. 2022. 7. 12.
잼스택(JAMstack) 이란 무엇인가 웹사이트를 개발하는 방법 외국도 우리나라 처럼 약어를 좋아하나보다 웹 개발을 위한 기술들을 모아서 MEAN, MERN 이란 용어를 쓰고 있었다 MEAN (MongoDB, Express.js, Angular, Node.js) MERN (MongoDB, Express.js, React, Node.js) 웹 사이트를 만드는 방법이 동적인 페이지 생성기술만 언급되다가 기술의 발전과 함께 정적인 페이지 생성기술이 추가로 언급되고 있는 것이다 JAM (Javascript, Api, Markup) 정적인 사이트도 Javascript 와 API 를 만나면서 다양한 기능을 구현할 수 있게되어 JAM 스택이 급부상 하고 있는 것도 있다 MEAN 과 MERN 에서 백엔드를 구성하고 있는 MongoDB 와 Node.js 가 .. 2022. 7. 11.
Npm Run 예제 npm package.json 작성시에 Run 스크립트의 예제 입니다. 이걸 참조해서 Npm run 을 작성하면 도움이 될 것 같아서 남겨놓습니다 { "name": "my-app", "version": "1.0.0", "description": "My test app", "main": "src/js/index.js", "scripts": { "jshint:dist": "jshint src/js/*.js", "jshint": "npm run jshint:dist", "jscs": "jscs src/*.js", "browserify": "browserify -s Validating -o ./dist/js/build.js ./lib/index.js", "browsersync": "browser-sync sta.. 2022. 7. 11.
자바스크립트 Naming conventions 코드 짤때 정말 중요한 Naming rule 을 정리해놓으려고 한다 좋은 예 // 의미있는 이름을 사용한다 getUserPosts var userFirstName = "John" var userWeightInKG = 65; var userBMI = 20; // 구체적으로 작성한다 findUserByNameOrEmail setUserLoggedInTrue getUserFriend getUserIdWithEmail(email); getUserIdFromBlogpost(blogpostdata); getUserIdFromChat(chatObject); getUserIdFromFriend(friendObject); // 동사형으로 작성한다 getQuestion getUsers // boolean 타입을 잘 사용한.. 2022. 7. 11.
math.random 랜덤 숫자 사용하기 여러 개의 정보들 중에서 랜덤한 정보를 선택하려고 할때 Random 함수를 많이 사용한다 여러 개의 이미지 중에 랜덤한 이미지를 사용하려고 Math.random() 함수를 사용해보았다 Math.random() 자바스크립트의 랜덤함수 이다 0 부터 1 미만의 숫자를 무작위로 리턴해준다 const randomNum = Math.random(); console.log(`random Number = ${randomNum}`); 특정 범위 내의 값을 얻고 싶을 때 random 에 원하는 값을 곱해주면 된다 0 부터 10 미만까지에서 랜덤으로 숫자를 얻고 싶으면 const randomNum = Math.random() * 10; console.log(`random Number = ${randomNum}`); 랜덤 .. 2022. 7. 11.
$.getJson 으로 외부 JSON DATA 가져오기 정적 사이트를 만들어서 사용하다보니 데이터 담당을 json file 이 하고 있다. 주가 데이터 라던지 이미지 URL 정보 데이터 들을 json file 로 만들어서 사용하고 있는데 사이트에 올려있는 json file 을 사용해서 data 처리를 하는 것을 포스트로 남겨두려고 한다 getJSON jQuery 에서 getJSON() 으로 json 파일을 읽어올 수 있다 jQuery.getJSON( url [, data ] [, success ] ) {% quote %} url Type: String A string containing the URL to which the request is sent. data Type: PlainObject or String A plain object or string t.. 2022. 7. 11.
html2canvas 로 이미지 저장시에 흰색줄 배너생성기를 만들면서 html2canvas 라이브러리를 사용하고 있는데 이미지파일로 저장시에 간혹 흰줄이 표시되는 경우가 발생되었다 예제 원인 구글링 하고 issues 열심히 찾아보니 원인이 scroll 때문이라고 한다 html2canvas(banner).then((canvas) => { saveAs(canvas.toDataURL(), "banner-maker" + Date.now() + "png"); }); 이런식으로 많이 사용하는데 banner 라는 element 를 canvas 로 옮길때 scroll 정보가 해당 이미지 생성에 영향을 주는 것 같다. 해결방법 scroll 정보를 초기화 해준다 { scrollX: 0, scrollY: -window.scrollY, windowWidth: documen.. 2022. 7. 11.
자바스크립트 날짜 비교 함수 두 개의 입력된 날짜끼리 비교하는 함수를 정리해놔요 두개 날짜 사이의 일수 const getNumDaysBetweenDates = (startDate, endDate) => { let dates = []; const date = new Date(startDate); while (date < endDate) { dates = [...dates, new Date(date)] date.setDate(date.getDate() + 1) } return dates.length; } const start = new Date(2021, 1, 31); const end = new Date(2021, 2, 2); const result = getNumDaysBetweenDates(start, end); 날짜가 더 먼저인.. 2022. 7. 11.
데이터 오브젝트 vs OOP 오브젝트 (javascript) 데이터 오브젝트 데이터를 공개하고 수정할 수 있게 제공해준다 OOP 오브젝트 데이터를 숨기고 데이터를 다룰 수 있는 메소드를 제공해준다 데이터 오브젝트 예시 //첫번째 const createPerson = ({ fname, lname }) => ({ fname, lname }); const obj = { fname: &#39;Jhon&#39;, lname: &#39;Locke&#39; }; const clone = { ...obj } //두번째 function person(fname, lname) { const person = {}; person.fname = fname; person.lname = lname; return person; } const fname = &#39;Jhon&#39;; const.. 2022. 7. 11.
CORS 프록시 서버 만들기 (cors-anywhere) Same-Origin Policy (동일 출처 정책)은 웹브라우저 보안을 위해 프로토콜, 호스트, 포트가 동일한 서버로만 ajax 요청을 주고 받을 수 있는 정책이다. CORS (Cross-Origin Resource Sharing) Policy 교차 출처 리소스 공유 정책, 서로 다른 도메인 간에 리소스를 공유해 줄 수 있는 정책이다. 단, 서버 쪽에서 리소스 공유 권한을 부여해야 한다. 여러 개의 도메인으로 분산해서 서비스 하는 경우가 많아지면 CORS 가 나오게 된 것인데 공공 API 를 사용하면서 자주 접하는 메시지 중에 하나 일 것이다. from origin &#39;http://localhost:8080&#39; has been blocked by CORS policy: Response to .. 2022. 7. 11.
Console log 활용하기 프로그래밍 하면서 굉장히 많이 사용하는 console.log 를 꾸며서 좀 더 시각적으로 활용해보자 자세한 내용은 MDN doc 에 나와있습니다. MDN Doc Console 일반적인 콘솔 일반적인 콘솔은 4가지를 많이 사용합니다. console.log() : console.info() console.warn() console.error() 출력결과 출력 데이터 타입 %o, %O : 오브젝트 %d, %i : 정수 %s : 문자 %f : 소수점 var car = "Dodge Charger"; var someObject = { str: "Some text", id: 5 }; console.info("My first car was a", car, ". The object is:", someObject); 출력.. 2022. 7. 11.
Javascript Naming Convention 명명 규칙 변수명과 함수명은 영어를 사용하자 변수나 함수명은 영어로 사용한다 /* Bad */ let primerNombre = &#39;Gustavo&#39; let amigos = [&#39;Kate&#39;, &#39;John&#39;] /* Good */ let firstName = &#39;Gustavo&#39; let friends = [&#39;Kate&#39;, &#39;John&#39;] Naming convention 을 통일시킨다 camelCase, PascalCase 어떤걸 사용하던지 통일 시키자 /* Bad */ let page_count = 5 let shouldUpdate = true /* Good camelCase 를 사용하던지 */ let pageCount = 5 let shouldU.. 2022. 7. 11.
Javascript CleanCode 예제 읽기 쉽게 코드를 작성하자 부정적인 변수명칭을 피하자 example const isInvalidApiKey = apiKey === null if (isInvalidApiKey) {} CleanCode const isValidApiKey = apiKey != null if (!isValidApiKey) {} 함수에 flag 변수 사용을 피하자 example //밑에 function 을 확인하지 않으면 뭐가 true/false 인지 알 수 없다 renderResult(true) function renderResult(isAuthenticated) { if (isAuthenticated) { return App } else { return Please login } } CleanCode renderResult.. 2022. 7. 11.
자바스크립트 연대기 자바스크립트(Javascript) 연대기 1995: Javascript 자바스크립트 탄생 1997-06: ECMAScript 1 ES1 정의 1998-06: ECMAScript 2 ES2 정의 1999-12: ECMAScript 3 정규식, try/catch 2000-01--2007-10-23: ECMAScript 4 합의 안되고 ECMAScript 4 는 망함 2002-09: Firefox 파이어폭스 웹브라우저 출시 2006-08: jQuery jQuery 최초출시 2008: Chrome 크롬 웹브라우저 출시 2009: ECMAScript 5 Node.js (5월) ECMAScript 5 (12월) 2012: AngularJS AngularJS (version 1) Typescript (10월) 201.. 2022. 7. 11.
자바스크립트 Cheatsheet 요약 자바스크립트를 잘 요약한 정보가 있어서 공유합니다. Basic Vocabulary, Seven Types, Objects Functions - parameters, invocation, parameters, return and more Vocabulary around variables and scope Operators and coercion Conditional Statement (if/switch/ternary) + Truthy Falsy Loops - For, While, Do While Ways to create variable - var, let, const + Event Loop Browser DOM - Query, Create, Update, Delete, Events of DOM Auto-.. 2022. 7. 11.
자바스크립트 요약 (String) Errors 에러 처리 기본 구문은 아래와 같다. try { undefinedFunction(); } catch (err) { console.log(err.message); } finally { console.log(&#39;done&#39;); } throw new Error(&#39;error&#39;) 로 에러를 처리할 수 있고 아래같은 Error 유형이 있다 RangeError — A number is out of range ReferenceError — An illegal reference has occurred SyntaxError — A syntax error has occurred TypeError — A type error has occurred URIError — An encodeURI.. 2022. 7. 11.
Javascript Canvas 이미지 비율로 복사 canvas 에 이미지를 좌/우로 맞춰서 복사하는 방법을 정리해놓습니다. Canvas javascript 에서 그림 그릴때 사용하는 기능입니다 CANVAS 기본사용법 Canvas 사용 canvas 를 만들고 2d context 를 만들어서 context 에 image 를 그리는 방식으로 사용합니다. var canvas = document.getElementById(&#39;tutorial&#39;); var ctx = canvas.getContext(&#39;2d&#39;); 실사용예제 bannermaker 에서는 다음과 같이 사용했습니다. canvas 를 만들고 canvas 사이즈를 설정하고 사진 이미지가 로딩되면 context 에 해당 이미지를 복사해 줍니다. h 와 v 의 선택에 따라서 전체 사진을.. 2022. 7. 6.
Javascript 에서 즉시 실행 function : IIFE (Immediately-invoked function expression) 바로 실행되는 함수가 필요하다 Web 페이지에 접속하자마자 전체 창으로 띄워주고 싶다 일단 웹페이지을 제어해야 하니 바로 사용자의 액션 없이 바로 실행되는 함수가 필요하다 즉시실행함수 유형 1. Jquery 라이브러리 필요 $(document).ready(function(){ //소스영역 alert(&#39;immediately function&#39;); }); 2. Jquery 라이브러리 필요 //document.ready 까지 제거 $(function(){ //소스영역 alert(&#39;immediately function&#39;); }); 3. 라이브러리 불필요 (function() { //소스영역 alert(&#39;immediately function&#39;); })(); 4. 라이브러리.. 2022. 7. 6.
특수문자에 대한 설명 Brackets ( ) Bracket, round bracket, parentheses. Used around function parameters in CSS and JavaScript. (— open bracket. )— close bracket. [ ] Square bracket. Used around attribute selectors in CSS and with arrays and objects in JavaScript. [— open square bracket. ]— close square bracket. { } Curly brace, brace, moustache. Used to open/close CSS rule sets or opening/closing objects and function.. 2022. 7. 6.
ES2020 자바스크립트 메소드 ES2020 자바스크립트 ES2020 버전에서의 변화를 알아봅니다 globalThis globalThis 를 이용해서 전역객체를 참조할 수 있게 되었습니다 console.log(globalThis); Promise.allSettled Promise 를 멀티로 사용할 때 쓴다. const promise1 = new Promise((resolve, reject) => { resolve(&#39;First Promise was resolved&#39;); }); const promise2 = new Promise((resolve, reject) => { reject(&#39;Second Promise was rejected&#39;); }); const promise3 = new Promise((resolve.. 2022. 6. 28.
반응형