Bleeding edge

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폴더(배포 폴더)에 필요한 것만 만들고 정리하는 것이 깔끔하다. 툴체인이 ..

툴체인 Git git init npm npx add-gitignore osx windows node visualstudiocode npm init -y initial file mkdir public&&touch public/index.html mkdir src/utils && touch src/main.js &&touch src/utils/index.js browserslistrc > 0.5% in KR last 2 versions not dead ie 11 webpack touch webpack && touch webpack/common.js touch webpack/dev.js&&touch webpack/prod.js touch webpack/server.js //webpack/common.js im..

리액터의 라우터의 원리 : CSR (Client Side Rendering) 현재의 URL에 맞는 페이지를 렌더링 페이지의 리로드 없이 다른 페이지 이동 사용자의 페이지 이동을 감지하고 처리 가능 라우팅을 사용할 위치의 최상단에는 가 감싸고 있어야 한다. 는를 렌더링 할 때 props로 history 객체를 전달하는데, 이 객체는 history 패키지의 createBrowserHistory() 함수를 호출함으로써 생성된다. 마운트되는 순간에 props로 전달 받은 history 객체의 프로퍼티인 location 객체를 자신의 지역 상태로 저장한다. 그리고 props로 전달받은 history객체를 구독하고, 현재 URL이 변경될 때마다 자신의 지역 상태에 해당하는 location이 새로운 location으..

오늘 문제를 풀다가 queue를 구현해야 풀 수 있는 문제를 만났다. 평소에 queue라는 것을 생각하면, FIFO에 대해서만 생각하고 생각을 끝냈던 것 같다. 먼저 들어가면 먼저 나온다. 그래서 오늘 백준에서 문제를 풀이할 때 queue의 구현성을 먼저 생각하지 못했던 것 같다. queue 언제 쓸까? 아니, queue의 특징을 조금 더 나열하는게 좋을 것 같다. FIFO search bigO(n) insert bigO(1) delete bigO(1) 탐색이 적고, enqueue dequeue가 많은 경우에 사용하기 좋다. 이전에 스택 문제를 풀 때 스택을 구현하여도 불편하지 않았던 이유는 배열을 이용하여 pop을 이용하여도 손쉽게 풀리며 배열을 사용하면, search도 1, pop도 1 push도 1..