choi95의 TIL📝

Tabs 동적 생성 위와 같이 Tabs-Content를 만들 때 각 Tab의 너비는 200px로 일정하고 박스 내에 들어가는 Tab은 가변적이다.즉, CSS 상에서 Width의 값을 정적으로 주게 되면 정적인 Tabs를 만들지 못한다. 이를 위해 다음과 같은 단계를 걸쳐 전체 가로 너비가 받아 온 데이터에 따라 동적으로 결정되는 Tab을 구현하였다. 사용자 지정 속성(CSS 변수, 종속 변수) 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 제작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고,(--main-color: black;) var() 함수를 사용해 접근할 수 있습니다. (color: var(--main-color);)..

문제 학급 회장을 뽑는데 후보로 기호 A, B, C, D, E 후보가 등록을 하였습니다.투표용지에는 반 학생들이 자기가 선택한 후보의 기호(알파벳)가 쓰여져 있으며 선생님은 그 기호를 발표하고 있습니다.선생님의 발표가 끝난 후 어떤 기호의 후보가 회장이 되었는지 출력하는 프로그램을 작성하세요.반드시 한 명의 학급회장이 선출되로록 투표결과가 나왔다고 가정합니다. 문제 풀이 객체에 각 후보의 기호를 각 프로퍼티로 저장하였고 각 후보키가 지명 된 값을 Value(0)로 초기화 해주었다.해당 문자열을 순회하며 문자열 내 후보 기호(x) 문자를 키(Key)값으로, 앞선 객체의 프로퍼티에 접근하여 지명 된 값을 증가시켜 주었다. 코드 function solution(str) { let answer; let max ..

문제 현수의 아빠는 제과점을 운영합니다. 현수 아빠는 현수에게 N일 동안의 매출기록을 주고 연속된 k일 동안의 최대 매출액이 얼마인지구하라고 했습니다.만약 N=10이고 10일 간의 매출 기록이 아래와 같습니다. 이때 K=3이면 12 15 11 20 25 10 20 19 13 15 연속된 3일간의 최대 매출액은 56만원(11+20+25) 입니다. 문제풀이 K일 동안의 최대 매출액을 구하는 것이기 때문에 투포인터 lt와 rt가 각각 참조하고 있는 인덱스 간에 차이의 값(0일~k일까지)이 K가 될 경우 현재 최대 매출액을 비교해 주었다. K값이 되었을 때 포인터 rt를 더 이동시켜도 K일을 넘어서 최대 매출액을 구하는 것은 문제의 요구 사항과 부합되지 않기 때문에 K값보다 작아지도록 포인터 lt를 이동시켜 준..

함수 메모리이제이션 useCallback()은 함수를 메모리제이션(memorization)하기 위해서 사용되는 hook 함수이다. 첫 번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있다. const memoizedCallback = useCallback(callbackFunc, []); useCallback을 사용하지 않고, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다면 이 함수는 해당 컴포넌트가 랜더링될 때마다 자바스크립트의 특성 상 새로운 함수를 생성한다. 자바스크립트 객체의 참조값 비교_함수 동등성 func1 = () => x + y; func2 = () => x + y; console.log(func1 === func2) /..

기존 코드 https://choi95.tistory.com/65 stopwatch Question 위와 같이 작동하는 스톱워치를 구현하시오 주요 Solution_stopwatch 시간 구현 미리초_ms마다(0~99미리초는 100분의 1초 => 100) setInterval() 함수 내에서 콜백 함수를 실행한다. 해당 콜백 함수를.. choi95.tistory.com 이전 stopwatch를 구현할 때 기록한 LapTime을 화면 상에 랜더링하기 위해서 다음과 같이 코드로 구현하였다. $laps.style.display = 'grid'; let newLap = document.createElement("div"); newLap.setAttribute("class", "laps"); newLap.style...

Question 위와 같이 작동하는 스톱워치를 구현하시오 주요 Solution_stopwatch 시간 구현 미리초_ms마다(0~99미리초는 100분의 1초 => 100) setInterval() 함수 내에서 콜백 함수를 실행한다. 해당 콜백 함수를 실행할 때마다 currentTime(현재 시간) 값을 가져오고 가져온 currentTime 값에서 startTime(현재 시간)을 감산해주면 스톱워치의 Start 버튼을 누르고(시작 시간) 그 뒤로부터 ms 당 얼마나 시간이 흘렀는지 알 수 있다. 스톱워치에 표시되는 시간(ms 당) = currentTime - startTime 하지만 현재 스톱워치 표시되는 모든 시간을 다음 연산을 사용하여 구하게 되면 다음과 같은 문제가 발생한다. 초기 Start 버튼을 클..

문제 N개의 수로 이루어진 수열이 주어집니다.이 수열에서 연속부분수열의 합이 특정숫자 M이하가 되는 경우가 몇 번 있는지 구하는 프로그램을 작성하세요.만약 N=5, M=5이고 수열이 다음과 같다면 1 3 1 2 3 합이 5이하가 되는 연속부분수열은 {1}, {3}, {1}, {2}, {3}, {1, 3}, {3, 1}, {1, 2} , {2, 3}, {1, 3, 1}로 총 10가지 입니다. 문제풀이 투포인터 lt와 rt를 이용하여 조건에 부합한 연속부분수열의 합을 구하고자 한다. 연속부분수열의 합이 M의 값과 같거나 클 때까지 포인터 rt를 이동시켜 주며 연속부분수열의 합이 M의 값보다 커질 경우에는해당 연속부분수열의 합이 M의 값보다 작아질 때까지(M이하가 되는 경우이기 때문이다) lt를 이동시켜 주며..

문제 N개의 수로 이루어진 수열이 주어집니다.이 수열에서 연속부분수열의 합이 특정숫자 M이 되는 경우가 몇 번 있는지 구하는 프로그램을 작성하세요.만약 N=8, M=6이고 수열이 다음과 같다면 1 2 1 3 1 1 1 2 합이 6이 되는 연속부분수열은 {2,1,3},{1,3,1,1},{3,1,1,1}로 총 3가지 입니다. 문제풀이 해당 배열에서 연속부분수열의 합을 구하기 위해서는 두 개의 인덱스가 포인터로서 순회 및 참조해야 하기 때문에중첩 반복문을 사용하였다. 첫 번째 인덱스를 이용한 순회는 연속부분수열에서의 첫 번째로 기준이 되는 요소를 참조해야 한다.이때 연속부분수열의 합을 구해야 하기 때문에 첫 번째 기준이 되는 요소는 최초의 합산이 끝나면 그 다음 인덱스 요소를 참조해야 한다. 두 번째 인덱스를..