📌 PROJECT 썸네일형 리스트형 📌 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.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [CI/CD] lint-staged, husky로 린트 검사 자동화하기 (+Jest test) 로컬에서 commit 또는 원격 레포지토리로 push하기 전에 린트 검사를 자동화하는 시스템을 구축해보았다. 개념 정리 Git Hook이란? git commit 또는 push 등의 git 이벤트가 일어나기 전에 특정 스크립트를 실행하여 린트 검사를 해주고 싶다면 Git Hook은 Git 저장소에서 발생하는 이벤트에 대응하여 특정 작업을 실행할 수 있는 스크립트이다. 종류에는 'pre-commit'(커밋 전), 'pre-push'(푸쉬 전), 'post-commit'(커밋 후)가 있다. git 이벤트 사이에 갈고리(hook)을 걸어준다는 의미 코드를 커밋하기 전에 코드 검사, 유닛 테스트 실행 등 스크립트를 실행할 수 있다. Git Hook을 관리하고 실행하는 것과 관련된 라이브러리에는 husky가 있다... 📌 PROJECT/2307 제로힙 : 가계부 SNS [Next.js 13] SSR로 동적 meta태그 생성하기 (pages router) [ 상황 ] - /user/profile/[userId] -> 동적 라우팅으로 특정한 유저의 페이지로 접속하는 상황 - 유저 페이지 자체는 유저가 쓴 게시글 페이지보다는 SEO 중요도는 다소 떨어지지만, 추후 확장을 위해 이미 개발해둔 동적 페이지에서 기능을 구현 - 마이 페이지와 유저 페이지는 한 컴포넌트를 공유하여 사용 (전역에 저장된 나의 loginId와 동적 라우팅으로 접속한 페이지에서 params로 추출한 userId를 비교하여 분기 처리) [ 개발 환경 ] - nextjs는 pages router 구조로 개발 중이며 데이터 요청은 Tanstack-Query를 사용합니다. - 관련 포스팅 : [Next.js 13] SSR로 동적 meta태그 생성하기 (app router) 구현 기능 마이 페이.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [react-typist] React 18 이상에서 호환 안 되는 문제 라이브러리 이슈 react-typist로 타이핑 애니메이션을 만족스럽게 구현한 직후, 콘솔창에서 아래와 같은 노란 경고창을 확인했다. Warning: componentWillReceiveProps has been renamed, and is not recommened for use ... 문제는 위의 라이브러리가 React 18에서 의도한 기능 구현이 제대로 되지 않는 것이었고, 역시나 해당 라이브러리 깃헙 이슈에도 관련 내용이 이미 2022년부터 있었다. 흐름을 보니 더 이상 업데이트가 활발하게 진행되지 않아 모인 유저들은 다 각기 다른 라이브러리를 찾아 떠나는 중이었다.. ㅋㅋ 라이브러리 교체 이후 나도 어느정도 검증되어 있는 또 다른 라이브러리인 React Simple Typewriter로 라이브러.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [react-i18next] 다국어 처리(한/영) 및 글자 강조 스타일링하기 다국적 언어 지원 기능 구현 아래와 같이 react-i18next 라이브러리를 사용하여 한/영 언어 지원이 되는 사이트를 만들어보았다. 구현 화면 적용 방법은 어렵지 않고 공식 문서 보고 그대로 따라하면 된다. 특히 주의해야 할 점은 App router 방식이 완전 다르게 구현이 되기 때문에 레퍼런스를 볼 때 꼭 확인을 해야 한다. 즉, next-i18next는 app 라우터에서는 사용되지 않는다. 1. 라이브러리 설치 pnpm add i18next react-i18next i18next-resources-to-backend accept-language 2. 폴더 구조 및 파일 └── app └── [lng] ├── second-page | └── page.js ├── layout.js └── page... 📌 PROJECT/2309 다국어 지원 포트폴리오 [Stylelint] scss 일관적인 스타일 규칙 적용시키기 Nextjs(13.5.2) App router에서의 적용기입니다. stylelint란? css, scss와 같은 스타일에 규칙을 정의할 수 있는 lint로 아래와 같은 장점이 있다. 스타일 오류를 방지 일관적인 스타일 규칙 적용 (플러그인으로 규칙 커스텀 가능) 스타일 단위 테스트 지원 특히 나의 경우에는 eslint에서 import 순서를 일관적으로 정렬하는 것처럼 css 속성 역시 일관적으로 정렬해주는 것이 굉장히 만족스러웠다. (예를 들면 position 관련 속성은 제일 위로 정렬이 된다.) SCSS로 설정하기 우선 아래와 같이 패키지를 설치했다. stylelint-config-prettier-scss : prettier와 충돌되는 stylelint SCSS 규칙을 비활성화 "stylelint":.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [JEST] next-router-mock으로 next/link 테스트 (버그 issue 진행 중) 요즘 이슈가 생기면 제일 먼저 확인해보는 곳이 해당 깃헙에 들어가서 이슈 검색을 해보는 것이다. 특히, nextjs13 같은 경우에는 블로그 등 최신 이슈 관련하여 올라온 자료들이 거의 없을 때도 있어서 우선 관련 깃헙에 들어가보면 stackoverflow보다도 더 빠르게 찾을 수 있다! 오늘도 다시 한 번 되새기자 나는 혼자가 아니야! 문제 상황 테스트하고자 했던 상황은 간단했다. 바로 nav 바의 'dots'를 누르면 '/dots' 링크로 이동하는 지 jest(v29.7.0)로 테스트 하는 것! import Link from 'next/link'; // import한 상수 -> const navMenus = ['roadmap', 'dots']; import { navMenus } from '@/con.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [JEST] react-i18next 테스트하기 해당 프로젝트에서 reaxt-i18next를 사용하여 아래와 같이 한/영 변환 기능을 적용하였다. 초기 기능 적용 모습 따라서 이와 관련하여 nextjs app router에서 테스트 코드를 작성해보았다. jest.setup.ts import '@testing-library/jest-dom'; // 아래 내용 추가 (useTranslation 훅 등 목업) jest.mock('react-i18next', () => ({ useTranslation: () => { return { t: (str: string) => { return str; }, i18n: { changeLanguage: () => new Promise(() => {}), }, }; }, initReactI18next: { type: '3r.. 📌 PROJECT/2309 다국어 지원 포트폴리오 [JEST] 설정 및 스냅샷 테스트 Next.js에서 상황에 따라 선호되는 테스트 라이브러리/프레임워크는 아래와 같다. Jest : 유닛 테스트 유닛테스트란? : 소스코드의 특정 모듈(메서드)이 의도된 대로 정확히 작동하는지 검증하는 절차 하나의 기능을 독립적으로 테스트하면서 개발 단계에서 일찍 버그를 발견하여 시간을 절약하고 코드 퀄리티를 향상시켜줌 컴포넌트, 함수, 모듈 단위로 테스트함으로서 각 코드가 원활하게 작동하고 있음을 확인 React-Testing-Library : 리액트 컴포넌트를 독립적으로 테스트 예시 ) 컴포넌트 테스팅 (Component Testing) 특정한 props에 따라 컴포넌트가 에러없이 렌더링 되는가? 과거의 렌더링 결과와 현재 렌더링 한 결과가 일치하는가? 특정한 DOM 이벤트의 원하는 변화가 제대로 발생하.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 4주차(데모데이) KPT : 최선의 선빵 - 지옥의 CORS 들어가며 프론트 withCredentials: true 적용된 상태 백엔드 https://zerohip.co.kr/ 혹은 https://www.zerohip.co.kr/ 에 접속하면 vercel uri를 프록시하고, 해당 uri에서 api.zerohip.co.kr/request uri로 요청을 보내면 해당 uri따라서 http://localhost:8080으로 프록시해서 웹 서버 내부의 로직 수행. https://zerohip.co.kr/ : 인증서 적용 https://www.zerohip.co.kr/ & https://api.zerohip.co.kr/ : 와일드카드 인증서 적용 클라이언트랑 서버통신은 https , 서버내부통신 http 리버스 프록시 사용 상태 지옥의 CORS 좌절, 희망 그리고.. 좌.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 3주차 KPT : 기승전결의 ‘전’ 이번 주를 되돌아보면 참 다사다난 했던 일주일이었다. 너무 바쁜 나머지 1, 2주차처럼 회고를 틈틈이 작성할 틈도, 여유도 결코 없었다. 모든 일이 잘 해결된 지금의 시점에서 시원한 보리차를 마시며 한 주를 조금이나마 되돌아본다. 🐱 우리는 현재 가장 힘든 마지막 언덕을 오르고 있다. 그 말을 다르게 하면, 정상 역시 거의 코 앞에 있다는 것이다.. 기승전결의 ‘전’ 배포가 안 된다 가장 큰 고민은 배포가 안 되는 것이었다. 그래서 백엔드 분들과 밤을 새며, 배포에 대한 과정을 함께 하기도 했고 아서 멘토님이 보실 수 있는 에러 공유 채널에 글을 올리기도 했다. (아래는 잠을 주무시지 않고 배포에 매달리셨던 백엔드 팀원 분들..) 걱정을 잘 안 하는 성격이라 일단 해결 방법은 찾을 것이고 해결은 되겠지,.. 📌 PROJECT/2307 제로힙 : 가계부 SNS 프로젝트 2주차 KPT : 나는 혼자가 아니다 1. 혼자 가면 빠를 순 있다. 1주차 회고에서 깨달음을 얻었음에도 불구하고, 인간은 역시 망각의 동물인가 갑자기 변하기는 쉽지가 않다. 이유는 아래와 같다. 발단 내가 맡은 페이지는 피그마에서 미처 만들어두지 않은 페이지(회원 탈퇴 등..)였다. 늘 극한의 효율을 추구해왔던 나는, 무에서 유를 창조하는 디자인을 하면서 공통된 디자인도 그렇고, 정말 사소한 요소들(회색 글자를 hover했을 때 글자 색)에 대해 정말 아무런 고민도 없이 휘리릭 CSS 처리를 해버렸다. 주말에 작업해서 팀원들을 호출하기 미안한 것도 있었으나, 그렇게 하는 것이 일처리에 있어서 효율적이었던 것도 있었다. (물론 피그마 작업에 인터렉티브 효과까지 있었으면 기획 단계에서 논의가 다 끝나는 문제였겠지만 아쉽게도 우리는 그렇게까지는.. ⬆︎ 이전 1 2 다음
