React Class에서 사용하는 Lifecycle과 React Hooks에서 사용하는 Lifecycle의 차이점을 비교 정리한다. COMPONENTDIDMOUNT // Class class Example extends React.Component { componentDidMount() { ... } } // Hook con...

1. LETSENCRYPT 클라이언트 다운받기 다운로드 받고자하는 경로에서 다음 명령어를 실행한다. git clone https://github.com/letsencrypt/letsencrypt 2. 의존성 다운로드 받기 다운로드 받은 후 letsencrypt 디렉토리에서 다음 명령어를 실행한다. ./letsencrypt-auto --help 3...

최근 React 버전을 최신으로 올리면서 브라우저 개발자 콘솔에서 불필요한 React Hot Loader Warning 로그가 찍힌다. 나와 같은 문제를 가지고 다양한 사람들이 React Hot Loader 이슈에 올렸고, 나는 그 이슈에 답변들을 보고 해결에 나섰다. React-Hot-Loader: react-🔥-dom patch is not d...

이번에 React Design Editor 프로젝트에 차트를 추가할 수 있도록 업데이트 했다. 차트는 Canvas로 개발된 Baidu의 Echarts를 사용하였다. 최초는 Chart.js를 사용하여 Canvas의 Context로 차트를 Fabric.js 내로 직접 렌더링 하려 했으나 Chart.js의 레이아웃 기능 제약에 막혀 Echarts를 선택하게 ...

이번에는 프로젝트에 Material UI를 적용하여 레이아웃을 만들어 보고 몇가지 컴포넌트를 사용하여 레이아웃을 만들어보려고 한다. 먼저 Metarial UI를 사용하기 위해 npm package를 받는다. npm install --save @material-ui/core @material-ui/icons @material-ui/styles Next...

지난 글에서 index.js와 post.js를 생성했었고 Routing을 사용하지 않고 URL로 직접 접근해서 화면을 확인했었다. 이번 글에서는 Next.js의 Routing을 사용하여 페이지 전환을 해보려고한다. > Next.js github에 Routing에 대한 설명이 잘 나와있다. Next.js에서 Route는 pages디렉토리 경로에 작성한...

이전 글에서 프로젝트 구성을 하여 간단한 화면을 확인했었다. 이번에는 Next.js에 내장되어 있는 _document.js, _app.js, _error.js를 커스터마이징하여 레이아웃을 새롭게 구성하는 방법을 설명하려고 한다. > 각각에 대한 설명은 Next.js 구조에서 확인할 수 있다. _DOCUMENT.JS 파일 생성 _document.js...

사실 Next.js는 설명할게 별로 없다. 예제들이 너무 잘되어 있기 때문에.. 그렇지만 내 머릿속에서 사라져가기 때문에 기록이라도 남기려고 작성한다. 1. NPM 프로젝트 생성 프로젝트를 구성하기 위해 static-website 디렉토리를 하나 만들고 cd static-website로 가서 npm init으로 npm 프로젝트를 만들자. > 참고로 n...

회사에서 MQTT를 SSL/TLS로 테스트해야 하는 경우가 생겼는데, 기존에 나와있는 Eclipse Mosquitto로 하려다가 이왕 하는 김에 Javascrpt로 MQTT Broker랑 Client (Pub, Sub)를 직접 구현해보기로 했다. 전체적으로 MQTT Broker와 Client를 구현하기 위한 라이브러리들은 다음과 같다. * Mosca ...

이번 글에서는 기존에 .js, .jsx 확장자로 작성된 React 컴포넌트에서 Typescript를 적용하여 컴포넌트 개발이나 사용 시에 타입을 확인할 수 있는 방법에 대해서 설명하려고 한다. Button.js 컴포넌트로 간단한 예를 들어본다. src/ components/ button/ index.js ...

Next.js는 현재 가장 유명한 React용 서버 사이드 렌더링 프레임워크이다. 프레임워크로써 이해하기 쉬운 구조와 수많은 예제들, 그리고 다양한 플러그인들을 지원하고 있어 많은 사람들에게 사랑받고 있다. 또한, Next.js는 next export라는 명령어로 routing 경로로 하여금 정적 웹사이트를 만들 수 있는 기능도 제공하고 있다. > ...

평소 Medium에서 개발 포스팅을 찾아보는 편인데, 글에서 이미지를 클릭했을 때, 줌이 되는 기능이 이뻐보여서 내 개발 블로그에도 적용하고 싶어 비슷한 라이브러리들이 있나 찾아보게 되었다. 우선 이 블로그가 React로 개발했으니 React에서 사용할 수 있는 라이브러리를 찾아보니 react-medium-image-zoom이 있었다. 하지만 React로...

웹에서 스크롤을 다루다보면 항상 마주치는 문제 중 하나가 스크롤 체이닝이다. 다음 예제를 보자. See the Pen overscroll-behavior: cotain before by Sung Gyun Oh (@salgum1114) on CodePen.위 예제에서 Box-1의 스크롤이 끝에 도달하게 되면 상위 요소인 App의 스크롤이 시작이된다. ...

블로그에 부드러운 스크롤링을 위해서 CSS의 scroll-behavior를 활용해본다. 우선, scroll-behavior이 뭔지 알아보자. > w3school: CSS scroll-behavior Property에 아주 잘 나와있다. 사용 방법은 아주 간단하다. 아래 코드를 확인해보자. SCROLL-BEHAVIOR: SMOOTH 적용 전 See...

블로그 개발 중 스크롤이 되었을 때, 상위로 이동시키는 BackTop을 적용하기 위해 Ant.Design의 BackTop 컴포넌트를 사용하려고 했다. 하지만 Ant.Design의 BackTop 컴포넌트를 적용해보니 잘 안된다. 따라서 직접 BackTop 컴포넌트를 구현하기로 결정했다. > Ant.Design 홈페이지에선 잘 동작한다. 구현 코드는 ...

최근 React Design Editor에 빌드 실패 관련 이슈가 올라왔다. 내용인 즉슨, production으로 빌드시 UglifyJsPlugin에서 Unexpected token: keyword «const»라는 오류가 발생하여 계속해서 빌드에 실패한다는 것이다. [Bug] Not able to create build for the applicati...