Refactor를 위해 javascirpt에서 typescirpt로 바꾸고 React-query를 설치하려고 했는데 npm i 에서 에러가 났다.
react-script 패키지가 'typescript@4.x'를 요구하는것이다.
메세지에 --legacy-peer-deps옵션을 사용하는 방법이 있고 --force하는 방법도 있는데 두 방법 호환성을 억지로 맞추거나 아니면 보안에 취약한 선택인거 같아 첫째론 CRA github페이지에 들어가 보았다. 최신 commit이 작년이여서 방도를 몰라 GPT에게 물어본 결과 NEXT나 webpack 혹은 Vite를 사용하라는 결과가 나왔다.
기존 작업해 둔 것들이 있고 데이터베이스를 따로 사용하지 않아 Next로 바꾸는 것은 아닌것 같고 webpack으로 설정하면 너무나도 많은 설정이 있어 복잡해질것을 우려가 되어 빠르고 업그레이드 할 수 있는 Vite로 해결하는 것이 옳다고 판단이 들어 Vite를 설치 했다.
server host를 원하는 번호로 입력해준다. 프록시 , cors, headers 등을 더 알고 싶으면 위 링크.
import {defineConfig} from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
},
});
Environment Variables
CRA에서 env를 사용하기 위해서는 root에 .env 파일 내부에 REACT_APP_**이라고 변수를 만들어주어서 스크립트 내부에
process.env.REACT_APP_**라고 생성했었다. 하지만 vite에서는 process.env를 사용하기 위해서는 .env파일에 VITE_APP_***라고 생성해야며 사용시에는 import.meta.env.VITE_APP_***으로 사용되어야한다. 또한 typescript를 사용해 자동완성을 만들기 위해서는 src 폴더내에 vite-env.d.ts를 만들어 사용한다.
import styled from 'styled-compoenets'
//백틱에 스타일이 들어가야 한다.
const SayHello = styled.h1`
background-color:teal;
color:red;
width:100px;
height:100px
`;
//props로도 스타일을 줄 수 있다.
const SayMeetYou = styled.div`
background-color: ${(props)=>props.bgColor};
width:100px;
heigth:100px;
`;
// SayMeetYou의 요소를 그대로 사용하며 border-radius의 값을 추가하여 사용할 수 있다.
const SayBye = styled(SayMeetYou)`
border-radius:50px;
`;
// 예로 버튼태그에 스타일을 주었는데 링크테그에도 똑같은 스타일을 주고 싶을 때 사용하는 방법
const Btn = styled.button`
border: 0;
border-radius: 25px
background-color: tomato:
color:white;
`;
//어트리뷰트 값도 지정해줄 수 있다.
const Input = styled.input.attrs({required:true, minLength:'10'})`
background-color: cornflowerblue;
`;
export default function App (){
return(
<div>
<div
style={{ backgroundColor:'teal', width:100, height:100 }}>
<h1> hello </h1>
</div>
<div>
<SayHello> hello </SayHello>
</div>
<SayMeetYou bgColor={"orange"}}></SayMeetYou>
<SayBye bgColor={"Yellow"}}></SayBye>
<Btn>Click me</Btn>
// Btn 스타일일을 쓰고 싶지만 링크로써 사용하고 싶다면 as라는 props를 줘서 원하는 html을 부여할 수 있다.
<Btn as='a' href='URL LINK'>Click me</Btn>
<Input/>
</div>
)
}