CharacterBoards 개발일지 1일차 – 나는 자동화가 좋아!
개발일지를 간단하게 적어보려고 합니다.
시작은 간단
이걸 만들게 된 계기는 아주 간단합니다. 카카오톡으로 대화를 나누던 도중 이러쿵 저러쿵(?)하니 갑자기 어! 이거 좋겠다 해서………..
웹을 먼저 개발하기로 결정했습니다. 백엔드는 REST api로 만들어두면 웹에서도, 앱에서도 쓸 수 있기 때문에 걱정 없이 개발하기로 했습니다. 웹을 어떻게 개발할지 고민을 많이 했는데, 일단 react + webpack 를 사용하여 개발하려고 합니다.
개발하기 전 수익 모델을 만들고, 수익률을 계산해서 최소한 서버 비용 유지가 가능한지 알아보았습니다. 정확한 수익 모델과 수익률은 밝힐 수 없지만, 서버 비용 유지는 가능하다는 결론이 나와 개발을 시작했습니다.
벌써 막막한 UI
커뮤니티 + 캐릭터 + 타임 라인을 배치해야 하는데, 이 3개를 조화롭게(?) 배치할 방법이 도무지 생각이 안 났습니다. 그래서 일단 UI는 나중에 디자인 하는걸로…
자동화 좋아요!!
저는 자동화를 좋아합니다. 그래서 CICD를 하기로 마음먹고 웹팩 빌드, 도커 이미지 생성, 쿠버네티스에 배포까지 한 번에 되는 프로세스를 만들었습니다.
module.exports = function(_env, argv)
먼저 argv로 –mode 인자를 받아, argv.mode의 값이 “production” 이면 프로덕션용 설정을 적용합니다.
...
"scripts": {
"start": "webpack serve --open",
"build": "webpack-cli --mode production",
}
...
package.json에서 웹팩을 사용하도록 바꿔줍니다.
백엔드
백엔드는 제 주력 언어인 C++을 사용하고 cpprestsdk을 사용하여 만들기로 결정했습니다. 설치해줍니다!
vcpkg install cpprestsdk cpprestsdk:x64-windows clion에서는 cmake 옵션에 -DCMAKE_TOOLCHAIN_FILE=<vcpkg 폴더>/scripts/buildsystems/vcpkg.cmake
cmake에도 추가해줍니다.
find_package(cpprestsdk REQUIRED NAMES cpprestsdk cpprest) target_link_libraries(characterboards_backend PRIVATE cpprestsdk::cpprest)
이제 열쉼히 코드를 짤 환경이 만들어졌습니다. cpprestsdk에 대한 레퍼 클레스를 만들어 추상화시켜줍니다! 백엔드는 여기까지 하고, 나중에 만들어야겠네요.
라고 생각했는데 c++로 개발하면 너무 오래 걸릴 것 같아서 ASP.NET으로 다시 개발하기로 했습니다. 어자피!!! 네트워크 I/O는 언어 상관없이 레시턴시가 있어!!! c++이 얼마나 더 빠르겠어!! 라고 적당히 타협하며 말이죠!
CharacterBoards 개발일지 2일차 – 나는 Notion가 좋아!
Notion병
https://www.notion.so/CharacterBoards-2fda61001c6f462fb8adcc974ce1b0d7
저는 노션병이 걸린게 확실해 보입니다.. 인디 게임 만들면서 처음으로 알게 된 툴인데.. 일정관리도 너무 편하고.. 혜자스러운 무료 계정 에다가.. 페이지 공유도 가능하다는 것이… (홍보아님
로드맵을 대략적으로 잡고, 클로즈드 베타 서비스 인원을 구글 설문지로 모집했습니다. 플모씨가 열심히 홍보해준 덕에 생각보다 많이 모였어요!
디자인
로그인 컴포넌트 만들기
만들면서.. 아 어디서부터 잘못된거지… 아…. 이걸 언제 다 만들지…. 불안한 생각이 들었지만 대충 넘겼습니다. 네이버, 카카오, 구글, 트위터 로그인을 넣었는데, 이걸 언제 다 구현하고 있어,… 라는 생각에 설문조사를 했습니다. (아까 그 베타 설문조사)
이런 빼기는 무슨, 다 구현 해야 되겠네요. ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ
JS라이브러리까지 제공해서 왠지 쉬워 보이는 네이버 로그인을 먼저 만들기로 했습니다. 잘못된 생각 이였습니다.
var naverLogin = new naver.LoginWithNaverId(
{
clientId: "{YOUR_CLIENT_ID}",
callbackUrl: "{YOUR_REDIRECT_URL}",
isPopup: false,
callbackHandle: true
/* callback 페이지가 분리되었을 경우에 callback 페이지에서는 callback처리를 해줄수 있도록 설정합니다. */
}
);
네이버에서 제공하는 샘플 코드를 보자마자 뇌 정지가 왔습니다.. js module이 아니야?? useEffect에서 동적으로 스크립트를 body에 추가하고 window[]로 불러올 때마다 어김없이, “naver가 뭐야? 그거 정의 안되어있어..”
그냥 직접 호출하는걸로 했습니다.
window.location.href = this.naverAPI + "?response_type=code&client_id=" + this.naverClientID +
"&redirect_uri=" + encodeURIComponent(this.callBackPath) +
"&state=" + encodeURIComponent(this.token);
상세 디자인
여러 곳을 리서치해서 기본적인 윤곽 정도 잡았습니다.
CharacterBoards 개발일지 3일차 – 나는 Amazon이 좋아!
오늘은 작업을 별로 못해서… 음.. 글자 수 채우려고 헛소리가 많습니다.
Amazon DynamoDB
NoSQL은 전통적인 관계형 데이터베이스를 제외한…. 이러면 개발일지가 아니죠!
데이터쪽은 NoSQL을 사용하기루 했습니다. ACID가 필요없어서… 근데 사용자 정보 같은 건 그러면 안 되니까 neo4j라는 그래프 데이터베이스를 사용할 것 같습니다. (그래프 데이터베이스도 NoSQL아니냐구요? 대부분의 그래프 데이터베이스는 ACID입니다.)
사실 아마존 문구가 너무 인상 깊어서 혹하기도 했네요..
DynamoDB 보다 보니 급 서버 리스에 끌려서 람다도 써볼려고요.. 람다 이거 딱 데이터베이스 rw에 넣으면 좋을 것 같습니다. warm start가 빠른 파이썬 쓸 것 같아요. 아니 근데.. 파이’썬’인데 warm이 아니라 hot start아님??
노션병
클로즈드 베타 전에, 이용자 분들과 커뮤니케이션 하면서 여러 아이디어를 나눴는데, 그걸 정리하고 모아 둘만한 곳이 없어서 노션에 한번에 다 정리했습니다.
이제 편하게 정보 찾을 수 있을 것 같네요!
UX 데이터
UX 경험 개선을 위해서 몇 가지 툴을 찾아봤는데, 이게 제일 좋은 것 같아요.
아직 적용은 안 해봤는데.. (모래 할 예정!) 무료 기능도 좋은 것 같아요.
CharacterBoards 개발일지 5일차 – 나는 ===가 싫어!
4일차는 왜 없죠? 보안 관련 작업이라서 뭐라 쓸 수 있는 게 없어요…. 백엔드 작업 중에는 정말 별로 쓸 게 없네요.. 백엔드 코드를 공개할 수 없는 노릇이고..
===과 !==의 함정에 빠지다.
깊숙한 곳에 실수로 ==하고 !=를 썼는데…. 이거 찾느라 몇 시간을 썼네요. 아무튼 본론 시작!
클라이언트!
클라이언트가 콜백을 처리하고 싶다고 해서 로그인 콜백도 클라이언트에서 이루어집니다. CSRF를 위한 토큰은 서버에서 이뤄져야 하지 않냐고요? 그렇지 않습니다. 네이버 공식 JS라이브러리도 Math.random()로 토큰 만들던데요 뭐.
콜백 주소에 URL쿼리로 return=path와 type=naver를 전달해 줍니다! 콜백 컴포넌트가 입맛대로 처리할 수 있게끔요.
네이버 라이브러리는 바로 토큰을 얻을 수 있는 걸 보니 implicit grant인 것 같습니다.
디자인하다 죽겠어!!
저는 프로그래머란 말입니다!! 디자인에는 영 소질이 없다고요!! 그래도 일단 세부적인 디자인을 했습니다. 저는 최근에 알았는데.. 이거 어도비 일러스트레이터 CSS로 내보내기가 가능하네요? 별 도움은 안 됐지만요. 그림자 효과나 그라데이션 같은 것들은 편할 것 같긴 해요.
나머지는 내일의 내가 한다!
CharacterBoards 개발일지 6일차 – 디자인…. 디자인..
뭔가 계속 하루 씩 밀려서 글 쓰는 것 같은데 기분탓이에요.
오늘의 일을 내일로 미루지 마라
어제의 저에게 미뤄버린 컨테이너 디자인을 했습니다!
로컬 테스트
ASP.NET + DynamoDB로 백엔드를 만든다고 했죠? 아마존이 좋은 이유중 하나가 문서화인 것 같습니다. 아무튼 이 링크 보면서 연동했습니다. DynamoDBLocal.jar로 로컬 데이터베이스 만들어주고, ASP.NET에서 테스트해봅시다.
대충 한 시간 정도 도규먼트 읽고 만들어줍시다.. 너무 친절한 도큐먼트에 감동받았어요. 그 감동 번역에서 다 까였지만요.
나중에 cheat sheet series 읽으면서 보안 관련해서 보완 하도록 하죠. (라임 쩐다..
트위터 계정
https://twitter.com/characterboard_
짠짠! 트위터 계정이 생겼어요.
CharacterBoards 개발일지 7일차 – 일주일 돌아보기, 앞으로의 개발일지
우연히 시작했지만, 생각보다 재미있게 작업했습니다. 일주일 작업을 돌아보면서, 앞으로 개발일지는 어떻게 쓸 지 적어 보도록 하겠습니다.
로그인…. 요즘 계속 로그인만 만드는 것 같아요. 마이크로 소프트 REST API 가이드 보면서 열쉼히 작성 중이랍니다.. 보안 관련해서 신경 쓸게 너무 많아서 웹 보안 관련해서도 나중에 심도 있게 공부해 봐야겠어요. 웹이라는 게 보면 볼수록 빠져드는 기술이더라구요. 웹 어셈블리에 webGL까지.. 재미있는 게 많은 것 같아요. 내일 토요일 하루는 잠시 쉬려고 합니다.!
저는 사실 웹을 개발해 본 적이 한 번도 없습니다. 하루 만에 모질라 도큐먼트 보면서 css하고 html 공부하고, 자바스크립트에 리엑트까지…. 하다 보니 재미있었습니다.. 다행이 네트워크나, 백엔드 쪽은 경험이 있어서 쉽게 만드…..는 것 같지는 않지만, 아무튼 재미있는 도전이었다는 거..
이거 만들면서…. 공부를 많이 하게 되더라고요. 디자인도 사실 별로 경험이 없어서 터치 인터페이스 UX 경험은 전무하고.. 웹도 사실 디자인이 처음입니다. 그래도 최대한 잘 만들어보고 싶은 마음에 하나하나 엄청나게 공부하고 고민해서 엘리먼트를 배치하고 있습니다 ㅜㅡㅜ.
앞으로의 개발일지
앞으로의 개발 일지는 지금처럼 뇌피셜과 헛소리로 가득 찬 개발 일지가 아닌, 뭔가 도움이 되는 내용을 적어보려고 합니다. 제가 초반에 어렵고 헷갈렸던 부분들을 설명하면 좋을 것 같아요.
