본문 바로가기

Programming321

Next.js 시작하기2 - 스타일링 1. 라이브러리 설치 yarn add antd @ant-design/icons// ant design yarn add dayjs// 날짜 변환 라이브러리 2. pages/_app.js 파일에 반영 -> 전체 적용 import 'antd/dist/antd.css' // p.slug === home.mainPostUrl); const otherPosts = posts.filter(p => p.slug !== home.mainPostUrl); console.log(mainPost); console.log(otherPosts); return ( ) } export async function getStaticProps() { const sanityService = new SanityService(); const .. 2021. 6. 20.
Next.js 시작하기 (Sanity Blog 작성 완료된 경우) 1. 프로젝트 생성 및 Library 설치 yarn create next-app . yarn add @sanity/client//Sanity 연결하여 Data를 가져오기 위한 라이브러리 2. 시작 yarn dev yarn start는 빌드 이후 가능합니다. 3. 라우팅 설정 (기초) 폴더/페이지구조url pages/index.js -> / pages/blog/index.js-> /blog pages/blog/first-post.js->/blog/first-post pages/dashboard/setting/username.js->/dashboard/settings/username pages/blog/[slug].js->/blog/:slug(/blog/hello-world) pages/[username]/.. 2021. 6. 20.
Netlify Serverless function 작성 보안을 위해 API Key가 노출되지 않도록 API 요청 부분을 서버리스 함수로 작성하도록 하겠습니다. 추가로 API Key는 환경변수로 등록하여 Github 등으로 올릴 때 노출되는 것을 막기위해 추가적으로 보안설정을 하겠습니다. 1.netlify-cli 설치 npm i -D netlify-cli 2.netlify.toml # Netlify Dev # https://cli.netlify.com/netlify-dev/#netlifytoml-dev-block # 제품 모드 [build] command = "npm run build" functions = "functions" # Netlify 서버리스 함수가 작성된 디렉토리를 지정합니다. publish = "build" # 프로젝트 빌드 결과의 디렉토리를 .. 2021. 6. 17.
헤로쿠 백엔드, Netlify 프론트엔드 배포 1. 백엔드 헤로쿠에 백엔드를 배포할 경우 CORS(Cross Origin Resource Sharing) 문제를 해결하기 위해 라이브러리를 설치해야 합니다. Koa로 작업할 경우 'koa2-cors' 를 설치해주면 됩니다. 그리고 라우팅 설정 부분에서 아래의 구문을 추가해줍니다. import cors from 'koa2-cors'; app.use(cors()); 2. 프론트엔드 Github의 소스를 자동으로 배포해주는 Netlify의 경우에도 일부 수정할 부분이 필요합니다. Local에서 작업할 경우에는 같은 localhost에서 데이터를 주고 받아서 몰랐었는데, 이제 헤로쿠의 백엔드 데이터를 받아와야 하기 때문에 조금 달라져야 합니다. 그래서 필요한 것이 _redirects파일 입니다. /public.. 2021. 6. 15.
Recoil 따라하기 - TodoList 무작정 따라한 소스를 기록으로 남김니다. 1. App.js RecoilRoot 를 사용하여 TodoList 요소를 감싸준다. import React from 'react'; import TodoList from './components/TodoList' import { RecoilRoot } from 'recoil'; function App() { return ( ); } export default App; 2. ./src/recoil/state.js 작성 import { atom } from 'recoil'; export const todoListState = atom({ key: 'todoListState', default: [], }); 3. ./src/components/TodoList.jsx 작.. 2021. 5. 28.
Vue 프로젝트 만들기 - with Webpack Template 1. 프로젝트 구성 (Template Download) /node_modules .babelrc.js .gitignore .postcssrc.js .babelrc.js .package-lock.json .package.json .webpack.config.js index.html /src/App.vue /src/main.js /src/assets/logo.jpg ㄴ/components/HelloWorld.vue /scss/main.scss /static/fabicon.ico 2. Package 설치 npm i vue@next npm i -D vue-loader@next vue-style-loader @vue/compiler-sfc npm i -D file-loader npm i -D eslint esli.. 2021. 5. 21.

티스토리툴바