문제 설명 1부터 13까지의 수에서, 1은 1, 10, 11, 12, 13 이렇게 총 6번 등장합니다. 정수 i, j, k가 매개변수로 주어질 때, i부터 j까지 k가 몇 번 등장하는지 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ i
study
keyboard.js 리팩토링 리팩토링 전 #assignElement() { this.#switchEl = document.getElementById("switch"); this.#fontSelectEl = document.getElementById("font"); } 리팩토링 후 #assignElement() { // document단이 아닌 container단에서 요소를 찾음으로 비용이 절감됨 this.#containerEl = document.getElementById("container"); this.#switchEl = this.#containerEl.querySelector("#switch"); this.#fontSelectEl = this.#containerEl.querySelector("#..
1. 상태 관리 1) 전역 상태 관리 상태 : 변하는 데이터. UI에 동적으로 표현될 데이터를 말함. Side Effect : 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인. ex) 네트워크 요청, API 호출... 컴포넌트는 Side Effect를 최대한 배제하고 만들어야함. 입력이 가짜 데이터(fake data)라도 표현할 수 있어야 한다. => presentaion component 하지만 로딩중인 상태처럼 side effect에 의존적인 상태가 있을 수 있다. 애플리케이션을 만들때는 이러한 상황을 모두 고려해야함. (1) 리액트로 앱을 설계하는 방식 https://ko.reactjs.org/docs/thinking-in-react.html React로 사고하기 – React..
보호되어 있는 글입니다.
가상 키보드에 기본모드 / 다크모드를 적용해 주기 위해서 html 태그에 theme 라는 커스텀 속성을 지정해주었다. theme의 값이 빈 문자열이면 기본 모드, dark-mode이면 다크모드를 적용해 줄 것이다. 코드로 나타내면 아래와 같다고 할 수 있다. 그리고 다음은 css에서 다크모드가 실행될때 적용될 부분을 작성해주었다. 기본모드에서 다크모드가 되면 흰색이 검은색이 되는 등 색상 반전이 일어나게 된다. 이것을 설정해주기 위해 css의 filter 속성을 사용한다. filter 속성은 주로 흐림 효과, 색상 변형 등 그래픽 효과를 요소에 적용할때 사용한다. 이미지나 배경, 테두리의 렌더링을 조정할 수 있다. html[theme="dark-mode"] { filter: invert(100%) hue..
const div = document.querySelector('div') const p = document.querySelector('P') const span = document.querySelector('span') div.addEventListener('click', () => console.log('div click')) p.addEventListener('click', () => console.log('p click')) span.addEventListener('click', () => console.log('span click')) 이러한 코드가 있다고 가정했을때, div와 p와 span을 각각 클릭했을때의 결과는 어떨까? 처음 코드만 보고 생각했을때는 아마 결과는 이렇게 될것이라고 생각했다..
문제 설명 정수 배열 array와 정수 n이 매개변수로 주어질 때, array에 들어있는 정수 중 n과 가장 가까운 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ array의 길이 ≤ 100 1 ≤ array의 원소 ≤ 100 1 ≤ n ≤ 100 가장 가까운 수가 여러 개일 경우 더 작은 수를 return 합니다. 입출력 예 array n result [3, 10, 28] 20 28 [10, 11, 12] 13 12 입출력 예 설명 입출력 예 #1 3, 10, 28 중 20과 가장 가까운 수는 28입니다. 입출력 예 #2 10, 11, 12 중 13과 가장 가까운 수는 12입니다. function solution(array, n) { let sorted = array.s..
문제 설명 정수 배열 num_list와 정수 n이 매개변수로 주어집니다. num_list를 다음 설명과 같이 2차원 배열로 바꿔 return하도록 solution 함수를 완성해주세요. num_list가 [1, 2, 3, 4, 5, 6, 7, 8] 로 길이가 8이고 n이 2이므로 num_list를 2 * 4 배열로 다음과 같이 변경합니다. 2차원으로 바꿀 때에는 num_list의 원소들을 앞에서부터 n개씩 나눠 2차원 배열로 변경합니다. num_list n result [1, 2, 3, 4, 5, 6, 7, 8] 2 [[1, 2], [3, 4], [5, 6], [7, 8]] 제한사항 num_list의 길이는 n의 배 수개입니다. 0 ≤ num_list의 길이 ≤ 150 2 ≤ n
🧱 구현 이미지 html 구조 html의 전체적인 구조는 다음과 같다. container : 요소들 전체를 감싸는 가장 큰 div menu switch : 다크모드 / 라이트모드를 전환하는 토글 스위치. select-box : 폰트를 전환할 수 있는 셀렉트 박스 input-group input : autocomplete="off"(자동완성 끄기 설정) error-message : 한글이 입력되면 나타날 에러 메시지 keyboard row : 키보드의 각 줄 key : 각인이 하나인 타입과 각인이 2개인 타입이 있음. 각인 2개는 span 2개로 구성됨 css구조 display : flex; 아이템들의 정렬을 위해서 사용하였다. keyboard에서 보면 row가 flex-box 가 되고 key들이 flex..
📚 구현할 내용 웹팩을 활용한 개발 환경 설정 ES Lint, Pritter 설정 HTML, CSS로 키보드 레이아웃 제작 다크모드 폰트 변경 물리적으로 키보드 입력시 가상키보드에도 동일하게 나타나는 이벤트 적용 특수키 제외 한글 입력시 에러 메시지 출력 마우스로 가상키보드 클릭시 실제로 글자가 입력되는 이벤트 적용 특수키 제외 🧱사용 툴 webpack 💜 개발환경 설정 1. package.json 생성 npm init -y 2. 웹팩 패키지 설치 npm i -D webpack webpack-cli webpack-dev-server npm i -D 패키지이름 => devDependencies에 패키지를 설치하겠다. devDependencies는 로컬 개발이나 테스트에 필요한 패키지를 말함. 만약 -D를 ..
