전체 글

안녕하세요이직한 회사에서 모노레포 구성을 vercel turborepo로 구성되어 있습니다최근 모노레포 환경의 각 서비스들이 공통으로 api사용할 수 있도록 package를 구성 하였는데요구성하고 난후, turbo run build --watch 모드 실행시 종속성 순서가 보장되지 않는 문제가 발생하였습니다문제원인기존 모노레포 package에는 design & shared만 존재하였습니다최근에 각 서비스별 공통 API를 사용하기 위해 api이름으로 package를 추가하였습니다문제는 design패키지에서도 api를 종속되어 있는데요.하지만 watch모드를 실행한다면 build순서가 보장되지 않아 에러가 발생합니다.로컬에서는 watch모드를 활성화하여 작업을 해야 했습니다문제의 핵심error: design..

안녕하세요.저희 아이웨딩에서 스드메 계산기 개편 작업을 하게 되었습니다스드메 계산결과까지 플로우 변경기존 스드메 상품 3개를 바로 선택해 견적을 내는 플로우 였지만개편 작업은 스드메 각각 브랜드를 먼저 선택후 상품을 정하는 방식으로 개편되었습니다./pages/calculator/index.tsx 라우트 설정 & 서버사이드 처리라우트에 해당되는 파일을 생성한후 서버사이드에서 처리 데이터는 빠른 TTFB를 위해 SEO, 비로그인시 로그인 페이지로 리다이렉트 시키는로직만 처리했습니다step=1(업체선택), step=2(업체별 상품 선택), step=3(스드메 견적 결과)pages에 이름에 맞는 라우트 파일 생성 및 서버사이드 처리후 클라이언트 사이드 컴포넌트에서query string(step=1,step=2,..

스트리밍 서버 렌더링서버에서 클라이언트로 HTML을 점진적으로 렌더링합니다.(https://github.com/reactwg/react-18/discussions/37)2022년 3월 29일 React v18 업데이트가 되다기존에도 suspense가 존재하였지만 리액트18로 업데이트가 되면서 강조된 기능이고 정식기능이 되면서 스트리밍SSR 꼭 알아야되는 아키텍처입니다https://github.com/facebook/react/releases/tag/v18.0.0NextJS의 변화NextJS는 정말 빠르게 리액트18업데이트를 대응하여 App Router라는 새로운 라우터 아키텍처를 업데이트가 되었다고 생각이 듭니다App Router이전에 NextJS v12에서도 React18을 대응하기 위해 suspens..

안녕하세요웹을 개발하면서 최근 검색어나 "오늘 하루 안보기" 팝업 플래그등브라우저 로컬스토리지를 사용을 자주 하는데요 저는 갤럭시를 사용하기 때문에 인지하지 못했지만아이폰IOS 아이웨딩앱에서 로컬스토리지가 계속 초기화가 되는 문제가 있었습니다.문제1IOS wkwebview를 사용하면 모든 저장매체를 초기화하여 호출하는 걸로 알고 있고현재 아이웨딩 개발자중 IOS개발자는 없고 전 ios개발자였던 퇴사자에게 외주를 맡겨 이슈가 큰 문제들만 외주를맡기는 상황입니다문제2IOS를 제외한 user-agent는 웹,안드로이드,크롬,사파리 전부 가능한 문제문제 해결을 위한 방안ios에서 wkwebview를 사용할 때마다 javascript코드도 같이 넘겨 로컬스토리지 셋팅 (ios개발자가 없고 앱 업데이트가 불가한 상..

안녕하세요여러가지 이유로 이직을 결심하고 당근마켓 1차 화상면접을 보게 되었다.당근마켓은 워낙 뛰어난 개발자가 많다고 들었고 조금은 두려운 마음으로1차 면접을 보았습니다질문유형자세한 질문내용을 말씀드리기 어렵지만 자신이 사용하는 기술스택들에 대해서왜 그런 기술스택들을 채택했는지에 질문들이 많았다.자신이 선택한 기술스택들에 대해 왜 선택했는지는 답변은 할 수 있었지만조금만 구글링을 하여 알아낸 기술들의 장단점이 아닌 더 딥한 내용들을 말할 수 있어야했다.개발실력에 대한 자기 객관화네카라쿠배당토라는 IT대기업, 유망한개발스타트업이 왜 뛰어난 개발자들만 있는지 알 수 있는면접 퀄리티였고 면접관이 실력이 있으니 당연히 채용에 있어 실력있는 분만 뽑을 수 있는안목이 있는거 같다는 생각이 들었습니다.현 직장에서 개..

안녕하세요현재 회사에 입사하여 내가 원하는 개발스택으로 리팩토링하고 개발을 하면서자유로운 개발을 하였지만 정말 이게 좋은 코드 일까? 라는 고민을 하였고아무래도 규모가 작은 회사에서 개발을 하면 경험 할 수 있는 부분이 한계가 있다고 생각하여이직을 알아보고 있던 중 LG유플러스 디지털커머스개발 경력채용 면접을 보게 되었다.지금부터 조금은 늦은? 면접 회고를 해보겠습니다.1차 면접1차면접은 비대면 화상 회의로 진행 되었고 실무진들과 이야기 하면서 현 직장에서어떤 역할을 맡고 어떻게 개발을 하고 개발하면서 문제해결에 대해 이야기를 나누었다현 직장에서 주도적으로 개발을 하였기 때문에 질문에 대해서 무리 없이 답변을 했습니다오히려 짧은 기간동안 많은 걸 했다고 생각하여 신뢰를 하지 못하셨던거 같습니다"이 기간동..

안녕하세요.저번에 아이웨딩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상태부터 유..