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..

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

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..

앱라우터에서는 아래처럼 getServerSideProps 등을 거치지 않고도 params객체를 꺼내 쓸 수 있다.// app/[id]/page.tsxinterface PageProps { params: { id: string; };}const Page = ({ params }: PageProps) => { return ( Post ID: {params.id} );};export default Page;  페이지 라우터에서는 getServerSideProps에서 context객체에서 추출한 값을{ props: { ... }} 내에 리턴해주는 것을페이지 컴포넌트에서 또 받아야 한다.어휴 번거로워..// pages/[id].tsximport { GetServerSidePro..

Next.js에서 프리 렌더링(Pre-rendering)은 각 페이지를 사전 렌더링하여 HTML을 미리 생성하는 방법이다.Next.js는 프리 렌더링을 통해 빠른 페이지 로드를 제공하며, SEO(검색 엔진 최적화)에도 도움을 준다.Next.js에는 두 가지 주요 프리 렌더링 방식이 있다.정적 사이트 생성(Static SiteGeneration)과 서버 사이드 렌더링(Server-side Rendering)이다.1. 정적 사이트 생성 (Static Site Generation)정적 생성은 빌드 시 각 페이지에 대한 HTML을 생성하고, 그 HTML을 재사용하는 방식이다.이 방식은 성능이 뛰어나며 모든 요청에 대해 동일한 HTML을 제공한다.정적 사이트 생성은 콘텐츠가 자주 변경되지 않는 페이지에 적합하다...

iOS 시뮬레이터 기기 바꾸기file - open simulator - 기기선택으로 바꾸면 된다. 애물단지가 된 FlipperKit 제거하기최근 새로운 디버거가 나오면서 Flipper가 deprecated되었다.그래서 기존 RN프로젝트에 있는 flipper를 제거하지 않으면최신 xcode에서 실행할 때 에러가 나게 되는데... 이를 해결하기 위해서 podfile에서 flipper관련 로직을 없애면 된다.나는 yaml파일에서 어디가 flipper 관련 코드인지 알아보기가 귀찮아서지피티에게 podfile 통째로 주고 알아서 flipper 로직 없애달라고 해봤다.그 결과 에러없이 잘 작동되긴 한다. 아래는 지피티가 고친 podfile 전문이다.# Resolve react_native_pods.rb with n..