Lo9

웹 프로그래밍시 VSCode를 사용하면서 코드 작성시 유용한 확장 프로그램을 정리한다. 목차 1. Auto Close Tag 2. Auto Rename Tag 3. Live Server 4. ES7 + React / Redux / React-Native snippets(React 관련 snippets) 5. Material Icon Theme 6. Prettier - Code formatte Auto Close Tag 앞의 태그를 작성하면 자동적으로 태그를 닫아주는 기능 Auto Rename Tag 앞의 태그를 수정하면 닫히는 태그 또한 같이 수정하는 기능 Live Server html파일 코드에서 우클릭 후 "Open with Live Server" 클릭하게 되면 로컬 아이피로 html 파일이 작동하는..

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 Page Routing에 대해 내용을 정리한다. 목차 1. Page Routing 이란 2. React Router Dom v6 사용하기 3. React Router Dom v6의 유용한 기능 Page Routing 이란 Routing이란 - 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 - 이때 데이터 경로를 Route, 데이터 경로를 실시간으로 지정해주는 역할은 Router 라고 함 Page Routing이란 - Browser에서 웹서버에 경로에 대한 요청을 보내고 웹 서버가 보내는 문서를 받아보는 과정 - 즉, 요청에 따라 어떤 데이터를 돌려줄지 결정하는 과정 - Page Routing은..

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

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

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