My Boundary As Much As I Experienced

요새 하고 있는 일현재 회사 서비스에서 KYC(Know Your Customer) 이벤트를 진행하고 있다.쉽게 말해 Web3 프로젝트에서 환전 전에 봇이 아닌지 인증하는 방식의 관례라고 보면 된다.보통 신분증이나 개인정보 인증을 진행한다. 그러나 우리 회사는 그냥 앱을 열심히 사용한 사람들을 '실제 유저'로 인정해주고포인트 환전 비율을 제대로 쳐주는 방식으로 진행하였다. 그래서 만들어야 하는 기능은?개중 증명을 위한 항목 중에 친구 초대가 있는데,이 점수를 채우고 싶으면 유저를 더 초대하라는 의도로 조그마한 share 버튼을 추가하였다. 모바일 환경일 때는 OS에서 제공하는 공유 바텀모달이 나오고,모바일 환경이 아닐때는 클립보드에 공유 링크만 복사된다. Webshare API란?WebShare API는 ..

보호되어 있는 글입니다.

express로 CRUD 구현하기시용하는 미들웨어:const express = require("express"); // Express 웹 애플리케이션 프레임워크const app = express(); // Express 애플리케이션 인스턴스 생성const methodOverride = require("method-override"); // HTTP 메서드 오버라이드를 위한 미들웨어const { MongoClient, ObjectId } = require("mongodb"); // MongoDB와 상호작용하기 위한 MongoDB 드라이버// 정적 파일들을 제공하기 위해 public 폴더를 사용하도록 설정.app.use(express.static(__dirname + "/public")); // EJS를 템..

전시 작품에 클릭을 안 하고도 음악이 자동으로 나오게 해야된다.https://truth-in-pendulum.vercel.app/ 7월 19일부터 27일까지 모두의 연구소에서 인터랙티브 코딩 랩의 첫 전시를 시작한다.그런데 오디오/카메라존과 터치존이 나누어져 있고, 오디오존에서는 TV의 터치패널을 사용하여 클릭을 할 수 없었다.그래서 내 작품의 오디오를 체험해보려면 터치를 하지 않고도 소리가 자동적으로 나오게 설정해야되는 상황이었다. 문제: 최신 브라우저에선 사용자가 의도치 않게 오디오가 자동재생 되는 것이 막혀있다.그러나 최신 브라우저에선 mute된 상태로 사이트에 들어가도록 되어있었다.그리고 사용자가 인터랙션을 발생시켜 사운드를 사직접 켜야만 소리가 재생되게 할 수 있다.그런데 앞서 말했다시피 내 작..

왜 굳이 환경변수를 Github Action으로 주입해야되는가?Vercel을 사용하면 환경변수를 콘솔에서 쉽게 추가할 수 있지만Firebase Hosting은 그런거 없다. 애초에 정적 배포를 위한 사이트여서서버 통신을 고려한 서비스 배포에 무리가 있다.API baseUrl 같이 예민한 정보를 노출하라고 만든게 아닌 것이다.(최근 이런 고충을 해결하는 Firebase App Hosting이라는 신기능이 나온거 같긴 하다.) 하여튼 그래도 우리 회사처럼 FireStore를 쓰는터라굳이굳이 어거지로 Firebase Hosting으로 웹앱을 호스팅해야겠다면API baseUrl을 환경변수화 해놓고, 이를 깃허브 원격저장소의 특정 브랜치(보통 main)에 머지할 때github Secret에 있는 환경변수를 가져다..

삼항연산자를 이용한 동적 스타일링테일윈드에서 동적으로 스타일링 할 때 아래와 같은 방법을 사용한다.isRed의 값에 따라 bg-red-500이냐 bg-blue-500이냐를 가른다.interface DynamicProps { isRed: boolean;}export default function DynamicStyledButton({isRed}: DynamicProps) { return ( setIsRed(!isRed)} className={`px-4 py-2 text-white font-bold rounded ${isRed ? 'bg-red-500' : 'bg-blue-500'}`} > Click me! );}  class의 일부..

"window is not defined" 오류는 서버 사이드 렌더링(SSR) 환경에서클라이언트 측 객체인 window가 정의되지 않아서 발생한다.Next.js는 기본적으로 SSR을 사용하기 때문에,클라이언트 측에서만 접근 가능한 객체(window, document, 등)를 직접 사용하면 이 오류가 발생한다.이 문제를 해결하려면 클라이언트 측 코드가 서버 측 코드와 분리되어 실행되도록 만들어야 한다. 1. if (typeof window === undefined) { ... }typeof 연산자를 사용하여 window 객체가 정의되었는지 확인하고, 클라이언트 측에서만 실행되도록 할 수 있다.import { useEffect, useState } from 'react';export default funct..

크리에이티브 코딩 랩 137.5의 전시를 위해 p5.js로 진자운동으로 씬이 바뀌는 애니메이션을 구현했다.https://truth-in-pendulum.vercel.app/ 이 작품으로 모두의 연구소 강남점에서 2024. 07. 19. - 2024. 07. 27. 까지 전시한다.다른 분들의 재밌는 작품들도 많으니 구경해볼 사람들은 잠깐 들러봐도 좋겠다.(그나저나 포스터 깔쌈하게 잘 만들지 않았나? 내가 만들었다 히히)  0.  작품 컨셉내 작품은 펜들럼이 정지하면 그 안의 인물의 내밀하고 시꺼먼 속이 보이는(?) 컨셉의 애니메이션이다.원래 '펜들럼 안의 희노애락'을 컨셉으로 하려 했는데 '희노애락'은 이제 너무 전형적인 컨셉인거 같아서 변경했다.가면 갈수록 추악한 분위기로 바뀌는 더 딥해지는 컨셉으로....

파이어베이스로 OAuth로 애플로그인을 구현하였다.구글 로그인과 비슷할 줄 알았는데 훨씬 더 복잡한 인증서 발급 절차를 거쳐야 한다. 1. 파이어베이스 콘솔 - Authentication - 로그인 방법에서 제공업체 Apple을 추가한다. 2. 애플 디벨로퍼 페이지에 가서 인증서 ID 및 프로파일 - 인증서 (영문)을 클릭한다. identifiers에서 app id, service id를 설정해준다.이게 나름 쉽지 않다...  3. 파이어베이스로 돌아와 애플 상세보기에 인증서 정보들을 기입한다.apple 팀 아이디, 키id, 비공개 키 들을 입력한다.이것들 또한 애플 디벨로퍼 페이지에서 찾을 수 있다. 이것도 찾느라 고생 좀 했다.  4. Certificates, Identifiers & Profiles..

EJS란?EJS (Embedded JavaScript Templating)은 JavaScript 코드에서 HTML을 생성할 수 있게 해주는 템플릿 엔진이다. Express와 같은 Node.js 애플리케이션에서 자주 사용된다. EJS를 사용하여 서버에서 HTML을 렌더링하는 방법을 단계별로 설명해보겠다. 1. 필요한 패키지 설치npm install ejs  2. Express 설정// app.js 또는 index.js 파일 생성const express = require('express');const app = express();const path = require('path');// EJS를 템플릿 엔진으로 설정app.set('view engine', 'ejs');app.set('views', path.j..