analogcoding

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

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 문서로 작업해야하는 상황에 ..

OOP OOP 란 ? OOP의 기본 컨셉은 프로그램 내에서 표현하고자 하는 실 세계(real world)의 일들을 객체를 사용해서 모델링 하고, 객체를 사용하지 않으면 불가능 혹은 무지 어려웠을 일들을 쉽게 처리하는 방법을 제공한다는 것입니다. -MDN- 생성자함수 란 ? 이 함수는 함수가 가질 것 같은 모든 특징을 가지고 있지만, 아무것도 리턴하지 않고 객체를 만들지도 않습니다. 생성자 함수는 단순히 프로퍼티와 메소드를 정의합니다. 또 이를 정의할 때 this 키워드가 사용합니다. 이것은 객체 인스턴스가 생성될 때마다, 객체의 프로퍼티가 생성자 함수 호출에서 전달된 인자 값과 같다는 것을 의미합니다. new 연산자를 붙여서 호출하면, 해당 함수는 생성자 함수로 동작합니다. 함수가 일반적인 함수 인지 객..