메로그

웹 개발에서 메타 데이터는 매우 중요합니다.메타 데이터는 SEO 향상, 사용자 경험 개선 등 아주 도움이 되므로 매우 중요합니다.메타 데이터를 정적, 동적으로 설정하는 방법을 알아봅시다! 정적 설정layout.tsx, page.tsx 에서 아래와 같이 셋팅하면 정적으로 셋팅할 수 있습니다.import { Metadata } from 'next' // 정적 메타 데이터export const metadata: Metadata = { title: 'Hello world',} 만약에 자바스크립트를 사용하고 계신다면, metadata 만 export 해주면 됩니다.export const metadata = { title: 'hello world',} 동적 설정동적 설정 또한 layout, page 에서 할 수..

도입 이유 기존에 wrike 라는 툴로 전체 모든 태스크를 관리하였습니다. 그러다보니 이제 기존 프로젝트들 말고도 다른 태스크들이 있어 프로젝트 단위로 관리가 어렵다는 생각이 들었습니다. 깃허브 내에서 이슈 트래킹, 이슈 - PR 연동, 일정 등 워크플로우를 이용한 자동화 기능을 사용하여 프로젝트를 관리할 수 있는 장점이 있어 도입하게 되었습니다. 개요 깃허브에서 제공하는 협업툴로 이슈와 결합해서 사용할 수 있습니다. - 프로젝트 관리의 편의성 - 이슈, PR 과 연계하여 사용하며 프로젝트 보드를 이용한 진행 상황을 공유하고 관리할 수 있습니다. - 워크플로우를 이용하여 상태를 자동화 처리할 수 있습니다. 사용방법 1. 프로젝트 생성 (New project 를 눌러줍니다.) 2. 생성 후, 이슈를 만들며..

Vue Composition API 는 Vue2 에서도 사용할 수 있도록 라이브러리를 지원한다. Nuxt2 에서도 해당 라이브러리를 사용할려고 했는데 호환이 맞지 않는 문제가 발생했다. (Nuxt 에서 Vue 관련 에러가 발생...) 그래서 찾아보니 @nuxtjs/composition-api 라는 것을 지원한다. 이를 사용해보자. 참고: https://composition-api.nuxtjs.org/getting-started/introduction 설치 방법 yarn add @nuxtjs/composition-api 모듈 설치 이후, nuxt.config.js 에 가서 아래 설정을 해주자. // nuxt.config.js { ..., buildModules: [ '@nuxtjs/composition-a..

Composition API 는 컴포넌트 코드 재사용성을 높여주는 API 입니다. 흔히들, Vue3 에서 사용하는 줄 알지만, 시작은 Vue2 에서 플러그인 형태로 지원하였습니다. 그렇기 때문에 Vue2, Vue3 에서 둘 다 사용가능합니다. 라이브러리 설치 이제 vue2 를 쓰는데, Composition API 가 쓰고 싶은 경우, nuxt2 를 쓰는데 Composition API 가 쓰고 싶은 경우 아래의 github 를 참고해서 설치해봅시다. https://github.com/vuejs/composition-api GitHub - vuejs/composition-api: Composition API plugin for Vue 2 Composition API plugin for Vue 2. Contr..

elasticbeanstalk 을 사용하면 S3 버킷을 자동으로 생성하는데 기본적으로 삭제 권한이 허용되어 있지 않습니다. 직접 s3 권한을 열어서 Allow 해주어야 삭제됩니다. 삭제하기 아래 Effect 값을 Allow 로 변경해주면 삭제할 수 있습니다.

AWS Elastic Beanstalk 은 코드만 올리면 알아서 npm install, npm run start, 도메인 연결 등을 자동으로 해줍니다.버전 관리도 해주며, 신경 쓸거는 코드를 업로드하는 것만 신경써주면 됩니다.IAM 생성배포할라면 IAM 을 무조건 만들어줘야 합니다. 배포할라면 무조건 만들어줘야하니 그냥 일단 만들어봅시다.IAM 을 검색해서 역할 > 역할 생성을 눌러줍니다. 1단계 - 신뢰할 수 있는 엔티티: AWS 서비스, 사용사례는 EC22단계 - 권한 추가에서 다음 3개를 추가해줍시다. (AWSElasticBeanstalkWebTier, AWSElasticBeanstalkWorkerTier, AWSElasticBeanstalkMulticontainerDocker) 3단계 - 의미있는..