문제 설명 문자열 my_string이 매개변수로 주어집니다. my_string은 소문자, 대문자, 자연수로만 구성되어있습니다. my_string안의 자연수들의 합을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 1,000 1 ≤ my_string 안의 자연수 ≤ 1000 연속된 수는 하나의 숫자로 간주합니다. 000123과 같이 0이 선행하는 경우는 없습니다. 문자열에 자연수가 없는 경우 0을 return 해주세요. 입출력 예 my_string result "aAb1B2cC34oOp" 37 "1a2b3c4d123Z" 133 입출력 예 설명 입출력 예 #1 "aAb1B2cC34oOp"안의 자연수는 1, 2, 34 입니다. 따라서 1 + 2 + 34 = ..
study
오늘의 강의에서는 다음과 이전 버튼의 이벤트를 걸어주기로 했다. 슬라이더의 전체적인 스크립트는 ImageSlider.js 파일을 생성한 뒤, class를 작성하기로 했다. class ImageSlider { #currentPosition = 0; // 현재 슬라이더의 위치 #slideNumber = 0; // 슬라이드의 개수 #slideWidth = 0; // 슬라이드의 너비 sliderWrapEl; sliderListEl; nextBtnEl; previousBtnEl; // class에서 인스턴스가 만들어질때 실행되도록 넣어줌 constructor() {} // element 담아둠 assignElement() { this.sliderWrapEl = document.getElementById('slid..
React와 HTML 사이에는 다르게 작동하는 몇가지 어트리뷰트들이 있다. 그래서 오늘은 다음 내용을 정리해보려고 한다. 1. className CSS class를 사용할때 React에서는 className으로 작성한다. // HTML HTML // React 2. htmlFor label 태그와 input 태그를 연결해줄때 HTML에서는 for 속성을 사용한다. 하지만 React에서는 for가 JavaScript 예약어이기때문에 htmlFor를 대신 사용한다. 전체선택 3. dangerouslySetInnerHTML 브라우저에서 innerHTML을 사용하기 위한 React의 대체 방법이다. 일반적으로 코드에서 HTML을 설정하는 것은 공격에 쉽게 노출될수있기 때문에 위험하다. 따라서 설정해줄수는 있지만..
리덕스 미들웨어 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업을 할 수 있다. 주로 비동기 작업을 처리할때 사용한다. 예시) 특정 조건에 따라 액션 무시하기 액션을 콘솔에 출력하거나 서버쪽에 로깅하기 액션이 디스패치 되었을때 이를 수정해서 리듀서에게 전달되게 하기 특정 액션이 발생했을 때 이에 기반해 다른 액션이 발생하게 하기 특정 액션이 발생했을 때 특정 자바스크립트 함수 실행하기 미들웨어 만들어보고 이해하기 1) 리덕스 미들웨어의 템플릿 리덕스 미들웨어를 만들때에는 다음과 같은 형태의 템플릿을 사용한다. const middleware = store => next => action => { // 하고싶은 작업... } // 화살표가 여러개지만 function..
보호되어 있는 글입니다.
문제 설명 문자열 s가 매개변수로 주어집니다. s에서 한 번만 등장하는 문자를 사전 순으로 정렬한 문자열을 return 하도록 solution 함수를 완성해보세요. 한 번만 등장하는 문자가 없을 경우 빈 문자열을 return 합니다. 제한사항 0 a > b ? 1 : -1); let result = ''; for (let i = 0; i < sorted.length; i++) { if (!result.includes(sorted[i]) && sorted[i] !== sorted[i+1] && sorted[i-1] !== sorted[i]) { result += sorted[i] } } return result; } https://school.programmers.co.kr/learn/courses/30/..
위의 이미지가 슬라이드로 사용될 기본 구조이다. 좌우의 버튼과 오른쪽 하단의 일시 정지, 재생 버튼의 아이콘을 사용하기 위해서 폰트어썸 패키지를 설치해준다. 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 상태가 변경되어야 하는..
