My Boundary As Much As I Experienced

전시 작품에 클릭을 안 하고도 음악이 자동으로 나오게 해야된다.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..

비관계형 데이터베이스는 거의 다Project(프로젝트) - collection(폴더) - document(개별 파일)구조로 되어있다. 몽고DB도 그러하다... 1. 프로젝트 만들기  2. 클러스터 만들기우측 상단 Create cluster를 누르면 된다. 원하는 모델을 선택하면 된다. 클러스터에 대해 알아보니 분산형 서버 관리 시스템? 같은 느낌인거 같다.서버 컴퓨터의 성능을 선택하는듯 하다.첫 2개는 무료 모델을 선택할 수 있게 해주는 것 같으니 연습용으로 쓸거면 무료모델을 쓰자. 3. connect를 눌러 baseUrl을 가져와라.이때 url상에서 라고 되어있는 부분이 있을텐데이 곳에 몽고DB 회원가입할때 입력한 패스워드를 입력하면 된다.  4. 실제 코드로 연결하는 방법그리고 실제 코드로 연결하는 ..

1. Express 초기화하는 법express를 임포트 해오고 실행시켜 app 객체를 만든다.그리고 마지막에 app.listen으로 특정 포트를 듣고 있으면 실행 완료."자, 이게 서버야." ... 끝! 또한 port는 그냥 넘버 원시값으로 3000 이런 식으로 써줄수도 있지만app.set("key", value)로 app 객체 안에 속성 선언해놓고 쓸수도 있다.선언해놓은 속성은 app.get으로 불러올 수 있다. ex. app.get("port")const express = require("express");const path = require("path");const app = express();// SET PORT=80 같은걸로 포트를 바꿀 수 있음. 그럴 경우 process.env.PORT가 바뀜..

getServerSideProps의 인자인 context 객체의 구조getServerSideProps 함수에서 사용되는 context 객체는 다음과 같은 구조를 가진다.params: 동적 라우트 매개변수query: URL의 쿼리 파라미터req: HTTP 요청 객체res: HTTP 응답 객체preview: 프리뷰 모드 여부previewData: 프리뷰 모드 데이터resolvedUrl: 현재 요청의 URLlocale, locales, defaultLocale: i18n 관련 정보 Next12에서 params와 searchParams를 받는 방법Next12에선 이 getServerSideProps에서 반환한 context를 아래처럼 받을 수 있다.export async function getServerSide..