Programming/React (48) 썸네일형 리스트형 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]/.. 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 작.. Nodejs V14 ESM 문법 적용하기 - 리액트를 다루는 기술 backend 주의점 "리액트를 다루는 기술" 의 22장...mongodb 연동하기 과정에서 Koa 백엔드에 ESM을 적용하는 부분이 있는데, 현재 Node 14 버전에서 주의해야할 점과 함께 몇가지 정리해보고하 합니다. 1. 라이브러리 설치 해당 과정에서는 ESM이 외에도 몇가지 라이브러리가 필요합니다. koa, koa-bodyparser, koa-router, mongoose, dotenv 등 말이죠. ESLint옵션 설정하는 부분은 제외하도록 하겠습니다. (VSCode에 설치한 ESLint 기능에, 추가 설정했을 경우 달라지는 부분을 잘 몰라서 이부분은 제외하고 사용했습니다.) 아래의 package.json을 보면 필요한 라이브러리들을 확인할 수 있을 것입니다. { "name": "05_react_backend", "v.. Newsapi api 키 발급받기 1. https://newsapi.org/register에 가입합니다. News API – Search News and Blog Articles on the Web Get JSON search results for global news articles in real-time with our free News API. newsapi.org 가입 완료시 나오는 API Key를 저장해둡시다. 나중에 API 요청할 때 써먹어야 합니다. 2. 한국 Link에 들어가봅니다. https://newsapi.org/s/south-korea-news-api News API – Search News and Blog Articles on the Web Get JSON search results for global news a.. Storybook 사용하기 비주얼 테스트 도구인 스토리북에 대해 알아보겠습니다. 1. 설치 npx -p @storybook/cli sb init .storybook폴더가 자동 생성되고, 그 안에 story파일을 로딩해주는 main.js 와 preview.js 파일이 있습니다. main.js에는 ...story.js파일을 자동 추가/로딩해주는 부분과 addon 설정부분이 있습니다. (preview.js는 아직 잘 모르겠습니다.ㅠㅠ) package.json에도 storybook 스크립트가 추가되었습니다. (모두 이전 버전에서 수동 생성해주던 부분임...) 2. Sample 컴포넌트 작성 기존 컴포넌트들이 있으면 활용해도 되지만, 저는 새로 만든 프로젝트에서 테스트할 용도로 간단한? 컴포넌트 하나를 만들겠습니다. import React.. MongoDB 다운로드 설치 및 Compass 연결 MongoDB 설치파일 다운로드 위치를 몰라서 기록해놓습니다. 아울러 Compass에서 처음 접속하는 방법도 함께 공유합니다. 1. Download Site (www.mongodb.com/try/download/community)접속 2. 설치 (설치 중간에 함께 추천하는 Compass 도 설치합니다.) 3. 확인 정상 설치되었을 경우 커맨드 창에 mongo 라고 입력해보면 버전정보 등이 나타납니다. 4. Compass 실행 'mongodb://localhost:27017'을 입력하고 Connect를 누르면.. 현재의 데이터베이스들이 나타납니다. ~끝~ 이전 1 2 3 4 5 6 다음 목록 더보기
