강디너의 개발 일지

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

서버를 구성하지도, 백엔드 로직을 직접 짜지 않아도 백엔드 개발을 쉽게 도와주는 strapi라는 프레임워크가 있다는 것을 듣고 바로 찾아봤습니다. strapi는 엄청 복잡한 로직이 아니라면 간단한 CRUD는 금방 뚝딱 나와서 백엔드에 시간을 많이 안 쏟아도 되는 장점이 있습니다. strapi 문서에서는 opensource headless CMS라고 하며, 로컬에 띄워서 버튼 몇 번 클릭으로 테이블을 만들 수 있습니다. 튜토리얼 문서 1. 설치 CLI CLI 로 설치하려니깐 무슨... access denied 가 계속 뜨면서 설치가 안돼서 실패했습니다... Node, npm 버전만 맞추면 되는 줄 알았는데 그게 아닌가 봅니다... sudo를 통해서 권한까지 주면서 했는데 실패 ... ! 다른 설치 방법도 ..

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

자바스크립트에 없던 enum이 타입스크립트에 나왔다. 쓰는 방법도 쉽고, 기능도 간단한데 개인적으로 잘 사용하지 않는다. 굳이 enum이란 애를 써서 나열 하지 않아도 object로 선언해서 사용하는 것이 편하기 때문에 잘 사용하지 않았던 것 같다. 어디에 사용해야 하는지, 왜 좋은건지 잘 감이 안잡혀서 리서치를 했다. TypeScript에서 ENUM을 사용하는 이유는 무엇입니까? TypeScript enum을 사용하는 이유 [Typescript] enum을 써야 할 때, union type을 써야할 때 Typescript Enum이란? 여러가지 enum의 형태 [Typescript] Enums 열거형 interface, type, enum에 관한 글 [TypeScript TIPS] Interface 를..

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

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

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

이전 포스팅과 이어집니다. 광고 보고 가시겠습니다. 목표 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 입니다. 사용자는 로그인을 해서 토큰을 얻어왔습니다. 토큰을 쿠키에 ..

Vue.js + Express.js를 이용하여 로그인 로직 만들기 Front - Vue.js (localhost:8080) Back - Express.js (localhost:5000) (코드: github.com/DinnerKang/study_vue/tree/master/todo-list) front, back 코드는 현재 로컬에서 실행 중입니다. 서로 통신을 하기 위해서 기본 설정을 해줘야 합니다. Front - axios baseURL 설정 axios.defaults.baseURL = 'http://localhost:5000'; Back- cors 설정 const express = require('express'); const cors = require('cors'); const app = expr..

목표 Vue.js를 이용하여 네이버 로그인 네이버 AccessToken 가져오기(RefreshToken은 제공 안 한다고 함) AccessToken을 이용해서 네이버 API 사용하기 준비물 네이버 어플리케이션 등록 clientId, callbackUrl 값이 필요합니다. 네이버 API 설명서 1. index.html에 아래 코드 삽입 (Naver SDK) 2. DOM이 mount 된 후에 실행될 수 있도록 로직을 짜줍니다. LoginNaver.vue login.js const naverService = () => { const naverLogin = new window.naver.LoginWithNaverId({ clientId: "a0K------------Xfk", callbackUrl: "http:..