[글또 10기 - 2] 백엔드 개발자가 처음해보는 리액트 프론트엔드 개발 - 기획과 설계

1편에서 next.js를 이용해 리액트 앱을 실행했다. 이제부터는 ChatGPT와 공식문서를 찾아가며, 궁금증을 해결해 갈 생각이다.

 

 

 

1.  기존 기술 번역 블로그의 불편한 점.

 

 기존 기술 변역 블로그는 just-the-docs라는 오픈소스를 사용해 만들었다. 블로그의 목적인 번역을 위해 오픈소스를 사용한 것은 빠른 생산성을 가져다 줬지만, 문서의 원문 구조 그대로 번역하기에는 여러가지 문제가 있었다.

 

 첫 번째로, 네비게이션의 메뉴의 단계가 3단계 이하가 되면 이하 단계는 표시되지 않았다. 그렇다보니 번역 블로그의 메뉴마다 내비게이션 구조가 다르다. 3단계 이하는 오른쪽 페이지 내용에만 보여주고 있다.

 두 번째로, just-the-docs의 페이지는 마크다운(md: markdown)을 이용해 페이지를 표기했다. 그렇기에 내용을 꾸미는데 한계가 있었다.

 세 번째로, 루비언어와 지킬의 UI구조에 대한 러닝커브가 있기에 입맛에 맞게 구성하기 힘들었다.

 네 번째로, 기술문서들은 각각의 특징이 있었는다. 예를 들어 각 기술문서들은 warning, important, memo 등 각자 중요한 내용을 표기하는 방식이 달랐다. just-the-docs에서 지원하는 한정적인 표기방법만 사용할 수 있었기에 원문 구조 그대로 표시할 수 없었다. 

 

 

 

 

 

2. 먼저,  개편 될 블로그를 기획 해보자

 

1) 메인 페이지의 내비게이션은 다음과 같다. 파란색 표시된 메뉴를 누르면 하위 페이지로 이동한다. 

메인 페이지

 

 

 

2) 하위 페이지는 기술의 원문서 내비게이션 구조와 내용을 따른다. 기존 번역 문서의 원문은 다음과 같다.

- SpringBatch/5.0.2

- SpringForApacheKafka/3.1

- SpringBoot/3.1.1/SpringBootReference

- SpringBoot/3.1.1/GradlePlugin

- SpringBoot/3.1.1/DependencyManagementPlugin

- Kotlin

- Gradle/7.6

- Github/GihubActions

- Github/GihubPackages

 

 

 

3) 하위 페이지는 새로운 내비게이션으로 구성되어 있다. 내비게이션에는 "<뒤로가기" 버튼이 생기며, 클릭 시 메인 페이지로 돌아간다.

하위 페이지

 

 

4) 메인 페이지와 하위 페이지의 내비게이션을 명확하게 구분할 수 있도록, 색감을 다르게 한다.

5) 전체적인 통일성을 주기 위해 모든 하위 페이지의 색감은 동일하게 한다.

6) 하위 페이지의 내용은 원문의 구조와 동일하게 가며, 다른 기술의 하위 페이지와 통일성을 갖도록 한다.

7) 하위 페이지의 이미지는 URL로 붙여 넣는다.

8) 할 수 있다면, 구글을 통해 검색기능을 구현한다.

 

 

 

 

 

3.  프론트 기능을 설계 해보자

 물론, 프론트의 지식이 없기 때문에 자세한 설계는 불가능하다. 백엔드 처럼, DDD스러운 패키지 구조를 고려하거나, 디자인패턴, 사용기술 선택(레디스, 카프카, sqs 등)까지의 설계가 아닌 가벼운 구상정도가 될 것 같다. 현재까지 구상한 내용을 정리하며 쓴 기획을 기반으로 코드의 재사용성과 컴포넌트, 폴더 구조 정도 잡아보려 한다. 물론, 틀릴 수도 있으니 만들어보면서 수정해가려고 한다.

 

 

 

3-1) 내비게이션 컴포넌트

1) 메인 페이지와 하위 페이지의 내비게이션 메뉴를 클릭했을 때 각 단계별 페이지의 내용이 달라진다. 즉, 단계마다 페이지 파일이 매칭되어야 한다. 매칭된 파일이 없어도 에러는 발생하지 않도록 한다.

2) 내비게이션의 제목은 변수로 받을 수 있게 하여 재사용한다.

3) "<뒤로가기" 버튼도 숨김처리 여부를 판단하여 메인 페이지와 하위 페이지에서 재사용가능하도록 한다.

4) 각 페이지 별 내비게이션은 IA(information architecture, 정보구조도)를 받는다. 단계를 유연하게 조정할 수 있도록 개발한다.

5) 1)과 4)에서 단계마다 페이지 파일이 매칭되어야 하므로, IA와 페이지가 매칭되도록 만든다. 내비게이션 메뉴를 클릭하면, 파일의 페이지 내용을 보여주고, 없다면, 공백 화면만 나온다.

6) 내비게이션 메뉴에 하이라이트를 설정할 수 있도록 한다. 예를 들어 아래와 같이 2.7.1, SpringBatch, Kotlin 메뉴를 하이라이팅할 수 있도록 한다.

7) 하이라이팅된 단계의 메뉴 클릭 시 하위 페이지로 이동한다.

내비게이션 하이라이팅 예시

 

 

 

3-2) 하위 페이지 컴포넌트

문서의 특징들을 표현하기 위한 컴포넌트들이다. 마크다운 문법을 커스텀 할 수 있을지 찾아보려고 한다.

 

1) Java, Xml, kotlin 등 코드 하이라이팅

2) 코드 블록 구성

3) Java, Xml 선택 컴포넌트

 2) 코드 블록에 숫자 표기 또는 줄수를 노출

 

3) 특정 문자에 회색 음영 하이라이팅

4) 경고, 메모 등의 블록

 

5) 경고, 메모 등의 블록에 코드 하이라이팅, 하이퍼링크 하이라이팅

 

6) 테이블 컴푸넌트

 

7) 코드 블록 들여쓰기

 

 

 

위 내용을 기반으로 개발을 진행하면서 틀린 설계에 대해 정리하면 될 것 같다.