[국방오픈소스아카데미 해커톤] 6. 특기 상세 정보 화면 구현하기

기간 : 10/6~10/10

 

특기 상세 정보 화면에는 해당 특기에 대한 자세한 설명이 들어가 있다.

이 설명에 대한 데이터들을 어떻게 통일된 구조의 공간에 저장할 수 있을까?

이것이 이 당시 내가 했던 고민이다.

네 맞아요

이 당시 내가 나름대로 고민해서 저장했던 특기 상세 데이터베이스이다.

이렇게 특기 요약, 주요 업무, 지원 자격 등 내용 구성을 미리 정해두고 각 섹션 별로 데이터를 저장했었다.

그런데 만약 특기마다 적고 싶은 내용이 다를 경우, 이 구성은 유연성이 매우 떨어지는 저장방법이라

각 특기들의 독특한 특징들을 효과적으로 보여줄 수 없다는 문제가 있었다.

이게 특기 상세페이지를 구현할 때 만났던 첫번째 문제이다.

그리고 '표를 어떻게 보여줄 것인가' 에 대한 문제에 부딪혔다. (두번째 문제)

근데 각 특기마다 필요한 표의 형태가 제각각이고 내용도 제각각인 경우가 많아서

사진으로 그걸 하나하나 저장하는 건 좋은 방법 같지 않았다.

내용이 변경되었을 때 대처도 불편하고, 사이트 퀄리티도 떨어지고..

그래서 아예 표 html 코드를 텍스트로 저장해버릴까도 고민했다.

html 소스를 저장하기로 가정했을 때 조금이라도 저장하는 데이터를 줄일 수 있게

공통적인 부분은 묶어서 저장하자는 생각도 했다.

근데 너무 어거지로 구현하는 기분이라 뭔가 마음에 안들었다.

그렇게 혼자 끙끙대면서 고민하다가, 각 특기마다 데이터 구조를 통일하기 힘드니

특기 별 상세 페이지 html 을 따로따로 다 만들어서 정적 파일로 제공해버리자는?

아주 극단적인 구현 방식까지 생각했다ㅋㅋ

데이터 구조 짜기 어려워ㅓㅓㅓㅓㅓ

그 이유를 설명한 부분

뭔가 설득력 있지 않나요?

나도 이게 정답이 아닌 것 같다는 생각이 들었다.

하지만 다른 해법이 당시엔 전혀 떠오르지 않았다..

근데 이렇게 하기로 해놓고 나 스스로도 찜찜한 느낌을 지울 수 없었다.

'이건 뭔가 아닌 것 같은데, 더 좋은 방법이 있을 것 같은데' 이런 생각이 계속 들었다.

나의 2차 뻘짓

지금 보니까 너무 부끄럽다ㅋㅋㅋㅋ

아니 마크다운을 저장하는거랑 html을 저장하는 거랑 차이가 있는 걸까?ㅋㅋㅋ

 

그리고 특기 상세 페이지에서 데이터를 저장할 때 다른 문제도 있었다.

내가 계속 html 코드를 삽입하거나 마크다운을 html로 렌더링하자는 어처구니 없는 발상을 하게 만든 그 근본적 원인

줄바꿈이 저장이 안된다

정확히는 파이어베이스로 데이터를 보낼 땐 \n 을 보내는데,

이걸 파이어베이스에서 받아오면 공백으로 받아온다.

그래서 이 문제를 해결하려고 진짜 엄청 고민을 많이 했다. (세 번째 문제)

 

NoSQL 데이터베이스에서 텍스트 데이터가 줄바꿈문자 없이 저장되고 있다면

그리고 그 해결책이 안보인다면 어떻게 여러줄의 텍스트를 저장할 수 있을까요?

 

결국 특기 상세 페이지를 구현할 때 고민했던 문제점들을 정리하면

 

1. 특기마다 컨텐츠 구성이 유동적으로 바뀌는데 어떻게 하면 하나의 '특기 상세' 데이터베이스에

이걸 다 저장해낼 수 있도록 디비 구조를 짤 수 있을까?

2. 글만 들어있는게 아니라 중간에 '표'가 들어가야하는데, 이 '표'를 어떻게 저장할까?

3. 글을 저장할 때 '줄바꿈' 을 저장할 수 없다면 어떻게 해야할까?

 

이렇게 정리할 수 있다.

그래서 이걸 고민하면서 표 말고 여러가지 데이터가 한번에 저장되는 '블로그 포스팅' 같은 데이터는 어떻게 저장되는걸까 정말 궁금했다ㅋㅋㅋ

근데 내가 검색을 아직 할 줄 모르는 건지 몰라도 구현 방법이 잘 안나와서 이 부분을 찾는게 힘들었다.

 

그래서 결국 나 스스로 해결책을 고민한 결과 방법을 찾아냈다.

 

1. 특기마다 컨텐츠 구성이 유동적으로 바뀌는데 어떻게 하면 하나의 '특기 상세' 데이터베이스에

이걸 다 저장해낼 수 있도록 디비 구조를 짤 수 있을까?

생각해보니까 UI 구성이 '제목' - '내용' 으로 다 똑같다.

굳이 '지원 정보', '주요 업무' 이런 식으로 어떤 것에 대한 내용인지를

하나하나 지정해서 데이터를 저장할 필요가 없었다.

어떤 것에 대한 이 부분도 변수로 저장해버리면 그만이었다.

 

2. 글만 들어있는게 아니라 중간에 '표'가 들어가야하는데, 이 '표'를 어떻게 저장할까?

 

사실 내가 구현한 방법이 정답이라는 생각은 들지 않는다.

그래도 어떻게 해결했는지 기록해보겠다 ㅋ

나 같은 경우는 아래와 같이 '표' 를 저장할 객체를 구성했다.

이렇게 헤더를 키로 하고 그 헤더 아래로 들어가야하는 레코드 값 리스트를 밸류로 해서

수직으로 위에서부터 아래로 저장한 것이다.

그리고 헤더의 순서를 정해주기 위해 테이블 헤더 필드를 만들어 헤더의 순서를 정해주었다.

조금 어거지로 구현하긴 했지만.. 지금의 나로서는 이게 최선이었따...

 

그리고 이렇게 구현한 표 데이터를

이런식으로 컨텐츠에 적용해서 넣어주었다.

그리고 content 속성이 지금 이렇게 리스트로 보이는데 리스트인 이유는 

 

3. 글을 저장할 때 '줄바꿈' 을 저장할 수 없다면 어떻게 해야할까?

 

어쩔 수 없지. 줄바꿈을 기준으로 끊어서 리스트로 저장해버리자! 라고 생각했기 때문이다ㅋㅋ

 

그래서 리스트를 순회하면서 해당 리스트의 값이 텍스트면 그대로 출력하고

객체면 이건 표구나! 하고 생각해서 표로 출력하는 방식이다.

이 방식의 단점은 글과 표 딱 2가지 종류의 데이터만 저장할 수 있다는 것?

 

하지만 일단 어떻게든 구현하는게 중요하다고 생각해서 이렇게 구현했다.

그래도 나름의 해결은 해결이니까...

 

적어도 html 소스코드를 그대로 저장한다거나

마크다운 코드를 저장해서 html로 렌더링 한다는 발상보다는 낫다고 생각한다ㅋㅋ

그래서 줄바꿈에도 이렇게 성공했고ㅎㅎ

표도 내가 예상한 표는 아니지만 ㅋㅋㅋ

그래도 나름대로의 디자인을 갖고 구현이 되었따.

아래에 이상한 글씨도 없고, 빈 여백도 없는 깔끔한 표를 기대했는데

그렇게 하려면 지금같이 데이터의 개수가 유동적이지 않은, 정적인 표 데이터가 필요하다고 한다.

근데 지금 생각해보면 리스트 길이 값 이용해서 사이즈 미리 측정한다음 정적인 표 그리면 안되나..?

흠....

 

아무튼 특기 상세 구현이 되었어요~ 와~~

 

사실 10/6~10/10 까지 이거 말고도 다른 문제들도 있었는데

오늘은 이 특기 상세 페이지 구현에 대한 이야기만 적고 싶어서 이렇게 정리해보았다.

이런 고민을 하면서 나도 처음으로 백엔드스러운 고민을 하게 되서 정말 좋은 경험을 했다고 생각한다.

 

다음 편에서는 위 기간동안 있었던 다른 문제들하고 그 이후에 발생했던 여러가지 사건들을 정리해보겠다