전체보기

안녕하세요오늘은 클라이언트에서 에러가 발생하면 에러 로그와 사용자가에러 화면에서 추가 동작이 가능하도록 할 수 있는 ErrorBoundary.tsx를 소개 드리겠습니다.참고자료 : https://nextjs.org/docs/advanced-features/error-handling저희 사이트의 경우 웹뷰 기반의 앱도 함께 사용 중 입니다.그렇기 때문에 사용자가 클라이언트 에러가 발생하면 해당 화면에서 빠져나올 방법이 없었습니다.실행 핸드폰 어플에서 클라이언트 에러가 발생하면 보이는 화면.사실 이미 구현이 되었어야 했다고 생각했지만 NextJS로 전환한지 얼마 지나지 않았고아직 PHP->React전환 작업이 한창 남았기 때문에 인지하지 못하고 있었다.QA팀에서의 문제보고클라이언트 화면에서 에러 발생후 고객..

안녕하세요.NextJS 버전12에서 서버사이드 미들웨어(베타)가 추가되었습니다.저는 미들웨어가 추가되었다는 NextJS 패치 Blog를 보고 곧 바로 교체 구현할 수 있는 기능 하나가 떠올랐습니다.기존에 userAgent에서 익스플로러가 감지되면 엣지브라우저로 강제 리다이렉트 시키는 기능을 _document에서 구현하였는데요.이 기능을 미들웨어에서 구현하면 좋다고 생각되었습니다._middleware.ts 생성_app.tsx, _document.tsx와 같이 page/_middleware.ts 파일생성 해주시면 됩니다._middleware.ts 소스 코드import type { NextFetchEvent, NextRequest } from 'next/server';import { NextResponse }..

안녕하세요오늘은 저희 회사에서 레디스를 사용하는 방법에 대해 소개 드리겠습니다!레디스 적용하게된 이유저희 회사가 약 10년이 넘게 쌓아온 DB, 컨텐츠팀 && 기획팀에서 수시로 추가되는 기능들 때문에DB구조가 엉망이 되었고 간단한 스드메 리스트를 가져오는데 부가적인 기능들을 다 포함하면 Join 테이블이 6~10개 정도가 됩니다.(웨딩홀, 협력사등등 메인카테고리가 "브랜드"로 같음에도 테이블이 따로 있는 경우 이외 다른 이유들)사진으로 예를 들면 "상록아트홀"에 BEST라는 아이콘을 뽑아오기 위해 테이블을 1~3개를 조인을 통해 가져올 수 있습니다.그래서 이런 525개라는 적은 데이터를 받아오는데 1~3초가 걸렸습니다.리스트를 불러오는데 3초라는 시간은 엄청 긴 시간이고 개선이 필수적이였습니다.레디스를 ..

안녕하세요이번 글은 클라이언트를 진입하기 전에 서버사이드에서 301리다이렉트를 회사내 간단한 예시로 소개드리겠습니다.실사용 예시바로 저희 사이트를 통해 실사용 예시를 들겠습니다.현재 비로그인 상태에서 앱을 실행한뒤 하단 네비게이션 마이페이지를 클릭하면비로그인을 확인하고 로그인 페이지로 리다이렉트 시킵니다.여기서 만약 마이페이지 클라이언트에서 비로그인를 확인하고 로그인 화면으로 리다이렉트를 시킨다면 문제가 발생합니다.문제 : 홈 -> 마이페이지 -> 비로그인 확인 -> 로그인화면정상 : 홈 -> 마이페이지 진입전 서버사이드에서 비로그인 확인 -> 로그인화면차이점이 바로 보이실까요?문제의 경우 홈에서 이미 마이페이지로 이동한 상태에서 비로그인 검증을 하고 로그인 화면으로 보낸다면사용자가 로그인을 하지않고 뒤..

안녕하세요.저희팀에서 자체적으로 만들어 유용하게 사용하고 있는 useDeepEffect 커스텀 훅을 소개하겠습니다.(결국 구글링을 통해 알아낸 코드입니다 ㅎㅎ)보통 리액트에서 작업시 부모컴포넌트에서 자식컴포넌트로 props를 넘기는 경우가 진짜 많은데요!그런 경우에서도 자식 컴포넌트에서 useEffect를 사용한다면 useDeepEffect는 필수적이라고 생각합니다.useDeepEffect 사용예시간단한 예시 코드 입니다.import { useDeepEffect } from '@hooks/useDeepEffect';import React, { useEffect, useState } from 'react';function Parents() { const [name, setName] = useState('..

전환 이유기존 회사사이트는 php로 개발되어 있고 SEO가 각 페이지별로 잘 적용되어 있었습니다.NextJS의 장점인 SEO를 적극 활용.NextJS를 들어본 사람은 누구나 알고있는 SSR가장 큰 이유! 기존 회사사이트 React(CSR) 폴더 구조와 불필요한 컴포넌트가 너무 많아 사이트 초기 렌더링 속도가 너무 느렸습니다.(크롬네트워크3G적용후 홈페이지 로드시 약15초가 걸림..)초기 사이즈를 줄이고자 lazy import 다 적용을 해도 초기 설계가 잘못 됐는지 큰 변화가 없었다.결국 코드 전체 리팩토링을 생각을 했고 리팩토링 하는 기회에 NextJS로 전환하자고 생각하였다.리덕스와, useSWR, react-query등 (전)개발자가 공부하면서 개발한 사이트라 너무 여러가지 라이브러리가 존재했고하나..

React -> nextJS로 전환하면서 리덕스를 걷어내고 useSWR로 데이터를 관리하고 있는중글로벌 상태 관리는 Context API를 사용하자! 라고 생각하여 개발하였습니다.새로 입사한 개발자분이 페이지 하나를 담당하여 개발중 최상위 컴포넌트에 1개의 Context Provider를 설정하여개발을 진행하였고 역시나 엄청난 리렌더링 덕분에 개발자 도구 네트워크에 찍힌 같은 URL데이터 호출이 5번정도혹은 어떠한 이벤트를 실행할 때 마다 네트워크를 호출하는 문제가 발생하였습니다.이 문제를 해결을 하기 위해서는 context api를 분할하여 관리를 해야한다고 피드백을 주었지만당사자는 이미 너무 먼길을 와서 처음부터 개발을 해야할 거 같다는 말씀을 하셨다...그러던중 zustand를 알았고 공식 문서를 ..

안녕하세요. 웹사이트중에 새창(자식창)을 띄우고어떠한 이벤트를 완료 하였을때 부모창에서 데이터를 다시 받아오게 할 수 있는 hook을 알려드릴려고합니다.회사 사이트 활용 예시흔히 사이트에서 볼 수 있는 문의 게시판 입니다.상단에 문의하기를 클릭후 문의할 수 있는 새창이 띄우는 형식이 많습니다.이때 새창에서 문의 내용을 입력후 확인 버튼 클릭시 새창을 닫고 부모창 데이터를 리프레쉬 시켜줘야 새로 등록된 문의를 볼 수 있습니다.부모창과 자식창과의 이벤트 플래그를 받을 수 있는 간단한 커스텀 훅 소개 드리겠습니다.(저도 구글링해서 작성한 코드입니다.)전체코드import { useEffect, useState, useRef } from 'react';const useCrossTabState = (stateKey..

안녕하세요.간단하지만 굉장히 많이 쓰이는 자바스크립트 문법을 저희 회사 웹,앱에서 실제 사용사례와 함께 기록 및 공유 드릴려고 합니다.1. DB에서 데이터를 뽑았는데 카테고리별로 데이터를 나누고 싶을 때!보통 DB에서 쿼리문을 실행후 데이터를 뽑을 때 이런식으로 데이터를 뽑는 경우가 많을 겁니다.const data = [ { category:"스냅+영상", name:"뭐 그냥 제목!11111", prise: 120000, count : 4032, }, { category:"스냅+영상", name:"뭐 그냥 제목!22222", prise: 550000, count : 85, }, ..

안녕하세요. 대중적으로 데이터를 요청해서 받아올때 axios를 많이 사용합니다.해당 라이브러리를 커스텀해서 사용할 수 있게 문서화가 되어있는데요.기본적인 api설정할 수 있고 토큰 만료시 api retry하는 커스텀 axios를 만들어 활용하는 코드를 소개하겠습니다.1. 저희팀이 사용하는 커스텀 axios의 전체적인 코드import axios from 'axios';import { getAccessToken, haveAccessToken, setAccessToken } from '../service/TokenService';const myAxios = axios.create({ withCredentials: true, baseURL: process.env.NEXT_PUBLIC_LOCAL_API_HOS..