Programming/React (48) 썸네일형 리스트형 Gatsby Tailwind CSS 적용하기 1. Tailwind CSS 와 PostCSSnpm install tailwindcss postcss autoprefixer gatsby-plugin-postcss 2. Tailwind CSS 초기화npx tailwindcss inittailwind.config.js 파일이 생성됨3. PostCSS 설정프로젝트 루트 디렉토리에 postcss.config.js 파일을 생성한다.module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, },} 4. Gatsby 설정파일에 PostCSS 플러그인 추가gatsby-config.jsmodule.exports = { ... plugins: [ `gatsby-plugin-postcss`,.. Next.js 14 버전 Netlify에 배포하기 1. next.config.mjs 수정 - 위와 같은 package.json 이 있다고 할 때, "npm run build" 를 하면 .next 폴더가 만들어지는데, next.config.mjs파일을 아래와 같이 수정해서 out파일을 배포하도록 설정을 바꿔줘야함. - 이미지 등의 경로를 제대로 인식할 수 있도록 basePath를 설정합니다. [Next.js 의 모든 URL 앞에 추가되는 기본 경로를 설정]/** @type {import('next').NextConfig} */const nextConfig = { output: 'export', basePath: '', images: { unoptimized: true, },};export default nextConfig; 예전에는 next.. 개츠비(Gatsby) Disqus 댓글기능 달기 이번엔 개츠비(Gatsby) 블로그에 Disqus 댓글 기능을 추가해보도록 하겠습니다. [ 목차 ] 1. Disqus.com에 댓글 추가할 사이트정보 입력 Disqus.com에 로그인 후 Site Admin 으로 이동하여 기본 정보들을 입력하여 내 사이트를 추가해줍니다. 그리고 설치방법을 찾아보면 Gatsby에 반영하는 방법이 나옵니다. [ Site Admin > 내 사이트 선택 > Installation > Gatsby 선택 ] Disqus에서는 아래와 같은 형식으로 안내를 합니다. 단 config에서 괄호가 두개 들어가야합니다. 안내와 조금 차이가 있습니다. import { Disqus } from 'gatsby-plugin-disqus'; const Template = () => ( /* Page .. 개츠비(Gatsby) 구글 서치콘솔 등록 (Google Search Console) [ 목차 ]구글 서치콘설에 등록하기 위해서는 3단계를 거쳐야 합니다. 1. sitemap.xml 2. robots.txt3. Google Search Console 등록 1. Sitemap.xml 생성가장 먼저 sitemap.xml을 생성합니다. 생성 방법은 플러그인 추가로 쉽게 진행할 수 있습니다. gatsby-plugin-sitemap, gatsby-plugin-advanced-sitemap 플러그인을 추가해줍니다.npm i gatsby-plugin-sitemap// gatsby가 버전 5로 올라가면서 아래의 플러그인은 아직 설치가 안되고 있습니다.npm i gatsby-plugin-advanced-sitemapgatsby-config.js 에 플러그인을 추가해줍니다.module.exports = {.. 개츠비(Gatsby) 마크다운 파일과 이미지 처리하기 사실...여러 예제와 뤼튼 AI를 이용해서 하루 종일 고생하며 방법을 찾아봤는데, 지금도 왜 되었는지 잘 모르겠습니다. 예제를 따라 해도 안되던게 갑자기 됩니다. 우선 코드만 남겨놓습니다. 1. 마크다운 파일 읽어오는 옵션 'gatsby-source-filesystem'은 기본적으로 설치되었을겁니다. 마크다운 파일들을 모아놓는 곳을 아래와 같이 설정해줍니다. // gatsby-config.js module.exports = { siteMetadata: { ... }, plugins: [ ..., { resolve: `gatsby-source-filesystem`, options: { name: `posts`, path: `${__dirname}/content/posts`, }, }, ... ], }; 2.. 개츠비(Gatsby) 마크다운 블로그 만들기 시작하기 정적사이트 생성기(SSG, Static Site Generator)에 대해 공부하다보니 다시 Gatsby에 대한 흥미가 돌기 시작해서 오랫만에 Gatsby로 프로젝트를 만들어봤습니다. 예전에 이걸 공부했던 적이 있었나 싶을 정도로 하나도 기억이 안나더군요. React에 대한 두려움으로 React 계통의 프레임워크들은 무조건 멀리했었던 것 같기도 하고, 사실은 Gatsby, GraphQL에 대해 정확히 공부한적이 없었던 것 같기도 하네요. 그래서 오늘은 설치하고 마크다운 문서 표기하기까지 알게된 내용을 정리해볼까 합니다. [ 목차 ] 1. Gatsby란? Gatsby는 서두에 말했듯이 React에 기반한 정적사이트 생성기(SSG, Static Site Generator)입니다. 예전부터 Ruby on Ra.. React toolkit을 이용한 React counter 1. 라이브러리 설치 yarn add redux react-redux @reduxjs/tookit 2. index.js Reducer 연결 및 store 생성 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { configureStore } from "@reduxjs/toolkit"; import rootReducer from "./reducers"; import { Provider } from "react-redux"; const store = configure.. React에서 Kakao 지도 api 사용하기 - 지도에 표시하기 1. 지도에서 좌표-주소 변환 geocoder 라는 것을 사용해야하는데, services라이브러리를 써야합니다. 라이브러리는 api 요청할 때 url에 추가해서 보내면 됩니다. (kakao 예제에서 제공하는 cluster, drawing도 함께 추가해 넣었습니다.) 2. 우선 화면에 무언가 표시를 해봅시다. 예제는 kakao에서 제공되는 kakao 제주 사옥을 찾는 것 같습니다. import React, { useEffect } from 'react'; const { kakao } = window; const MapContainer = () => { useEffect(() => { const container = document.getElementById('myMap'); const options = {.. 이전 1 2 3 4 ··· 6 다음
