ALL 썸네일형 리스트형 📌 대외 활동/2311~ Look : AI 기록 서비스 [PWA] FCM으로 알림 기능 구현하기 (3) : 포그라운드 [단어 정의] Non-persistent notification : a notification without an associated service worker registration. Persistent notification : a notification with an associated service worker registration. 구현 코드 의사 코드 발췌 To create a notification, given a string title, NotificationOptions dictionary options, environment settings object settings, and optionally a ServiceWorkerRegistration object serviceWorkerR.. 📌 대외 활동/2311~ Look : AI 기록 서비스 [PWA] FCM으로 알람 기능 구현하기 (2) : 백그라운드 공식 레퍼런스 아래 링크와 같이 공식 문서를 정말 하염없이 물고 뜯고 맛 보며 많은 시행착오를 거쳤다. 결과적으로, 공식 문서 참조만으로는 원하는 기능을 구현할 수 없었기 때문에 그와 관련된 내용을 정리해보고자 한다. 이때까지 개발한 기능 중 가장 레퍼런스를 오랫동안 찾아 다니고 많은 시도를 해본 것 같다. https://firebase.google.com/docs/cloud-messaging/js/receive?hl=ko 자바스크립트 클라이언트에서 메시지 수신 | Firebase 클라우드 메시징 Google I/O 2023에서 Firebase의 주요 소식을 확인하세요. 자세히 알아보기 의견 보내기 자바스크립트 클라이언트에서 메시지 수신 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장 fi.. 📌 대외 활동/2311~ Look : AI 기록 서비스 [PWA] FCM으로 알림 기능 구현하기 (1) : Notification API FCM(Firebase Cloud Message) 기반으로 PWA 알림 기능을 구현해보았다. 정석이랄 게 없어서 이것저것 정말 많은 레퍼런스를 찾아보고 시도해보면서 나름대로 의도한 기능을 구현할 수 있었다. 우선 구현한 기능은 아래와 같다. 크게 백그라운드와 포그라운드, 웹 브라우저와 모바일 브라우저(PWA 앱 포함)로 나뉜다. [단어 정의] - 포그라운드(foreground) : 사용자가 해당 앱을 사용하고 있는 상태 - 백그라운드(background) : 앱이 사용자와의 상호 작용이 없는 상태로 홈 버튼을 누르거나 다른 앱으로 전환한 상태 구현한 기능 포그라운드 사용자가 앱을 사용하고 있을 때, 푸쉬 알림이 뜸 알림 메시지에는 제목, 내용, 앱 아이콘, 필요한 경우 이미지까지 포함 앱을 클릭할 시, .. 📌 대외 활동/2312~ NGO 웹사이트 리뉴얼 nx 기반 모노레포 구축기 (1) 프로젝트 구조 모노레포 도입 계기 문제 상황 웹 리뉴얼 프로젝트를 시작하면서 기존 웹 서비스를 분석하는 작업에 들어갔다. 특히 많은 팀원들이 공감했던 부분은 사용자 경험이 다방면에서 굉장히 좋지 않다는 것이었다. 특히 디자인적인 부분만 서술해보자면 아래와 같이 일관적이지 못한 사용자 경험과 Voice & Tone, 파악할 수 없는 디자인 원칙과 패턴이 있었고, 더 큰 문제점은 디자인 유지보수를 위한 문서화가 되어 있지 않다는 문제가 있었다. figma 파일이나 디자인 관련 기획 내용은 찾아보기 힘들었기 때문에 현상황에서 할 수 있는 것은 실제 서비스되고 있는 화면을 캡쳐하여 분석하는 방법밖에 없었다. 그 전에 해당 홈페이지를 개발 하셨던 분은 이미 수 년 전 기관을 떠나셨고 잠깐 한국에 체류하셨던 외국 분이셨기 때문에.. 📌 대외 활동/2311~ Look : AI 기록 서비스 [Nuxt3 / PWA] service worker로 앱 오프라인 캐싱하기 vue에서 내 상황에 적합한 레퍼런스를 찾지 못해 아쉬웠던 기억이 있기에 비슷한 상황일 분들을 위해 글을 작성해둔다. Nuxt3 프레임워크 기반의 프로젝트에서 service-worker로 오프라인 캐싱을 구현해보았다. 서비스 워커란? 서비스 워커는 웹 앱의 동작을 고도화할 수 있는 이벤트 기반 워커로 JavaScript 파일의 형태를 가지고 있다. 즉, 웹 플랫폼이 네이티브의 앱 기능을 구현할 수 있도록 기능을 제공하며 보통은 아래의 상황을 구현할 수 있다. 백그라운드 데이터 동기화 다른 출처에서의 리소스 요청 응답 위치 정보, 자이로 센서 등 계산에 높은 비용이 들어가는 다수의 페이지에서 함께 사용하기 위한 데이터 업데이트 중앙화 특정 URL 패턴에 기반한 사용자 지정 템플릿 제공 성능 향상 (사용자가.. 📌 대외 활동/2311~ Look : AI 기록 서비스 PWA(Progressive Web Application)란? PWA는 한 마디로, 웹 기술 만으로 앱과 같은 기능을 갖춘 웹앱이다. 비교 모바일웹 : PC 웹 페이지를 모바일에 맞게 줄인 것 웹 개발 풀 브라우저 방식 (화면 일부분이 변경될 때 화면 전체 내용을 서버에서 새로 받아옴) 웹 브라우저에서 검색 혹은 URL로 접근해야 하는 불편함 네이티브 앱 : 우리가 일반적으로 알고있는 앱 앱 개발 : 운영체제에 따른 각 네이티브 언어(개발언어)로 개발 네이티브 API 사용 가능 높은 퍼포먼스 업데이트할 때마다 플레이스토어~앱스토어를 통해야 함 (+심사과정) 웹앱 : 모바일에 최적화된 웹 웹 개발 구동 방식이 마치 네이티브와 같음 SPA (최초 한 번 페이지 전체를 받아온 후, 화면 일부분이 변경될 때 해당 부분만 데이터를 바인딩) 웹 브라우저에서 검색 혹은 URL로.. 📌 대외 활동/2311~ Look : AI 기록 서비스 react와 vue 비교 이번에 사이드 프로젝트에서는 vue로 개발을 진행하고 있었기 때문에 react와 vue의 차이점을 경험적으로 익힐 수 있었다. 50% 이상 진행 중이었던 프로젝트의 중간에 들어갔기 때문에 프론트엔드에서는 이미 vue로 개발을 진행하고 있었고, 그렇기 때문에 vue로 개발 경험을 할 수 있었던 좋은 경험이었다. react와 vue 공통점 Web-App (SPA), 모바일 개발에 모두 사용된다. 가상 DOM을 사용하는 아키텍처를 가지고 있어 reflow-repaint를 최소화한다. 즉 DOM의 조작이 많이 발생하는 SPA에서 브라우저 연산의 양을 줄여 성능을 개선시킬 수 있다. 컴포넌트 기반 아키텍쳐로 코드를 재구성하고 재사용할 수 있도록 해준다. 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관.. FE/Network [성능 최적화] PageSpeed와 Lighthouse 코어 웹 바이탈(Core Web Vita) 페이지의 성능은 곧 사용자 경험과 관련이 있다. SEO 전략을 세우는 데 중요한 구글의 품질 평가 요소 중 한 축을 담당하는 코어 웹 바이탈은 개발 과정에서 빠뜨려서는 안 될 중요한 개념이다. 코어 웹 바이탈이란? 웹 페이지의 사용자 경험을 측정하는 중요한 지표들로 검색 엔진이 웹 페이지의 품질과 성능을 평가하는 데 사용된다. 로딩 시간 (Loading Performance) 최대 콘텐츠 렌더링 시간 (LCP, Largest Contentful Paint) 좋은 사용자 환경 제공을 위해서는 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 한다. 첫 바이트까지의 시간(TTFB), 콘텐츠가 포함된 첫 페인트(FCP) 역시 LCP 관련 문제를 진단.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [KPT 회고] 버전 1.2 마무리 버전 1.2 구현모습 버전 1.2 (참고) 버전 1.0 (참고) 버전 1.1 KPT 회고 잘했던 점 (KEEP) 한번쯤은 적용해보고 싶었던 라이브러리, 기능구현 등은 다 도전해보았다. Next.js App Router 모노레포 시스템 한/영 언어지원 노션 API CSR, SSR, ISR 다양한 CSS (특히 인터랙티브) CI/CD 성능 최적화 JEST 테스트 챗봇 크로스 브라우징 수동 체크 (크롬, 사파리, 모바일웹) 물론 빠진 기능들도 있다. 사실 기능 적용은 마지막에 빠졌지만, zustand를 사용한 상태 관리도 경험해보았다. useLayoutEffect 등 react 기반 인터랙티브와 관련된 코드들도 현재는 빠진 상태이지만, 굉장히 많은 도전을 했다. 버전 1.1에서 추가되고 1.2에서 없어진 스크.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [custom hook] 페이지 최상단으로 이동하는 버튼 구현한 기능 위로 이동 버튼 세부 기능 : 일정 스크롤 이상일 때 나타남 클릭하면 스크롤 최상단으로 부드럽게 이동 구현한 방법 커스텀훅 의사 코드 window에 scroll 이벤트 등록 (useEffect) 이벤트 : 스크롤 했을 때 스크롤 높이가 1000px이상 이면 버튼이 보이도록 상태 변경 (isShowBtn = true) click했을 때 스크롤 높이가 0px(화면 최상단)으로 부드럽게 이동하는 함수 생성 2번의 버튼이 보이는지 여부 상태와 3번의 함수를 return 버튼 컴포넌트에서 isShowBtn 상태에 따라 opacity 값이 달라지도록 클래스네임 동적으로 변경 버튼 컴포넌트의 onClick 속성에 3번 함수 매칭 useScrollMoveToTop.ts import { useEffect, .. 📌 PROJECT/2309 다국어 지원 포트폴리오 [custom hook] 스크롤을 드래그하며 페이지 이동 구현 구현한 기능 스크롤 위치에 따라 시각적으로 바뀌는 스크롤바 마우스를 클릭 또는 누른 채 드래그 하여 페이지를 이동하는 모습 세부 기능 : 클릭 하면 바로 이동, 왼쪽 마우스 누른 후 드래그하면 페이지 이동 구현한 방법 ScrollProgress.tsx 'use client'; import React, { memo, RefObject } from 'react'; import { useScrollProgress } from '@/hooks/useScrollProgress'; import styles from './ScrollProgress.module.scss'; interface ScrollProgressProps { mainRef: RefObject; // 여기서 mainRef는 body를 감싸는 전체 .. 📌 PROJECT/2309 다국어 지원 포트폴리오 [Next.js 13] SSR로 동적 meta태그 생성하기 (app router) [ 개발 환경 ] - nextjs는 app router 구조로 개발 중입니다. + 다국적 언어 지원 라이브러리인 react-i18next도 함께 사용하고 있습니다. - 참고 포스팅 : [Next.js 13] SSR로 동적 meta태그 생성하기 (pages router) 결과 동적 언어 값에 따른 정적 메타태그 데이터 페칭 후의 동적 메타태그 메타태그란? 메타태그는 웹 브라우저가 웹 페이지에 대해서 알아야 할 정보들을 포함한 태그이다. HTML 문서의 head 섹션에 포함된다. 검색 엔진과 다른 웹 크롤러에게 웹 페이지에 대한 정보를 제공하므로 SEO 최적화와 관련이 있다. 즉, 검색엔진이 웹 페이지가 어떤 주제를 다루고 있는지를 파악하여 검색 결과의 순위를 매기는데 영향을 미친다. 페이지 제목, 설명,.. 📌 PROJECT/2309 다국어 지원 포트폴리오 pnpm을 이용한 모노레포 마이그레이션 모노레포를 적용하게 된 계기 기존 라이브러리 성능 문제 일전에 Notion DB로 사이트를 구축하면서 'react-notion-x' 라이브러리를 사용하였다. 이후 nextjs에 조금 더 확장되어 기능과 최적화 등이 고도화된 다른 라이브러리인 'nextjs-starter-kit'이 있었지만 전자의 라이브러리를 선택하게된 이유는 (1) 노션 API로 인증 받는 코드를 nextjs로 직접 짜고 싶어서 (2) 멀티 탭 데이터베이스(동일한 데이터를 키워드별, 날짜별 등으로 분류 가능) 기능이 있어서 였다. https://doyu-l.tistory.com/644 NotionAPI로 블로그 만들기 (3) Next.js App Router 미들웨어로 redirection 설정하기 Next.js의 App Router에서.. 📌 PROJECT/2309 다국어 지원 포트폴리오 NotionAPI로 블로그 만들기 (3) Next.js App Router 미들웨어로 redirection 설정하기 Next.js의 App Router에서의 react-notion-x 라이브러리 적용기입니다. + 다국적 언어 지원 라이브러리인 react-i18next도 함께 사용하고 있습니다. * 23.10.25 : 현재는 모노레포 구축 후 nextjs-notion-starter-kit으로의 라이브러리 교체가 되었습니다. 문제상황 react-notion-x는 상세페이지 클릭시 자동으로 /{pageId} 경로로 redirection시킨다. 나의 경우는 경로에 동적 언어 라우팅도 포함되고 있었기 때문에 /[lng]/{pageId} 이런 식으로 경로가 설정되어야만 했다. lng는 en(영어), ko(한국어) 2개국어 지원 따라서 /en/{pageId} 또는 /ko/{pageId} 로 이동해야 함. 관련된 레퍼런스가 없음. .. 📌 PROJECT/2309 다국어 지원 포트폴리오 NotionAPI로 블로그 만들기 (2) react-notion-x로 노션 데이터베이스 불러오기 (Next.js App Router) Next.js의 App Router에서의 react-notion-x 라이브러리 적용기입니다. + 다국적 언어 지원 라이브러리인 react-i18next도 함께 사용하고 있습니다. * 23.10.25 : 현재는 모노레포 구축 후 nextjs-notion-starter-kit으로의 라이브러리 교체가 되었습니다. 구현화면 이전 포스팅에서 언급한 것처럼 react-notion-x 라이브러리를 사용하여 노션의 데이터테이블 데이터를 가져왔다. 특히 다른 라이브러리와 비교해봤을 때 위의 멀티탭 기능이 제공된다는 점이 마음에 든다. 데이터 분류 기능도 그대로 가져오고 페이지 공간을 크게 줄일 수 있다! Query a database Gets a list of Pages and/or Databases contained .. 📌 PROJECT/2309 다국어 지원 포트폴리오 NotionAPI로 블로그 만들기 (1) nextjs-notion-starter-kit vs react-notion-x 결론부터 말하자면, react-notion-x 사용을 크게 권장하지는 않는다. 우선, 많은 기능들이 제공되지 않고 CSS 변경도 제한적이며 여러 이슈가 진행 중이다. 특히 react-notion-x 라이브러리를 좀 더 확장시켜서 next.js에 맞는 nextjs-notion-starter-kit 라이브러리가 존재한다. 그러나 아래에 장/단점 비교가 되어있으니 니즈를 충족시켜주는 라이브러리를 쓰면 될 것 같다. (그럼에도 불구하고 react-notion-x를 사용한 이유는 nextjs-notion-starter-kit는 코드를 클론하여 pageId 값만 바꿔주고 배포하면 되는 것이었기 때문에 그저 직접 SSR에서 NotionAPI OAuth 요청과 fetching 등 코드를 짜보고 싶었기 때문이다..!) .. 📌 PROJECT/2307 제로힙 : 가계부 SNS Meta 태그 컴포넌트 및 중복 출력 이슈 구현 기능 메타 태그 생성 컴포넌트 아래와 같이 HeadMeta 컴포넌트를 생성하여 팀 프로젝트에서 공통된 형식의 메타 태그를 생성하고자 했다. HeadMeta 컴포넌트 (해당 블로그 참고) import Head from 'next/head'; interface HeadMetaProps { title?: string; description?: string; url?: string; image?: string; } export default function HeadMeta({ title, description, url, image }: HeadMetaProps) { return ( ); } 아래와 같이 필요한 컴포넌트에 필요한 값을 넣어주면 된다. userMetaData.ts export const USE.. 📌 대외 활동/2310~ NGO 웹개발 유지보수 봉사 Apps Script로 엑셀 데이터와 Google Groups 자동화하기 (4) 최종 + 리팩토링 최종 기능 구현 추가된 기능 성공 / 에러 처리 메시지 정교화 최신 업데이트 시간 추가 데이터 공백 없애는 처리 (공백 포함되면 에러가 났음) MEMBER 등 소문자로 입력해도 대문자로 처리 (소문자로 입력되면 에러가 났음) 문서 작성 문서 작성 구현 화면 1 그룹스 -> 엑셀로 데이터 가져오기 관리하는 그룹이 많았기 때문에 개별 그룹에 해당되는 메일 주소를 groupKey로 설정했다. 데이터 요청이 성공적으로 처리되면 해당 groupKey를 출력하여 어떤 그룹의 데이터를 가져왔는지 확인할 수 있도록 했다. 구현 화면 2 엑셀 -> 그룹스로 데이터 업데이트하기 예외처리 (엑셀에 수정 내용이 없을 때 출력) 구현 화면 3 엑셀 -> 그룹스로 데이터 업데이트하기 신규 등록했을 때 성공 메시지 출력 실패하는 .. 📌 대외 활동/2310~ NGO 웹개발 유지보수 봉사 Apps Script로 엑셀 데이터와 Google Groups 자동화하기 (4) 엑셀 -> 그룹스 동기화시키기 엑셀 시트에서 항목(회원 목록 데이터)이 삭제되거나 새로 추가되거나 기존 항목이 수정 됐을 때, 그룹스 데이터에서도 해당 변경 내용이 동기화되는 기능을 구현했다. util 함수들 바로 이전 포스팅에서 나온 getMyGroup 함수에서 엑셀로 데이터 값 집어넣는 부분이 빠진 것 밖에 달라진 점이 없다. 이번에 나오는 함수들(엑셀 시트 데이터에서 그룹스로 데이터 업데이트)한테 적용시켜야 하는 함수이다. 1. 데이터 환경변수에 저장하기 - 의사 코드 * getMyGroup 과 6, 7번만 빼고 로직은 같다. * 2, 3번은 리팩토링 해서 oauth.gs에 전역으로 빼둔 상태이다. 액세스 토큰 발급 액셀 시트에 작성되어 있는 그룹 대표 이메일 값 추출해오기 (위치는 H1) 이메일 값이 이중 배열로 들어오기 때문.. 📌 대외 활동/2310~ NGO 웹개발 유지보수 봉사 Apps Script로 엑셀 데이터와 Google Groups 자동화하기 (3) 액셀 시트로 데이터 가져오기 getMyGroup 함수를 만들어서 그룹스에 있는 멤버 목록 데이터를 액셀 시트로 가져오는 기능을 구현했다. getMyGroup - 의사 코드 액세스 토큰 발급 액셀 시트에 작성되어 있는 그룹 대표 이메일 값 추출해오기 (위치는 H1) 이메일 값이 이중 배열로 들어오기 때문에 문자열 값으로 바꿔서 groupKey 라는 변수에 넣어주기 groupKey를 params에 넣어서 GET 요청 보내기 받은 response를 JSON.parse 하고 member에 해당되는 데이터(그룹 내 모든 회원 목록) 추출하기 엑셀 시트 내 원하는 위치부터 값 입력시키기 값 입력 완료 후의 칸은 다 빈칸으로 만들기 -> 만약 그 전에 있었던 데이터가 더 많아서, 받아온 데이터가 완전히 덮어지기 전에 입력이 완료됐을 때를 위함 .. ⬆︎ 이전 1 2 3 4 ··· 12 다음
