Bleeding edge

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

강제로 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..

Webpack, Babel Webpack pack : 묶음 Web에 올려진 것을 묶음으로 묶어주는 것 Babel 바벨탑이 언어 때문에 고난이었던 바벨탑을 연상하면, 바벨은 트렌스 파일러라는걸 알 수 있다 둘의 관계? 정확히는 Webpack으로 하나의 묶음으로 만들 때, Babel을 이용하여 버전이 낮은 브라우저도 호환이 되도록 만들어 준다 사용해야하는 이유? 요번에 이력서를 제출하면서 느낀 것인데 프로젝트가 웹팩을 이용하면 폴더와 파일이 상당히 깔끔하게 정리될 수 있다. 지금 이력서에 있난 파일중 어떤 파일 같은경우 한개의 파일에 모든 코드가 모여있는데, 필요한 적재적소에 적절한 파일들을 넣고 webpack으로 묶은 뒤에, dist폴더(배포 폴더)에 필요한 것만 만들고 정리하는 것이 깔끔하다. 툴체인이 ..