Bleeding edge

onText, onBackground, onCircle 리액트에서는 on과 관련된 접두사 같은 경우 이벤트핸들러와 자주 사용되기 때문에 on을 시작하는 단어로 props를 사용하는 경우에는 에러를 만날 수 있다. on으로 시작하는 props는 이벤트만 사용하자 파일 경로 찾기 import를 사용할 때 “./filename.jsx”대신에 “./filename”과 같이 사용하고 싶은 경우, module: { rules: [ { test: /\\.(js)|(jsx)|(json)$/, resolve:{ fullySpecified:false, } }, ] }, commonJS를 사용하지 않는 한, fullySpecified: false를 사용해야한다. ESBuild에서 react 주입하기 리액트 18버전 같은 경..

직무 전문성 이 직무에 관심을 갖게된 계기 직무를 위해준비와 노력한 것 그것을 통해 어떤 핵심역량을 갖게 됬는가 어떤 사람이 되고자 하는지 왜 그 회사에 가고 싶은가 어떤 일을 하고 싶고 기여할 수 있는지 포트폴리오 직무 능력 평가 근거 포폴에 담을 내용 직무와의 연관성 대회 공모전 프로젝트 논문 코드기여 작성 툴 pdf, 노션, 깃허브 프로젝트 작성법 프로젝트 개요 프로젝트명 프로젝트 정의 기간, 인원, 주요스킬 기획의도 목적 목표 기대 효과 담당 역활 결과 및 성과 기여한점 문제 정의 및 해결 방안 문제 정의 문제 발생 배경 고민 해결방안 결과 배운점 개선안 활용방안 이력서 작성의 핵심 가독성 보기 쉽게 읽기 쉽게 들여쓰기 폰트크기 이모티콘 직무 연관성 핵심영량/강점 위주로 작성 중요도 순서로 배치 ..

1. UI를 컴포넌트 트리로 구성하기 컴포넌트 설계는 단한가지만을 책임을 져야한다. 한가지 이상의 처리가 필요하면 더 작은 컴포넌트로 구분해야한다. 2. react 앱 정적 빌드 데이터 모델에서 UI를 렌더링 하도록 작성해야 합니다. 데이터 모델은 정적 빌드를 하기 위해서는 컴포넌트를 재사용하고 props를 사용해 데이터를 전달하는 컴포넌트를 만들어야 합니다. 3. UI 데이터 UI와 사용자가 대화를 할 때는 state를 사용한다. state는 앱이 기억하고 변경해야 할 데이터의 최소 집합입니다. 이때 state는 중복 없이 최소로 표현하는 것이 가장 중요합니다. 4. 앱 상태관리 state의 데이터는 최소로 식별하고 변경을 해야하며, 단방향 흐름을 사용해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달..

풀이 흐름 초기 설정 가장 낮은 위치(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..