![[24]안드로이드 웹뷰의 모든것](https://cdn.slidesharecdn.com/ss_thumbnails/24webview081102-181102022314-thumbnail.jpg?width=560&fit=bounds)
![[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문](https://cdn.slidesharecdn.com/ss_thumbnails/mean-re-151003142901-lva1-app6892-thumbnail.jpg?width=560&fit=bounds)
![[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...](https://cdn.slidesharecdn.com/ss_thumbnails/implementingwebbasedonlinemultiplayertetris-141111200036-conversion-gate02-thumbnail.jpg?width=560&fit=bounds)
![[145]5년간의네이버웹엔진개발삽질기그리고 김효](https://cdn.slidesharecdn.com/ss_thumbnails/1455-161023163929-thumbnail.jpg?width=560&fit=bounds)
![[아이펀팩토리] 2018 데브데이 서버위더스 _01 HTML5/WebSocket으로 Pong 게임 만들기](https://cdn.slidesharecdn.com/ss_thumbnails/2018devday-html5websocketmakepong-180329003606-thumbnail.jpg?width=560&fit=bounds)
어그로월드 Season1 - Aggro World season 1
- 1. 2021.06.30 어그로 월드를 어떻게 만들까? Made by bingoori Season 1
- 2. 개발동기 아이디어 구현 & 개인 사이트 운영 목표 어그로 월드 커뮤니티 사이트 서비스 개발기간 2021.06.01 ~ 2021.06.30 개발자 bingoori 소개
- 3. Front-end * Search Back-end * Restful API Environment * CI/CD Pipline Etc * SEO 필수 요구사항 * Chart * Server-Side Rendering * Chat * State * Middleware * Authentication & JWT * Persistence Framework * Build * Deploy * Log * Custom Annotation * File Storage * WAS * SSL * Project Backlog * CMT * DNS * Server * DB * Color Mode * Analytics * Custom Exception * I18n * Session
- 4. Back-end 사용기술 Front-end DevOps Cloud as AWS Data & Analytics MariaDB ElasticSearch With Kibana EC2 S3 JENKINS GIT Spring Boot Kotlin JDK Gradle ElasticSearch Service RDS Tools React.js Next.js Express Theme-ui D3.js Passport Axios Socket.io Mobx VSCode Notepad++ Intellij MySQL Workbench Design Kakao Oven MySQL Models JWT MyBatis LogBack Nginx SEO Open Graph Google Search Console Google Analytics Naver Web Master WAS GITHUB ES6 ETC Ubuntu Windows 10 Shell Script Putty Lets Encrypt Route 53 I18n
- 5. 구성도 WebHo oks America Client C Asia Client B Asia Client A Global Accelerator AWS EC2 Region(Seoul) EC2 Front-end Front-end ELB Back-end EC2 S3 Region(Se oul) RDS EC2 GitHub Developer Push WebHooks Jenkins Remote Build Deployment ElasticSearch Service Region(Seoul) Region(Seoul) Region(Seoul)
- 6. Front-end 1. Auth0 플랫폼을 통해 로그인 연동을 완료 하였으나, Auth0 서버의 지역이 아시아 국가가 없어 속도가 느려 사용 불가 - 장점: 연동 쉬움, SNS 로그인 연동 매우 쉬움 - 단점: 아시아에 서버가 없어 매우 느림 Back-end 1. Cors 이슈로 Back-end Server에도 Domain과 SSL 적용, 추가 Cors 관련 설정 Environment 1. Docker에 Elasticsearch와 Kibana를 세팅 하였으나 Front-end에서의 검색어처리를 할 때 Cors 이슈로 AWS ElasticSearch Service 사용 기억에 남는 삽질 2. JWT 를 통해 API 통신시 인증된 토큰만 Response 처리하도록 처리, Header에 담는 Key에 _가 들어가면 Interceptor에서 받지 못함 2. Docker에 Jenkins를 서버에 구축하였으나 원격 배포 시 Jenkins의 Root 경로와 Workspace 경로 이슈 발생 그리고 원격 배포 목적지 서버에 권한 이 슈로 Jenkins만 세팅 3. WebSocket 연결 요청시 WSS 이슈 발생 Nginx에 추가로 Proxy Header 추가 적용 2. Socket.io를 연동하여 채팅 구현 시 브라우저 새로 고침, 종료에 대해 이벤트 핸들링 어려움 - 웹 소켓 라이프 사이클 이해 필요 3. Mobx는 Next.js에서 Hook을 사용한 컴포넌트들에 전역적인 Multi Store를 적용하기 위해선 Context API에 대한 이해필요, Theme-ui도 마찬가지 - Context API 이해 필요 4. AWS ELB 에 Global Accelerator 적용 시 http(80)에서 https(443)으로 Redirect 하는 경우 Accelerator 상태 확인 오류가 발생하므로 https(443)으로 상태 확인하도록 세팅 Etc 1. Google Search Console, Naver Web Master 적용 시 필수는 아니지만 sitemap.xml을 설정한다, 사이트에 sitemap url로 접속 시 디렉터리 구조를 읽어 sitemap.xml 생성하여 내리도록 처리
- 7. 소감 한참 전부터 개인 사이트를 운영하고 싶었으나 계속 미루어오다 마음먹고 한달 동안 빡세게 진행을 했는데… 기왕 하는 거 욕심을 내면서 했더니… 배보다 배꼽이 더 큰 프로젝트 가 됐다. 전체 한 달의 기간 동안 대략 목업 3일, 환 경 구성 2주, 개발 1주, 삽질 3일 정도 되는 것 같다. Backlog는 GitHub의 Projects에서 관리 했는데… 별로다… 혼 자 하는 거면 그냥 쓸만함… 아무튼 환경 구성에만 2주를 투자 했더니 너무 오버 한 거 같다. 구성도의 환경은 숨 만 쉬어도 서버 비용이 하루에 1만원 조금 안 된다 (유저0) 적지 않은 금액이므로 개인이 운영하기엔 쉽지 않다. 그래서 시작은 가볍게 세팅 하는 걸 추천… 아무튼 시즌1 끝 마무리 시즌2 준비 * 브라우저, 서버 캐싱 * 웹 성능 최적화 * 이미지 최적화 * 중복 코드 제거 * API 요청 최소화 * Skeleton & Image Lazy Loading * 웹캠, 마이크 * 모바일 웹 대응 연락처 * Email: [email protected]
- 8. 그래서 만든게 뭐냐고?