analogcoding

리액트 훅스에서 side effect 로 라이프사이클을 조정할 수 있다. 리액트 훅스에서 기존 생명주기 메소드 (componentDidMount, componentDidUpdate, componentWillUnmount 등의 이펙트를 함수형 컴포넌트에서 사용하는 것에 대해 다시 한 번 정리한다. componentDidMount => 컴포넌트가 마운트 될 때 한 번 실행된다. useEffect(() => { // Your code here }, []); 두 번째 매개 변수로 빈 배열을 주면 어떤 값을 감지할 때 렌더되는 것을 막기 때문에 처음 한 번만 실행된다. 두 번째 매개 변수없이 useEffect 사용 시 모든 렌더에서 호출되므로 주의. useEffect(() => { // Your code here..

스토리북을 통한 리액트 컴포넌트 도큐멘팅 (출저 : https://medium.com/@emmabostian/documenting-react-components-with-storybook-6c83abe7cb29 ) 스토리 북이란? 스토리 북은 UI 컴포넌트를 위한 놀이터로 시장을 주도하고 있으며 주요 내용은 "스토리 작성"입니다. 스토리 북은 스토리 개념을 사용하여 구성 요소를 문서화합니다. 일반적으로 스토리에는 시각적 테스트 사례와 같은 단일 컴포넌트의 상태가 포함됩니다. 기술적으로 스토리는 화면에 렌더링 할 수있는 것을 반환하는 함수입니다. 컴포넌트 스토리 북에는 다양한 컴포넌트에 대한 다양한 스토리가 포함됩니다. 우리가 작성하는 각 스토리에는 다음과 같은 단일 상태가 포함됩니다. Storybook의..

웹팩 + 타입스크립트 + 리액트 + styled components 로 진행 중인 프로젝트에 storybook 도입을 시도했다. 참고문서 Ts+storybook px -p @storybook/cli sb init 스토리북 설치 .storybook/webpack.config.js 생성된 스토리북 폴더에 webpack module 추가 module.exports = ({ config, mode }) => { config.module.rules.push({ test: /\.(ts|tsx)$/, use: [ { loader: require.resolve("babel-loader"), options: { presets: [["react-app", { flow: false, typescript: true }]], ..

React 앱을 S3 에 Github Action 으로 배포하기. (출저 : https://medium.com/trackstack/deploying-a-react-app-to-aws-s3-with-github-actions-b1cb9ba75c95 ) Github Actions는 버전 관리 외에 프로젝트 관리 측면을 열어 놓은 Github 의 비교적 새로운 기능입니다. 이러한 기능 중 하나는 작년에 이미 혼잡한 시장에 도입 된 CI / CD (Continuous Deployment)입니다. 그러나 이 기능에서 볼 수 있는 주요 이점은 모든 배포 요구를 처리하는 단일 서비스입니다. 이 게시물에서는 Github Actions로 기본 연속 배포 파이프 라인을 설정하여 React 앱을 AWS S3에 배포하는 단계..

이름을 바꾸려는 로컬 지점으로 이동 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)..