전체 글 59

[React] useReducer, useContext

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 useReducer, useContext를 사용한 프로젝트 정리 대해서 수강하고 내용을 정리한다. 목차 1. useReducer - 복잡한 상태변화 로직 분리 2. useContext - 컴포넌트 트리에 데이터 공급 useReducer - 복잡한 상태변화 로직 분리 simple-diary 프로젝트에서 App 컴포넌트에는 많은 상태변화 함수가 존재한다.(ex. getData, onCreate, onRemove 등) 복잡하고 긴 상태변화 로직을 컴포넌트 밖에 정의하여 컴포넌트 코드를 좀 더 단순히 만들 수 있다. // reducer 함수 // switch문을 통해 action.type을 확인하여 상태변화 처리 // re..

DEV/WebProgramming 2022.05.09

[React] 최적화

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 최적화 부분에 대해서 수강하고 내용을 정리한다. 목차 1. useMemo( ) - 연산 재사용하기 2. React.memo( ) - 컴포넌트 재사용하기 3. useCallback( ) - 함수 재상용하기 useMemo( ) - 연산 재사용하기 컴포넌트들을 작성하다 보면 한 번 연산한 이후 계산할 필요가 없을 때가 있다. 이때 연산 결과를 재사용하므로써 연산을 줄일 수 있다. 이를 Memoization이라 부르고 이는 프로그래밍 기법에 가깝다. 즉, Memoization은 계산 해둔 연산의 결과 값을 기억해 두었다가 동일한 계산을 시키면, 새로 연산하지 않고 결과 값을 반환시켜 연산을 줄이는 것이다. simple-da..

DEV/WebProgramming 2022.04.25

[Python] 데이터 전처리 파일 만들기

창의설계프로젝트를 진행하면서 딥러닝 학습을 위해 구축 데이터의 전처리가 필요했다. 구축 데이터는 Aihub의 "공사장 안전장비 인식 이미지" 데이터이고 원본 데이터 이미지파일과 라벨링데이터인 json 파일이 존재했다. 우리에게 필요한 데이터인 안전보호구와 이상행동과 관련된 데이터를 추려야 했다. 팀원들이 일일이 직접 처리하는 것 보다는 코드를 이용해 자동으로 하는 것이 효율적이라 생각해서 파인썬을 이용해 만들어보기로 했다. 목차 0. 아이디어 1. json 파일 접근 2. json 파일 읽어들이기 3. 파일 지우기 4. 진행상황 표시하기 5. 마무리 아이디어 구축데이터의 파일들이 라벨링 데이터에 클래스를 통해 구별되어 있었다. 따라서 해당 클래스를 찾아 필요한 클래스만 추리고 필요한 클래스를 포함하지 않..

DEV/Python 2022.04.10