개발

안녕하세요.저번에 아이웨딩B라는 협력사 스케줄 사이트를 모노레포를 사용하여 프로젝트 구성을 했는데요.이번에는 아이웨딩B를 AWS EC2 + Route53 + Load Balancer 배포 구성을 하려고 합니다.1. EC2 인스턴스 생성협력사가 많지만 사용하는 업체는 그렇게 많지 않을 거 같아 t3a.medium 유형으로 인스턴스를 생성하였습니다.생성후 보안그룹 80,443포트가 허용되어 있는 지 확인 해주세요.(저희는 기존에 aws에서 사용중이던 보안그룹을 그대로 불러와 사용하여 상세 내용을 패스 하겠습니다)2. EC2 ssh 접속(Mac os)인스턴스 생성할때 ssh 키페어 생성 후 저장을 하셨을텐데요. ssh config에 미리 ssh 정보를 저장하여쉽게 터미널에서 ssh 접속해보겠습니다터미널 실행후..

프로젝트 시작 계기안녕하세요. 아이웨딩에서 스드메(스튜디오,드레스,메이크업) 스케줄 관리가 생겼고, 스케줄 관리를 서비스운용팀에서만관리하기 힘들어 협력사와 힘을 합쳐 스케줄 관리를 하기로 하였다.협력사는 로그인 및 사용이 불편하면 사용을 잘 안한다.조건 1. '아이웨딩'과 다른 도메인조건 2. 핸드폰 인증으로만 로그인하는 간편로그인조건 3. PC버전으로 프로젝트 생성모든 조건을 고려하고 추후에 협력사가 모든 스케줄을 관리하는 '아이웨딩B'라는 시스템이 도입되면 결국엔'아이웨딩'과 분리하여 프로젝트를 진행을 해야한다.모노레포 Init 셋팅처음 레포는 총3개로 시작을 하고 추후에 아이웨딩(웹뷰), 아이컬러(웹뷰), 아이웨딩B 점점 추가 할 예정이다.모든 스택은 NextJS로 만들어지기 때문에 쉽게 추가가 가..

안녕하세요최근에 웹,앱,모바일에서 후기 작성시 고객이 등록한 이미지가 저장이 제대로 안되는것 같다고 버그가 올라왔다이미지 업로드 코드를 확인해보니 @UseInterceptors( FileInterceptor('file', { storage: diskStorage({ destination: (request, file, callback) => { const uploadPath = 'app/img'; if (!existsSync(uploadPath)) { mkdirSync(uploadPath, { recursive: true }); } callback(null, uplo..

안녕하세요오늘은 최근 겪었던 Scroll 복원이 되지 않은 이슈 경험을 소개드리겠습니다.저희 사이트가 모바일화 전환되면서 기존에 데이터 리스트 pagination이 사라지고 InfinityScroll 전부 바꾸었습니다.1,2,3,4... 페이징이 있었는데 사라졌다InfinityScroll로 바꾸게 되면서 스크롤 복원 이슈가 생겼다.예를 들면 초기 데이터 랜더링을 40개를 UI로 뿌려주고 InfinityScroll로 인해 40개씩 더 받아오는 상황에서리스트를 클릭 -> 상세페이지로 넘어갔다가 뒤로가기시 스크롤이 복원이 되지 않는다.이유는 router.push router.back 하는 과정에서 InfinityScroll의 상태는 다시 초기 상태로 돌아가기 때문이다.일단 InfinityScroll상태부터 유..

안녕하세요.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를 알았고 공식 문서를 ..