setting 7

Git&Github) Github 저장소 및 원격 저장소 이름 변경

Github 저장소에 들어가면 Settings가 있다. 이 곳에서 저장소 이름을 수정하면 된다. 하지만 로컬의 원격 저장소 이름은 수정되지 않는다. 이를 위해서 아래의 과정을 진행한다. git remote -v 위 명령어를 통해 현재의 원격 저장소 이름을 확인한다. 그 후, 바뀐 저장소의 주소를 가져와서 아래의 코드에 넣어 명령어를 입력한다. git remote set-url origin # git branch 명 변경 git branch -m 참고) - https://iambeginnerdeveloper.tistory.com/82 - https://www.freecodecamp.org/korean/news/git-rename-branch-how-to-change-a-local-branch-name/

HTML) Meta Tag ... OG(오픈그래프) 설정

카카오톡에 링크를 공유했을 때 나오는 미리보기를 Meta Tag 의 og 를 이용하여 설정할 수 있다. # 양식 https://example.com/page.html"> https://example.com/image.jpg"> * index.html 의 head 태그 안에 정의한다. 만약 설정했는데 카카오톡에서 미리보기가 제대로 나오지 않는 경우, https://developers.kakao.com/tool/debugger/sharing 위의 kakao developers의 공유 디버거에서 캐시 초기화를 하면 된다. 참고) - https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A..

Front-end/HTML 2023.03.04

React) createBrowserRouter 기본 사용 방법 ... react-router-dom

(Router.tsx 파일을 따로 분리해서 진행 / App.tsx -> Root.tsx) 1) Router.tsx import { createBrowserRouter, RouterProvider } from "react-router-dom"; import Home from "./screens/Home"; import About from "./screens/About"; import Root from "./Root"; const router = createBrowserRouter([ { path: "/", element: , children: [ { path: "/", element: , }, { path: "/about", element: , }, ], }, ]); export default functi..

Front-end/React 2023.02.24

Git&Github) gh-pages 만들기 ... github 무료 웹사이트 배포

결과물을 gh-pages에 올릴 수 있다. 해당 파일들을 무료 웹사이트로 만들어 전세계로 배포할 수 있다. 시작 전, 배포를 원하는 저장소의 공개 범위를 public 으로 설정해야 한다. 1) gh-pages 패키지 설치 npm i gh-pages 또는 yarn add gh-pages 2) package.json에 코드 추가 ... "scripts": { ... "deploy": "gh-pages -d build", "predeploy": "npm run build" }, ... "homepage": "https://(사용자명).github.io/(저장소명)/" 3) 명령어 실행 npm run build npm deploy 또는 yarn build yarn deploy 몇 분 후에 ' https://(사..

React) 다양한 React 프로젝트 생성 방법 (NPM/Yarn, JS/TS)

Creat React App 을 이용하여 프로젝트를 생성할 때, 다양한 방법이 있다. 크게 4가지로 나누어 살펴본다. (npm+js / npm+ts / yarn+js / yarn ts) 설치 전, node.js와 npm은 설치되어 있어야 한다. * NPM 이용 공통) create react app 설치 ... (프로젝트 생성 전, 최초 1회) npm install -g create-react-app 1) Vanila JS 프로젝트 npx create-react-app 2) TypeScript 프로젝트 npx create-react-app --template typescript * Yarn 이용 공통) ... (프로젝트 생성 전, 최초 1회) 1. yarn 세팅 corepack enable yarn set..

Front-end/React 2023.01.31