728x90 개발일지64 깃허브 블로그 만들기 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. TypeScript-React에서 ReduxToolkit 사용해보기 React TypeScript에서 ReduxToolkit을 사용하기 위해 간단한 설정만 기록합니다. javaScript에서 ReduxToolkit 사용하는법은 아래 링크의 예제를 참고해보셔도 좋습니다. https://hanbbistory.tistory.com/53 AppDispatch = useDispatch; export const useAppSelector: TypedUseSelectorHook = useSelector; 위의 설정을 마치면 js에서 dispatch를 사용하는 것과 같이 사용할 수 있다. // Form.tsx import { useAppDispatch, useAppSelector } from "../hook/useRedux"; import { FormEvent } from "../ty.. 2023. 1. 18. 이전 1 ··· 4 5 6 7 8 9 10 ··· 16 다음 728x90
