목록2025/02/07 (3)

코딩기록

vscode로 리액트 타입스트립트 프로젝트 만들기1 - 셋팅 설정파일들 package.json, .eslintrc.js, tsconfig.json, prettierrc.js, reportWebVitals.ts

내가 현재쓰는 버전 1. 프로젝트 생성 및 초기 설정npx create-react-app my-app --template typescriptcd my-appnpm install react@18 react-dom@18 간혹 프로젝트 생성 후 web-vitals 모듈이 누락된 경우 아래 명령어로 설치 하면된다. npm install web-vitals 2. 필요한 패키지 설치npm install react-router-dom@^7.1.5 web-vitals styled-components @types/styled-componentsnpm install @eslint/config-array @eslint/object-schema eslint-config-prettier eslint-plugin-prettie..
프론트/리액트 2025. 2. 7. 23:55
vscode로 리액트 타입스트립트 프로젝트 만들기2 - 서비스 만들기 메인 코드

[ Header.tsx ]import React from 'react';import styled from 'styled-components';import { ProgressBar } from 'react-bootstrap';interface Props { type: string;}export default function Header(props: Props) { return ( {props.type === 'progress' ? ( ) : ( 😻예비집사 판별기 )} );}const ProgressWrapper = styled.div` font-size: 40pt; align-items: cent..
프론트/리액트 2025. 2. 7. 21:42
GitHub) clone 안 하고 기존 vscode 프로젝트에서 github 연동 / 새 레파지토리에 연동

처음 깃헙 상태  커밋 전 vscode 상태  여기서 메시지를 쓰고  ✔Commit  을 클릭.   ☁ Publish Branch   클릭  public 선택여기서 private과 publish 선택을 잘못하면 나중에 repository > setting에 들어가서 다시 public으로 설정해야 한다.첨부터 public으로 선택! vscode에서 커밋완료 후 깃헙 홈피로 들어가 확인하면 이렇게 새로 레파지토리가 생성되어 있다.clone 안 하고 기존 프로젝트를 깃헙 새 레파지토리에 연동하기 끝!
카테고리 없음 2025. 2. 7. 20:24
Prev 1 Next