analogcoding

prerender 의 주요 장점은 각 페이지의 핵심 내용을 크롤러가 얻을 수 있다는 것 뿐만 아니라 브라우저는 JS 파일이 렌더링을 시작하기 위해로드 될 때까지 기다릴 필요가 없으므로 SEO 뿐만 아니라 성능상의 이점도 존재한다. 1 SSR 을 사용하지 않고 SEO 최적화 적용 react-helmet 과 react-snap 사용 react-helmet https://www.npmjs.com/package/react-helmet react-helmet A document head manager for React www.npmjs.com spa 에서 각 route 마다 html head 를 설정할 수 있게 도와준다. import React from "react"; import { Helmet } from "..

svg 파일을 추가하면 element 형태로 나타나는데 이를 컴포넌트화해서 사용하는 방법이다. const Logo = ({ color = "#080405", width = 80, height = 120 }: LogoProps) => ( ... 원하는 색상과 크기에 맞춰 사용할 수 있게 컴포넌트화해서 사용. 크기는 style 속성으로 컨트롤하고 색상은 path 부분에 fill 에 적용.

babel-plugin-module-resolver 플러그인 추가 babel.config.js 해당 플러그인 추가 후 alias 에 별칭 : 주소 형태로 저장 plugins: [ [ 'module-resolver', { root: ['.'], alias: { '~': './src', '~buttons': '.src/components/buttons', }, }, ], ], tsconfig 에 baseUrl 과 paths 추가 "baseUrl": "./src" "paths": { "~/*": ["./*"], "~buttons/*": ["components/buttons/*"] },

# error Failed to build iOS project. We ran “xcodebuild” command but it exited with error code 65 stackoverflow 어지간한 거 다 해봤지만 실패 후 ㄴ 같은 이름으로 새 프로젝트 생성 후 ios 폴더 삭제 후 해당 프로젝트에 ios 폴더를 추가 이 후 pod install 로 해결

웹팩 + 타입스크립트 + 리액트 + 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 }]], ..

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

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