아라의 WWW

최댓값 만들기 정수 배열 numbers가 매개변수로 주어집니다. numbers의 원소 중 두 개를 곱해 만들 수 있는 최댓값을 return하도록 solution 함수를 완성해주세요. function solution(numbers) { numbers.sort((a,b)=>b-a); return numbers[0]*numbers[1]; } numbers.sort((a,b)=>b-a)를 통해 numbers 배열을 내림차순으로 정렬합니다. 이를 통해 배열의 첫 번째 원소가 가장 큰 값이 되도록 합니다. 그리고 return numbers[0]*numbers[1]을 통해 정렬된 배열의 첫 번째 원소와 두 번째 원소를 곱한 값을 반환합니다. 이는 정렬된 배열에서 가장 큰 두 수를 선택하여 곱한 값이기 때문에, 주어진..

주사위의 개수 머쓱이는 직육면체 모양의 상자를 하나 가지고 있는데 이 상자에 정육면체 모양의 주사위를 최대한 많이 채우고 싶습니다. 상자의 가로, 세로, 높이가 저장되어있는 배열 box와 주사위 모서리의 길이 정수 n이 매개변수로 주어졌을 때, 상자에 들어갈 수 있는 주사위의 최대 개수를 return 하도록 solution 함수를 완성해주세요. function solution(box, n) { return box.reduce((acc, cur) => acc * Math.floor(cur / n), 1); } box.reduce 메서드를 사용하여 box 배열의 모든 요소를 하나씩 순회하면서 처리합니다. reduce 메서드는 배열의 각 요소에 대해 주어진 콜백 함수를 실행하고, 이전 값과 현재 값의 결합을 ..

공던지기 머쓱이는 친구들과 동그랗게 서서 공 던지기 게임을 하고 있습니다. 공은 1번부터 던지며 오른쪽으로 한 명을 건너뛰고 그다음 사람에게만 던질 수 있습니다. 친구들의 번호가 들어있는 정수 배열 numbers와 정수 K가 주어질 때, k번째로 공을 던지는 사람의 번호는 무엇인지 return 하도록 solution 함수를 완성해보세요. function solution(numbers, k) { return numbers[(k - 1) * 2 % numbers.length]; } k에서 1을 빼줍니다. 이는 인덱스가 0부터 시작하는 반면에 k는 1부터 시작하기 때문입니다. 이렇게 함으로써 k번째 공을 던지는 사람의 인덱스를 구할 수 있습니다. 다음으로, (k - 1) * 2를 계산합니다. 이를 통해 순환적..

공 던지기 머쓱이는 친구들과 동그랗게 서서 공 던지기 게임을 하고 있습니다. 공은 1번부터 던지며 오른쪽으로 한 명을 건너뛰고 그다음 사람에게만 던질 수 있습니다. 친구들의 번호가 들어있는 정수 배열 numbers와 정수 K가 주어질 때, k번째로 공을 던지는 사람의 번호는 무엇인지 return 하도록 solution 함수를 완성해보세요. function solution(numbers, k) { return numbers[(k - 1) * 2 % numbers.length]; } 배열 인덱스는 0부터 시작하므로 k - 1을 해줍니다. 이를 통해 k번째 공을 던지는 사람의 인덱스를 구합니다. 그 다음, 2를 곱하고 numbers.length로 나눈 나머지 값을 계산합니다. 이를 통해 순환적인 인덱스 접근을..

점의 위치 구하기 사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를매깁니다. 스크린샷 2022-07-07 오후 3.27.04 복사본.png x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다. x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다. x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니다. x 좌표가 양수, y 좌표가 음수이면 제4사분면에 속합니다. x 좌표 (x, y)를 차례대로 담은 정수 배열 dot이 매개변수로 주어집니다. 좌표 dot이 사분면 중 어디에 속하는지 1, 2, 3, 4 중 하나를 return 하도록 solution 함수를 완성해주세요. function solution(dot) {..

가위 바위 보 가위는 2 바위는 0 보는 5로 표현합니다. 가위 바위 보를 내는 순서대로 나타낸 문자열 rsp가 매개변수로 주어질 때, rsp에 저장된 가위 바위 보를 모두 이기는 경우를 순서대로 나타낸 문자열을 return하도록 solution 함수를 완성해보세요. function solution(rsp) { return Array.from(rsp).map(v => { switch(+v) { case 2: return 0 case 0: return 5 default: return 2 } }).join(''); } 가위(2), 바위(0), 보(5)를 순서대로 나타낸 문자열 rsp를 받아서, rsp에 저장된 가위 바위 보를 모두 이기는 경우를 순서대로 나타낸 문자열을 반환하는 함수를 작성하는 것입니다. 해..

개미군단 개미 군단이 사냥을 나가려고 합니다. 개미군단은 사냥감의 체력에 딱 맞는 병력을 데리고 나가려고 합니다. 장군개미는 5의 공격력을, 병정개미는 3의 공격력을 일개미는 1의 공격력을 가지고 있습니다. 예를 들어 체력 23의 여치를 사냥하려고 할 때, 일개미 23마리를 데리고 가도 되지만, 장군개미 네 마리와 병정개미 한 마리를 데리고 간다면 더 적은 병력으로 사냥할 수 있습니다. 사냥감의 체력 hp가 매개변수로 주어질 때, 사냥감의 체력에 딱 맞게 최소한의 병력을 구성하려면 몇 마리의 개미가 필요한지를 return하도록 solution 함수를 완성해주세요. function solution(hp) { const first = Math.floor(hp / 5); const second = Math.f..

진료순서 정하기 문제 설명 외과의사 머쓱이는 응급실에 온 환자의 응급도를 기준으로 진료 순서를 정하려고 합니다. 정수 배열 emergency가 매개변수로 주어질 때 응급도가 높은 순서대로 진료 순서를 정한 배열을 return하도록 solution 함수를 완성해주세요. function solution(emergency) { let sorted = emergency.slice().sort((a,b)=>b-a); return emergency.map(v=>sorted.indexOf(v)+1); } 높은 순서대로 진료 순서를 정하는 것이 문제의 목표입니다. 해당 문제에서 제시된 해결 방법은 다음과 같습니다. sorted라는 변수를 만들어 emergency 배열을 복사하고, 복사한 배열을 내림차순으로 정렬합니다...

배열 자르기 정수 배열 numbers와 정수 num1, num2가 매개변수로 주어질 때, numbers의 num1번 째 인덱스부터 num2번째 인덱스까지 자른 정수 배열을 return 하도록 solution 함수를 완성해보세요. function solution(numbers, num1, num2) { return numbers.slice(num1, num2 + 1); } solution은 numbers 배열의 num1번째 인덱스부터 num2번째 인덱스까지의 부분 배열을 반환하는 함수입니다. 부분 배열을 얻기 위해 numbers 배열의 slice 메서드를 사용합니다. slice 메서드는 배열의 지정된 인덱스 범위에 해당하는 요소들로 이루어진 새로운 배열을 반환합니다. slice 메서드의 첫 번째 매개변수 ..

특정문자 제거하기 문자열 my_string과 문자 letter이 매개변수로 주어집니다. my_string에서 letter를 제거한 문자열을 return하도록 solution 함수를 완성해주세요. function solution(my_string, letter) { const answer = my_string.split(letter).join('') return answer; } JavaScript로 작성된 solution 함수입니다. 이 함수는 문자열 my_string에서 문자 letter를 제거한 후 결과를 반환합니다. my_string.split(letter): split() 메서드를 사용하여 my_string을 letter를 기준으로 분할합니다. 이렇게 하면 letter가 나타나는 위치마다 문자열이..

문자열 뒤집기 문자열 my_string이 매개변수로 주어집니다. my_string을 거꾸로 뒤집은 문자열을 return하도록 solution 함수를 완성해주세요. function solution(my_string) { var answer = ''; answer = my_string.split('').reverse().join(''); return answer; } 주어진 문자열 my_string을 거꾸로 뒤집어서 반환하는 함수인 solution을 구현한 것입니다. 아래는 코드의 동작 설명입니다. var answer = '';: 결과를 저장할 빈 문자열 answer를 선언합니다. answer = my_string.split('').reverse().join('');: my_string.split(''): ..

옷가게 할인 받기 머쓱이네 옷가게는 10만 원 이상 사면 5%, 30만 원 이상 사면 10%, 50만 원 이상 사면 20%를 할인해줍니다. 구매한 옷의 가격 price가 주어질 때, 지불해야 할 금액을 return 하도록 solution 함수를 완성해보세요. function solution(price) { if(price >= 500000) { price *= 0.8; } else if(price >= 300000) { price *= 0.9; } else if(price >= 100000) { price *= 0.95; } return Math.floor(price); } 주어진 가격 price가 500,000 이상인지 확인합니다. 만약 price가 500,000 이상이라면, 20% 할인을 적용합니다...

피자 나눠먹기 3 머쓱이네 피자가게는 피자를 두 조각에서 열 조각까지 원하는 조각 수로 잘라줍니다. 피자 조각 수 slice와 피자를 먹는 사람의 수 n이 매개변수로 주어질 때, n명의 사람이 최소 한 조각 이상 피자를 먹으려면 최소 몇 판의 피자를 시켜야 하는지를 return 하도록 solution 함수를 완성해보세요. function solution(slice, n) { var answer = 0; answer = Math.floor( (n - 1) / slice) + 1; return answer; } 피자를 두 조각에서 열 조각까지 원하는 조각 수로 자르며, 피자 조각 수 slice와 피자를 먹는 사람의 수 n이 주어졌을 때, n명의 사람이 최소 한 조각 이상의 피자를 먹기 위해 필요한 최소 피자..

피자 나눠 먹기1 머쓱이네 피자가게는 피자를 일곱 조각으로 잘라 줍니다. 피자를 나눠먹을 사람의 수 n이 주어질 때, 모든 사람이 피자를 한 조각 이상 먹기 위해 필요한 피자의 수를 return 하는 solution 함수를 완성해보세요. function solution(n) { return Math.ceil(n / 7) } 피자를 일곱 조각으로 자르고, 피자를 나눠먹을 사람의 수 n이 주어졌을 때, 모든 사람이 피자를 한 조각 이상 먹기 위해 필요한 피자의 수를 계산하여 반환하는 함수입니다. n을 7로 나눈 후 올림 처리합니다. (Math.ceil 함수를 사용하여 소수점 이하를 올림합니다.) 이렇게 함으로써, n명의 사람이 모든 사람이 한 조각 이상의 피자를 먹기 위해서는 총 몇 개의 피자가 필요한지 계..

최빈값 구하기 function solution(array) { // array의 최댓값만큼의 길이를 가진 새로운 배열 생성 let newArray = new Array(Math.max(...array)+1).fill(0); // array 반복문을 통해, 해당 값에 해당하는 index의 값 += 1 for (let i = 0; i < array.length; i++) { newArray[array[i]] += 1 } // newArray의 최댓값에 해당 하는 index 출력 // 만약 indexOf와 lastIndexOf가 지칭하는 값이 같으면, -1 출력 (중복인 경우 확인) if (newArray.indexOf(Math.max(...newArray)) !== newArray.lastIndexOf(Ma..

두 수의 나머지 function solution(num1, num2) { var answer = Math.floor((num1 / num2)*1000); return answer; } num1을 num2로 나눈 후 그 결과에 1000을 곱한 값을 소수점 이하를 버리고 반환합니다. num1 / num2를 계산합니다. 이는 num1을 num2로 나눈 실수값을 반환합니다. 계산된 값을 1000으로 곱합니다. Math.floor() 함수를 사용하여 소수점 이하를 버립니다. 이렇게 하면 최종 결과는 정수가 됩니다. 최종 결과를 answer 변수에 할당합니다. answer 값을 반환합니다. 즉, 이 함수는 num1을 num2로 나눈 후에 그 결과를 1000으로 곱한 값을 정수로 변환하여 반환하는 것입니다. 두 수의..

html Javascript parallax Effect07 페럴랙스 이펙트 : 리빌 효과 1 2 3 4 5 6 7 01 sectin1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 02 sectin2 미래는 두려움의 존재가 아니라 우리가 개척해나아가야 할 존재이다. 03 sectin 모든 것이 현재에 달려 있다. 04 sectin4 과거는 과거일 뿐 더 이상 돌아갈 수 없다. 05 sectin5 현재에 느끼는 어떠한 감정도 과거에 존재했던 어느 한 시점에 영향을 미치지 못한다. 06 sectin6 사람은 태어날 때 부터 꿈을 안고 태어난다. 07 sectin7 현실에 잠시 묻혀있을 뿐이다. 08 sectin8 아무 생각 없이 사는 인생은 바다에서 표류하는 쪽배와 같다. 09 sectin9 꿈이 없는..

1. 두수의 합 함수를 만드세요 정수 num1과 num2가 주어질 때, num1과 num2의 합을 return하도록 soltuion 함수를 완성해주세요. function solution(num1, num2) { var answer = -1; return answer; } 답 function solution(num1, num2) { var answer = num1 + num2; return answer; } 입출력 예 #1 num1이 2이고 num2가 3이므로 2 + 3 = 5를 return합니다. 입출력 예 #2 num1이 100이고 num2가 2이므로 100 + 2 = 102를 return합니다. 2. 두수의 차 함수를 만드세요 정수 num1과 num2가 주어질 때, num1에서 num2를 뺀 값을 r..

4. 컴퍼넌트 function Hello() { return ( Hello, noji ) } const element = ReactDOM.render(element, document.getElementById("root")); export default Hello 이 코드는 React.js를 사용하여 "Hello, noji" 라는 제목을 가진 h1 요소를 렌더링하는 함수 Hello()를 정의하고, 이를 라는 컴포넌트로 사용하고 있습니다. 그리고 ReactDOM.render() 메소드를 사용하여 컴포넌트를 렌더링하고, 이를 페이지의 id가 "root"인 요소에 추가하고 있습니다. 또한, export default Hello 구문은 Hello 함수를 다른 파일에서 사용할 수 있도록 내보내기 위한 구문입니다...

AJAX를 이용한 유효성 검사 AJAX를 이용한 유효성 검사는 서버와 비동기적으로 데이터를 주고받으며, 화면 전환 없이 유효성 검사를 수행할 수 있습니다. 일반적으로 웹 페이지에서 입력 필드를 제출할 때, 전체 폼이 서버로 전송되어 페이지가 새로고침되는데 반해, AJAX를 이용하면 입력 필드의 값을 서버로 전송하고, 서버에서 검증 결과를 돌려주는 과정에서 페이지가 새로고침되지 않습니다. 이 방법은 사용자 경험을 향상시키는 데 큰 역할을 합니다. 예를 들어, 회원 가입 페이지에서 유효성 검사를 수행하는 경우, 사용자가 입력한 값들이 올바른지 서버에서 검증하고, 검증 결과에 따라 사용자에게 적절한 메시지를 표시할 수 있습니다. 이를 통해 사용자는 빠르게 오류를 수정하고, 올바른 값을 제출할 수 있게 됩니다...

리액트(react)란? 리액트(React)는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 만들기 위한 도구입니다. 리액트는 컴포넌트 기반 아키텍처를 사용하여 개발자가 UI를 재사용 가능한 작은 부분으로 나누고 이를 조합하여 복잡한 UI를 구성할 수 있게 해줍니다. 리액트는 가상 DOM(Virtual DOM)을 사용하여 빠르고 효율적인 UI 업데이트를 가능하게 합니다. 가상 DOM은 실제 DOM에 대한 추상화된 표현으로, 브라우저에서 실제로 DOM을 조작하는 것보다 가벼우며, 변경 사항을 비교하고 최소한의 업데이트만 수행할 수 있습니다. 리액트는 JSX라는 문법을 사용하여 자바스크립트 코드 안에 마크업 코드를 작성할 수 있습니다. 이를 통해 개발자는 UI와 관련된 로직과 렌더링..

어제 동기 비동기에대해 올렸는데요 오늘은 동기 시스템인 자바 스크립트를 비동기로 작업 할 수 있는 콜백함수에 대해 설명하려고 합니다. 콜백함수 콜백함수(callback function)는 다른 함수에서 인자로 전달되어 실행되는 함수입니다. 일반적으로 비동기적인 작업을 처리할 때 사용되는데, 비동기적인 작업은 결과가 나올 때까지 기다리지 않고 다른 작업을 수행하는 것을 말합니다. 콜백함수는 보통 비동기적인 작업이 완료되었을 때 호출됩니다. 예를 들어, 파일을 읽는 함수에서는 파일을 읽는 작업이 완료되면 콜백함수가 호출되어 결과를 전달합니다. 콜백함수는 인자로 결과를 받아들이고, 결과를 이용하여 다른 작업을 수행할 수 있습니다. 콜백함수는 JavaScript에서 매우 중요한 역할을 합니다. JavaScrip..

오늘 aws을 다녀왔는데요 기조 연설을 듣는중 동기와 비동기 이야기가 나와 오늘은 동기와 비동기에 대해 설명하고자합니다. 동기 동기는 작업을 순차적으로 처리하느 방식입니다. 즉, 한 작업이 끝날 때 차지 동기(Synchronous)는 작업을 순차적으로 처리하는 방식입니다. 즉, 한 작업이 끝날 때까지 다른 작업은 실행되지 않습니다. 이 방식은 코드가 간단하고 직관적이며, 작업의 순서가 중요한 경우에 유용합니다. 비동기 반면에, 비동기(Asynchronous)는 작업이 병렬로 처리되는 방식입니다. 한 작업이 실행 중일 때 다른 작업도 실행됩니다. 이 방식은 작업의 순서가 중요하지 않을 때 유용하며, 대부분의 경우 더 효율적입니다. 비동기 방식은 일반적으로 콜백(Callback), 프로미스(Promise) ..

오늘은 뮤직 리스트 부분을 추가하였습니다. 수정한 부분 const musicRepeat = musicWrap.querySelector("#control-repeat"); const musicListBtn = musicWrap.querySelector("#control-list"); const musicList = musicWrap.querySelector(".music__list"); const musicListUl = musicWrap.querySelector(".music__list ul"); const musicListClose = musicWrap.querySelector(".music__list h3 .close"); // 이전곡 듣기 const prevMusic = () => { musicIn..

오늘 은 오랜만에 코딩일기를 쓰려고 하는데요 참.... 머리가 아파오네요ㅋㅋㅋㅋㅋㅋ 오늘 아침에는 어제 수정했던 css고치면서 시작했습니다. https://codepen.io/shunyadezain/pen/GRNEyZW 이분이 올려주신 로봇이 너무 귀엿워서 제 홈페이지에 적용해봤는데요 운석이나 배경이 안되서 그대로 사용중이란게 아쉽지만 어찌저찌 사용하고 있습니다. 그렇게 수업이 시작되고 php게시판을 FTP에 올리는 작업을 하였습니다. DB에 테이블도 만들고 회원가입하여 올리는 작업까지 하였습니다. 그리고 관리자로 로그인하여 업로드 하는 것까지 하는것이 오전에 하였던 작업입니다. 장난으로 올린 '화를 다스리는 방법' 이게 제게 필요할 줄은 몰랐죠..... 바로 오후 조별작업때 디자인 작업한 로그인,회원가..

오늘은 게시판에 검색 시스템을 만들어 정리하려고 합니다. 코드

웹디자인 기능사를 시험 보기 위해서는 메뉴도 구현을 해야합니다 메뉴의 유형에는 3가지가 있는데 그중 2가지를 구현하고자 합니다. 메뉴유형1 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 메뉴3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 메뉴4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4

이제 곧 있으면 웹디자인 기능사 실기 접수입니당 연습한 유형을 정리하였는데요 일단 3가지만 정리하였습니다 A-2 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 메뉴3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 메뉴4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4 D-1 E-1 메뉴1 서브메뉴1-1 서브메뉴1-2 서브메뉴1-3 서브메뉴1-4 메뉴2 서브메뉴2-1 서브메뉴2-2 서브메뉴2-3 서브메뉴2-4 메뉴3 서브메뉴3-1 서브메뉴3-2 서브메뉴3-3 서브메뉴3-4 메뉴4 서브메뉴4-1 서브메뉴4-2 서브메뉴4-3 서브메뉴4-4

01. 다음 중 OSI 7 계층의 네트워크 계층에 해당하는 프로토콜을 모두 고르시오. HTTP, TCP, UDP, FTP, ICMP, IP, ATM, TELNET 답 : ip, icmp IP(Internet Protocol)가 가장 많이 사용됩니다. ICMP(Internet Control Message Protocol)는 네트워크 상태를 확인하고 오류를 보고하는 데 사용 ARP(Address Resolution Protocol)는 IP 주소를 물리적 MAC 주소로 변환하는 데 사용 02. 다음이 설명하는 용어를 작성하시오. 이것은 네트워로 연결된 두 호스트 사이에서 연결할 수 있는지 점검하는 진단도구이다. 이 명령을 실행하면 ICMP Echo 반향 패킷을 이용하여 원격 IP 주소에 송신하고 ICMP 응답..

01. 다음의 결괏값을 작성하시오. { let i = 0; let sum = 0; while(i < 10){ i = i+1; if( i % 4 == 0) sum -= i; if( i % 4 == 1) sum += i; if( i % 4 == 2) sum *= i } console.log(sum) } 답 : 190 02. 다음의 결괏값을 작성하시오. { let num = [10, 20, 30, 40, 50]; let i, max, min; max = min = num[0]; for(i=0; i max) max = num[i]; if(num[i] < min) min = num[i]; } console.log(max, min); } 답 : 50,10 03. 다음의 결괏값을 작성하시오. { function fu..