강디너의 개발 일지

작년부터 난 만들고 싶은 서비스가 생겼었다. 바로 냉장고 관리 앱이다. 혼자 살 때에는 냉장고에 김치밖에 없었는데, 결혼을 하고 나니 냉장고가 터지려고 했다. 특히 냉동실에 넣고 까먹은 재료들이 발굴될 때마다 너무 마음이 아팠다. 나는 이 문제를 해결하고자 냉장고 관리 앱들을 찾아봤지만 내가 만족스러운 앱이 없었다. 내가 원하는 서비스가 없는데 직접 만들자 (기획자/개발자 부부의 고질병) 하지만 나는 아이디어와 개발 능력만 있지 서비스를 기획/디자인 하지 못했다. 그렇기에 아내를 열심히 꼬셨다. 넘치는 아이디어와 왜 이 서비스를 써야 하는지 정리를 했다. 이 서비스를 만들게 된 계기 결혼 후 집에서 밥을 많이 해 먹는다. 냉장고/냉동실이 터지려고 한다. 언제나 진수성찬을 해 먹는 것이 아닌 생존요리 & ..

장장 4개월에 걸친 토이프로젝트가 드디어 끝났습니다. 4월 말 오픈 예정이었으나, 역시 사람일은 알 수 없기 때문에... 각자의 업무가 일단 중요하니깐... 연애도 해야하고... 서비스 한 개를 만들면서 개발 플로우를 경험하고자 홀로 도전하게 되었습니다. 프론트엔드부터 백엔드, 데브옵스까지 많은 회사 동료분들께 도움을 받아서 감사의 말씀 먼저 올립니다. 초기 시작은 간단해 보였습니다.(이렇게 큰 거인 줄 그땐 몰랐지...) 백엔드, AWS 쪽을 도전하는 것이었기 때문에, 프론트엔드는 익숙한 Vue.js를 이용했습니다. 프론트엔드 모바일 전용으로 만들었으며, PWA도 생각해서 서비스 워커를 붙였습니다. 타입 스크립트 적용과 sentry를 붙여서 오류도 클라이언트 쪽에서 로깅할 수 있도록 설정했습니다. 카카..

토이 프로젝트 소개 주니어 개발자, 주니어 기획자(꼬꼬마 기획자), 주니어 디자이너(꼬꼬마 디자이너) 세명이 모여서 프로젝트를 시작했다. 회사 근방 음식점 중 팀원들이 추천한 맛집 리스트를 확인하고 해당 음식점에서 식사 후 솔직한 리뷰를 작성해서 공유하는 서비스 중간 진행 사항 토이 프로젝트 목적 한 번쯤은 전체적인 프로젝트 플로우를 경험해보고 싶다. AWS Lambda를 이용해서 API를 구축해보고 싶다. MySQL을 사용하고, 쿼리도 한번 짜 보고 싶다. (조인 한 번도 안 해봤...) 프론트 개발 Vue.js 프레임 워크를 사용했다. 목적이 전체적인 프로젝트 플로우를 경험하고 싶고, 프로젝트 일정 상 프론트는 빠르게 개발하고 백엔드 쪽에 시간을 대부분 투자할 것 같아서 계속 사용했던 Vue.js를 ..

웹 버전 관리 시스템 만든 이유는 단 한 가지입니다. 사용자가 이전 버전의 API 규격, 데이터 타입으로 호출해서 오류가 생기기 시작 웹 서비스 배포 후, 사용자가 이전 버전의 웹을 보고 있어서 이슈 발생하는 것을 감지했습니다. 딱 담당하고 있던 프로젝트 두 개에서 같은 이유로 이슈가 발생해서 해결해야 한다고 생각했습니다. 우선 원인은 SPA 특성 때문에 발생한 이슈였습니다. 생각지 못한 곳에서 나타났는데, SPA의 장단점은 여러 가지 있지만 그중 크게 중요하지 않게 생각 한 문장이 있습니다. 처음 접속했을 때 웹에 필요한 대부분의 리소스를 다운로드하기 때문에 초기 로딩 속도가 느리다. 하지만 그 후 필요한 리소스만 다운로드하기 때문에 빠른 렌더링이 가능하다. "초기 로딩 속도가 느리다"라는 것만 이슈하..

목차 Firebase storage 다루기 Firebase resize images 사용해보기 1. Firebase storage // storage.js import * as firebase from 'firebase/app'; import 'firebase/storage'; // 파일 전체 목록 부르기 + url 가져오기 export async function getThumbnail(dealiName) { const { items } = await firebase.storage().ref(`thumbnail/${dealiName}`).listAll(); let thumbnaills = []; items.map((i) => { const { fullPath } = i; thumbnaills.push({..

google 에서 지원해주는 youtube api로 검색을 해봤습니다. export function searchYoutube(q, maxResults) { const params = { key, part: 'snippet', q, maxResults, }; return axios.get(`https://www.googleapis.com/youtube/v3/search`, {params}); } key는 youtube api 키 part는 youtube api 에서 어느 정도 보여줄 지 정해주는 범위이며 할당량 사용 관리를 위한 변수 입니다. q 는 검색어 maxResults는 결과를 몇개 보여줄 지 입니다. part 매개변수에 예를 들어 video 리소스는 snippet contentDetails fil..

준비물 Front-end 파일 (빌드된것) Back-end 파일 AWS Nginx 까지 띄운 것 Putty (원격접속) 환경 Window 10 1. Front-end Build 빌드가 끝난 후 dist 폴더가 만들어졌는지 확인해주세요 2. 압축도 해줍니다. 3. 자신의 EC2 에 파일을 전송합니다. pscp -i C:\path\my-key-pair.ppk C:\path\Sample_file.txt ec2-user@public_dns:/home/ec2-user/Sample_file.txt 참조 : https://docs.aws.amazon.com/ko_kr/AWSEC2/latest/UserGuide/putty.html 4. 확인하기 ! 5. 압축 해제 unzip vue-project.zip (사진은 생략)..

AWS EC2에서 Nginx 를 설치해서 웹서버를 띄워보겠습니다. 1. AWS 가입... 인증 1달라...! 2. https://aws.amazon.com/ko/getting-started/tutorials/launch-a-virtual-machine/ 에서 학습하면서 인스턴스 만들기 ! - 인스턴스 만들면 기본적인 리눅스가 뜹니다 ! 3. ssh ~~~~ 어쩌구 저쩌구로 로그인합니다 로그인 완료 이제 본격적인 시작입니다.sudo yum 을 업데이트 해달라고 하니.. 업데이트 한번 해주시고 (안해도 상관없음) sudo yum install nginx설치하다가 중간에 물어보는게 있는데 y 누르시면 됩니다. 설치가 완료 되셨으면 sudo service nginx start 를 하시면 ! 짠 ! 하지만 끝이 ..

준비물 1. express 서버 키기 2. mysql 서버 키기 3. Vue 서버 키기 *설치 모듈* 서버와 통신하기 위한 axios 설치 상태 관리를 위한 Vuex 설치 Login 기능 만들기 + 인증 1. axios를 main.js 에 넣어서 전역으로 쓸수 있게 합니다. 2. 로그인을 해봅시다. loginSubmit: function() { console.log("로그인"); this.$Axios.post(`http://127.0.0.1:3000/auth/login`, { id: this.user_id, pwd: this.user_pwd}).then( res=> { console.log(res); this.$router.push("/"); } ) }, 리턴값이 이쁘게 나오는 것을 볼 수 있습니다. 3..

JWT 으로 로그인 인증을 하겠습니다. 우선 jsonwebtoekn 모듈을 다운받겠습니다. 이 모듈은 jwt를 편하게 만들수 있도록 도와줍니다. JWT 로그인 1. user 테이블에서 user_pwd를 가져온 뒤 2. hash 해서 hash 한 값과 가져온 값과 비교 하고 맞으면 3. Token 을 만듭니다. 토큰이 성공적으로 만들어지면 성공 메시지와 함께 토큰을 보내줍니다. app.post('/auth/login', (req, res) => { // 로그인 인증 User.user_id = req.body.id; User.user_pwd = req.body.pwd; let jwt_secret = 'DinnerKang'; console.log(req.body.id); if (User.user_id) { c..