개발

1. route53 생성가장 먼저 카페24 도메인 네임서버 연결을 위해 route53 부터 호스팅 영역을 생성(네임서버 적용 후 적용 까지 시간이 꽤 걸린다) 생성 후 "값/트래픽 라우팅 대상" 주소 4개를 카페 24 도메인 네임서버에 저장한다  2. S3 웹 호스팅 생성사용할 도메인과 같은 이름으로 버킷 이름을 정해줍니다 엑세스 차단 전부 풀어줍니다 해당 설정만 진행 후 버킷 만들기 진행 lsmtest.shop은 www로 redirect 시킬거라 설정을 해줘야 합니다 속성 -> 정적 웹사이트 호스팅 권한 -> 버킷 정책 편집{ "Version": "2012-10-17", "Id": "Policy1649421058532", "Statement": [ { "..

현재 회사에서 turborepo를 사용하여 모노레포 환경을 구축하여 서비스를 운영 중 입니다.4가지 정도 되는 각 도메인의 서비스 중 NextJS로 작업 된 서비스가 있는 방면CRA환경(craco) 환경의 제법 레거시한 환경도 존재 합니다.이번 내용은 CRA환경(craco) 에 관한 내용을 다룰려고 합니다#CRA환경(craco) 문제점제가 처음 회사에 입사 했을 때 가장 기본이 되는 도메인이 CRA환경으로 운영되고 있는 환경로컬서버를 실행을 시켰을때 2분이 지나서야 실행이 되는 문제가 있었어요.그래서 이것을 저는 DX문제가 있다고 보고 어떻게 개선을 할지 고민을 했어요.#Weppack esbuild-loader 사용시도기존 craco config파일에 esbuild-loader를 사용하여 서버 실행을 해..

저희 회사는 현재 터보레포로 프론트엔드 코드를 관리하고 있어요.주요 서비스는 CRA 또는 NextJs로 구성되어 있고 공통으로 사용하는 패키지는design/shared/api 3가지가 존재하고 해당 3가지의 패키지들은 Vite를 이용하고 있어요.최근 저희 회사는 native app으로 만들어진 차량 리스트페이지를 모바일 웹(웹뷰)로 전환을 성공 하였어요.하지만 차마 IE11에 대해 대응을 못했던 상황 이에요. 특히 모노레포로 관리되고 있던 패키지는 더욱 신경을 쓰지 못한 상황 이였어요결국 패키지에서 관리하고 있던 shared에서 IE11에서 문제가 발생 하였습니다#IE11에서 화살표 함수 에러IE11에서 문제가 발생하여 콘솔을 확인 해보았어요(위 사진) "SCRIPT1014 유효하지 않은 문자 입니다" ..

안녕하세요. 저는 현재 회사에 이직을 23년도 8월 21일에 하여 수습기간에 맨 처음 개발을 진행한 슬라이드 요소가 많더라도 dom에는 3가지의 요소만 렌더링되어 성능 최적화 된 swiper 기능을 개발을 하게 되었습니다.만약 slides =[1,2,3]이라고 가정을 하였을때1번이 현재 센터 슬라이드,왼쪽으로 스와이퍼 진행 시 3번 슬라이드,오른쪽으로 스와이퍼시 2번 슬라이드아래 그림과 같이 개발을 진행을 해야 했어요#개발 방향성(1)저는 지금까지 swiper라이브러리를 사용하면서 주어진 기능만 사용을 해봤어요loop모드 또는 slidesPerView와 같은 기능들이죠하지만 loop모드로는 해결 할 수 없는 문제가 있었습니다.왜냐하면 슬라이드가 3개만 있다면 3개만 dom으로 그려지고 3개의 슬라이드가 ..

안녕하세요이직한 회사에서 모노레포 구성을 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차면접은 비대면 화상 회의로 진행 되었고 실무진들과 이야기 하면서 현 직장에서어떤 역할을 맡고 어떻게 개발을 하고 개발하면서 문제해결에 대해 이야기를 나누었다현 직장에서 주도적으로 개발을 하였기 때문에 질문에 대해서 무리 없이 답변을 했습니다오히려 짧은 기간동안 많은 걸 했다고 생각하여 신뢰를 하지 못하셨던거 같습니다"이 기간동..