DOM 요소의 스타일 변경 1) className Product Name 60/60 Submit input.warning { background-color: rgb(248, 191, 145); } #remaining-chars.warning { color:rgb(211, 109, 26); } const spanElement = document.getElementById('remaining-chars'); spanElement.className = 'warning'; element.className('some-class')로 해당 요소에 클래스명을 추가할 수 있다. className으로 css 클래스 추가할 때의 단점 : 이미 클래스를 가지고 있는 요소의 경우, 해당 클래스가 새로운 클래스로 덮어씌어진다...
Event 유저가 사이트의 특정 부분에 입력, 클릭, 스크롤 하는 등의 행동을 의미한다. 자바스크립트를 사용하면 이벤트를 탐지하여 특정 코드를 실행하도록 할 수 있다. 웹의 경우 이벤트는 브라우저 윈도우 내에서 발생되는데, 다음와 같은 다양한 이벤트 타입들이 있다. 유저가 어떤 요소를 선택하거나 어떤 요소 위에 커서를 올려둔다(hover). 유저가 키보드에서 키를 선택한다. 유저가 브라우저 창의 크기를 재조정하거나 닫는다. 웹 페이지가 로딩을 완료했다. 양식(form)이 제출되었다. 비디오가 재생되거나, 멈추거나, 혹은 끝났다. 오류가 발생했다. 이벤트리스너의 콜백함수 let paragraphElement = document.body.firstElementChild; function changeParag..
전역 window & document 객체 Built-in Variables & Functions 전역 변수로 코드 내에서 항상 사용할 수 있는 변수 window 객체 전역 객체 window 전역 객체는 웹 브라우저 환경에서 전역으로 사용 가능한 객체를 나타낸다. 모든 전역 변수와 함수는 실제로 이 window 객체의 프로퍼티로 존재한다. window 객체의 프로퍼티와 메서드. 함수 기호 f가 표시된 것이 메서드이고 그렇지 않은 것은 프로퍼티이다. window 객체에 내장된 프로퍼티와 메서드들은 window. 없이도 액세스할 수 있다. alert 메서드의 경우 window.alert()로도 사용할 수 있지만 그냥 alert()으로도 실행할 수 있는 것처럼 말이다. 윈도우와 브라우저 탭 윈도우는 웹 브라우..
프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 구슬을 나누는 경우의 수 1) ❓ 문제 설명 머쓱이는 구슬을 친구들에게 나누어주려고 합니다. 구슬은 모두 다르게 생겼습니다. 머쓱이가 갖고 있는 구슬의 개수 balls와 친구들에게 나누어 줄 구슬 개수 share이 매개변수로 주어질 때, balls개의 구슬 중 share개의 구슬을 고르는 가능한 모든 경우의 수를 return 하는 solution 함수를 완성해주세요. 2) 🚫 제한 사항 1 ≤ balls ≤ 30 1 ≤ share ≤ 30 구슬을 고르는 순서는 고려하지 않습니다. share ≤ balls 3) ✅ 입출력 예 balls share result 3 2 3 5 3 10 입출력 예 #1 서로 다른 구슬 3개 중 ..
프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 특정 문자열로 끝나는 가장 긴 부분 문자열 찾기 1) ❓ 문제 설명 문자열 myString과 pat가 주어집니다. myString의 부분 문자열중 pat로 끝나는 가장 긴 부분 문자열을 찾아서 return 하는 solution 함수를 완성해 주세요. 2) 🚫 제한 사항 5 ≤ myString ≤ 20 1 ≤ pat ≤ 5 pat은 반드시 myString의 부분 문자열로 주어집니다. myString과 pat에 등장하는 알파벳은 대문자와 소문자를 구분합니다. 3) ✅ 입출력 예 myString pat result "AbCdEFG" "dE" "AbCdE" "AAAAaaaa" "a" "AAAAaaaa" 2. 사용한 메서드: sl..
프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 부족한 금액 계산하기 1) ❓ 문제 설명 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요. 2) 🚫 제한 사항 놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수 처음..
프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 특수문자 출력하기 1) ❓ 문제 설명 다음과 같이 출력하도록 코드를 작성해 주세요. 2) ✅ 입출력 예 !@#$%^&*(\'"?:; 2. 이스케이프 문자 이스케이프 문자란 이스케이프 시퀀스를 따르는 문자들로서, 다음 문자가 특수문자임을 알리기 위해 사용하며 백슬래시(\)를 사용한다. 1) 자바스크립트에서의 특수 문자 특수문자 설명 \n 줄 바꿈 \r 캐리지 리턴(carriage return). Windows에선 캐리지 리턴과 줄 바꿈 특수 문자를 조합(\r\n)해 줄을 바꿉니다. 캐리지 리턴을 단독으론 사용하는 경우는 없습니다. \', \" 따옴표 \\ 역슬래시 \t 탭 \b, \f, \v 각각 백스페이스(Backspac..
프로그래머스 알고리즘 풀이 사용 언어 - 자바스크립트 JavaScript JS 1. 리스트 자르기 1) ❓ 문제 설명 정수 n과 정수 3개가 담긴 리스트 slicer 그리고 정수 여러 개가 담긴 리스트 num_list가 주어집니다. slicer에 담긴 정수를 차례대로 a, b, c라고 할 때, n에 따라 다음과 같이 num_list를 슬라이싱 하려고 합니다. n = 1 : num_list의 0번 인덱스부터 b번 인덱스까지 n = 2 : num_list의 a번 인덱스부터 마지막 인덱스까지 n = 3 : num_list의 a번 인덱스부터 b번 인덱스까지 n = 4 : num_list의 a번 인덱스부터 b번 인덱스까지 c 간격으로 올바르게 슬라이싱한 리스트를 return하도록 solution 함수를 완성해주세..
맨날 쓰면서도 이름이 비슷해서 그런가 저 세 메서드가 정리가 안되고 헷갈려서 이 참에 한번 시원하게 정리해보자~! 1. slice Array.prototype.slice() 또는 String.prototype.slice() `slice()` 메서드는 문자열 또는 배열에서 특정 범위의 요소들을 복사하여 새로운 문자열 또는 배열을 반환한다. Array // 예제 출처: MDN web docs - Array.prototype.slice() const animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; console.log(animals.slice(2)); // Expected output: Array ["camel", "duck", "elephant"] con..
1. Redux란? 상태관리 라이브러리, 중앙 state 관리소를 사용할 수 있도록 도와주는 패키지 컴포넌트 간에 state 데이터들을 부모-자식 관계로 설정하여 props를 통해 한정적으로 전달하지 않고, 중앙에서 관리하여 어떤 컴포넌트에서든 쉽게 접근하고 제어할 수 있도록 해준다. 1) Redux의 흐름 View에서 액션이 일어난다. dispatch에서 action이 일어나게 된다. action에 의한 reducer함수가 실행되기 전에 middleware가 작동한다. middleware에서 명령내린 일을 수행하고 난 뒤, reducer함수를 실행한다. reducer의 실행결과 store에 새로운 값을 저장한다. store의 state에 subscribe하고 있던 UI에 변경된 값을 준다. 2) Pro..
