강디너의 개발 일지

Next.js로 만든 기존 서비스를 앱으로 확장하고 싶었다. 그래서 Expo를 선택했고, 그 과정에서 카카오 지도를 붙이며 겪은 문제들과 해결 방법을 정리해본다. 이 글은 완벽한 가이드라기보다는 내가 실제 겪은 시행착오를 기록하는 삽질기에 가깝다. (지금도 만들고 있는데 계속 작성할수도 있다...)Next.js 서비스 → 앱으로 만들기 시작부동산에 관심이 많았었기에 국토부 실거래 자료를 기반으로 한 웹 기반의 Next.js로 만든 서비스가 있었다."이걸 앱으로 만들어보고 광고를 한번 붙여봐 ?" 라고 결정하고, Expo를 사용해 개발을 시작했다. 이유는 단순했다:React 기반이라 코드 재사용이 쉬울 것 같았고,배포가 빠를 것 같았고,네이티브 개발을 하고 싶지 않았고,이전엔 CLI로 한번 개발을 했었는데..

회사 기술 블로그에 출간했습니다...! 첨부 https://dealicious-inc.github.io/2021/05/17/axios-integrate.html Axios 통신 한줄기로 만들기 로그인 프로세스 개선 dealicious-inc.github.io

사용자가 이미지를 선택할 때부터 백엔드 API, AWS S3로 들어가는 과정입니다. 토이 프로젝트에서 진행중인, 리뷰 등록하는 것을 보여드리면서 설명하겠습니다. 기술 스텍: Vue.js, Node.js, AWS S3, MYSQL 보통 파일 선택하는 input type=file 은 전혀 이쁘지 않아서 디자인을 입힙니다. 그래서 그 아이는 display: none 하고, 이쁜 디자인을 만들어서 누르면 input file이 열리도록 코딩합니다. 디자인된 이미지를 누르면 숨겨진 input이 클릭되도록 합니다. 이미지가 선택되면 changeFile 이벤트를 통해서 preview 이미지를 만들고, 서버에 보낼 이미지 데이터를 갖고 있으면 됩니다. // 파일 이름 const imgName = ref(''); // 파..

Vue.js + AWS Lambda 이용해서 Serverless로 구성하는 꽤나 야심찬 토이 프로젝트를 하고 있습니다(이번엔 기획자도 있습니다). 회사에서 개발용 + 장난감용? 으로 만들어준 공간이 있어서 열심히 가지고 놀고 있던 도중, 배포하는데 어느 순간 배포가 안 되는 오류가 발생했습니다. 오류는 워낙 자주 발생 했어서(Lambda 만지는데 오류가 너무 잦았어서...) 찾아보니 Lambda 코드 스토리지 용량이 초과해서 배포가 안 되는 것을 확인했습니다...... 처음에는 데브옵스분께 용량을 늘려달라고 요청할까 했는데, 뭔가 느낌이 싸~ 한게 제가 잘못 막 가지고 놀아서 그런 것 같았습니다. AWS 콘솔에 들어가서 확인해보는데, 함수 각각의 크기가 너무 큰 것을 확인 했습니다. 다른 함수들은(백엔드..

이전 포스팅과 이어집니다. 광고 보고 가시겠습니다. 목표 1. Access Token을 이용한 API 통신 2. Refresh Token을 이용한 Access Token 갱신 3. 사용자 모르게 토큰 갱신 후 API 호출 아래와 같은 Flow로 사용자에게 세션이 끊켰다는것을 모르게 데이터를 보여줄 것입니다. 준비 front - Vue 만든거 열기 back - API 서버 열기 docker - 만들어둔 컨네이너 시작해서 DB 열기 Git - github.com/DinnerKang/study_vue/tree/master/todo-list Docker - kdinner.tistory.com/99?category=312484 Login API 입니다. 사용자는 로그인을 해서 토큰을 얻어왔습니다. 토큰을 쿠키에 ..

InterSectionObserver 란 (developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API) Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document의viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다. intersection 정보는 아래와 같은 여러 가지 이유 때문에 필요합니다: 페이지가 스크롤되는 도중에 발생하는 이미지나 다른 콘텐츠의 지연 로딩. 스크롤 시에, 더 많은 콘텐츠가 로드 및 렌더링 되어 사용자가 페이지를 이동하지 않아도 되게 하는 infinite-scroll을 구현. 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고. 사용자에게 결과가 ..

목적 firebase database 특정 데이터를 '조건'에 맞춰 페이징 + 정렬하고 싶다. - group/showGroup 아래의 데이터들을 likes/count가 높은 수 대로 맞춰서 정렬하고 싶다. firebase database 생김새 아래 코드는 group/showGroup 아래 likes/count에 대해서 정렬하는 코드입니다. 하지만 정렬만 하는 기능일 뿐 페이징을 하지 못합니다. firebase database 기본 쿼리에서는 페이징 기능을 따로 지원하지 않기 때문에 자체적으로 만들어야 합니다. // group/showGroup 아래 likes/count 에 대해서 정렬 export function getOpenGroup() { return firebase.database().ref('g..

1. Create Firebase database 쓰기에는 set 과 push 가 있습니다. set 를 사용하면 지정된 위치에서 하위 노드를 포함하여 모든 데이터를 덮어씁니다. 키 값이 따로 없으며 지정된 위치에 바로 저장됩니다. 만약 하위에 데이터가 있다면 지워지고 덮어쓰여집니다. firebase.database().ref('status/lounge').set({ status: data.status, playTime: data.playTime, videoName: data.videoName, }); push 를 사용하면 데이터베이스의 데이터 목록에 추가합니다. 목록에 새 노드를 푸시할 때마다 데이터베이스에서 고유 키(예: music////)를 생성합니다. firebase.database().ref(`m..

기획 멜론 차트를 하루에 한 번 크롤링해서 Firebase Database에 저장 현재 상황 1. Vue.js 를 이용해서 프론트를 만드는 중이다. 2. Firebase Database 를 사용한다. 3. 멜론 차트를 크롤링 하고 싶다 { const title = []; const artist = []; const result = {}; const rank = 100; const getHtml = async () => { try { return await axios.get('https://www.melon.com/chart/'); } catch (err) { console.error('axios error', axios); console.error(err); } } const html = await ge..

Vue 에서 google OAuth 로그인을 위해서 mount 된 후 renderGoogleLoginButton 가 적용되게 했다. 하지만 mount 되는 속도보다 google API를 불러오는 속도가 느려서 오류가 나는 현상(gapi is not defined)이 자주 발생했다. 내생각 : Script Load -> mounted -> gapi render 하지만 : mounted -> gapi is not defined -> Script Load mounted 가 더 빨라서 강제로 스크립트를 먼저 로드한 후 gapi 를 호출해야 했다. mounted() { window.addEventListener("google-loaded", this.renderGoogleLoginButton); }, method..