라즈베리파이 이용한 자율주행 프로젝트

이번 학기 IoT시스템 설계 및 실습 수업에서 라즈베리 파이를 이용한 자율주행 프로젝트를 진행하였다. 사실 수업 초반에는 아두이노라던가 라즈베리파이에 대해서 무지한 상태였다. 따라서 초반엔 흥미롭지 않았지만, 자율주행 프로젝트를 진행하며 모델을 학습시키고 주행해보고 하는 과정에서 흥미를 느껴 한학기간 진행한 프로젝트를 블로그에 정리해보고자 한다. 해당 글은 라즈베리파이를 이용한 자율주행 자동차 제작이고, 학습 데이터 수집과 딥러닝 모델 학습에 중점을 두었다. 자율주행 자동차란? 자율주행 자동차란, 운전자 또는 승객의 조작 없이 자동차 스스로 운행이 가능한 자동차를 말한다. 정의에서 알 수 있듯이, 인간의 삶에 편리함을 주는 운전 장치라고 볼 수 있지만, 자율 주행 학습 과정에서 양질의 데이터가 주어지지 ..

• format_list_bulleted 자율주행
• · 2023. 6. 21.
• textsms

react-query

- 몇 초마다 자동으로 데이터 다시 가져오기 - 요청 실패 시 몇 초 간격으로 재시도 - 다음 페이지 미리 가져오기 - ajax 성공 / 실패 시 각각 다른 화면 보여주기 ajax 요청하다가 보면 위와같은 기능들 필요하다 react-query 사용하면 더욱 편리하다 실시간 데이터 보여주어야 하는 사이트들에서 유용 react-query 설치 세팅 터미널에 npm install react-query 작성 index.js 파일에서 import { QueryClient, QueryClientProvider } from "react-query" //1번 const queryClient = new QueryClient() //2번 const root = ReactDOM.createRoot(document.getEl..

• format_list_bulleted React
• · 2023. 3. 9.
• textsms

Redux

Redux 는 props 없이 state 를 공유할 수 있게 도와주는 라이브러리이다. Redux 설치하면 js 파일 하나에 state 들을 보관할 수 있는데, 모든 컴포넌트들이 직접 꺼내서 사용할 수 있다. 따라서 귀찮은 props 전송이 필요가 없어진다. Redux 설치하기 npm install @reduxjs/toolkit react-redux 터미널에 입력해주면 설치된다. redux toolkit 은 redux 의 개선버전이라고 생각하면 된다. ( 문법이 좀 쉬워진 ) 설치 전 pakage.json 파일에서 "react", "react-dom" 항목의 버전이 18.1 이상인 것을 확인하자 Redux 세팅 import { configureStore } from '@reduxjs/toolkit' exp..

• format_list_bulleted React
• · 2023. 3. 7.
• textsms

Context API

App 에 있던 state 를 손자 컴포넌트에서 사용하고 싶다면 어떻게 할까? props 를 하위로 2번 전송해주어야한다. 하지만 이런 과정은 귀찮기 때문에 Context API 문법이나 Redux 같은 외부 라이브러리를 사용한다. Context API 문법으로 props 없이 state 공유하기 재고라는 state 를 App 컴포넌트에 만들고 이 state 를 TabContent 라는 자식컴포넌트에서 쓰고 싶을 때 Context API 문법을 사용하면 props 전송 없이도 손자 컴포넌트에서 사용할 수 있다. (App.js) export let Context1 = React.createContext(); function App(){ let [재고, 재고변경] = useState([10, 11, 12])..

• format_list_bulleted React
• · 2023. 3. 7.
• textsms

Ajax 요청

서버란? 유저가 데이터 요청하면 유저에게 데이터 보내주는 프로그램이다. 서버에 데이터 요청할 때는 정확한 규칙에 맞춰 요청해야하는데 1. 어떤 데이터인지 (URL 형식) 2. 어떤 방법으로 요청 (GET or POST) 두 가지 잘 지켜서 데이터 보내야한다. 데이터를 가져올 때는 GET 요청하고, 데이터를 서버로 보낼 땐 POST 요청을 한다. 어떤 데이터를 가져오고 싶은지 URL 잘 작성해주면 된다. GET / POST 요청하는 법 GET 요청하는 가장 쉬운 방법은 브라우저 주소창 이용하는 것이다. 주소창에 URL 적으면 그 URL로 GET 요청을 보내준다. POST 요청할 땐 태그 이용하면 된다. 그러면 폼이 전송되었을 때 POST 요청 보내준다. 그런데 GET, POST 요청하면 단점이 브라우저가 ..

• format_list_bulleted React
• · 2023. 3. 7.
• textsms

Lifecycle 과 useEffect

컴포넌트의 Lifecycle 을 배우는 이유는 componentDidMount() 등 유용한 Lifecycle 함수들을 쓰기 위해서이다. 요즘은 간편한 useEffect() 라는 react hook 을 많이 사용한다. 컴포넌트의 Lifecycle 컴포넌트는 1. 생성 될 수도 있고 (mount) 2. 재렌더링 될 수도 있고 (update) 3. 삭제될 수도 있다. (unmount) 컴포넌트의 lifecycle 을 배우는 이유는 컴포넌트 lifecycle 중간중간에 간섭할 수 있기 때문이다. 컴포넌트가 장착될 때 특정 코드를 실행할 수도 있고, 컴포넌트 업데이트 될 때 특정 코드를 실행할 수도 있다. 이러한 방법으로 여러 기능들을 개발할 수 있다. 예전 React 에서 Lifecycle Hook 쓰는 법 ..

• format_list_bulleted React
• · 2023. 2. 26.
• textsms