강의 이유

어느날 문득 게시판을 만들어 보겠다는 생각을 해봤습니다.

다양한 강의(플러터, 노드, 일렉트론, 파이어베이스, 뷰등)를 했지만 만들어진 결과물은 학습용일 뿐, 최종 산출물은 배우는 이들의 몫으로 남겨 둔 것이 마음에 좀 걸렸던 것 같습니다.

기존에도 Vue와 Firebase로 강의를 진행 했지만(참고: https://www.clien.net/service/board/lecture/13723578CLIEN 현재 강의는 2기인 셈입니다).

막상 구현을 하다 막히면서 흥미를 잃게 될 수 있기 때문입니다.

그래서 이번에는 실제 운영할 개발 전용 게시판을 만들면서 코드를 공개하고 만드는 과정을 강의하게 되었습니다.

막상 만들다보니 깃허브 블로그도 불편하던 참에 한번 제대로 만들어서 블로그 대용으로 써봐야겠다는 생각이 들었습니다.

게런티를 제가 하기 때문에 개발하다 막히더라도 걱정하지 마세요~

풀스택 개발

개발자들 사이에서 꺼려지는 말 중 하나가 풀스택 입니다.

보통 전통적으로 나뉘어진 백엔드, 디비, 프론트엔드, 퍼블리셔등의 역할을 전부 해내야하기 때문입니다.

그래서 말이 쉽지 그럴리가 없다는 의견이 지배적 입니다.

하지만 시대가 변했습니다. (참고: 최근 개발 흐름 따라가보기 https://www.clien.net/service/board/use/13269022CLIEN)

개인이 모든 걸 다 처리하는 것이 이제 가능한 시대입니다.

그 이유는 바로 개발 생산성이 10년 전 대비 비약적으로 상승했기 때문입니다.

대부분 플랫폼이 프로젝트를 생성하면 기본적으로 스캐폴딩된 골격이 생기고 생산적인 파일만 추가하면 되는 형태입니다.

서버 관련 복잡한 고민도 이제는 클라우드(firebase, aws, azure, gcp)만 조금 만지면 됩니다.

실제 사내 프로젝트 운영은 예전에는 백엔드 a개발자, 프론트 b개발자 에서 현재는 안나누고 개발 & 배포 까지 혼자 담당합니다. 오히려 그게 일이 원활하게 진행 됩니다.3년차 팀 막내가 3000대 iot관제 솔루션(웹베이스)도 구축+유지보수까지 혼자하며 개인이 운영하는 보드게임 커뮤니티(https://meeple.link) 역시 한달만에 만들고 운영중입니다.대단한 인재인 것도 맞지만 최근 개발플랫폼이 생산성이 아주 좋아진 것이 큽니다.

이번 강의 역시 풀스택이며 vue와 firebase가 생산성에 많은 기여를 할 것입니다.

강의 대상

개인적으로 저 같은 잉여인력이 개발에 뛰어들었으면 하는 바람이 있습니다.

원치 않는 강요에 의한 대학 진학과 관심 없던 과를 나왔습니다.

운 좋게 펌웨어 개발자로 시작했지만.. 개발을 진행하며 끊임 없는 갈증이 났습니다.

펌웨어에서 하기 힘든 일을 임베디드 리눅스(라즈베리파이등)로 구현해보고

데이터를 저장하기 위해 윈도우 프로그램 개발도하고

데이터를 찾기위해 데이터베이스를 시작하고

누구나 보게 하기 위해서 웹사이트를 만들고

블루투스 제어와 푸시 알림이 필요해서 모바일 개발을 하고..

이렇듯 항상 갈증 해소를 하다 보니 여기 까지 오게 된 것 같습니다.

팀 막내 역시 개발이랑은 전혀 상관 없는 일을 하다 우연히 제 강의를 듣고 나름 풀스택 개발자가 되었드시..

많은 개발자가 구직이나 기술획득이 잘 되길 희망합니다.

이제 불혹의 나이가 되어 후대 양성이 잘 되면 그것으로 만족합니다.

vue.js 선정의 이유

자바스크립트(타입스크립트) 플랫폼의 3대 강자인 react, vue, angular가 있습니다.

이들이 하는 일은 프론트엔드(화면)을 능동적으로 편리하게 작성할 수 있게 해주는 역할입니다.

모두 훌륭한 프레임웤이지만.. 학습이 쉽고 가벼운 녀석으로 골랐습니다.

그리고 모바일도 해야 되기 때문에 둘 다 되는 react + react-native 조합으로 할까 하다가..

flutter 주가가 많이 올라가서 vue로 선정했습니다.

언어 가지고 싸울 필요 없습니다. 다양한 언어를(c/c++, java, javascript, kotlin, swift, dart, python, 등등) 사용해봤지만 하다보면 다 그게 그거입니다..

결국 다 그게 그거라 많이 사용하는 언어를 선택하는 것이 생산성 면에서 제일 바람직한 결과를 가져옵니다.(검색 이라도 잘되니..)

불혹의 펌웨어 C 언어 개발자였지만 새로운 것을 늘 즐겁게 받아들입니다.

firebase 선정의 이유

사내 클라우드로 kt -> nhn -> aws 등으로 갈아타면서 셋중에서는 aws 가 역시 불변의 진리라고 생각합니다.(혹은 안 써봤지만 azure도 좋을듯..)

그럼에도 불구하고 firebase를 선택한 이유는 편리함, 비용, 접근성, 실시간성입니다.

편리함

firebase란 gcp를 사용해서 운영되는 클라우드 플랫폼입니다.

원래 gcp로 리눅스 서버를 만들고, 스토리지를 추가하고, 아이피를 추가하고, 방화벽을 설정하고, 디비를 추가하고 등등의 매우 복잡한 짓들을 파이어베이스가 다 해준다고 생각하면 됩니다.

아무리 잘 만들어도 배포는 정말 귀찮은 일인데 firebase deploy 명령어 한방으로 배포가 끝납니다.

비용

비용은 0입니다.

물론 많은 트래픽이 오면 과금이 될 수 있지만..

https://firebase.google.com/pricing?authuser=0

요금제를 확인해보면 철학이 느껴집니다.

바로 “영세한 개발자 혹은 작은 프로젝트는 돈을 안 받지만, 성장하게 되면 적당한 요금을 지불해라” 인 것 같습니다.

ssl 까지 먹은 나름 괜찮은 도메인(https://your-project.web.app)까지 무료로 제공하기 때문에 강의를 진행하며 돈 걱정 없이 진행할 수 있습니다.

접근성

보통 웹프로젝트는 백엔드 + 프론트엔드 구성입니다.

프론트가 백엔드에 데이터를 요청해서 화면이 변경되는 원리입니다.

보통 HTTP REST, GraphQL 같은 통신을 사용해서 데이터를 주고 받습니다.

백엔드가 필요한 이유 부터 알아야합니다.

가장 큰 이유는 프론트가 데이터베이스에 접근할 수 없기 때문입니다.

그래서 프론트 <-> 백엔드 <-> 데이터베이스 형식이 일반적입니다.

프론트 <-> 데이터베이스는 보안상 매우 위험하기 때문입니다.

그런데 firebase 강의에서는 백엔드가 없습니다.

그 말은 결국 프론트 <-> 데이터베이스(firestore) 직접 엑세스가 되기 때문입니다.

파이어베이스의 강력한 인증과 보안 덕분에 그런 위험한 짓도 할 수 있는 것입니다.

게다가 모바일에서도 백엔드 없이 바로 파이어베이스에 연결할 수 있습니다.

실시간성

firebase의 데이터베이스인 firestore, realtime database는 모두 실시간 감지가 지원합니다.

어떤 값이 변경되면 디바이스(웹, 모바일등)에서 바로 적용됩니다.

강의 성격

언어에 대한 순차적인 학습은 하지 않습니다.

화면을 만들며 설명이 필요한 경우에만 부연 설명을 합니다.

예) 화면 목록에서 아이템을 제거할 때 array.splice() 설명

이미 그런 이론적인 학습에 관련된 자료나 강의는 많기 때문에 학습이 필요하면 다른 강의를 둘러 보시길 바랍니다.

선구현 후개선이 모토입니다.

일단 만들어 보고 화면 보면서 기술도 익히고 코드도 최적화 하려고 노력하다보면 실력은 자연스럽게 쌓입니다.

강의 소스

이 강의는 대부분 아래 링크에서 제공된 레퍼런스만 참고해서 개발합니다.

https://developer.mozilla.org/ko/

https://kr.vuejs.org/index.html

https://vuetifyjs.com

https://firebase.google.com/docs/web/setup?authuser=0

주의할 것은 같은 내용을 반복하지 않기 때문에 진도가 나갈 수록 이해가 어려울 수 있으니 매화 마다 이해를 확실히 하고 연습을 하셔야됩니다.

강의 소스: https://github.com/fkkmemi/vf2

소스는 공개입니다. (바람이 있다면 출처는 표기해주시면 고마울 것 같습니다~)

현재 67화까지 진행 중입니다.

그저 소스를 복사해서 해결하면 자기 것이 되지 않습니다.

처음부터 만들거나 소스를 포크(복사) 해서 자기만의 것으로 개선하는 것이 바람직합니다.

본인의 소스를 확인하다 잘 안되면

기본 소스에서 git checkout 강의번호로 크로스체크 하면서 성장하시길 바랍니다.

참고된 사이트

레딧(https://www.reddit.com)

클리앙(https://www.clien.net/service/board/use/13269022CLIEN)

레딧의 쓰레드 형식 무한 스크롤 게시물 뷰에서 영감을 받았습니다.

클리앙에서 고전적인 테이블뷰의 필드들에서 영감을 받았습니다.

레딧의 게시물 뷰 + 클리앙의 필드들 + 실시간 처리가 목표 입니다.

기능 엿보기

강의 진행할 내용을 간단히 요약 해봅니다.

새로운 글

새로운 글이 나타나면 연결된 모든 장치에서 확인이 가능합니다.

파이어스토어의 실시간 감지 기능의 예시입니다.

상태확인 목록

글이 수정되면 연결된 모든 장치에서 확인이 가능합니다.

역시 파이어스토어의 실시간 감지 기능의 예시입니다.

무한스크롤

기존 게시판 처럼 다음 페이지나 숫자를 누르지 않고 아래로 스크롤 할 때마다 데이터가 노출됩니다.

(레딧에서 영감을 받음)

목록보기

한국인 취향에 레딧이 안맞는 이유는 테이블 형태가 아니라는 생각이 문득 들어서 추가해봤습니다.

반응형 목록

모바일, 태블릿, 노트북, 데스크탑에 최적화된 목록 화면을 제공합니다.

반응형 게시물

모바일, 태블릿, 노트북, 데스크탑에 최적화된 게시물 화면을 제공합니다.

상태확인 게시물

게시물에 변화가 오면 모든 장치에서 확인됩니다.

댓글 기능

댓글 > 대댓글 > 대대댓글 까지 만들어봤습니다.(클리앙 참고함)

게시물 페이징

목록으로 가지 않고 다음 게시물로 이동합니다.

종류별 목록

카테고리 별로 목록을 불러오게 했습니다.

새로운 카테고리

동적으로 카테고리를 추가할 수 있고 실시간으로 확인 가능합니다.

게시판 목록보기

게시판들의 목록을 확인하고 해당 카테고리로 이동할 수 있습니다.

새로운 게시판 추가

게시판을 동적으로 추가할 수 있습니다.

공지기능

공지로 선정된 게시물은 등급에 따라 상위에 노출 시킬 수 있습니다.

마크다운 작성하기

마크다운은 글을 작성하기 매우 편리한 문법입니다.

블로그 같은 글을 작성할 때 워드 같은 에디터 보다 생산성이 매우 높습니다.

nhn에서 만든 토스트 에디터로 구현했습니다.

https://nhn.github.io/tui.editor/latest/

시장 강자인 tiptap(https://tiptap.scrumpy.io) 이란 걸출한 에디터가 있지만 선정한 이유는 마크다운 지원 때문입니다.

한국에서 만들어서 한국어 지원 문제도 있긴 하지만.. 역시 자잘한 버그가 많습니다.

향후 다시 tiptap으로 갈 가능성도 있습니다.

게시한 글은 firebase storage(aws s3 같은 기능)에 날짜.md 파일로 저장합니다.

디비에 게시글을 저장하면 편리하지만 파일로 저장하는 이유는 firebase storage가 디비보다 더 저렴하기 때문입니다.

그림 추가하기

토스트 에디터에서 업로드 훅을 받아서 firebase storage(aws s3 같은 기능)에 저장합니다.

스크린샷 추가하기

스크린 캡쳐로 복사된 메모리 영역을 붙혀 넣어도 동작합니다.

맥에서는 control+ command + shift +4 피씨는 printscreen + ?

유튜브 표시하기

유튜브 링크를 감지하여 링크의 내용을 표시합니다.(iframe 추가)

토스트에디터에는 없는 플러그인이라 기본 자바스크립트의 도큐먼트 문법으로 손땀 제작했습니다.

글 퍼오기

대부분의 사이트의 글을 긁어서 붙혀넣으면 스타일과 같이 붙혀집니다.

단, 웹표준을 지키지 않은 사이트의 글은 깨집니다.

제목 및 바닥글 수정하기

파이어베이스는 2가지 타입의 데이터베이스가 있습니다.

firestore, realtime 인데 firestore가 패턴이 비슷한 데이터의 모음이라면 realtime은 단일 개체, 설정 같은 역할에 어울립니다.

realtime database를 이용해서 설정을 변경해봤습니다.

변경된 설정은 다른 디바이스에도 실시간으로 적용됩니다.

메뉴 수정하기

역시 realtime database를 이용해서 설정을 변경해봤습니다.

실시간 개발

최근 개발이 할 만하고 빨라진 이유는 개발 환경이 좋아졌기 때문입니다.

저장만 하면 실시간으로 결과가 눈으로 보이기 때문에 매우 편리합니다.

코드 자동교정 하기

개발자 여럿이서 개발하다 보면 습관이 저마다 달라 가독성이 매우 안좋아지는데 vscode + eslint로 깔끔하게 같은 코드로 만들어 줍니다.

개발 콘솔 데이터베이스 확인하기

파이어베이스의 데이터베이스를 실시간으로 확인할 수 있습니다.

개발시 매우 유리합니다.

개발 콘솔 스토리지 확인하기

파일 상태 역시 실시간 확인이 됩니다.

오픈그래프 적용하기

오픈 그래프는 메타데이터 종류이고 사이트에 들어가기 전 해당 사이트를 미리 볼 수 있는 기능입니다.

SPA(Single Page Application)에서는 functions를 통해서 서버렌더링을 통해 메타데이터를 조작해서 index.html을 전송합니다.(아직 개념이 어려울 수 있으니 나중에 차근 차근 설명할 예정입니다.)

전체 텍스트 검색하기

algolia를 사용해서 전체 문자를 검색하는 방법입니다. 

algolia는 월 만건의 검색이 무료입니다. 

무료로 사용할 때는 검색 결과에 algolia 로고를 넣어야합니다.

참고: https://firebase.google.com/docs/firestore/solutions/search?authuser=0

시연 주소

https://memi.dev 에서 위의 기능들을 확인할 수 있습니다.

향후 진행될 내용

• 특화된 게시판: 겔러리, 영상등 전용 게시판
• 문자 검색(full-text-search): firestore는 패턴 검색을 지원하지 않습니다.(rdbms의 like, mongodb의 regex)

어짜피 전체 게시물 검색은 외부 검색엔진의 힘을 빌려야합니다. 현재 고르고 있는 것은 엘라스틱 혹은 알골리아 정도입니다.

• SEO 처리: 게시물이 검색에 노출될 수 있게 처리합니다.
• PWA 추가: 브라우저에서 푸시 알림(fcm)을 받을 수 있게합니다.

강의

https://www.youtube.com/playlist?list=PLjpTKic1SLZsWckh_DZ6tYH17MM6hBAc7

유튜브 크리에이터다운 장비 같은 거 없습니다.

노트북 하나로 업로드 하는 가난한 개발자일 뿐입니다.

글 작성도 병행해서 하고는 있지만.. 확실히 느리기 때문에 우선 만든 코드와 함께 영상을 만듭니다.

유튜브를 하는 이유는 빠른 정보 전달에 있습니다.