![]()
자릿수 더하기 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 제한 사항 N의 범위 : 100,000,000 이하의 자연수 N answer 123 6 987 24 정답 풀이 function solution(n) { let x = 0; n.toString().split("").map(e=>( x += Number(e) )) return x } 해설 이번 문제는 숫자의 자릿 수의 합을 더해주는 문제 입니다. n으로 들어오는 매개변수를 우선 toString메소드를 사용하여 문자열로 변환합니다. 그리고 split 메소드를 사용해 자릿수를 개별문자열로 쪼개주고 map 메소드를..
![]()
나머지가 1이 되는 수 찾기 설명 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. 제한 사항 3 ≤ n ≤ 1,000,000 n return 10 3 12 11 정답 풀이 function solution(n) { for(let i = 2; i < n; i++) { if(n%i===1 && i
![]()
정수 내림차순으로 배치하기 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 제한 사항 seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. "Kim"은 반드시 seoul 안에 포함되어 있습니다. seoul return ["Jane", "Kim"] "김서방은 1에 있다" 실패 풀이 function solution(seoul) { return `김서방은 ${seoul.indexOf("Kim")}에 있다` } 해설 이번 문제는 재밌는 문제..
![]()
정수 내림차순으로 배치하기 설명 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다. 제한 사항 s는 길이 1 이상, 길이 8 이하인 문자열입니다. s는 영문 알파벳 대소문자 또는 0부터 9까지 숫자로 이루어져 있습니다. s return "a234" false "1234" true 실패 풀이 function solution(s) { let o = false; let num = s.match(/\D/g); for(let i=1; i
![]()
정수 내림차순으로 배치하기 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 제한 사항 n은 1이상 8000000000 이하인 자연수입니다. n return 118372 873211 풀이 function solution(n) { return parseInt( n.toString().split("").sort((a, b) => b - a).join("") ); } 해설 이번 문제는 정수를 받아서 내림차순으로 배치하는 것입니다. n으로 받는 정수들을 문자열로 바꾸어 받습니다. 그 후 각각 split로 쪼개서 sort메소드를 사용해 내림차순으로 정렬하고 join..
![]()
핸드폰 번호 가리기 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 사항 phone_number는 길이 4 이상, 20이하인 문자열입니다. phone_number return "01033334444" "*******4444" "027778888" "*****8888" 풀이 function solution(phone_number) { return "*".repeat(phone_number.length-4)+phone_number.slice(-4) } 해설 이번 문제는 전화..
![]()
수박수박수박수박수박수? 설명 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 제한 사항 n은 길이 10,000이하인 자연수입니다. n return 3 "수박수" 4 "수박수박" 풀이 function solution(n) { let o = "" for(let i = 1; i { return '수박'.repeat(n/2) + (n%2 === 1 ? '수' : ''); } 해설 삼항 연산자를 사용한 풀이를 가져와 보았습니다. 수박으로 계속 반복되게 셋팅하고 repeat메소드를 활용해 홀수일때 수를 붙여서 사이사이에 붙도록 하였습니다. 이것 또한 repeat..
![]()
나누어 떨어지는 숫자 배열 설명 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] 5 [1, 2, 3, 36] [3,2,6] 5 [-1] 풀이 function solution(arr, divisor) { const answer..
![]()
평균 구하기 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한 사항 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. arr return [1,2,3,4] 2,5 [5,5] 5 풀이 function solution(arr) { let a = arr.reduce((acc,cur) => acc+cur) console.log(arr.length) return a/arr.length } 해설 이번문제는 평균값을 구하는 문제 입니다. 평균값을 구하기 위해서 정수 배열인 매개변수 arr의 인자들을 중첩하여 더해주도록 reduce함수를 사용하여 인자들을 모두 더했습니다. 그리고 arr의 배열..
![]()
약수의 합 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한 사항 n은 0 이상 3000이하인 정수입니다 n return 12 5 28 6 풀이 function solution(n) { let a = n; let num = 0; for(let i =1; i
![]()
짝수와 홀수 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 제한 사항 num은 int 범위의 정수입니다. 0은 짝수입니다. num return 3 "Odd" 4 "Even" 풀이 function solution(num) { let a = (num%2==0)? "Even" : "Odd" return a; } 해설 짝수일 때 Even 을 출력하고 홀수 일 때 Odd를 출력하는 문제 입니다. 삼항연산자를 사용해서 작업하였습니다. 짝수 일때는 2로 나눴을때 나머지가 0이기 때문에 true일때 Even을 출력하고 나머지 경우는 모두 홀수 이기 때문에 false일 경우 Odd를 출력하게 하였습니다.
![]()
하샤드 수 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. arr return 10 true 12 true 11 false 13 false 풀이 function solution(x) { let a = 0; let sum = String(x).split(''); for(let i=0; i
![]()
없는 숫자 더하기 설명 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. numbers result [1,2,3,4,6,7,8,0] 14 [5,8,4,0,6,7,9] 6 풀이 function solution(numbers) { return 45 - numbers.reduce((cur, acc) => cur + acc, 0); } 해설 reduce 메서드를 사용하여 문제를 풀었습니다. reduce() 메서드에는 누산기 기능이 있습니다. cur은 acc에서 콜백한 이전 값으로 acc에서 처리한 값을 계속 더해줍니다. 0은 초기 값이고 ..
![]()
내적 설명 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1] 입니다. (n은 a, b의 길이) 입출력 예 #1 a와 b의 내적은 1*(-3) + 2*(-1) + 3*0 + 4*2 = 3 입니다. a b result [1,2,3,4] [-3,-1,0,2] 3 [-1,0,1] [1,0,-1] -2 풀이 function solution(a, b) { let sum = 0; a.forEach((el,i)=>{ sum += (a[i]*b[i]) }) return sum; } 해설 내적을 이용하여 구하는 방식을 코드로 구..
![]()
음향 더하기 설명 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. absolutes signs result [4,7,12] [true,false,true] 9 [1,2,3] [true,false,true]] 0 풀이 function solution(absolutes, signs) { let k = 0; absolutes.forEach((i, el) => { if(signs[el] === true) { k += absolutes[el]; } else { k -= absolutes[el]; } }) r..
06. 마우스 이펙트 : 텍스트 효과 마우스 이펙트는 마우스 커서 해당위치에 커서대신 다양한 효과를 주거나 요소에 위치에서 다양한 변화를 주는 효과입니다. CSS 중심에 글을 가운데를 기준으로 양쪽 부분만 남기고 겹치는 부분은 overflow:hidden을 사용하여 숨겼습니다. 왼쪽 글은 15deg정도 기울이고 색을 줬고 오른쪽은 -15deg로 기울여서 작업하였습니다. /* mouseType */ .mouse__wrap { color: #fff; width: 100%; height: 100vh; } .mouse__img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: -1; } .mouse__text..
서치 프로그램5 서치 프로그램을 만들어보았습니다. 알파벳을 선택했을 떄 그에 알맞는 알파벳을 첫 글자로 시작하는 요소들을 출력하도록 하였습니다. 또한 출력되는 요소의 갯수도 출력되도록 하였습니다. HTML 별점을 담은 class="star"에 data값을 주어서 스크립트로 쓸 수 있도록 하였고 별점을 클릭하면 알맞은 값을 출력할 수 있도록 만들었습니다. css보기 filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 전체 속성 갯수 : 0 javascript listCSS를 문자열로 선언하고 for of문을 사용하여 cssProperty의 데이터 항목을 추가해 listCSS에 추가..
06. 패럴랙스 이펙트 - 텍스트 효과 페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다. javascript 이번 패럴랙스는 글자 하나씩 애니메이션에 딜레이를 줘서 출력되도록 하였습니다. 자바스크립트로 진행하였습니다. javascript document.querySelectorAll('.split').forEach((text) => { let splitText = text.innerText; let splitWrap = splitText.split('').join(''); splitWrap = "" + splitWrap + ""; text.innerHTML = splitWrap; text.setAttribute("aria-label", splitText); }); ..
![]()
서치 프로그램3 서치 프로그램을 만들어보았습니다. 알파벳을 선택했을 떄 그에 알맞는 알파벳을 첫 글자로 시작하는 요소들을 출력하도록 하였습니다. 또한 출력되는 요소의 갯수도 출력되도록 하였습니다. CSS CSS입니다. 이전과 동일한 css를 사용하였습니다. 새롭게 input박스가 추가되어 검색할 수 있도록 하였습니다. css보기 /* keyword box */ .search__info .keyword { text-align: center; margin-bottom: 10px; } .search__info .keyword span { border: 2px solid var(--htmlColor); border-radius: 50px; padding: 10px; display: inline-block; ma..
![]()
05. 마우스 이펙트 : 기울기 효과/ 반전효과 마우스 이펙트는 마우스 커서 해당위치에 커서대신 다양한 효과를 주거나 요소에 위치에서 다양한 변화를 주는 효과입니다. CSS 마우스의 위치에 따라 이미지에게 3D효과를 주며 움직이도록 하였습니다. 3d로 보이도록 만들었습니다. /* mouseType */ .mouse__wrap { display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; width: 100%; height: 100vh; overflow: hidden; cursor: none; } .mouse__img { transform: perspective(600px) rotateX(0..
![]()
마우스 이펙트04 : 이미지 효과 마우스 이펙트는 마우스 커서 해당위치에 커서대신 다양한 효과를 주거나 요소에 위치에서 다양한 변화를 주는 효과입니다. CSS css로 커서의 모양과 해당 요소 위에서 애니메이션을 주었습니다. body::after { background-color: rgba(0, 0, 0, 0.7); } /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; color: #fff; overflow: hidden; } .mouse__wrap figure { width: 50vw; height..
![]()
마우스 이펙트03 : 조명 효과 마우스 이펙트는 마우스 커서 해당위치에 커서대신 다양한 효과를 주거나 요소에 위치에서 다양한 변화를 주는 효과입니다. CSS 이번 유형은 마우스 커서에 영역만 선명하게 보여서 강조되는 효과가 보이도록 작업하였습니다. 마우스 영역에 백그라운드를 배경과 같은 사진을 넣고 body::after { background-color: rgba(0,0,0,0.7); } /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; color: #fff; overflow: hidden; curs..
![]()
마우스 유형02 이번 유형은 1번 유형과 동일하지만 Gsap를 사용하여 작업하였습니다. gsap는 자바스크립트 라이브러리로 복잡한 애니메이션을 만들때 주로 사용한다. 자바스크립트로 만들었을때 보다 부드러워지는 경향도 있어서 작업해 보았습니다. CSS 1번 유형과 차이점은 마우스 커서를 두가지를 만들어 동그라미 두개의 커서가 움직이도록 만들었습니다. 두가지 커서에 딜레이를 주어서 이중으로 움직이도록 하였습니다. /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; color: #fff; overflow: ..
![]()
마우스 유형01 마우스 이펙트는 마우스 커서 해당위치에 커서대신 다양한 효과를 주거나 요소에 위치에서 다양한 변화를 주는 효과입니다. CSS css로 커서의 모양과 해당 요소 위에서 애니메이션을 주었습니다. /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; flex-direction: column; justify-content: center; color: #fff; overflow: hidden; cursor: none; } .mouse__wrap p { font-size: 2vw; line-height: 2; font-weight: 300; } .mouse__wrap p span { ..
![]()
UpDown LeftRight Animation 마우스 오버에 따른 앞뒤로 돌고 옆으로 도는 애니메이션을 만들어 보았습니다. CSS /* font */ @font-face { font-family: "LocusSangsang"; font-weight: normal; font-style: normal; src: url("https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot"); src: url("https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot?#iefix") format("embedded-opentype"), url("https://cdn.jsdelivr.net/gh/webfo..
![]()
패럴랙스 - 이질감효과 페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다. javascript 1. 자바스크립트를 사용하여 브라우저의 scrollTop의 값을 구했습니다. 2. content__item span의 scrollTop값을 section의 각 요소의 offsetTop값을 비교해서 offset변수에 대입합니다. 3. 대입했으면 gsap를 사용하여 x축과 y축으로 offset의 값 만큼 변화를 주도록합니다. 밑에 피그마를 보면서 다시 이해해 보도록하겠습니다. javascript function scroll() { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document...
SCSS vscode에 scss언어를 적용하는 방법에 대해 알아보도록 하겠습니다. SCSS 적용하기 1. 우선 Extention에 들어가서 SASS와 Live Sass Compiler를 다운받아 줍니다. 2. 재대로 적용 되었다면 하단에 scss가 적용되었다고 표시가 뜹니다. 3. Ctrl + ,를 눌러서 json파일을 찾아서 적용해야합니다. 4. 아래의 코드를 적용시켜놓습니다. 5.scss 파일을 저장했을때 css저장 파일이 어디에 생기는지 확인해 보도록합니다.
![]()
슬라이드 이펙트 - 좌로 움직이기(연속적) 이번에 만들어볼 슬라이더 유형은 버튼을 클릭했을때 움직이고 이미지가 반복되는 형태를 만들어보려고 합니다. Javascript CSS를 사용하여 버튼을 만들고 버튼을 클릭하면 사진의 폭 X축으로 이동시켜 다음 사진이 나오도록 하였습니다. currentIndex라는 변수를 만들어서 0으로 설정하고 움직이는 영역인 sliderInner를 currentIndex가 변화하는 값에 맞춰서 변화할 수 있도록 만들었습니다. 선택자를 sliderBtnPrev, sliderBtnNext로 각각 설정하고 위에서 currentIndex의 값에 맞춰서 이미지가 움직이도록 하였기 떄문에 왼쪽 버튼과 오른쪽 버튼을 클릭 했을떄 이미지가 움직이도록 만들기 위해 메서드를 사용합니다. 또한 처..
![]()
패럴랙스 - 나타나기 페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다. javascript (scrollTop값은 현재 자신의 스크롤 위치) scrollTop 속성을 이용해서 자신이 보고있는 window환경에서의 위치를 구합니다. content__item의 클래스가 들어있는 요소의 위치를 forEach문을 사용해서 탐색하고 조건문을 사용하여 제가 원하는 위치에서 동작하기 원하는 위치에서 show라는 class를 추가해주는 메서드를 사용합니다. 내가 있는 위치를 계속 탐색해야하기 떄문에 재귀함수를 사용하여 실행하였습니다. 하지만 너무많이 탐색하면 메모리에 과부하가 올 수 있기 떄문에 requestAnimationFrame 메서드를 사용하여 1분에 60번만 하도록 제한..
![]()
MYSQL MYSQL은 데이터베이스 소프트웨어입니다. 일반적으로 데이터를 추가하거나 검색, 추출하는 기능을 모두 포함해서 데이터 베이스라고 부릅니다. MYSQL은 세계에서 가장 많이 쓰이는 오픈 소스의 관계형 데이터베이스 관리시스템(RDBMS) 입니다. MYSQL은 PHP 스크립트 언어와 상호 연동이 잘 되면서 오픈소스로 개발된 무료 프로그램 입니다. 그래서 홈페이지나 쇼핑몰(워드프레스, 카페24, 제로보드, 그누보드)등 일반적으로 웹 개발에 널리 사용하고 있습니다. MYSQL 설치 MAMP란 웹사이트를 개발할 때 쓰이는 기술 스택인 macOS, Apache, MYSQL, PHP의 약어이자 솔루션 스택이다. https://www.mamp.info/en/downloads/ MYSQL 실행 윈도우 : cd ..
