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

본기사는 Top 5 Reasons to Use GraphQL (MARCH 20, 2018 Prisma) 을 번역한 기사입니다. GraphQL은 API 개발의 새로운 표준이 되어가고 있습니다. 이 기사에서 그 이유를 알아보겠습니다. 불과 2년 6개월 만에 그래프QL은 API 개발의 선두로 올라왔습니다. 이 글에서는 개발자가 GraphQL을 좋아하는 이유를 설명하고 빠르게 채택된 주된 이유를 공개합니다. 1. graphQL API 는 강력한 스키마 타입을 가지고 있습니다. 대부분의 API 에 가장 큰 문제 중 하나는 운영 방식에 대한 강한 약속이 없다는 것입니다. 많은 개발자들은 API가 지원하는 작업과 사용 방법을 알 수있는 적절한 방법이 부족해서 더 이상 사용되지 않는 API 문서로 작업해야하는 상황에 ..

Component ****** React 컴포넌트를 작성할 때 컴포넌트 이름은 대문자로 시작해야 합니다. Class VS Functional Functional React 에서 컴포넌트를 정의하는 가장 간단한 방법은 javascript 의 함수 형식으로 정의하는 것입니다. state 나 lifecycle 이 없는 일반 JavaScript 함수이므로 읽기 및 테스트 하기가 수월합니다. 기본적으로는 state , lifecycle 등 의 기능을 사용할 수 없습니다. ( 위 기능들을 Functional 에서 사용할 수 있도록 Hook 등장! ) functional Component Example function Welcome(props) { return Hello, {props.name}; } ( props ..

What is React ? 비교적 짧은 러닝커브 React 는 Framework 가 아닌 Library 로 기본적인 javascript 와 html 에 대해 이해하고 있다면 홈페이지에 잘 나와있는 튜토리얼을 통해 개발을 시작할 수 있습니다. 재사용성 , 유지보수에 용이한 구성요소 보유 React 는 component 구조로 이루어져 재사용성 과 유지보수 에 있어서 뛰어납니다. Virtual DOM 을 통한 rendering React 는 virtual DOM 을 통해 변화를 가상 DOM 에 먼저 적용하고 render 시켜 연산을 줄여줍니다. This is React ! React = Library Framework Application 설계 , 개발 시 구조, 필수적인 코드, 알고리즘, 암호화, 데이터..

Redux 란? 웹이 넓어질수록 많은 상태를 자바스크립트 코드로 관리할 필요가 생겨났습니다. 항상 변하는 상태를 관리하기란 어렵습니다. 모델이 다른 모델을 업데이트하고, 그리고 뷰가 모델을 업데이트 할 수 있고, 이 뷰가 다시 다른 모델을 업데이트하고, 이에 따라 또 다른 뷰가 업데이트 됩니다. 어느 시점에서는 프로그래머조차 애플리케이션에서 무슨 일이 일어나는지 알 수 없게 됩니다. 이에 대한 해결책으로 나온 리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있..