본문 바로가기

개발/Web

Ask 익명질문 개발기

반응형

Typescript + Vue(Nuxt) + Firebase를 이용하여 Ask페이지를 만들어보았습니다.

디자인하기 위해 Bulma.io 프레임워크를 사용했습니다.


페이지에서 질문 요청을 날리면 답변을 대기하기까지 기다리는 공간 또는 답변이 완료돼서 질문이 저장될 공간(DB)를 마련해야되는데 Firebase cloudstore 을(를) 이용하였습니다.



Ask 페이지 디자인



Bulma를 이용하여 디자인을 완료하였습니다.

Firebase가 server-side, client-side 둘 다 지원하는 라이브러리라서 client-side를 server-side로 쓰다보니 삽질을 많이 했었습니다.


페이지에서 질문을 요청하면 HTTP(Rest) API를 통하여 서버로 요청을 하게 만들었습니다.



질문 상세보기


메인 페이지에서 질문을 클릭하면 상세 페이지로 넘어오게 만들었습니다.

지금은 주소 복사 기능만 넣었는데 나중에 공유하기도 넣어볼까 생각 중입니다.


주소 복사를 하기 위해 클립보드에 링크를 넣어야 하는데 구현하기 위해 구글링을 해보다가

라이브러리를 따로 쓰지 않는 이상은 textarea Element를 만들어 이곳에 복사할 문구를 넣어준 후 복사하는 꼼수(?)를 방법을 사용해야 됐습니다.


라이브러리를 쓰고 싶은 마음은 없기에, 복잡한 방법도 아니라서 후자를 선택

(전자의 방법을 따로 알아보지 않았는데 후자의 방법을 간편화 시킨 거일 수도 있고...)



이번에도 역시 Docker을 이용하여 배포하였습니다.

배포 및 완성 당시에는 Cloudstore가 베타였는데 글 쓰는 지금은 베타에서 벗어났네요.


앞에서 Typescript를 이용했었는데 코드를 보면 파일만 .ts로 바꿨다는 생각이 듭니다..

타입 활용은 별로 못한거 같아요.


Firebase 쓰면서 느낀 점은 공식 문서가 한국어로도 제공되는데 개인적으로 어색한 감이 있었네요.




GitHub: https://github.com/SkyLightQP/Ask




반응형

'개발 > Web' 카테고리의 다른 글

🌐 HTTP Status Code, 301 vs 302  (0) 2020.03.19
교내 문제풀이 사이트 개발기  (0) 2019.10.19
AirQualityTool 디자인 재작업  (0) 2019.02.03
기록 Node.js - 라우터  (0) 2017.04.02
기록 Node.js - 미들웨어  (0) 2017.04.02