반복문을 사용하는 것보다 내장 메소드를 사용하는 것이 더 빠르다function solution(s) { let cnt = 0 // 변환 횟수 let zero = 0 //제거한 0 개수 while(s!=='1'){ let current = s.split('').filter(t => t==='0').length // 0의 개수 zero+=current s=s.replaceAll('0', '') // 0제거 let length = s.length // 0을 제거한 길이 s = length.toString(2) // 현재 길이를 2진 변환 cnt+=1 } return [cnt, zero];}
1. 이번주 과제이번 주는 저번에 했던 프로젝트에 Tanstack query를 적용하는 프로젝트를 진행했다일주일밖에 안 됐는데 고칠 점들이 눈에 보였다코드 보자마자 "왜 이렇게 짰지" 그래서 하루는 리팩토링하고 UI 짰고, 다음날부터 기능 구현을 시작했다"서버 상태 관리"라는 말 자체가 이해가 안 됐는데, 서버(외부)에서 가져오는 데이터를 서버 상태라고 하는 것이었다 (state 설정 필요없이 바로 쓰면됨) 아항 ㅇㅋㅇㅋ이제 tanstack query 감잡았으 개선 가보자고그러고 update 부분에 수정/삭제에서 약간 막혔는데, querykey를 아이템별로 개별 id를 줘야 다른 상태로 인식하는 것을 배웠다!보통 현업에서도 전체아이템에서 개별 아이템은 해당 id 값으로 개별 Key를 설정한다고 한다 j..
vercel에서 배포 후, 특정 링크로 이동하거나 새로고침을 할 때 404 Not Found가 뜨는 경우가 있다 vercel은 기본적으로 index.html 파일을 루트 디렉토리에서 찾는다이때, vercel이 번들링 프로세스를 시작지점을 찾는데 어려움을 겪을 때 발생한다 루트 디렉토리에 vercel.json 파일을 만들고, 아래 코드를 작성한다 이미 깃허브에서 배포한 경우, 파일을 만들고 푸시하면 적용된다! 1. routes 설정첫번째 방법은 먼저 filesystem의 경로를 확인하고,실제로 존재하는 파일들을 우선적으로 제공하고, 이외에 다른 모든 경로는 index.html로 리디렉션 하는 것이다{ "routes": [{ "handle": "filesystem" }, { "src": "/.*", ..
문제styled-components에서 highlight 속성으로 컬러를 구분하고 싶었다 먼저 Button은 재사용 컴포넌트이고, styled-components인 StButton을 사용한다 styled-components에서 prop을 전달할 때는 문자열로 전달했다 참고로 React는 컴포넌트에 전달된 props를 HTML 요소로 직접 전달한다이때, 비표준 속성(즉, HTML 표준 속성이 아닌 사용자 정의 속성)을 HTML 요소에 전달하면 경고가 발생하게 된다이는 React가 유효하지 않은 HTML을 렌더링하지 않도록 돕기 위해 발생한다 그런데 버튼의 컬러는 highlight 여부와 상관없이 항상 var(--second-color)가 지정되었다 해결 방법styled-components 지식이 부족..
controlled Component vs uncontrolled ComponentReact에서 form을 작성할 때 2가지 주요 패턴을 사용한다 먼저 react의 state와 통합된 controlled Component입력 요소를 react가 제어하고, 입력값을 상태로 유지한다 그리고 통합하지 않고, DOM에 의해 관리되는 uncontrolled Component useRef를 사용하여 DOM 요소의 값을 직접 접근하여 사용한다 controlled Component기본값은 react를 통해 결정되며, input의 value에 state를 넣어주면 된다그리고 변하는 값은 onChange에서 이벤트 핸들러를 통해 setState를 호출하여 항상 react 상태와 동기화된다import React, { use..
Redux-toolkit(RTK)는 Redux의 여러 단점을 보완한 전역 상태 관리 라이브러리이다특히 Redux의 3가지의 문제점을 해결했다너무 복잡하다잘 쓰려면 추가 패키지가 필요하다간단한 걸 쓰기 위해서도 많은 코드를 작성해야한다 → action type, action creator, reducer ..sliceslice는 reducer, action.type, action creator등을 한번에 만들 수 있는 redux 확장 개념이다 slice의 사용법을 3단계로 나누면 아래와 같다코드를 통해 단계를 살펴보자1. createSlice로 slice를 만든다2. slice 안에, 필수 요소인 initalState, name, reducers를 설정한다.3. reducer과 action.creator를..