analogcoding

웹팩이란 ? 웹팩은 웹에서 사용되는 모든 자원(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..

blob은 Binary Large Object의 약자로 주로 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체들을 의미합니다. 요청에 대한 error 를 alert 로 message 를 띄워주게 해놓았는데 반응이 없었다. 해당 요청이 성공하면 blob 형식에 file/zip을 받아와서 다운로드 하게 하는데 빈 값을 보내면 error 를 띄워주어야 하는 상황이지만 제대로 동작하지 않아서 찾던 와중 같은 이슈를 발견 https://github.com/axios/axios/issues/815 Error Response for blob type · Issue #815 · axios/axios Hi, When the responseType is blob, the error response is converted..

React 프로젝트를 간단하게 배포할 수 있는 Netlify 를 사용해보았다. 1. 먼저 배포할 프로젝트를 Github 에 올려준다. 2. Netlify 에서 회원가입을 진행한다. https://www.netlify.com/ Netlify: All-in-one platform for automating modern web projects Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free. www.netlify.com 3. Sites 에서 배포할 레파지토리와 브랜치를 설정한다. 4. deploy sett..