analogcoding

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

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

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에 배포하는 단계..

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

본기사는 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 코드 내..

웹팩이란 ? 웹팩은 웹에서 사용되는 모든 자원(assets)을 번들링 해주는 도구입니다. ( 번들링이란 ? : 여러개의 파일 중에 종속성이 존재하는 파일을 하나의 파일로 묶어 패키징을 시키는 과정 ) 즉 웹팩은 프로젝트 파일을 분석해서 자바스크립트 모듈과 관련 리소스들을 찾아 브라우저에서 이용할 수 있는 번들로 묶어서 패킹하는 모듈 번들러(Module bundler)입니다. 등장배경 여러 파일을 로딩하면 네트워크 비용이 증가하고 반응속도가 느려지게 됩니다. 또한 각 파일의 변수가 충돌할 위험이 존재합니다. 시작하기 먼저 프로젝트를 시작할 파일을 생성합니다. mkdir webpack-practice 관련 package 설치를 위해 프로젝트에서 package.json 를 생성합니다. npm init -y 브..

파일을 업로드 하거나 다운로드 하는 상황에서 유저에게 해당 load status 를 보여주기 위한 기능을 구현하게 되었습니다. 텍스트가 아닌 데이터 크기가 큰 파일을 유저가 업로드 , 다운 받을 수 있는 상황일 때로 가정합니다. 요청에 대한 대기 시간을 indicator 로 표시해주는데 스피너와 로딩바 두 가지를 사용해서 구현해보겠습니다. axios 요청과 Material UI 컴포넌트를 사용하겠습니다. https://material-ui.com/api/circular-progress/ CircularProgress API - Material-UI The API documentation of the CircularProgress React component. Learn more about the prop..