본문 바로가기
반응형

분류 전체보기

 (385)
Next.js 시작하기4 - 설정파일 1. next.config.js module.exports = { reactStrictMode: true, trailingSlash: false, // 뒤쪽 슬래시를 붙일 것인지.. env: { SANITY_PROJECT_ID: 'ozi5ivc6', //Sanity ID를 환경변수로 지정 } }
Next.js 시작하기3 - 스타일링 1. 라이브러리 설치 yarn add @sanity/block-content-to-react yarn add react-syntax-highlighter 2. BlogPostDetail.jsx import {Col, Row } from 'antd' import BlockContent from '@sanity/block-content-to-react' import SyntaxHighlighter from 'react-syntax-highlighter' const serializers = { types: { code: ({node}) => { const { code } = node; return ( {code} ) }, video: ({ node }) => { return video }, link: ({ n..
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 ..
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]/..
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" # 프로젝트 빌드 결과의 디렉토리를 ..
헤로쿠 백엔드, 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..
Heroku 기본 사용법 1. Heroku 로그인 2. Heroku CLI 설치 3. git init 4. git add . 5. git commit -m "first message" 6. heroku login 7. heroku create myapp 8. heroku git:remote -a myapp 9. git push heroku master
HEROKU salesforce authenticato 새 디바이스에서 인식 안된 문제 열심히 Front만 공부하던 중 Backend도 배포하려면 Heroku에서 하면 된다는 걸 알게되었습니다. 그래서 로그인 하려고 하는데 새 기기에서 로그인 하려고 하니 salesforce authenticator로 인증하라는 메시지가 뜨네요. 그래서 좀 짜증나지만 앱을 열고 인증을 해줘야 했습니다. 그런데...웬일인지 인증 메시지가 핸드폰 salesforce authenicator에서 뜨질 않네요...ㅠㅠ 최근 갑작스런 핸드폰 비번 잠금으로 인해서...핸드폰을 사용한지도 좀 되고 해서 새 폰으로 바꾼지 한 3일 되었습니다. 좀 어이가 없던 순간이었습니다. 오전에도 잘 쓰던 폰이 갑자기 결재하려니까 비번이 먹통이되면서 핸드폰 로그인 비번(지문인식 포함)이 완전히 인식을 못하는 지경에 이르렀던 것이죠. 어찌..
반응형

티스토리툴바