analogcoding

이름을 바꾸려는 로컬 지점으로 이동 git checkout 다음을 입력하여 로컬 지점의 이름을 변경한다. git branch -m 로컬 브랜치를 푸시하고 업스트림 브랜치를 재설정한다. git push origin -u 원격 브랜치를 삭제한다. git push origin --delete

코로나 현황판 크롤링 client import React, { useEffect, useState } from "react"; import axios from "axios"; const App = () => { const [data, setData] = useState(null); useEffect(() => { const getData = async () => { const datas = await axios.get("http://localhost:4000/"); setData(datas.data); }; getData(); }, []); useEffect(() => { console.log(data); }, [data]); if (data === null) { return Load..; } else ..

axios 요청을 사용하면서 생긴 불편함을 해결해주는 메소드 정리. 아래 적힌 일들을 해결하기 위해 axios 에서 제공해주는 interceptors / defaults 를 적용. 매번 axios 요청할때마다 URL 을 고정적으로 설정한다. axios 요청을 할 때 마다 헤더를 고정적으로 설정해 놓는다. 에러가 발생했을때 공통 alert 를 띄운다. 요청 고정 URL 설정 const YOUR_URL = '' axios.defaults.baseURL = YOUR_URL 로그인 이후에 모든 요청에 토큰을 보내는 설정 axios.defaults.headers.common["Authorization"] = ${localStorage.getItem("token")}; 인터셉터는 요청 직전 혹은 응답을 받고 the..

로봇 엔지니어분과 비전처리 엔지니어 분과 소통할 일이 생겼습니다. 카메라가 읽은 값을 프론트엔드 단에 전달하고 프론트에서 입력 받은 값을 로봇으로 전달하는 실시간 통신을 구현해야 했습니다. python 기반 백엔드와 socket.io 를 이용해 통신했지만 소켓 통신을 제대로 사용해본 적이 없어서 헤매이다가 ROS 통신을 하자는 말이 나와 example 코드를 참조하며 구현했습니다. socket.io -> ROSLIB 으로 변경 통신 부분 소스 코드 // GET useEffect(() => { const ROSConnect = () => { try { ros.on("connection", () => { console.log("Connected to websocket server."); ROSGet(ros)..

원하는 리액트 환경으로 프로젝트 npm i react-naver-maps react-naver-maps 을 설치 naver 클라우드 플랫폼에서 받은 api key 를 입력 import React from "react"; import { RenderAfterNavermapsLoaded, NaverMap, Marker } from "react-naver-maps"; export const NaverAPIMap = (props) => { const NAVER_API_KEY = process.env.REACT_APP_NAVER_MAP_API_KEY; return ( {props.address !== null ? props.test.map((ele, idx) => { return ( { alert('hello')..

Type 을 선언하고 여러 파일에서 import 해서 사용할 때 ESlint error 발생 문제는 typescript-eslint/no-unused-vars 가 단순히 태그 types와 interfaces(파일에서 가져 오거나 정의 된) 태그 가 사용하더라도 사용되지 않는 것으로 표시한다는 것이였는데 해당 링크를 참조하여 해결 https://github.com/typescript-eslint/typescript-eslint/issues/46 Improve documentation for `typescript/no-unused-vars` · Issue #46 · typescript-eslint/typescript-eslint There are several use cases typescript/no-un..

본기사는 Why We Switched to React Hooks 을 번역한 기사입니다. import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const App = () => { return ( ); }; const Timer = () => { const [seconds, setSeconds] = useState(0); useEffect(() => { const interval = setInterval(() => { setSeconds(seconds + 1); }, 1000); return () => clearInterval(interval); }, [seconds]..

본기사는 8 reasons to use styled-components (FEBRUARY 28, 2019 Prisma) 을 번역한 기사입니다. 요약 : 이 기사에서는 styled-components 의 다양한 이점으로 CSS-in-JS 프레임워크로 채택하는 것을 고려해야 하는 이유를 살펴보겠습니다. styled-components 란 무엇일까요? styled-coponents 는 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS 의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공하는 CSS-in-JS 스타일링을 위한 프레임워크입니다. 본질적으로, styled-coponents 는 styled-components 라이브러리를 사용하여 리액트 컴포넌트를 쉽게 만들 수 있으며 Javascript 코드 내..