꿈많은 DEVELOPER

🤷‍♂️ 본론에 앞서 중요한 배열 사전 지식 공부하기 "> HTML 삽입미리보기할 수 없는 소스 배열 reduce() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/259 HTML 삽입미리보기할 수 없는 소스배열 reduce() 함수 사용법에 대해 알아보기https://cometruedream.tistory.com/256 [자바스크립트] 배열(array) redu" data-og-host="cometruedream.tistory.com" data-og-source-url="https://cometruedream.tistory.com/259" data-og-url="https://cometruedream.tistory.com/259" data-og-image="h..

🤷‍♂️ 자바스크립트 내장 함수란?자바스크립트를 효율적으로 활용하려면 내장 함수를 잘 사용해야 합니다.내장 함수는 자바스크립트에서 미리 선언된 함수로, 호출만으로 사용할 수 있습니다.자바스크립트 언어를 사용한다면 기본적으로 제공하는 함수들을 활용해서 다양한 작업을 쉽고 효율적인 코드로 사용할 수있게 도와줍니다. javascript map() 함수 알아보자!https://cometruedream.tistory.com/7 javascript map() 함수 알아보자값이 여러개 있는 배열에서 모든 값을 꺼내는 방식은 다양하게 알려져 있습니다 대표적으로 for문,,,하지만 오늘은 map() 함수를 다뤄보도록 하겠습니다  vs코드를 여시고 let getStartedarr 배열에cometruedream.tisto..

🤷‍♂️ 본론에 들어가기 앞서 javascript 이벤트와 이벤트 핸들러의 이해 자바스크립트는 이벤트 기반에 프로그램이며 자용자 또는 브라우저가 페이지를 클릭하거나 action을 통해서 이벤트가 발생한다. 이를 활용해 웹 페이지 요소를 동적으로 변경할 수 있으므로 이벤트는 중요한 역할을 맡고 있습니다. 예를 들어 브라우저가 document 로딩을 완료하면 load 이벤트가 발생하고 사용자가 버튼을 클릭하면 click 이벤트가 발생합니다. 이벤트는 한 번, 여러 번 또는 전혀 발생하지 않을 수 있습니다. 특히 사용자가 임의 생성한 이벤트는 언제 발생하는지 모를 수도 있습니다. 이와 같은 시나리오에서 이벤트 발생을 감지하기 위해 이벤트 핸들러가 필요합니다. 이를 통해 이벤트가 발생하는 즉시 반응하도록 코드를..

50일차 첫번째 문제 문제: 제일 작은수 제거하기 난이도: 하 풀이 과정: 매개변수 arr를 Math.min 스프레드 구문으로 배열에 최소값을 찾아서 상수에 담고 매개변수 arr filter 메소드를 활용해서 최소값에 상수와 다른것들만 걸러내서 상수에 담는다. 배열에 값이 1개거나 이하라면 [-1]반환하고 아니면 filter로 걸러낸 배열에 값을 return 참고사항: Math.min() 최소값을 찾을수 있고 스프레드 구문으로 배열에 최소값을 찾는다. Math.max() 최대값을 찾을수 있다. filter 함수는 배열에 순회해서 값들을 필터할 수 있다. 삼항연산자 true = ? false = : https://school.programmers.co.kr/learn/courses/30/lessons/12..

49일차 첫번째 문제 문제: 직사각형 별찍기 난이도: 하 풀이 과정: row 3줄이며 a N개수 만큼 * 채워져야해서 repeat 함수로 문자열을 개수만큼 돌려서 셋팅하고 b개수만큼 for 문을 순회하며 값을 출력한다. 참고사항: repeat 함수는 문자열은 개수만큼 반복한다. 이 문제 로직은 게시판에서 별표 평점을 내는 기능이나 이런곳에서 활용할수 있는 로직으로 문제를 풀었다. https://school.programmers.co.kr/learn/courses/30/lessons/12969 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

47일차 첫번째 문제 문제: 부족한 금액 계산하기 난이도: 중하 풀이 과정: 매개변수 price, money, count 자연수로 넘어오고 count만큼 for문을 순회하고 result 변수에 price N배의 값을 축적한다. money 값이 result 값에 같거나 이상이면 반환할 값이 없기 때문에 0 아니라면 result값과 money값을 빼줘서 return한다. 참고사항: 삼항연산자는 조건 연산자로 가독성과 쉽게 조건문을 표현할 수 있다. https://school.programmers.co.kr/learn/courses/30/lessons/82612 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을..

47일차 첫번째 문제 문제: 없는 숫자 더하기 난이도: 중하 풀이 과정: 매개변수로 넘어오는 배열에 원소는 0~9 중 일부가 있어서 0~9 숫자가 담긴 배열을 하나 만들고 for문으로 순회하면서 매개변수 배열에 특정 숫자가 없으면 그 숫자를 result에 더해서 return 값을 반환 참고사항: let 블록스코프이며 재할당이 가능하다. includes 메소드는 특정 문자열을 찾는데 사용하면 특정문자열이 있으면 true 없으면 false 반환한다 https://school.programmers.co.kr/learn/courses/30/lessons/86051 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을..

46일차 첫번째 문제 문제: 같은 숫자는 싫어 난이도: 하 풀이 과정: 매개변수 arr 배열에 길이 만큼 for문을 순회하고 상수로 새로운 배열과 벼수로 prev 값을 정의하고 prev 값하고 순회하는 arr배열에 원소값하고 같지 않다면 새로운 배열 result 넣으면 중복되는 숫자를 넣지 않은 배열을 return 할수 있다. 참고사항: 순회하는 현재값과 이전값에 조건이 중요하다. https://school.programmers.co.kr/learn/courses/30/lessons/12906?language=javascript# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. progr..

41일차 첫번째 문제 문제: 배열 만들기6 난이도: 하 풀이 과정: 매개변수 arr에 원소들을 for문으로 순회를하고 새로운 배열 stk 마지막 값과 순회하는 arr 값이 같으면 stk배열에 마지막 값을 지우고 아니면 stk 배열에 arr 원소 값을 넣는다. for문을 순회하고 return값으로 빈배열이면 [-1] 값을 아니면 stk 값을 반환하면 된다. 참고사항: javascript 배열에 유용하게 사용가능한 함수 정리 .push(): 배열의 맨뒤에 값을 추가. .unshift(): 배열의 맨앞에 값을 추가. .pop(): 배열에 맨뒤 값을 제거 .shift(): 배열에 맨앞 값을 제거 https://school.programmers.co.kr/learn/courses/30/lessons/181859 ..

36일차 첫번째 문제 문제: 대소문자 바꿔서 출력 난이도: 하 풀이 과정: str 문자열 값을 split 함수로 배열로 만들고 map돌려서 javascript 알파벳 소대문자 메소드를 활용해서 값을 반환하고 join 함수로 문자열 반환 참고사항: javascript 알파벳 소대문자 메소드로 toUpperCase() (대문자) 와 toLowerCase() (소문자) 사용한다. https://school.programmers.co.kr/learn/courses/30/lessons/181949?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programme..

35일차 첫번째 문제 문제: OX퀴즈 난이도: 하 풀이 과정: 매개변수 quiz에 원소들을 for문을 돌려 순회하고 원소에 값들을 split하고 구조분해할당으로 if 조건문으로 값을 할당. 참고사항: 배열, 객체에 값들을 분해해서 값을 할당받을수 있는 표현식. https://school.programmers.co.kr/learn/courses/30/lessons/120907 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

28일차 첫번째 문제 문제: 외계어 사전 난이도: 하상 풀이 과정: 매개변수 spell에 배열에 원소가 dic 배열 원소에 조합되는 문자가 있는지 찾기 위해서 some 함수를 사용해서 조건에 만족이 되면 true를 반환 아니면 false로 반환해서 있으면 true 면 1 아니면 2로 결과값 출력. 참고사항: some 함수는 하나라도 조건에 만족이 되면 true를 반환 아니면 false로 반환 특이 사항으로 [...v].sort() === [...spell].sort() 비교를 하면 false 떨어진다 그 이유는 주소 값으로 비교를 해서 서로 다른 메모리 주소 값으로 저장하고 비교를 하기 때문에 값이 똑같아도 비교가 안된다. 해결하기 위해서 toString() 메소드로 문자열로 변환을 해서 비교를 하면 해..

27일차 첫번째 문제 문제: 영어가 싫어요 난이도: 하중 풀이 과정: 매개변수 numbers 맵핑할 수 있는 배열을 하나 만들고 배열에 index번호로 각각에 문자열에 맞는 숫자를 변환해준다. replace 함수로 문자를 숫자로 치환해서 반환 참고사항: replace 함수는 정규식 혹은 문자열을 치환해주는 함수다. replace 함수는 첫번째 인자는 치환할 문자를 넣고 2번째 인자는 value 혹은 함수를 받을수 있다. ex: "apple".replace("a", "") or "apple".replace("a", (v) => something) 알아두면 좋은 정규식 표현 * /searchvalue/ : '/ /' 사이에 검색할 문자를 입력 * searchvalue1 | searchvalue2 | .....

24일차 첫번째 문제 문제: 한번만 등장하는 문자 난이도: 하중 풀이 과정: 다양한 방법으로 한 번만 등장하는 문자를 찾을수 있지만 매개변수 문자열은 split 함수로 배열로 만들고 filter 함수로 순회하며 indexOf 와 lastIndexOf로 한번만 등장하는 문자를 찾아서 반환. 참고사항: indexOf, lastIndexOf 함수는 문자열안에 조건이 되는 문자열이 몇 번째 존재하는지를 확인하는 함수 lastIndexOf 함수는 동일한 역활을 하지만 뒤에서부터 몇전째 위치에 존재하는지를 확인해주는 함수이므로 한번만 등장하는 문자열은 index값이 똑같기 때문에 원하는 결과값을 얻을 수 있다. https://school.programmers.co.kr/learn/courses/30/lessons/..

23일차 첫번째 문제 문제: 가까운 수 난이도: 하중 풀이 과정: 매개변수 n 값에 가장 가까운 array 값을 찾기 위해서 배열을 sort로 정렬을 해주고 reduce로 순회를 하고 Math.abs 함수로 절대값을 만들어서 비교를해서 해당 값을 찾는다. 참고사항: array 배열에 더 적은 숫자를 출력하기 위해서는 배열을 sort함수로 정렬을 해줘야한다. math.abs를 활용해서 절대 값으로 변환 https://school.programmers.co.kr/learn/courses/30/lessons/120890 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co..

22일차 첫번째 문제 문제: k의 개수 난이도: 하중 풀이 과정: for문으로 j의 개수만큼 순회를 해서 j개수 만큼 값을 result에 문자열로 축적을 한다. split 함수를 활용해서 k값을 짜라서 배열로 만들고 -1 해주면 반환값을 받음 참고사항: split 함수를 짜르면 해당 개수에 +1이 된다. length -1을 주어야 한다. https://school.programmers.co.kr/learn/courses/30/lessons/120887 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

21일차 첫번째 문제 문제: 팩토리얼 난이도: 하중 풀이 과정: 2개의 값을 축적하기위해서 변수를 선언하고 while을 factorial 축적값을 n값만큼 값을 순회해서 조건에 만족하는 가장큰 수를 찾는다. 참고사항: 예로 1 * 2 * 3 * 4 * 5 * 6 * 7에서 2 * 3 = 6 이고 while 문에 factorial

20일차 첫번째 문제 문제: A로 B 만들기 난이도: 하 풀이 과정: 함수에 2개의 매개변수를 배열로 변환해서 sort() 메소드로 오름차순을 해주고 삼항연산자로 true일 경우 1 아닐경우 0을 반환 참고사항: sort() 메소드는 기본적으로 오름차순으로 배열 요소를 정렬해준다(default ). 배열에 List 값을 뿌려줄때 sort() 메소드를 활용해서 오름차순, 내림차순 정렬로도 활용할 수 있다. Array.from(arr), [...arr], arr.split("") 문자열을 배열로 만들수 있는 방법은 다양하다. https://school.programmers.co.kr/learn/courses/30/lessons/120886# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. ..

19일차 첫번째 문제 문제: 중복된 문자 제거 난이도: 하 풀이 과정: 매개변수에 문자열을 배열로 변환해서 new Set 객체로 중복을 제거 해주고 중복을 제거한 객체를 배열로 만들어서 join함수로 문자열로 변환 참고사항: javascript에서 Set 객체를 이용하면 순서를 보장받으며 중복없는 데이터를 표현할 수 있다. Set 객체의 이런 특징을 이용해서 배열의 중복을 제거할 수 있습니다. Set 객체로 반환. Spread Operator(전개연산자)를 사용하여 Set 객체를 다시 배열로 변환 개념, Array.from(), forEach문을 사용할 수도 있다. https://school.programmers.co.kr/learn/courses/30/lessons/120888 프로그래머스 코드 중심의..

17일차 첫번째 문제 문제: 외계행성 나이 난이도: 하 풀이 과정: age 자연수를 문자열로 만들어서(숫자를 바로 배열로 변환이 안됨) 배열로 만들고 map 함수로 알파벳에 해당 값을 찾아서 join함수로 문자열로 변환해서 나이를 반환 참고사항: toString() 숫자를 문자열로 반환, split 함수, map 함수, join 함수, alphabet 상수를 배열로 말고 문자열로 해도 인덱싱있어서 똑같은 결과값이 나온다. https://school.programmers.co.kr/learn/courses/30/lessons/120834 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. pr..

10일차 첫번째 문제 문제: 짝수 홀수 개수 난이도: 하 풀이 과정: 변수 2개들 만들고 배열에 순회를 돌면서 해당 값에 조건을 걸어서 결과값 출력 참고사항: for of 문에 개념, if문 개념 코딩테스트 연습 - 짝수 홀수 개수 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

9일차 첫번째 문제 문제: 피자 나눠 먹기 난이도: 하 풀이 과정: 자바스크립트 Math.ceil 내장함수를 사용 해서 가장 큰 정수 반환 참고사항: Math.ceil 내장함수 개념 https://school.programmers.co.kr/learn/courses/30/lessons/120814?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

8일차 첫번째 문제 문제: 중복된 숫자 개수 난이도: 하 풀이 과정: filter 함수를 활용해서 중복된 숫자의 개수를 찾을 수 있다. 참고사항: filter 개념 필요 코딩테스트 연습 - 중복된 숫자 개수 | 프로그래머스 스쿨 (programmers.co.kr) 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

7일차 첫번째 문제 문제: 키 큰 사람 난이도: 하 풀이 과정: for문, filter 중에 넘어오는 매개변수 height로 키 큰 사람을 찾을 수 있다. 참고사항: for문, javascript 내장함수 filter 개념 필요 https://school.programmers.co.kr/learn/courses/30/lessons/120585?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

6일차 첫번째 문제 문제: 배열의 평균값 난이도: 하 풀이 과정: 배열에 매개변수를 reduce 함수를 활용해서 총 값을 더하고 배열에 전체 만큰 나눠서 평균값을 구한다. 참고사항: Reduce 개념이 필요하다. parseFloat 함수는 문자열 실수를 숫자로 변환해주는 함수라서 없어도 상관은 없다. https://school.programmers.co.kr/learn/courses/30/lessons/120817?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr

5일차 첫번째 문제 문제: 짝수의 합 난이도: 하 풀이 과정: 정수의 개수만큼 배열로 변환 javascript 내장 함수filter, reduce 활용해서 값 구함 참고사항: Array.from, Filter, Reduce 개념이 필요하다. https://school.programmers.co.kr/learn/courses/30/lessons/120831

랜덤으로 배열에 데이터를 변경시켜 데이터를 변경하는 경우에 Math.random() & Math.floor 사용해서 구현했다. 이 기능뿐만 아니라 가격, 숫자등등 다양하게 값을 구하는데 활용성이 좋은 함수다. Github Source ☝ 구현 소스를 보실수 있습니다. https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascript Contribute to yoogukhyeon/vanilla_javascript development by creating an account on GitHub. github.com 1. quotes 배열에 데이터를 만들어준다. 2. quoteFun 함수를 선언한다. 3. 보여줄 t..

다양한 사이트에서 버튼을 클릭하면 텍스트를 복사해서 copy할 수 있는 기능을 사용한다. 복사기능을 구현하는데는 execCommand API를 사용하거나 clipboard API를 사용하는 두 가지 방법이 있다.* clipboard API 최신 스펙으로 지원하지 않는 브라우저가 많습니다.  저는 execCommand API를 활용해서 클릭시 복사기능을 구현했다.  Github Source ☝ 구현 소스를 보실수 있습니다.https://github.com/yoogukhyeon/vanilla_javascript GitHub - yoogukhyeon/vanilla_javascriptContribute to yoogukhyeon/vanilla_javascript development by creating an ..

반응형 웹, 혹은 웹앱을 만드는 요소에서 가장 중요한 CSS 미디어 쿼리가 있고 속성중에 min-width, max-width를 이용해서 모바일 부터 pc에 조건에 맞춰 UI를 처리할수 있습니다. min-width - 즉 1000px 이상인 경우에 적용되는 코드 @media (min-width: 1000px) { body { background: gold; } } max-width - 즉 1000px 이하인 경우에 적용되는 코드 @media (max-width: 1000px) { body { background: gold; } } min-width를 사용하는 경우 스마트폰등 모바일 사이즈에서의 레이아웃을 기본으로 점차 pc사이즈로 확장되어가는 형태에 적합 max-width를 사용하는경우 pc에서 모바일로..

목표 REST의 개념 이해 REST의 특징 이해 REST API의 개념을 이해 REST API의 설계 규칙을 이해 RESTful의 개념을 이해한다 REST의 개념 REST란 REST의 정의 "Representational State Transfer"의 약자 자원을 표현하여 해당 자원의 상태를 주고 받는 모든것을 의미 즉 자원(resource)의 표현(representation)에 의한 상태 전달 월드 와이드 웹(www)과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍처의 한 형식 REST는 기본적으로 웹의 기존 기술과 HTTP프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일이다. REST는 네트워크 상에서 Client와 Server사이의 통신 방식 중 하..