개발일지

바닐라 자바스크립트의 함정 중요한 언어 확장이나 프레임워크 없이 순수 자바스크립트 만을 사용하는 것을 ‘바닐라’ 라고 부른다. 바닐라 자바스크립트의 모든 약점은 프로젝트 규모가 커지고 장기화 될수록 더욱 드러난다. 값 비싼 자유 자바스크립트는 사실상 코드를 구성하는 방법에 제한이 없다. 그러나 파일이 점점 늘어날수록 그 자유가 좋지 않게 다가올 수 있다. 다른 언어는 컴파일러가 충돌할 수 있다고 판단하면 코드 실행을 거부할 수 있다. 하지만, 자바스크립트처럼 충돌 가능성을 먼저 확인하지 않고 코드를 실행하는 동적 타입 언어는 그렇지 않다. 결국 코드의 자유는 자바스크립트를 재밌게 만들기도 하지만, 내가 짠 코드를 안전하게 실행하려고 할 떄는 상당한 고통이 따를 수 있다. 부족한 문서 자바스크립트 언어 사..

자바스크립트 자주 볼 수 있는 this 키워드에 대해서 알아보자 에서 this 키워드를 출력해보면 window{...} 라는 것이 출력된다. 또한 일반 함수 내에서 this 키워드를 출력해보면 function f(){ console.log(this); } f(); 여기서 Window 란 무엇일까? Window 란? Window 는 모든 전역변수, 함수, DOM 을 보관하고 관리하는 전역 객체이다. 우리가 흔히 사용하는 document.getElementById(), alert(), console.log() 이러한 함수들을 보관하는 보관소이다. 이 보관소는 하나의 큰 {오브젝트} 라고 생각하면 된다. 또한 코드를 짜며 전역변수들을 만들었을 때도 이 변수들을 window에 보관해준다. strict mode ..

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

- 몇 초마다 자동으로 데이터 다시 가져오기 - 요청 실패 시 몇 초 간격으로 재시도 - 다음 페이지 미리 가져오기 - 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..

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..

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])..

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

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

navigate, nested routes, outlet 을 사용하기 위해선 상단에 먼저 import 해준다. import { Routes, Route, Link, useNavigate, Outlet } from 'react-router-dom' 페이지 이동기능 useNavigate() 페이지 이동을 할 때 Link 를 사용해도 되지만, useNavigate() 사용하면 더 편리하다. function App(){ let navigate = useNavigate() return ( (생략) { navigate('/detail') }}>이동버튼 ) } useNavigate() 사용하면 유용한 함수들을 사용할 수 있는데, 페이지 이동 기능을 사용할 수 있다. navigate('/detail') 사용하면 /de..

리액트에서 페이지를 나누고 싶을 때, 일반 html, css, js 사이트는 그냥 html 파일을 여러 개 만들면 된다. 하지만 리액트는 html 파일을 하나만 사용한다. 따라서 사용자가 페이지 요청하면 내부에 있는 를 갈아치워서 보여주어야한다. 하지만 직접 코드 짜는 것은 비효율적이므로 react-router-dom 이라는 외부 라이브러리를 설치해서 구현하는 것이 일반적이다. react-router-dom 설치 터미널에 npm install react-router-dom@6 입력하여 설치 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById('root')); root..