👋 들어가며
안녕하세요 퍼블리셔 한상현입니다.
어떻게 만들어졌나?
빠른작업을 원하셔서 이번에는 가장 익숙하고 숙련된 개발환경 개발스택으로 작업하였습니다.
프로젝트구성은 wordpress-monorepo로 구성하고 beeclover/wordpress-monorepo: 워드프레스 테마, 부분적 패키지 모노레포 이것을 가져다 사용했습니다. 그리고 테마는 roots/sage를 선택
배포와 개발환경은 beeclover/wordpress-docker: 워드프레스 도커를 이용한 개발 템플릿를 사용했습니다.
그리고 매번 가장 까다로운 폼은 react로 구현하였습니다. react + react-hook-form + zod는 정말 최고의 조합입니다.
이렇게 모듈처럼 분리할 수 있기 떄문에 tailwindcss는 분리된 패키지로 만들어서 사용합니다.
시작!
반응형을 작업할때 데스크탑과 모바일 두가지 디자인만 보고 작업합니다. 그러면 디자인도 2벌씩만 나오면 되니까요! 하지만 이번에는 큼직큼직한 디자인이어서 태블릿뷰까지 중간에 요청드렸습니다.
블로그의 다국어 기능이 필요해서 어느정도 수준까지 필요한지 확인하는게 우선이었습니다. 워드프레스에 다국어는 WPML 플러그인으로 컨텐츠를 내부적으로 언어별로 만들수있는 장점이있지만 플러그인에 너무 치중되어서 계속 쓸 플러그인이 아니라면 제외하는 편입니다. 그래서 이 것을 정하고 가는 것이 우선이었습니다.
복잡하게 하지않고 블로그, 영문 블로그 이런식으로 여러벌의 커스텀 포트스타입으로 구현
그리고 블로그 아카이브 페이지에서 블로그, 영문 블로그 메인쿼리를 병합해서 만드는 방식으로 하였습니다.
끝
작업시간은 그렇게 길지 않았지만 이제는 복잡한 기능이 들어가지 않으면 빨리 만들 수 있다는 것을 조금 깨닫게되었습니다.
환경 연구와 더빠른 작업을 위해서 사전준비를 철저히하고 프로덕션에 어떤 환경을 쓸지 미리 만들어두고 템플릿화한것이 이번 작업에 속도를 붙여줬습니다.