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

ComponentDidMount 컴포넌트가 만들어지고 render가 호출된 이후에 호출되는 메소드. ( example : fetch or TImer ) // Class class Example extends React.Component { componentDidMount() { ... } } // Hook const Example = () => { useEffect(() => { ... }, []); } ComponentWillUnmount React 엘리먼트를 실제 DOM 노드에 추가하기 직전에 호출되는 메소드. DOM이 생성되지 않았으므로 DOM을 조작할 수 없고, render가 호출되기 전이기 때문에 setState를 사용해도 render가 호출하지 않음. // Class class Example ..

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 로 해결

스토리북을 통한 리액트 컴포넌트 도큐멘팅 (출저 : 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에 배포하는 단계..