IT & Art

지난 편에서 AWS Amplify 백엔드까지 만들어 봤는데요, 마지막 연습문제에서 논의한 것처럼 가령 prisma를 사용한다던지 하는 이유로 API 서버를 EC2에서 express로 수행하는 경우, Mixed Contents 오류가 발생하는 것을 보았습니다. AWS Amplify로 호스팅된 앱 주소가 https로 시작, 즉 HTTPS(secure HTTP) 프로토콜인데, 앱 안에서 http://나 일반 웹소켓(ws://) 등을 연결하는 경우 기대하는 보안 수준(HTTPS)에 어긋나므로 허용하지 않겠다는 의미입니다. 보통 로그는 다음과 같습니다. APIs.ts:444 Mixed Content: The page at 'https://dev.aaaaaaaaaa.amplifyapp.com/' was loaded..

AWS에 웹앱을 호스팅하려면 어떻게 할까요? 지금까지 다룬 바로는, EC2에 node.js express 같은 웹 프레임워크 같은 것을 돌리고 elastic 웹앱을 호스팅했겠죠. React 앱이라면 어땠을까요? React 앱을 빌드(npm run build)해서 생성된 정적인 파일들을 통째로 EC2에 올리고 live-server 같은 것으로 호스팅했을 거에요. 이러한 과정은 빌드 파일들을 업로드하는 과정이 불편하기도 하고 javascript 소스 코드들이 그대로 노출될 수도 있어 찝찝한 기분이 듭니다. 게다가 로그인 권한 등을 적용, 관리하기도 어렵고 HTTPS 연결을 지원하려면 머리는 더 복잡해집니다. AWS Amplify는 적어도 호스팅을 해주는 아주 요긴한 서비스인데요, 빌드하고 자시고 할 것 없이..

먼저 아래 가이드를 따라서 MySQL DB을 생성합니다. MySQL 데이터베이스를 생성하는 방법 – Amazon Web Services Network & Security Public accessibility: Yes를 선택합니다. 이렇게 하면 데이터베이스 인스턴스에 대한 IP 주소가 할당되므로 사용자 디바이스에서 데이터베이스에 직접 연결할 수 있습니다. Availability zon aws.amazon.com 생성이 끝났으면 endpoints를 기억해둡니다. 제대로 만들어졌는지 확인해 봅시다. 먼저 AWS EC2에 로그인하고 아래 명령으로 mysql에 접속해서 show databases; 명령 한 번 내려보세요. $mysql -h "endpoints" -u admin -p 이번에는 로컬 PC에서 접속해 ..

EC2는 Amazon Elastic Compute Cloud의 약자로서 말 그대로 클라우드 PC 개념입니다. 아래 공식 튜토리얼을 따라 설치하면 되는데요, 가입 후 AWS Free Tier, 즉 무료로 사용해 볼 수 있습니다. 단, Free Tier인 경우에도 사용량을 초과하거나 과금이 되는 경우들이 있으므로 Billing에 알람을 걸어두거나 수시로 확인해보세요. 무엇보다 과금이 되는 경우를 숙지하고 대비해두면 되겠죠. 자습서: Amazon EC2 Linux 인스턴스 시작하기 - Amazon Elastic Compute Cloud 인스턴스를 종료하면 인스턴스가 실제로 삭제되므로 인스턴스를 종료한 후에는 인스턴스에 다시 연결할 수 없습니다. docs.aws.amazon.com EC2 설치는 튜토리얼만한 것..

도널드 노먼의 UX 디자인 특강 - YES24 UX의 창시자이자 인지과학의 대부 도널드 노먼이 복잡함과 단순함이라는 개념을 둘러싼 디자인의 쟁점과 해결책을 다루고 있으며, 전 세계 디자인, HCI 학자들이 추천하는 책에 꼭 들어가는 책이 www.yes24.com 아이디오는 '디자인 씽킹'을 실천하는 회사다. 디자인 씽킹이란 가장 먼저 진짜 문제가 무엇인지를 규정하는 것이다. 나는 이를 두고 "클라이언트가 해결해달라고 하는 문제는 절대로 해결하지 마라."고 바꾸어 말한다. 클라이언트는 증상에만 반응하기 때문이다. (중략) 현재 발생한 문제가 무엇인지, 그 중 정말로 해결되어야 하는 것이 무엇인지를 찾는 것이다. 우리는 이것을 '근본 원인 찾기'라고 부른다. 아이디오가 암트랙의 서비스 현황을 조사해보니, 탑..

OBS Studio를 사용해서 웹앱을 Zoom/WebEx에 스트리밍하는 방법은 간단합니다. 무료 오픈소스 스트리밍 툴 OBS Studio를 설치한 뒤, Open Broadcaster Software | OBS 영상 녹화와 실시간 방송을 할 수 있는 무료 및 공개 소프트웨어입니다. 윈도우, 맥 혹은 리눅스 환경에서 빠르고 쉽게 방송 할 수 있습니다. obsproject.com 하단 메뉴 소스 목록에서 브라우저를 선택하고 URL을 입력합니다. 그리고 하단 메뉴 우측의 가상 카메라 시작하고 Zoom(혹은 WebEx)를 실행하면 OBS Virtual Camera가 새로 추가되어 있습니다. 카메라를 선택하면 URL에 보이는 화면이 스트리밍됩니다. 아주 간단하네요. 예전에는 가상 카메라 쓰려면 v4l2loopbac..

간단한 REST API를 만들어 봅시다. 순서는 다음과 같습니다. React 클라이언트에서 사진을 찍어 Node.js 서버로 보냅니다. (RESTful API) Node.js 서버(express)는 Python 앱을 실행합니다. Python 앱은 받은 이미지로 뭔가를 했다고 치고 결과를 리턴합니다. Node.js 서버는 클라이언트에게 결과를 보냅니다. React 클라이언트는 받은 결과를 표시합니다. Github Client App 먼저 클라이언트를 만듭시다. client$ npx create-react-app client client$ npm install --save axios @rubenchoi/webcam 코드는 간단합니다. import { WebcamComponent } from '@rubench..

Character Creator 3를 포팅합니다. Base Hair Extra Remesh Face Hair Animation Remarks Cartoon Character Designer Toon Hair - - OK - OK 125MB Yes cloth broken - solved by conforming in CC3. 90MB Kids & Teens on Campus (Cartoon Character) No OK OK OK 96MB Headshot Hair Builder - - OK OK OK hair white. 125MB Skingen - - - - failed to load. 100MB LOD - - OK skin black. 40MB Human Anatomy Prime Hair - - OK ..

사용자를 끌어들이는 UX/UI의 비밀 - YES24 좋은 인터페이스는 유저의 삶을 더 쉽게 만들어야 한다 매력적인 인터페이스는 말이 잘 통하는 친구와 나누는 대화처럼 기분 좋은 경험을 불러오지만, 페인 포인트가 넘쳐 나는 서비스는 사용 www.yes24.com 개발자로서 UX/디자인을 좀 더 체계적으로 알고 싶은 마음에 몇 권의 책을 읽어봤지만, 대부분 자기계발서처럼 당연한 얘기만 하거나 심리학과 엮어 흥미롭지만 실무에는 잘 와닿지 않는 책이 대부분이었어요. 그러던 중 읽게 된 이 책은 개발자와 디자이너를 연결하는 딱 그 부분, 제가 원하던 그 연결 고리에 대해 다루고 있었고 이미 개발은 하고 있었지만 원리에 대해서는 알지 못하던 부분을 시원하게 긁어주었죠. 이 책은 디자인 패턴에 대해 소개하는데, 프로..

문제> 로컬에서 create-react-library로 라이브러리를 생성하고 React hook으로 코딩하여 앱에서 참조할 경우, library/example/ 앱에서는 잘 실행되는데, library/ 외에서 참조 시 hook 오류가 나는 경우 솔루션1. www.npmjs.com에 publish하면 됨 솔루션2. React hook 대신 class로 구현