• https://chinsun9.github.io/github-404-page-clone/

• github 404 페이지를 클론해보았다
• 마우스 움직임에 따라 원근감 있게 움직이는 이미지들이 재밌었다

• 전에 3d 카드 이펙트 만들면서 perspective css 속성을 사용해보았는데, 그때 사용한 코드를 거의 그대로 사용해서 만들 수 있었다
• 3d card effect ; https://github.com/chinsun9/3d-card-effect

• 이미지는 직접 그렸다. 물론 바닥에 대고…

참고

• https://github.com/chinsun9/github-404-page-clone

• banner-maker/banner-maker를 클론코딩해보았다
• 내 두번째 리액트 프로젝트..!

데모

• Banner Maker (React)

기능

• 캔버스 크기 조절
• 실시간 캔버스 업데이트
• 폰트 사이즈 조절
• 폰트색 조절
• 캔버스색에 따른 폰트색 자동조절
• 캔버스색 조절
• 랜덤 캠버스색
• 이미지로 다운로드
• 클립보드로 카피
• 컬러 히스토리 기능
• 컬러 히스토리 임포트, 익스포트 기능

후기

• 타입스크립트 공부 겸 리액트도 같이 하자는 생각으로 리액트 타입스크립트를 시작했다
• velopert님의 리액트 프로젝트에서 타입스크립트 사용하기 글을 보고 따라하다가
• 튜토리얼을 통해 잘 만들어진 프로젝트 구조를 기반으로 만들었다
• 리액트가 아직 익숙하지 않은데 리액트의 훅이라던지 처음부터 고급??개념들을 사용하니까
• 사실 뭐가 좋은지, 이렇게 써서 좋은점이 무엇인지..
• 이 개념을 도입하기전의 것들을 시도해보지 않았기 때문에 막연한 감이 있었다
• 나는 공부할때 이론보단 무조건 실기이고, 일단 만들어보면서 익히고 이해하자라는 주의이다
• 그래서 이것저것 쉽게만들 수 있다고 생각한다. (나중에 보면 코드가 엄청 구릴지라도..)

• 이번에 만들면서 신경썼던 것은
• 사용성..?? 인 것같다

• 나는 보통 이미지를 ctrl c 카톡에다가 ctrl v 하여 톡방에 올리는데
• 그걸위한 copy clipboard 버튼을 만들었다. 저장후 이미지 올리기는 귀찮기 때문에..

• 또 랜덤 칼러 버튼을 만들어서 색을 쇼핑했다

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
/**
 * Get color (black/white) depending on bgColor so it would be clearly seen.
 * @param bgColor
 * @returns {string}
 */
function getColorByBgColor(bgColor) {
  if (!bgColor) {
    return '';
  }
  return parseInt(bgColor.replace('#', ''), 16) > 0xffffff / 2
    ? '#000'
    : '#fff';
}

• 사용해보면 알겠지만 랜덤으로 생성된 배경색에 따라 폰트색도 검정색/흰색 적절한게 선택된다

• 컬러 히스토리 기능이다
• copy 버튼이나 download 버튼을 누르면 해당 배경색과, 폰트색이 히스토리에 저장된다
• 만약에 같은 최근 히스토리에 저장된 색과 같은 색이면 저장하지 않도록 하였다. 버튼을 누를때마다 증식되지 않도록..
• export 버튼을 눌러 현재 저장된 컬러 히스토리를 json 파일로 내보내는 기능도있다
• 깃허브 페이지를 이용해 호스팅하기때문에, 내 앱은 정적이다
• 어떻게 히스토리를 저장하고 불러올까 생각하다가 json 파일로 내보내고 다시 불러오도록 만들게 되었다

개선방향

• 칼러픽커에서 알파값을 바꿀 수 있도록 하기
• 폰트 변경 기능
• textarea를 div안에 넣어버리기..? (html2canvas 사용해보기)
• json파일로부터 컬러히스토리 임포트할때 덮어쓰기가 아니라 병합으로 불러오기

1
2
3
4
5
6
7
8
9
10
11

export function copyToClipboard() {
  const canvas = document.querySelector(`#myCanvas`);
  if (!canvas) {
    return;
  }
  canvas.toBlob(function (blob) {
    // eslint-disable-next-line no-undef
    const item = new ClipboardItem({ 'image/png': blob });
    navigator.clipboard.write([item]);
  });
}

• 클립보드 복사 js 코드를 ts로 변환하지 못한 코드..

소스코드

• react-banner-maker

참고

• 리액트 타입스크립트 공부 ; 리액트 프로젝트에서 타입스크립트 사용하기

• 오버워치 강의 영상을 보다가 영상 속 키보드 마우스 뷰어? 를 가끔 보았었다
• 일단 깔끔한 키보드 뷰어로 흥미가 생겼었는데
• 찾아보니까 OBS input overlay라는 OBS 전용 플러그인이었다

• 일렉트론이라는 프레임워크를 사용하여
• html, css, js로 데스크탑 앱으로 만들어보았다

신경 쓴 것

글로벌 키 훅?

• 내가 만든 앱 밖에서 키가 눌리고 떼지는 걸 알아야 한다

1
2
3
4
5

const ioHook = require('iohook');

ioHook.on('keydown', (event) => {
  mainWindow.webContents.send('keydown', event.rawcode);
});

• iohook 패키지를 사용해서 해결하게 되었다
• 그런데 iohook이 최신 버전의 일렉트론에서 실행이 안되어서 일렉트론 8.x버전으로 낮추어 진행하게 되었다

overlay window

• 오버레이 화면에 마우스 클릭이 되지 않도록 했다
• 오버레이 화면이 프레임을 가지지 않도록 했다
• 오버레이 화면이 모니터 크기를 구하여 우측 하단에 생기도록 하였다 (여러 해상도 대응)

일렉트론

• 웹 기술로 데스크탑앱을 만들 수 있게해주는 마법이다
• 나는 요즘 js만 해왔기 때문에 일렉트론에 대해 찾아보았다
• 일렉트론으로 만들어진 대표적인 앱으로는 비주얼 스튜디오 코드가 있다

일렉트론 시작

• Create Desktop App + Installer with HTML/CSS/JS - Electron Tutorial 2020 유튜브를 보며 시작했다
• create-electron-app 를 통해 express-generator 처럼 빠르게 프로젝트를 시작할 수 있다. (보일러플레이트)
• electron-builder 를 통해 배포용 setup 파일을 생성할 수 있다
• 소스코드 ; https://github.com/chinsun9/electron-practice

일렉트론 단점?

• 엄청나게 간단한 앱일지라도 nodejs + Chromium 조합으로 용량이 상당히크다

소스코드

• Input Overlay (Electron)

• Web Dev Simplified의 Build a Real Time Chat App With Node.js And Socket.io을 보고 따라만들기
• nodejs에서 html과 socket.io로 간단하게 챗앱을 만드는 것을 따라해보았다
• Web Dev Simplified 정말 심플하게 잘알려준다.. ㄷㄷ 따라 만들면서 행복했다
• 따라만들고 카카오톡같은 css를 입히고,
• 디테일한 기능을 추가 해줬다

추가한 기능

• 고유한 프로필 사진 생성(랜덤색 + 이니셜)
• 현재 채팅에 참가한 유저 목록 위젯
• width값이 작아지면 유저 목록 위젯 숨김
• width값이 작아지면 프로필 사진 영역 숨김
• 같은 사람이 연달아 올릴 때 프로필 사진 생략
• 같은 사람이 같은 시간에 연달아 올릴 때 가장 최근 메시지에만 시간표시
• 메시지는 plain text로 표시

소스코드

• chat-app-nodejs-and-socketio

• 서버를 열어놨는데, 외부에서 접근이 가능한지 불가능한지,
• 포트포워딩을 확인하고 싶으면
• 핸드폰을 열고 데이터를 켜서 내 서버로 접속해서 확인하는 등 번거롭게 확인했다
• https://www.yougetsignal.com/tools/open-ports/ 라는 포트포워딩 체크 웹이 있는데
• 이거를 한번 클론 코딩해보았다

영상설명

• 나는 ec2에 올려서 테스트해봤다

• 주소창에 보면 15.165.000.000:4000 으로 나오는데 내 ec2 ip인데 일부러 뒷부분을 000.000으로 바꿔놨다

• 이 앱은 ec2의 4000포트에서 동작중이다

• 도메인명이나 ip를 입력하고 포트입력란에 원하는 포트를 입력한다

• 그리고 check 버튼을 누르면 해당 포트가 열려있는지 확인한다

• 당연히 해당 포트를 리슨하는 서버가 동작하고 있어야한다

• 우측 common ports 에서 원하는 포트를 클릭하면 해당 포트로 요청을 보낸다

• Scan All Common Ports 버튼을 눌러 모든 common port를 스캔한다

• 0:18 중간에는 마인크래프트 서버를 체크해본다
• 0:35 localhost로 적으면 내 ec2의 포트를 스캔하게된다
• localhost를 common port를 모두 스캔해보니 3000번이 열려있다는 것을 알 수 있다
• 0:48 이 앱이 실행되고 있는 4000번 포트를 스캔해보니
• 당연하게 열려있는 모습을 확인할 수 있다

소스코드

• open-port-check-web

• 막 배운 리액트로 처음 만들어본 프로젝트이다
• 계산하기 귀찮아하는 나는 평소 네이버 퍼센트 계산기를 이용했었는데
• 이 계산기를 리액트를 사용해 클론코딩해보자..

데모

• Percentage Calculator (React)

후기

• 내가 너무 간단한 것을 만들어서 그런지 모르겠지만
• 리액트를 처음 써본 내 기준으로 너무 복잡하다고 느껴졌다
• 기존에 html, css, js로 만들때 보다 시간이 배로 걸렸다
• 나중에 훨씬 복잡한 것을 만들게 되었을 때 리액트가 좋다고한다
• 이미 잘 만들어진 리액트 튜토리얼을 따라만들고, 수정하는 방식으로 만들었다
• 사용한 개념에 대해 완전히 이해하고 익숙해지는데 시간이 필요할 것 같다

소스코드

• react-percentage-calculator
• README.md에 리액트로 만든 화면을 깃허브 페이지로 보여주는 방법 등 메모해놨다