728x90 분류 전체보기66 Github pages 블로그에 Markdown 내용 불러오기 필요한 패키지 yarn add gray-matter # 문자열이나 파일에서 머리말을 구문 분석, 파일에서 메타데이터와 내용 등 추출 시 사용 yarn add marked yarn add @types/marked # 타입스크립트의 경우 yarn add react-markdown # 과 유사함 yarn add remark-gfm # 마크다운 문법이 다양하게 적용될 수 있도록 도와주는 플러그인 yarn add react-syntax-highlighter yarn add @types/react-syntax-highlighter # 타입스크립트의 경우 참조 https://yarnpkg.com/package/react-markdown https://yarnpkg.com/package/react-syntax-high.. 2023. 3. 15. 깃허브 블로그 만들기 Nextjs를 통해 깃허브 pages로 블로그 만드는 방법 1. 레포지토리 생성 레포지토리 이름은 {유저명}.github.io로 저장해준다. # 생성된 repo의 settings => pages에서 배포를 확인할 수 있다. (배포되는데 5 ~ 10분 정도 소요될 수 있다.) 2. 레포지토리 클론 후 nextjs 설치 // 현재 디렉토리에 설치 yarn create next-app . // typescript yarn create next-app . --typescript 3. gh-pages 설치 yarn add gh-pages --save-dev 4. package.json 수정 홈페이지 도메인 추가 및 scripts 수정 1번째 줄처럼 홈페이지를 입력하고, scripts를 위와 같이 수정해준다. "b.. 2023. 3. 15. z-index가 적용되지 않을때 지금까지는 z-index를 사용하면서 별다른 문제가 없었지만, 최근에 사이드 메뉴 바 작업을 진행하면서 이상한 현상이 발견됐다. z-index 999가 무적인 줄 알았던 나는 position도 설정돼있는 요소인데 이게 대체 머선일인가 싶어 MDN에 쪼르르 달려갔다. https://developer.mozilla.org/ko/docs/Web/CSS/z-index z-index - CSS: Cascading Style Sheets | MDN CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. developer.mozilla.org 마지막 줄의 "자손의 z-index를 자기 외의 바.. 2023. 1. 31. React typeScript 사용 시 props type 지정 React를 typeScript와 같이 사용하는 경우 적용할 수 있는 방법으로, 자식 컴포넌트로 전달되는 props 타입을 간결하게 지정해줄 수 있다. // Top.tsx import { Bottom } from "../../~~" export const Top = () => { return } // Bottom.tsx interface childProps { props1: number; props2: string; props3: boolean; props4: () => void; } export const Bottom = ({ props1, props2, props3, props4, }: childProps) => { return bottom jsx } 2023. 1. 19. 이전 1 ··· 4 5 6 7 8 9 10 ··· 17 다음 728x90
