Bleeding edge

풀이 흐름 초기 설정 가장 낮은 위치(lowest)와 가장 높은 위치(highest)가 있을 때(배열의 index를 많이 사용한다) 그 위치의 중간 위치(mid, Math.floor((lowest + highest)/2)를 구한다 중간점 이동 [1] 목표의 위치보다 중간점이 크다면, 가장 낮은 위치를 중간점으로 바꾼다. lowest = mid [2] 목표의 위치보다 중간점이 작다면, 가장 높은 위치를 중간점으로 바꾼다 highest = mid [3] 목표의 위치와 중간점이 같다면 return 합니다. 1~2를 반복한다 흐름과 조건 기억하기 이분 탐색 문제를 풀면서 가장 기억 안났던 것은 1~2를 반복하는 조건이다. 이분 탐색에서의 반복(정지)조건은 가장 낮은 점과 가장 높은점이 교차할 때이다.

리팩토링 기간 2022.10.31 - 2022.11.13 리팩토링을 시작하게 된 계기 얼마 전에 완성한 플로팅 브라우저와 백준의 폴더구조를 비교하였다. 플로팅 브라우저는 기능 별로 파일을 분리하였지만, 백준의 폴더구조는 main.js 단 한개의 파일로 자바스크립트를 가지고 있기 때문에 파일을 수정하기 힘들었다. 그래서 깃허브에서 스타가 많은 크롬 익스텐션을 검색하여 파일을 어떻게 관리하는지 검색하였다. 크롬 익스텐션의 파일 관리 다른 크롬 익스텐션에서는 필요한 manifest.json, styles.css, main.js가 root 폴더에 있는 것이 아니라 src를 기준으로 웹팩 번들링을 하였다. 그리고 필요한 파일을 컴포넌트 별로 분리하여 관리하였다. 리팩토링 목표 및 계획 리액트를 이용하여 컴포넌트 ..

강제로 git push 하는 방법 npx degit yamoo9/zero-base#side-effects/begin . 리액트 사이드 이펙트 네트워크 통신 (비동기 통신 요청/응답) DOM 컨트롤 (실제 문서 객체 접근/조작) 구독/취소 (예: 이벤트 핸들링 등) 오류 감지 (예: ErrorBoundary 컴포넌트 등) 포탈은 리액트의 능력이 아니라 리액트 돔의 역활이다. tab key를 가두는 방법 element.addEventlistener('keydown', (e) =>{ e.preventDefault() }) 텝을 눌렀을때 다른 keypress나 keyup은 아무런 영향을 안미치고 keydown만 탭으로 눌렀을 때 영향이 간다 리액트 라이프 사이클

라이프사이틀 리스트안에 고유한 id값을 넣는 것이 좋은 이유는 리스트를 섞을 때 순서가 이상하게 바뀔수도있다. shouldComponentUpdate ⇒오직 성능 최적화만을 위한 것이다. 참조 값이 다르지만 값이 같다면 새로 렌더가 안되도록 막아주는 역활을 한다. shouldComponentUpdate(nextProps, nextState){ if(this.props.data===nextProps.data_{ return false } return true } render(){} getSnapshotBeforeUpdate(prevProps, prevState){ console.log('update DOM, repainting / reflow UI') //리페인트, 리플로우가 발생하는 이전 시점 //san..

Hook Hook은 함수의 컴포넌트에서, 리액트의 상태와 라이프 사이클을 연결하는 함수를 말합니다. ⇒ 함수의 컴포넌트 라는 것은 클래스에는 Hook이라는 개념이 없다는 것을 의미한다 State Hook useState는 함수형 컴포넌트에서 상태값을 관리하게 해준다. 초기 값을 파라미터로 받는다. useState를 이용하여 get함수, set함수를 받는다. 상태값이 변할 때 마다 렌더가 된다. Effect Hook useEffect는 모든 렌더에서 실행된다. 받는 파라미터에 의존해서, 실행된다. 따라서 적절한 array를 넣지 않는다면 불필요하게 많이 실행된다. Effect Hook을 한번만 실행한다면 class의 mount처럼 사용할 수 있다. Hook 사용시 주의사항 함수 안에서 사용한다 상단 레벨에..

지금 다룰 내용은 전반적인 Jest가 아니라 DOM에서의 Jest에 대한 간단한 element확인 방법에 대해 다룰 것이다. Jest에 대한 예시를 공부하기 전에 몇 가지 제스트의 메소드에 대해 메모하려고 한다. 1. describe 여러개의 테스트 코드를 묶을 때 사용한다. describe("A11yHidden 컴포넌트", () => { test("A11yHidden 컴포넌트는 정상적으로 렌더링됩니다.", () => { render(테스트); const element = screen.getByText(/테스트/); expect(element).toBeInTheDocument(); }); test("span", () => { render(); const element = screen.getByTestId..

1. 분할정복 백준의 색종이 만들기와 같이 조건에 성립하면, 조건에 맞게 분할하여 풀이하는 문제에 일정한 패턴이 있었다. 문제를 한번이라도 풀어봤으면 간단하게 풀 수 있는 문제였지만, 안풀었을 때는 생각이 생각보다 많이 걸렸었던 문제라 정리를 하려고 한다. const something=() =>{} const isIt=() =>{} const recur =(size,x,y)=>{ for(let i=0;i

{error ? "A" : null} => {error && "A"} if {error ===null || error==undefined} console.log('error') => error&& console.log('error') error?.(log) dynamic import import (".../api/db.json").then( something => console.log(something)) webpack을 쓰면 const db = require('../api/db.json') 과같이 사용할 수 있다. const navigation:{item :list} = db 툴체인은 로더, 패키지, 미니마이저를 분류로 추가해야할 것을 추가하는 연습을 해야하며, package.json에서 필요한 명령어..

Typescript config setting { "compilerOptions": { "target": "es2015", "module": "NodeNext", "moduleResolution": "node", //jsx를 사용하려면 필수로사용해야한다 "jsx": "react-jsx", "jsxImportSource": "react", "baseUrl": "./src", "typeRoots": ["node_modules/@types", "./src/types"], "allowJs": true, "noEmit": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "forceConsistentCasingInFileNames": tru..