메로그

소개 보통 자기소개 페이지를 하나 만든다고 하면, 호스팅을 하나 따로 만들어서 해야하는데, 깃허브에서는 Pages 를 이용해서 간단한 웹사이트를 퍼블리싱할 수 있도록 해줍니다. 간단한 일부 오픈소스 프로젝트 또는 블로그, 이력서 등을 호스팅할 수 있도록 해준다라고 깃허브 공식 홈페이지에 나와있습니다. 이 기능은 깃허브를 사용하는 모든 사용자들이 사용가능하고 간단하게 바로 사용할 수 있도록 가이드를 해드리도록 하겠습니다. 가이드 레포지토리를 하나 새로 만들어줍니다. 이름은 username.github.io 로 만들어주면 사실상 Pages 까지 자동으로 셋팅될 겁니다. 만들면 이제 위와 같이 나온 상태가 나오게 되고, Settings 에 Pages 로 가봅시다! 자 페이지를 가면 사이트가 자동으로 연동된 것..

준비하기 Redux 를 사용하고 있는데, 새로고침을 하게 되면 데이터가 다 날아가는 것을 볼 수 있다. 이를 유지하기 위한 방법으로 redux-persist 가 있는데, 이를 사용하는 방법을 알아보자. 우선 아래와 같이 준비를 해주자. 해당 로직은 redux-toolkit 을 이용한 셋팅이다. combineReducers 까지 사용해서 여러 리듀서를 묶은 것을 확인할 수 있다. import { configureStore, combineReducers } from "@reduxjs/toolkit"; import cartReducer from "./cartSlice"; import countReducer from "./countSlice"; // combineReducers 로 리듀서를 묶을 수 있음. co..

.env.local 을 일반적으로 사용하지만, 해당 파일은 무시되도록 되어 있어 .gitignore 에 설정하시면 됩니다. 우리는 .env.develpoment, .env.production 을 사용할려고 왔으니 사용해보자. .env.develpoment - 개발 환경에서 사용되는 환경 변수 - next dev 를 실행할 때 실행됩니다. - 개발 환경에서 사용할 키, API 엔드포인트 등을 설정해줍시다. .env.production - 프로덕션 환경에서 사용되는 환경 변수 - next start, build 에 실행됩니다. - 상용 환경에서 사용할 키, API 엔드포인트 등을 설정해줍시다. 서버, 클라이언트 사용방법 - 기본적으로 서버 측에서 사용시에는 환경 변수에 별도 접두사 없이 사용하시면 됩니다. ..

웹 개발에서 메타 데이터는 매우 중요합니다.메타 데이터는 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..