똑같은 삽질은 2번 하지 말자

개요 Firebase Trigger Email 사용해 메일 보내기 기능 구축해보기(참고로 유료) 1. Extensions 의 Trigger Email 설치 2. Trigger Email 설치과정 Cloud Functions location: Firebase Trigger Email 의 Cloud Functions 을 배치하는 region SMTP connection URI: 실제로 메일의 송신을 담당하는 서비스 URI Email documents collection: 메일송신의 대상이 되는 데이터 컬렉션 -> 이 컬렉션에 데이터가 들어오면 메일이 송신된다. Default FROM address: 발신 메일에 송신자로서 기재되는 메일 주소 (나중에 sendgrid의 설정하고 연관되는 부분) Default ..

개요z-index가 안먹혀서 찾아보니 position이 지정 안되어있으면 못쓰더라 라는 기본적인 사실을 이제서야 깨달아서 안 잊게 기록z-index와 positionstatic일단 모든 태그들은 처음에 position: static 상태 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다.(Normal-flow)absolute부모 요소의 위치를 기준(position: relative, absolute를 가진 상위 태그) 에 따라 배치된다.부모 요소에 position이 지정 안되어 있을때(static일때)는 position을 가지고 있는 상위태그까지 올라간다.Normal-flow의 흐름에서 벗어난다.inline에 속성을 주면 자동으로 display:block이 된다.부모의 기준 위치는 border는 제외하고 ..

보호되어 있는 글입니다.

개요 Options API에서 Composition API에 마이그레이션 하는중.. vuex는 어떻게 써야할까? 를 고민하는중에 배웠거나 느꼈던 점들에 대해 적어보고자 한다. 헷갈렸던 개념 내가 지금 바꾸려는 환경은 nuxt가 아니고 그냥 vue를 쓰고 있는 곳이다. 아주 기본이지만 nuxt에서는 store 라는 디렉터리 안에 js나 ts파일을 생성하는 순간 .nuxt 빌드 결과물 안에 store.js 가 생성되어 있는걸 확인할 수 있다. (store.js에는 우리가 Vue에서 Vuex를 쓰기위해 쓰던 코드들이 들어있다.) import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // ..이하 생략 즉, 이렇게 파일을 만드는것만 으로도 store 인스턴스..

개요 presigned URL 이란? presigned URL 은 왜 필요할까? presigned URL 이용해 presigned POST를 해보자 Presigned URL 이란 Presigned URL 이란 AWS 자원에 대한 접근 권한을 제공하기 위해서 사용되는 이름 그대로 사전에 적절한 권한을 가진 자격증명에 의하여 Signed 된 URL 을 말합니다. Presigned URL 왜 필요할까? 앱에서 이미지가 저장되는 과정을 살펴보자 1. Client에서 이미지를 업로드한다는 request를 날린다. 2. Server에서는 이미지 업로드를 하기위해 DB와 S3에 각각 이미지에 대한 정보를 업로드한다. 3. DB, S3에 저장이 에러없이 끝나면 프론트에 response 200을 날린다. 4. 프론트에서..

보호되어 있는 글입니다.

개요 typescript에 있어서 String 와 string / Number 와 number 뭔가 다른걸 알고있지만, 뭐가 다른건지 구체적으로 모르겠어서 기록해둔다. 타입 스크립트에서 타입을 지정할 때에는 위처럼 대문자로 시작되는 래퍼 객체 생성은 지양한다. number,string, boolean, symbol은 primitive type 이고 Number, String, Boolean, Symbol은 참조 자료형이다. 둘은 다른 자료형이며 래퍼객체는 타입으로 사용해서는 안된다. 그럼 왜 타입으로 쓰면 안되는가? 효율성 string 타입의 값은 효율적으로 메모리에 저장된다. 반면 String 객체는 추가 메타데이터와 함수들을 포함하기 때문에 더 많은 메모리를 사용할 수 있다. 예상치 못한 행동 Str..

보호되어 있는 글입니다.

개요 build 와 generate라는 배포옵션이 있는 이 두가지의 차이점이란? nuxt로 작성한 웹앱을 Firebase의 호스팅기능을 이용해 배포하는 과정 적어보기 build와 generate의 차이 build nuxt.config.json의 target: 'server' 가 설정되어 있을때 npm run build 을 실행함으로써 .nuxt/dist에 다양한 파일들이 생성된다. 그 파일들은 Webpack으로 트리쉐이킹되고 압축된 JS와 CSS파일들로 구성되어 있는데 Heroku 나 Digital Ocean 같은 Node.js 서버에 deploy할때 쓰는 용도이다. generate nuxt.config.json에서 target: 'static' 이 설정되어 있을 때 npm run generate 를 실..

개요 AWS S3는 왜 쓰는지 궁금해서 서버의 Scale up(수직적 확장, 메모리, CPU 업그레이드)에는 한계가 있다. -> 너무 비쌈 그래서 Scale out(수평적 확장, 서버의 수 늘리기)이라는 개념이 나온다. -> 비용적 측면에서 훨씬 가성비 좋음 (CPU 업그레이드 vs 하드디스크 용량 늘리기 둘중에 뭐가 싼지 생각하면 이해하기 쉽다.) 하지만 이런 수평적 확장을 함으로써 문제점이 발생할 수 있는데, 위의 이미지를 보면 1. Load Balancer로 부하가 없는 서버에 태스크를 보낸다. 2. 서버1에 img5를 가져오는 태스크를 보냈는데, 서버1에는 img5가 없다. 이렇게 img들이 서버에 의존함으로써 서버들이 각각의 고유의 데이터를 가지는 상태(StateFull)이 된다. 여기서 더 큰..