일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- github pdf
- Git
- camera permission
- augmentedDevice
- rolldown
- nextjs
- animation
- pnpm
- custom printing
- camera access
- device in use
- Can't resolve
- Each child in a list should have a unique "key" prop.
- Failed to compiled
- react-native-dotenv
- electron-packager
- ffi-napi
- vercel git lfs
- 티스토리 성능
- ELECTRON
- silent printing
- Recoil
- adb connect
- github 100mb
- adb pair
- html
- 이미지 데이터 타입
- dvh
- github lfs
- react-native
- Today
- Total
목록전체 글 (330)
Bleeding edge
useLayoutEffect ? getSnapshotBeforeUpdate와 비슷한 역활로 useLayoutEffect 이후에 useEffect 순으로 일어나며, 렌더가 일어나기 전에 이벤트가 발생한다 The default value of useState useState는 primitive 값을 이용하는 것이 좋다. 물론, 객체 상태를 이용 못하는 것은 아니다. 만일, 객체 상태의 값을 이용한다. 합성 형태를 다음과 같이 이용하는 것이 좋다 setState({...state, newState}) useEffect useEffect를 이용하여 상태의 변동을 인지하는 것으로 실행을 보장받을 수 있다. class React와 function React에서의 라이프 사이클 상태의 변동을 인지하는것을 보장 받는 ..
What is Story Story는 컴포넌트가 UI에 렌더링 된 상태를 캡처하고, 인자(args)가 주어지면 컴포넌트 상태를 반환하는 함수입니다. Story Process Story는 컴포넌트 파일이 위치한 디렉토리 안에 작성합니다. 이 파일은 개발용이며 프로덕션 번들에는 포함되지 않습니다. Story를 구성할 컴포넌트를 작성한 후, 컴포넌트 파일과 같은 위치에 Story 파일을 추가합니다. Editable Config title Storybook 사이드 바에 표시되는 컴포넌트 이름 component Story를 작성할 컴포넌트 작성 args 모든 Story에 공통 적용할 전달 인자 설정 argTypes 각 Story 인자의 행동 방식 설정 decorators Story를 감싸는 렌더링 함수 param..
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..