본문으로 건너뛰기

· 약 16분
황현규

작성자는 본래 노션을 이용해 포트폴리오 페이지를 제작하였습니다. 노션은 깔끔하고 직관적인 UI를 제공하고 여러 종류의 블록을 조립하는 형태로 페이지를 만들기 때문에 이를 통해 단기간 안에 준수한 디자인의 포트폴리오 웹페이지를 제작할 수 있었습니다.

그러나 노션에서 제공하는 블록의 디자인이 제한적이고, 특히 포트폴리오 페이지를 만들기 위한 역할과는 거리가 먼 도구라고 생각했습니다. 이에 고심 끝에 Docusaurus를 활용해 직접 포트폴리오 웹페이지를 제작하였습니다.

본 글에서는 포트폴리오 페이지 제작 중 루트 페이지의 각 섹션으로 바로가기를 제공하고 현재 보고 있는 섹션을 하이라이트하는 바로가기 섹션을 만드는 과정을 기록합니다.

· 약 19분
황현규

작성자는 본래 노션을 이용해 포트폴리오 페이지를 제작하였습니다. 노션은 깔끔하고 직관적인 UI를 제공하고 여러 종류의 블록을 조립하는 형태로 페이지를 만들기 때문에 이를 통해 단기간 안에 준수한 디자인의 포트폴리오 웹페이지를 제작할 수 있었습니다.

그러나 노션에서 제공하는 블록의 디자인이 제한적이고, 특히 포트폴리오 페이지를 만들기 위한 역할과는 거리가 먼 도구라고 생각했습니다. 이에 고심 끝에 포트폴리오 페이지를 직접 제작하여 조금 더 작성자가 추구하는 디자인과 구성으로 포트폴리오 페이지를 구축하고자 하였습니다.

본 글에서는 포트폴리오 페이지 제작 중 웹페이지 방문자가 처음 접하는 HomepageHeader 컴포넌트와 docusaurus swizzle을 통한 Custom NavbarLayout을 구성하는 과정을 기록하고자 합니다.

· 약 16분
황현규

작성자는 쉐퍼드23의 Product Manager & Software Engineer로 재직하며 카페24 플랫폼을 대상으로 하는 Contextual Bandit 기반의 개인화 상품 추천 플러그인 PickHound의 개발 부문을 담당한 바가 있습니다. (See: 경력 기술서 - PickHound)

작성자는 NestJS를 이용해 메인 백엔드 서비스를 개발하며, 공식 Documentation에서 권장하는 class-validator, class-transformer, ValidationPipe를 이용한 DTO 유효성 검사를 적극적으로 활용하고 있습니다. (See: Validation - NestJS)

한편, 작성자는 LernaNestJS CLI를 이용해 Monorepo 구조로 프로젝트를 구성하고, 클라이언트 단에서 활용할 수 있는 DTO 패키지를 별도로 분리하여 관리하고 있습니다. 그러나 이 과정에서, @IsInt() 등으로 타입이 엄격히 정해진 프로퍼티에 string이 들어가도 이를 막지 않는 등 NestJS의 ValidationPipe가 제대로 작동하지 않는 문제를 발견했습니다.

본 글에서는 이러한 문제를 해결하기 위해 작성자가 시도한 방법들을 기술합니다.

· 약 18분
황현규

작성자는 쉐퍼드23의 Product Manager & Software Engineer로 재직하며 카페24 플랫폼을 대상으로 하는 Contextual Bandit 기반의 개인화 상품 추천 플러그인 PickHound의 개발 부문을 담당한 바가 있습니다. (See: 경력 기술서 - PickHound)

작성자는 플러그인 개발의 일환으로, StencilJS를 이용해 카페24 쇼핑몰 위에 표시되는 상품 추천 팝업 배너를 개발하였고, 팝업 배너의 디자인을 수정할 수 있는 디자인 에디터를 React CSR 애플리케이션으로 구현한 쇼핑몰 관리자용 어드민 대시보드를 개발하였습니다.

Banner Design Page
추천 배너 디자인 수정 페이지

이번 글에서는 이 중 배너 디자인 수정 페이지를 개발하며 겪었던 상태 관리에 대한 고민과 이를 해결하기 위해 시도했던 방법들에 대해 소개하고자 합니다.

· 약 23분
황현규

작성자는 쉐퍼드23의 Product Manager & Software Engineer로 재직하며 카페24 플랫폼을 대상으로 하는 Contextual Bandit 기반의 개인화 상품 추천 플러그인 PickHound의 개발 부문을 담당한 바가 있습니다. (See: 경력 기술서 - PickHound)

작성자는 플러그인 개발의 일환으로, 쇼핑몰 관리자가 상품 추천 관련한 설정을 하고 구독 플랜을 관리할 수 있는 어드민 대시보드를 개발하였습니다.

이번 글에서는 이 중 "Admin Dashboard Kit" 디자인 시스템을 기반으로 어드민 대시보드 개발을 위한 디자인 시스템을 구현한 내용을 소개합니다.

· 약 8분
황현규

작성자는 쉐퍼드23의 Product Manager & Software Engineer로 재직하며 카페24 플랫폼을 대상으로 하는 Contextual Bandit 기반의 개인화 상품 추천 플러그인 PickHound의 기획 부문을 담당한 바가 있습니다. (See: 경력 기술서 - PickHound)

작성자는 플러그인 기획의 일환으로, 시장 규모, STP 분석 등 2차 자료 조사를 바탕으로 기본적인 시장 진입 계획을 수립하였고, 보다 깊은 인사이트를 얻기 위해 카페24 쇼핑몰을 운영하고 있는 관리자 12명을 대상으로 인터뷰를 진행했습니다.