SPARTA

<h1>Docker에 데이터베이스 이미지 띄우기</h1><ul><li>이번 팀 프로젝트에서 PostgreSQL을 사용하게 됐는데 이전에는 mysql을 활용했었기 때문에 해당 데이터베이스를 설치해야 되는 상황이 됐다</li><li>데이터베이스를 설치하기 귀찮기도 하고 도커를 한번도 사용해 본 적이 없어서 이번 기회에 데이터베이스를 도커에 올려보기로 결정</li><li>유튜브 강의를 보면서 도커란 무엇인지 간단하게 학습하고 (일단 미니 컴퓨터라고 생각하기로 했다..) 여러 명령어를 통해 조작해봤다 (명령어는 따로 정리)</li></ul><h3>Docker volume</h3><ul><li>Docker 컨테이너의 문제점<ul><li>도커는 특정 이미지를 통해 하나의 가상 환경을(컨테이너) 구축할 수 있는 툴인데 해당 컨테이너에서 작업한 데이터 또한 컨테이너에 저장이 된다<ul><li>이미지에서 변경된 파일 시스템이 <code spellcheck="false">Container Layer</code> 에 저장→ 이로 인해 컨테이너를 삭제하게 되면 해당 컨테이너 내부의 데이터도 모두 삭제되는 경우가 발생한다 (DB라고 가정하면 DB의 데이터 같이 삭제됨)→ 즉 Docker Container는 휘발성</li></ul></li></ul></li><li>해당 문제점을 해결하기 위해서는 volume 옵션을 활용한다<ul><li>docker volume이란 ?<ul><li>도커 컨테이너에서 데이터를 영속적으로 저장하기 위한 방법</li><li>volume은 컨테이너 내부 저장 공간을 사용하지 않고 호스트 자체의 저장 공간을 공유해서 사용하는 형태<ul><li>컨테이너 내부의 데이터를 호스트가 지정한 공간과 링크를 걸어주는 기능이라고 한다</li></ul>▪ docker run -v [호스트의 디렉토리 절대경로]:[컨테이너의 디렉토리 절대경로] [이미지명]</li></ul></li></ul></li></ul><hr><h1>프로젝트 기록</h1><h3>value() 어노테이션</h3><ul><li>cannot find symbol method value()<ul><li>ai api 호출에 필요한 api key값을 yml 파일에 작성해뒀는데 읽어오지 못하는 이슈 발생<ul><li>annotation.Value를 임포트 했어야 했는데 lombok.Value를 임포트해서 생긴 이슈였음ㅎ</li></ul></li></ul></li></ul><hr><h1>생각이 필요한 것들</h1><h2>Ai를 하나의 도메인으로 봐야 하는가?</h2><ul><li>Ai가 하나의 서비스처럼 느껴지긴 하지만 메뉴 내에서만 사용이 되고 있다.. 확장성을 고려하더라도 배달 플랫폼에서 Ai가 얼마나 확장이 되려나</li><li>현재는 메뉴 도메인에 포함시키되 로직만 분리하는 방향으로 갈 것 같다</li></ul><h2>Ai api 호출 방식</h2><ul><li>동기 / 비동기에 대해 오늘 제대로 이해하게 된 것 같은데 우선 내일 더 알아보고 이점을 따져서 선택하기 (비동기가 좋을 것 같다는 생각인데 동기를 사용해서 얻을 수 있는 이점이 무엇인지 찾아보기)</li></ul>

Docker에 데이터베이스 이미지 띄우기이번 팀 프로젝트에서 PostgreSQL을 사용하게 됐는데 이전에는 mysql을 활용했었기 때문에 해당 데이터베이스를 설치해야 되는 상황이 됐다데이터베이스를 설치하기 귀찮기도 하고 도커를 한번도 사용해 본 적이 없어서 이번 기회에 데이터베이스를 도커에 올려보기로 결정유튜브 강의를 보면서 도커란 무엇인지 간단하게 학습하

Docker

Python

<blockquote>macOS 사용 도중 파이썬 패키지를 설치하기 위해 pip를 사용하자 보안 경고가 발생하며 설치가 거부되었다. 이를 해결하는 방법에 대해 다룬다.</blockquote><h3>도대체 무슨 에러인가?</h3><img src="https://image.until.blog/xeros/article/1727225853116.png" alt="until-1518">Python의 최신 PEP 668 표준에 의해, macOS 환경에서 pip를 통한 패키지 설치가 제약되는 문제라고 한다. 아무래도 최근에 애플에서 맥에 여러가지 보안 강화 조치와 제약이 추가되었는데 여기에 영향을 받은 패치가 아닐까 싶다.이 문제를 해결하는 방법은 크게 3가지정도로 구분할 수 있다.<h3>1. 가상 환경을 사용하는 방법</h3>다음과 같이 Python 가상 환경을 만들어서 사용하면 독립된 공간을 만들어서 사용하기에 pip를 정상적으로 사용할 수 있게 되며 패키지의 버전 문제로 인한 충돌을 피하기도 쉽다. 하지만 매 파이썬 프로젝트마다 가상 환경을 생성해주어야하고 터미널을 열 때마다 <code spellcheck="false">source</code>를 지정해 주어야 한다는 번거로움이 따른다.<ol><li>가상 환경 생성</li></ol><pre spellcheck="false"><code class="language-bash">python3 -m venv path/to/venv</code></pre><ol start="2"><li>가상 환경 활성화</li></ol><pre spellcheck="false"><code class="language-bash">source path/to/venv/bin/activate</code></pre><ol start="3"><li>패키지 설치</li></ol><pre spellcheck="false"><code>pip install supabase</code></pre><h3>2. pip에서 사용자 플래그 추가</h3>시스템 패키지 환경을 보호하기 위해 설치를 사용자 환경으로 제한하여 설치하도록 한다.그냥 귀찮음도 덜하고 보안도 챙기고 무난한 방법인듯하다.<pre spellcheck="false"><code class="language-bash">pip install --user supabase</code></pre><h3>3. break-system-package 옵션 또는 pip.conf 수정</h3>그냥 보안 권고사항을 무시하고 기존에 pip처럼 다이렉트 설치를 가능하게 하는 옵션을 붙여서 사용하면 된다.<pre spellcheck="false"><code class="language-bash">pip install &lt;package name&gt; --break-system-packages</code></pre>근데 매번 이 옵션을 붙이는것도 귀찮다면 아예 <code spellcheck="false">pip.conf</code> 파일을 수정해서 영구적으로 해당 명령을 활성화 시키는것 역시 가능하다.<ol><li><code spellcheck="false">pip.conf</code> 파일 생성</li></ol><pre spellcheck="false"><code class="language-bash">mkdir -p ~/.config/pip
vi ~/.config/pip/pip.conf</code></pre><ol start="2"><li>아래 내용을 추가한다.</li></ol><pre spellcheck="false"><code class="language-bash">pip install supabase --break-system-packages</code></pre><h3>왜 이런 보안조치가 시행되었는가?</h3>애플이 원래도 보안쪽으로는 깐깐했지만 갑자기 이런 기존 시스템에 영향을 줄 수도 있는 패치를 한 원인이 궁금해서 찾아보니 간략하게 설명하자면 pip를 사용한 시스템 전역 패키지 설치가 운영 체제의 패키지 관리자와 충돌할 수 있어 이를 방지하려는 목적이라고 한다. 패키지를 가상 환경이나 사용자 환경에만 설치하도록 유도해서 종속성 관리 문제를 해결하고 보안 취약점을 줄이기 위한 조치인듯 하다.마찬가지로 <code spellcheck="false">Homebrew</code> 역시 현재 공식 홈페이지에 나와있는 Installation 방법을 따라하고 추가적인 수정을 거치지 않으면 명령어 인식이 안된다.

macOS에서 pip externally-managed-environment 에러를 픽스하는 방법

macOS에서 pip install시 error: externally-managed-environment 에러가 발생하는 문제

⚛️ React

<img src="https://image.until.blog/morethanmin/article/1726239900445.gif" data-width="100%" data-align="center" alt="until-1342">언틸의 피드에서는 유저들이 작성한 아티클을 모달의 형태로 볼 수 있는데요.이런 모달 형태는 유저들의 글을 빠르게 전환하며 볼 수 있다는 장점을 가지고 있어요.하지만 React State로 관리되기 때문에 몇가지 단점이 존재했어요. 예를 들어 새로고침시에 보고 있던 게시글이 사라지거나, 브라우저의 history stack을 쌓지 않기 때문에 뒤로가기(history.back)로 닫을 수 없었어요.이런 경험은 데스크탑에서는 그렇다 쳐도 모달이 풀페이지로 나타나는 모바일에서는 뒤로가기를 했을 때 아예 페이지가 닫혀버리는 등 유저 경험이 좋지 않았어요.때문에 Route로 동작하는 Modal로 변경하기로 했어요. 어떤 방식으로 구현했는지 간단하게 공유해볼게요.<h2>ArticleCard</h2>우선 ArticleCard는 기존에는 onClick handler를 통해 isOpen state를 변경해주고 있었는데요. 이것을 next/Link 컴포넌트로 변경해주었어요.<pre spellcheck="false"><code class="language-typescript">import { LinkProps } from 'next/link'
import { useRouter } from 'next/router'
import * as _ArticleCard from 'src/components/ArticleCard'
import { ArticleItem } from 'src/types/article'

type Props = {
 data: ArticleItem
}

export const ArticleCard = ({ data }: Props) =&gt; {
 const router = useRouter()

 const href: LinkProps['href'] = {
 query: {
 ...router.query,
 'article-id': data.articleId,
 },
 }

 const as = `@${data.blog.username}/${data.urlSlug}`

 return (
 &lt;_ArticleCard.Root data={data}&gt;
 &lt;_ArticleCard.Thumbnail shallow href={href} as={as} /&gt;
 &lt;_ArticleCard.AuthorInfo showGroup /&gt;
 &lt;_ArticleCard.ArticleInfo shallow href={href} as={as} /&gt;
 &lt;/_ArticleCard.Root&gt;
 )
}</code></pre><code spellcheck="false">Article.Thumbnail</code> 과 <code spellcheck="false">Article.ArticleInfo</code>가 Link의 props을 대신 받아오고 있습니다.이제 아티클 카드를 클릭하면 next/router는 href에 의해서 <code spellcheck="false">until.blog?article-id=219</code> 로 이동하게 되요.또한 as prop을 통해 article-hash-id를 브라우저 검색창에 노출하지 않고 실제 게시글 상세 route인 것처럼 변경해주었어요.<h2>ArticleDetailDialog</h2>이제 서치파라미터에 등록된 article-id를 읽어와서 모달을 띄워주면 돼요.<pre spellcheck="false"><code class="language-typescript">import { useRouter } from 'next/router'
import { Dialog, useCurrentSize } from 'ui'
import Content from './Content'
import { boxStyle } from './styles'

const ArticleDetailDialog = () =&gt; {
 const router = useRouter()
 const currentSize = useCurrentSize()

 const articleId =
 typeof router.query['article-id'] === 'string' &amp;&amp;
 router.query['article-id'] !== ''
 ? Number(router.query['article-id'])
 : null

 const handleClose = () =&gt; {
 const query = { ...router.query }
 delete query['article-id']

 router.push(
 {
 query,
 },
 undefined,
 { shallow: true, scroll: false },
 )
 }

 return (
 &lt;Dialog
 open={!!articleId}
 onClose={handleClose}
 align="top"
 alignOffset={currentSize === 'desktop' ? 60 : 40}
 css={{
 maxWidth: '920px',
 width: '100%',
 }}
 &gt;
 &lt;div css={boxStyle}&gt;
 &lt;Content articleId={articleId} onClose={handleClose} /&gt;
 &lt;/div&gt;
 &lt;/Dialog&gt;
 )
}

export default ArticleDetailDialog</code></pre>이를 통해 유저는 새로고침을 하더라도 게시글 상세페이지를 유지할 수 있고, 뒤로가기를 통해서도 모달을 닫을 수 있게 되었습니다. 👍

언틸의 피드에서는 유저들이 작성한 아티클을 모달의 형태로 볼 수 있는데요.이런 모달 형태는 유저들의 글을 빠르게 전환하며 볼 수 있다는 장점을 가지고 있어요.하지만 React State로 관리되기 때문에 몇가지 단점이 존재했어요. 예를 들어 새로고침시에 보고 있던 게시글이 사라지거나, 브라우저의 history stack을 쌓지 않기 때문에 뒤로가기(hist

next.js 에서 라우트로 관리되는 모달 구현하기 (route as modal)

#3. more hooks &amp; custom hooksWork through for prev. projectuseRefuseMemo, useCallback, useIduseReduceruseContextzustandCustom Hook #1. useLocalStorageCustom Hook #2. useAxiosFetchsecond project : 

#3. more hooks & custom hooks

코딩테스트 feat. 자바

<h1>수학 관련 함수</h1><pre spellcheck="false"><code class="language-java">Math.pow(a, b); // a의 b제곱
Math.sqrt(a); // a의 제곱근
Arrays.stream(arr).sum(); // 배열 arr의 합 
// 배열의 평균, average()가 리턴한 값이 없을 경우, null 대신 0 반환
double avg = Arrays.stream(arr).average().orElse(0);
Math.min(a,b); // a,b 중 작은 값 리턴
Math.max(a,b); // a,b 중 큰 값 리턴</code></pre><h1>Character 관련 함수</h1><pre spellcheck="false"><code class="language-java">char c = 'A';
char k = 'B';
Character.toString(c); // char형 변수 c를 String으로
Character.compare(c, k); // 비교 같으면 0출력, 다르면 c-k 반환 : -1
Character.isUpperCase(c); // c가 대문자면 true
Character.isLowerCase(k); // k가 소문자면 true
Character.isDigit(c); // c가 숫자면 true
Character.isAlphabetic(k); // k가 알파벳이면 true</code></pre><h1>리스트와 배열 형변환</h1><pre spellcheck="false"><code class="language-java">// String 배열 -&gt; String 리스트
String[] arr = {"A", "B", "C"};
List&lt;String&gt; arrList = new ArrayList&lt;&gt;(Arrays.asList(arr));

// String 리스트 -&gt; String 배열
String[] arr2 = arrList.stream().toArray(String[]::new);

// int 배열 -&gt; int 리스트
int[] intArr = new int[]{1, 4, 3, 5, 2};
List&lt;Integer&gt; intList = Arrays.stream(intArr).boxed().collect(Collectors.toList());
Collections.reverse(intList); // 뒤집기

// int 리스트 -&gt; int 배열
int[] intArr2 = intList.stream().mapToInt(i -&gt; i).toArray();</code></pre><h1>Collections 관련 함수</h1><pre spellcheck="false"><code class="language-java">int[] intArr = new int[]{1, 4, 3, 5, 2};
List&lt;Integer&gt; intList = Arrays.stream(intArr).boxed().collect(Collectors.toList());
// List&lt;Integer&gt; intList = Arrays.stream(intArr).boxed().sorted().collect(Collectors.toList());

Collections.sort(intList); // 오름차순
Collections.sort(intList, Collections.reverseOrder()); // 내림차순
Collections.reverse(intList); // 뒤집기
Collections.frequency(intList, 2);
// 이분탐색 : 해당 값이 있으면 해당 인덱스 반환, 없으면 해당 값보다 큰 첫번째 위치 반환 : -1 (값 1의 인덱스)
// reverse 했으므로 인덱스값이 마이너스가 붙어서 나옴
Collections.binarySearch(intList, -1);</code></pre><h1>Stack 관련 함수</h1><pre spellcheck="false"><code class="language-java">Stack&lt;Integer&gt; stack = new Stack&lt;&gt;();
stack.push(1); // 값 넣기
stack.contains(1); // 스택에 해당 값이 포함되어있으면 true
stack.peek(); // stack top 반환, 비어있으면 null 반환
stack.pop(); // 값 빼고, 반환
stack.clear(); // 값 모두 삭제
stack.size();
stack.empty(); // 스택이 비어있으면 true</code></pre><h1>Queue 관련 함수</h1><pre spellcheck="false"><code>// 일반 큐
Queue&lt;Integer&gt; queue = new LinkedList&lt;&gt;();
// 우선 순위 큐 : 기본으로 낮은 숫자가 우선 순위를 가짐
PriorityQueue&lt;Integer&gt; pq = new PriorityQueue&lt;&gt;();
// 높은 숫자가 우선 순위를 가지도록 선언
PriorityQueue&lt;Integer&gt; pq2 = new PriorityQueue&lt;&gt;(Collections.reverseOrder());
queue.add(1); // 큐가 꽉 찬 경우 에러 발생
queue.offer(2); // 큐가 꽉 찬 경우 false 반환
queue.poll(); // 첫번째 값 반환, 비어있으면 null 반환
queue.peek(); // 첫번째 값 출력 (제거X)
queue.remove(); // 첫번째 값 제거
queue.clear(); // 값 모두 삭제</code></pre><h1>HashMap 관련 함수</h1><ul><li><code spellcheck="false">HashMap</code> : &lt;key, value&gt; 쌍 출력하면, 순서가 안 지켜짐 </li><li><code spellcheck="false">LinkedHashMap</code> : 키 값이 입력 순으로 정렬되므로 순서가 지켜짐</li><li><code spellcheck="false">TreeMap</code> : 키 값이 알파벳순(오름차순)으로 정렬됨</li></ul><pre spellcheck="false"><code>HashMap&lt;Integer, String&gt; map = new HashMap&lt;&gt;();
LinkedHashMap&lt;Integer, String&gt; map = new LinkedHashMap&lt;&gt;();
TreeMap&lt;Integer, String&gt; map = new TreeMap&lt;&gt;();

map.put(1, "사과");
map.remove(1); // key값으로 요소 삭제
map.clear(); // 전체 삭제
map.containsKey(1); // key 값 중 해당 값이 있으면 true
map.containsValue("사과"); // value 값 중 해당 값이 있으면 true</code></pre>출력하는 법도 익혀두자.<pre spellcheck="false"><code class="language-java">LinkedHashMap&lt;Integer, String&gt; map = new LinkedHashMap&lt;&gt;();
map.put(2, "바나나");
map.put(1, "사과");
		
// 출력 방법 1
for(Integer i : map.keySet()) {
 System.out.println(i + map.get(i));
}
		
// 출력 방법 2
for(Map.Entry&lt;Integer, String&gt; entry : map.entrySet()) {
 System.out.println(entry.getKey() + entry.getValue());
}
		
// result : 2바나나 1사과</code></pre><h1>HashSet 관련 함수</h1><pre spellcheck="false"><code class="language-java">HashSet&lt;Integer&gt; set = new HashSet&lt;&gt;();
LinkedHashSet&lt;Integer&gt; set = new LinkedHashSet&lt;&gt;();
TreeSet&lt;Integer&gt; set = new TreeSet&lt;&gt;();

set.add(1);
set.add(2);
set.contains(1);
set2.add(1);
set2.add(4);
set.remove(1); // 값 삭제
set.removeAll(set2); // set 데이터 중 set2에 들어있는 데이터 삭제
set.retainAll(set2); // set 데이터 중 set2에 들어있지 않은 데이터 삭제
set.clear();</code></pre>Set도 출력하는 법을 익혀두자.<pre spellcheck="false"><code class="language-java">HashSet&lt;Integer&gt; set = new HashSet&lt;&gt;();
set.add(1);
set.add(2);

// 출력방법 1
for (Integer item : set) {
 System.out.println(item);
}

// 출력방법 2
Iterator&lt;Integer&gt; iter = set.iterator();
while (iter.hasNext()) {
 System.out.println(iter.next());
}
		
// result : 1 2

</code></pre><h1>알아두면 좋은 기술</h1><ul><li>ArrayList의 <code spellcheck="false">indexOf</code>: 특정 value가 없으면 -1 반환 </li><li>ArrayList 값을 하나씩 가져와서 int 배열에 넣을 때 : <code spellcheck="false">arr[i] = list.get(i).intValue();</code></li><li>특정 정수를 잘라서 사용하고 싶을 때</li></ul><pre spellcheck="false"><code class="language-java">while(value != 0) {
 remain = value % 10;
 value /= 10;
}		</code></pre>

코딩테스트를 위한 자바 벼락치기

[Java] 코딩테스트 벼락치기 정리 2편

<h1>영속성 컨텍스트</h1><ul><li>고유 ID를 갖는 모든 영속 객체 인스턴스에 대한 집합</li><li>영속성 컨텍스트 내에서 영속 객체에 대한 생명주기가 관리된다<ul><li>EntityManager의 메서드를 이용</li></ul></li><li>영속성 컨텍스트는 어플리케이션과 DB 사이에 위치</li><li>영속 객체에 대한 정보(데이터)는 영속성 컨텍스트 내부의 1차 캐시에서 관리된다</li></ul><blockquote>트랜잭션이 시작되고 EntityManager를 통해 영속성 컨텍스트에 객체가 올라가면1차 캐시에 해당 영속 객체가 등록이된다 (영속 객체의 고유 ID / 엔티티 객체 / 스냅샷)영속 객체가 올라간 상태는 아직 insert 작업이 처리된 것은 아니다</blockquote><pre spellcheck="false"><code class="language-java">// EntityManager를 통해 가져온 트랜잭션을 시작
tx.begin();

try { // persist, commit 과정에서 예외가 발생하면 rollback
 em.persist(Customer.sample()); // 영속성 컨텍스트에 객체를 등록

 tx.commit();

} catch (Exception e) {
 tx.rollback();

} finally {
 em.close();
}

/*
persist() 엔티티 객체를 영속성 컨텍스트에 저장한다
해당 엔티티 객체는 영속 상태로 전환된다
영속 상태로 전환된 엔티티 객체는 1차 캐시에 저장되고 트랜잭션이 커밋되면 데이터베이스에 동기화된다
persist()는 객체를 "JPA 관리 상태"로 만드는 중요한 메서드
*/

tx.begin();
try { // persist, commit 과정에서 예외가 발생하면 rollback
 Customer customer = new Customer("ID0002", "kim");
 em.persist(customer); // insert 실행되지 않고 1차 캐시에 저장된다
 em.persist(customer);

 tx.commit(); // insert 실행된다
} catch (Exception e) {
 tx.rollback();
} finally {
 em.close();
}

/*
persist()를 호출한다고 해서 바로 삽입 쿼리가 발생하지 않고 
우선 영속성 컨텍스트 내부의 1차 캐시에 등록된다
commit 시점에 발생한다
즉 최종적으로 insert는 하나의 행에 대해서만 발생한다
*/</code></pre><pre spellcheck="false"><code class="language-java">// EntityManager를 통해 가져온 트랜잭션을 시작
tx.begin();

try { // persist, commit 과정에서 예외가 발생하면 rollback
 em.persist(Customer.sample());
 Customer foundCustomer = em.find(Customer.class, "ID0001");
 foundCustomer.setName("choi");

 tx.commit();
} catch (Exception e) {
 tx.rollback();
} finally {
 em.close();
}

/*
이미 영속 상태로 전환된 영속 객체가 1차 캐시에 올라가 있는 상태이기 때문에
조회 쿼리는 발생하지 않음
그리고 트랜잭션 내에서 해당 영속 객체의 변화를 감지하고 commit 시점에 수정 쿼리를 날림
*/</code></pre><pre spellcheck="false"><code class="language-java">tx.begin();
try { // persist, commit 과정에서 예외가 발생하면 rollback
 Customer customer = new Customer("ID0002", "kim");
 em.persist(customer); // insert 실행되지 않고 1차 캐시에 저장된다

 Customer foundCustomer = em.find(Customer.class, "ID0002"); 
 // 위 코드를 통해 캐시에 올라간 영속 객체를 반환해준다
 

 tx.commit(); // insert 실행된다
} catch (Exception e) {
 tx.rollback();
} finally {
 em.close();
}

/*
persist()를 통해 캐시에 올린 객체를 find()로 호출을 하면 조회 쿼리가 발생하지 않는다
이미 캐시에 올라갔기 때문에 캐시에 저장된 영속 객체를 반환해주기 때문
(찾고자 하는 영속 객체가 1차 캐시에 등록되어 있다면 해당 영속 객체를 반환하고 없다면 조회 쿼리)
*/</code></pre>

영속성 컨텍스트고유 ID를 갖는 모든 영속 객체 인스턴스에 대한 집합영속성 컨텍스트 내에서 영속 객체에 대한 생명주기가 관리된다EntityManager의 메서드를 이용영속성 컨텍스트는 어플리케이션과 DB 사이에 위치영속 객체에 대한 정보(데이터)는 영속성 컨텍스트 내부의 1차 캐시에서 관리된다트랜잭션이 시작되고 EntityManager를 통해 영속성 컨텍스

JPA - 영속성 컨텍스트 1

- 뚱땅뚱땅 평화로운(?) 푸시알림 기능 개발 시간 -예약 발송 기능이 필요해 방법을 알아보고 있었다.어찌저찌 구글링을 통해 NestJS Task Scheduling - Dynamic timeouts에 대해 알게 되었다 !스케줄러는 이미 사용해본 경험이 있었는데(매일 @@시 ##분 마다 동작 등), 동적으로 필요에 따라 생성했다 없앴다 할 수도 있었다니 ! (문서를 끝까지 읽어본 적이 없는 사람)사용 방법은 어렵지 않아서 내가 원하는 타이밍에 푸시알림을 발송할 수 있게 되었다. 너무너무 단순하다! <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/techniques/task-scheduling#dynamic-timeouts">진짜로</a>즉시 발송과 예약 발송 모두 잘 작동하는 것을 확인하고 필요한 곳 마다(6~7군데 정도) 알림 발송 코드를 때려 박았는데, 막상 이렇게 해놓고 나니 나중에 수정이 필요하거나 또 푸시알림이 필요한 곳이 생기면 같은 작업을 반복해야한다고 생각하니 좀 간지가 안나는 것 같아서 정리를 좀 하기로 했다.일단 내가 원하는 것이 무엇인가 정리<ul class="tight" data-tight="true"><li>"특정 상황"에 유저에게 푸시알림을 보내야함 (FCM 사용)</li><li>즉시발송/예약발송</li><li>현재는 6~7가지 상황이 있지만 점점 늘어날 수 있음</li><li>특별한 경우를 제외하고 어드민 페이지에서 푸시알림을 관리하고 싶음<ul class="tight" data-tight="true"><li>발송상황, 발송타이밍, 메시지 내용 관리 / 발송 내역 관리 등</li></ul></li><li>위 내용은 단일 대상에게 자동으로 보내는 알림. 다수에게 보내는 수동 알림은 따로 처리</li></ul>필요한 api 마다 푸시알림을 쏘는 코드를 심는 것 보다는 한 지점(?)에서 처리하고 싶었는데 그러기 위해선 어떤 요청이 들어왔는지 구분하고 푸시알림이 필요한 요청 및 상황인지 판단, 알맞은 대상 및 내용 구성을 할 수 있어야 했다.어떤 요청인지("특정 상황")는 요청 end point로 구분할 수 있다.발송 대상은 요청에 jwt 토큰도 있고 앱에서 오는 요청이 아닌 경우(서비스 특성 상 서버가 임베디드와도 통신 중) 식별 가능한 데이터가 함께 담겨 있어 어렵지 않았다.내용 역시 왔다갔다하는 데이터들로 충분히 구성할 수 있다.즉시발송/예약발송은 0초 뒤 발송, n초 뒤 발송 으로 설정이 가능하다.이런 점들을 바탕으로 DB를 꾸려보았다. 푸시알림을 보내길 원하는 상황과 내용을 미리 등록해둘 수 있도록.<pre spellcheck="false"><code class="language-typescript">{
 알림발송상황: "유저가 ~~한 상황";
 endPoint: "/request/endpoint";
 n밀리초뒤발송: 300000;
 푸시알림제목: "이것은";
 푸시알림내용: "name씨에게 보내는 푸시알림";
 내용에들어가는변수이름: ["name"];
 클릭시이동url: "어디어디";
}</code></pre>문제는 한 곳에서 처리하려면 과연 그 한 곳은 어디로 해야 좋을까 였다. 미들웨어, 인터셉터 등 뭔가 이것저것 알긴 아는데 정확한 작동 방식이나 그런 것을 아직 완전히 깨우치지 못한 상태라 GPT씨에게 상담 요청을 했다.위 상황들을 죽 설명하고 어쩌면 좋을지 물어보니 그(?)(그녀?) 역시 미들웨어나 인터셉터에 심을 것을 추천해주었는데, 간단한 테스트와 모든 데이터를 처리한 뒤 응답을 보내기 직전에 푸시알림을 쏘고 싶다는 추가 질문으로 인터셉터를 활용하는 것으로 확정을 지었다.이렇게 내가 원하던 대로 '한 곳' 까지 정해졌다.- 뚱땅뚱땅 코딩 타임 -그렇게 뚱땅뚱땅 코드를 작성해놓고 테스트를 하다보니 문제점들이 발견되었다.<ul class="tight" data-tight="true"><li>n시간 뒤 어떤 사람에게 발송하도록 예약해둔 메시지를 만약 그 사람이 특정 조건을 만족한 경우 예약을 취소해야 함</li><li>예약을 해둔 메시지들이 만약 서버가 재시작되면 스케줄러가 초기화되면서 사라짐</li></ul>여러 고민과 GPT씨와의 상담 끝에 두 가지 문제점 모두 스케줄러와 DB를 함께 활용해 해결할 수 있다는 결론을 내렸다.첫번째 문제는 고유한 예약 번호와 함께 푸시알림 내역을 저장해뒀다가 원하는 상황에 예약을 취소할 수 있도록 했다. 예약을 취소하게 되는 상황은 당장에는 한가지 상황 뿐이라 중앙처리 말고 해당 api에서 하도록 했다.나중에 조금 더 발전시킬 필요가 있을 것 같다.두번째 문제는 발송 상태[발송완료/발송예약/발송취소]를 함께 저장해뒀다가 <a target="_blank" rel="noopener noreferrer nofollow" href="https://docs.nestjs.com/fundamentals/lifecycle-events">OnApplicationBootstrap</a>을 사용해 서버가 재시작될 때 발송예약 상태인 메시지들을 다시 스케줄러에 집어넣어주도록 했다.어차피 발송 내역을 저장하기로 해서 DB도 이미 구성해뒀기 때문에 몇 개의 필드만 더 추가하면서 사건을 해결할 수 있었다.대략적인 형태<pre spellcheck="false"><code class="language-typescript">import { Injectable, OnApplicationBootstrap } from '@nestjs/common';
import { firebaseAdmin } from 'src/config/firebase.config';
import { SchedulerRegistry } from '@nestjs/schedule';
@Injectable()
export class PushMessageService implements OnApplicationBootstrap {
	constructor(private readonly schedulerRegistry: SchedulerRegistry) {}
async onApplicationBootstrap() {
	// 발송예약 상태인 메시지들을 다시 스케줄러에 등록
}

async fcmSendMessage(message, sendAfterMilliSeconds, timeoutName, history) {
	const timeout = setTimeout(async () =&amp;gt; {
		await firebaseAdmin
			.messaging()
			.sendEachForMulticast(message)
			.then((res) =&amp;gt; {
				console.log('success: ', res);
		})
		.catch((err) =&amp;gt; {
			console.log('error: ', err);
		}); 
 	// history(발송내역)를 사용해 에약발송인 경우 발송예약 &amp;amp;gt; 발송완료로 업데이트
 	// ~ code ~
	
 	// 발송한 뒤에 스케줄러에서 삭제
		this.schedulerRegistry.deleteTimeout(timeoutName);
		}, sendAfterMilliSeconds);
	this.schedulerRegistry.addTimeout(timeoutName, timeout);
}

async sendAutoPushMessage(endPoint) {
	// 인터셉터에서 호출해 사용
	// 푸시알림 보낼지 말지 판단 후 내용 구성해 발송 예약
}}</code></pre>이런식으로 구현을 해놓았지만 솔직히 지금도 마음에 썩 들지는 않아서 계속 고민 중이다. 조금 더 깔끔하게 할 수 있을 것 같은데 막 아이디어가 떠오르지는 않아서 다른거 할 거 하면서 계속 지켜보는 중이다..

푸시알림 날리기

State of React 2023 Survey 결과가 발표되었습니다.<a target="_blank" rel="noopener noreferrer nofollow" href="https://2023.stateofreact.com/en-US/">https://2023.stateofreact.com/en-US/</a>지난 달에 발표됐던 State of JS 를 진행한 기관과 같은 곳에서 진행하는 Survey 죠.형제 격인 Survey 들이 몇가지 있습니다. JS/ CSS/ HTML/ React/ ...React 개발자들이 이 조사 발표를 기다리는 건, 기술동향에 대한 궁금함도 있겠지만,"어떤" 기술을 사용할 것인지를 결정하는데 중요한 자료가 된다는 것이죠.러닝커브가 도사리고 있는 기술인데, 애써 배워놨더니 쓸모 없어지는 경험은 누구에게나 악몽이 될 수 있으니까요..그런 의미에서, 제 채널에서 진행하고 있는 강좌에서 선택한 기술들이 대체로 높은 스코어를 받고 있다는 건 흡족한 일이네요.개인적으로는 Zustand 가 급상승하기를 기대했지만 이번 결과에서는 그렇지 못했습니다. Zustand 가 관심을 받기 시작한 건 얼마 안됐으니까요.. 그리고 이 조사 발표는 정말 늦습니다.그리고 ' 가장 고통스러웠던 API' 설문에서는 forwardRef 와 memo 가 나란히 선두에 뽑혔군요.React 19 에서는 forwardRef 가 없어질 것이라는 이야기도 돌았죠. 컴파일러가 도입되면 memo 도 설 자리를 잃게 될 테고... 이제 HOC 는 서서히 소멸되어가는 기술이 될 것 같습니다.관심있는 분들에게는 매우 의미있는 시간이 될 것입니다.

State of React 2023 Survey 결과가 발표되었습니다.https://2023.stateofreact.com/en-US/지난 달에 발표됐던 State of JS 를 진행한 기관과 같은 곳에서 진행하는 Survey 죠.형제 격인 Survey 들이 몇가지 있습니다. JS/ CSS/ HTML/ React/ ...React 개발자들이 이 조사 발표를

State of React 2023 Survey 결과 발표