분류 전체보기

위의 이미지가 슬라이드로 사용될 기본 구조이다. 좌우의 버튼과 오른쪽 하단의 일시 정지, 재생 버튼의 아이콘을 사용하기 위해서 폰트어썸 패키지를 설치해준다. https://fontawesome.com/ Font Awesome The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 폰트어썸을 사용하는 방법에는 여러가지가 있지만 이번에는 npm을 통해 설치하기로 했다. 아래의 명령어를 작성해서 패키지를 설치해준다. npm install --save @fortawesome/fontawesome..

프로젝트 개요 이번 프로젝트는 이미지 슬라이드를 만드는 프로젝트이다. 개발환경은 지난 프로젝트와 마찬가지로 웹팩 개발환경이 셋팅될 것이다. 레이아웃은 HTML과 CSS를 사용해서 구성될 것이다. 대략적인 구조는 다음과 같다. 슬라이드 next, prev 버튼 인디케이터 자동재생 버튼 슬라이드는 이미지가 들어갈 부분이다. next와 prev 버튼은 클릭하게 되면 이미지가 각각 오른쪽-왼쪽, 왼쪽-오른쪽으로 이동해 현재 나타나는 슬라이드를 변경할 수 있게 한다. 인디케이터는 게시판의 페이지네이션과 같다. 각각의 인디케이터를 클릭하게 되면 해당하는 이미지 슬라이드로 이동하게 된다. 예를 들어 5번째 인디케이터를 클릭하면 내가 어느 이미지를 보고 있더라도 5번째 이미지로 이동하게 된다. 마지막으로 자동재생 버튼..

마우스 이벤트도 키보드와 마찬가지로 특수키를 제외하고 키가 클릭되었을때 이벤트가 발생하도록 해야한다. 키가 클릭되었을때 active 클래스를 추가해 요소의 색상이 변해야 하고, input에도 값이 들어가야한다. 키보드와 마찬가지로 모든 각각의 key 요소에 이벤트 핸들러를 할당하는 것이 아니라 요소를 모두 감싸고 있는 키보드 엘리먼트에서 이벤트 핸들러를 작성한다. 즉, 이벤트 위임을 사용하는 것이다. 마우스 클릭시 효과 주기 #addEvent() { // ... this.#keyboardEl.addEventListener( "mousedown", this.#onMouseDown.bind(this) ); document.addEventListener("mouseup", this.#onMouseUp.bind..

1. Redux Redux는 자바스크립트 상태관리 라이브러리이다. React뿐만 아니라 Augular, jQuery, vanilla JavaScript 등 다양한 프레임워크와 함께 작동할수있도록 설계되었다. https://ko.redux.js.org/introduction/getting-started/ Redux 시작하기 | Redux 소개 > 시작하기: Redux를 배우고 사용하기 위한 자료 ko.redux.js.org 1) Redux 설치하기 Redux를 사용하기 위해서는 redux, react-redux를 설치해야한다. npm install redux react-redux; 2) Redux가 상태를 관리하는 순서 Action ➡ Dispatch ➡ Reducer ➡ Store 상태가 변경되어야 하는..

문제 설명 1부터 13까지의 수에서, 1은 1, 10, 11, 12, 13 이렇게 총 6번 등장합니다. 정수 i, j, k가 매개변수로 주어질 때, i부터 j까지 k가 몇 번 등장하는지 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ i

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을 각각 클릭했을때의 결과는 어떨까? 처음 코드만 보고 생각했을때는 아마 결과는 이렇게 될것이라고 생각했다..