728x90 react7 [React] Vite로 React 프로젝트 만들기 vite로 React 프로젝트를 생성해보면 알아서 잘 해주기 때문에 너무 간단하다. npm create vite@latestyarn create vite 둘 중에 편한거로 만들면, vanilla, react 등등이 뜨는데 react를 선택. 그리고 typescript, javascript, remix 할 건지 뜨는데 편한거 선택. 보기중에 +swc 라는 것이 있는데,swc는 Speedy Web Compiler로 Rust로 개발되어 속도가 빠르다.babel의 대체재이다. 선택하면,프로젝트 폴더로 이동하여 npm i, npm run dev를 실행하면 이런 화면을 볼 수 있다. 기존에 사용하던 webpack과의 차이는 웹팩(Webpack)과 바이트(Vite)는 모두 현대적인 자바스크립트 프로젝.. 2024. 5. 13. [React] 상태 변화 로직 분리하기 리액트에서 상태 변화는 useState로 진행하는데, 이게 많을 경우 코드가 길어지고, 유지보수 하는데 불편하다. 이를 좀더 편하게 하기 위해 useReduce()를 통해 개선할 수 있다. 먼저, 리액트에서 CRUD를 작업한다고 하면 const Main = () => { const [data, setData] = useState([]); const [name, setName] = useState(""); const onCreate = () => { ...생략 } const onRead = () => { ...생략 } const onUpdate = () => { ...생략 } const onDelete = () => { ...생략 } } 생략된 코드들이 복잡하고 길 가능성이 있다. 이를 개선하면, Main.. 2023. 2. 4. [React] 연산 최적화 하기 1. useMemo() 리액트 Hook 에서 useEffect()와 비슷하게 불필요한 동작을 막기 위해 useMemo()라는 것을 사용한다. 예를 들면, Lifecycle이 시작될 때 배열을 서버로부터 받아와서 useState()로 데이터를 상태를 유지한다고 하면, const [data, setData] = useState([]); const getData = async () => { const response = await fetch("url") .then((res) => res.json()); setData(response); } useEffect(() => { getData(); }, []) 이런 코드를 작성할 수 있다. 여기서 Data 안에 있는 내용을 화면에 보여준다고 하면, const getD.. 2023. 2. 2. [React] Lifecycle 제어하기 리액트를 함수형 컴포넌트를 사용하면서 unMount는 어떻게 잡는지 제대로 알지 못했는데, 이번에 공부하면서 알게 되었다. 먼저 Lifecycle이란 화면에 있는 컴포넌트들이 생성될 때 발생하는 과정을 말한다. 이런 과정 제어하는데, Hooks를 사용하면서 클래스형보다 좀 더 편하고 안전하게 사용할 수 있게 됐다. 간단하게 생성 수정 제거 3단계로 나눠서 생성은 화면에 나타나는 것 - Mount 수정은 말 그대로 업데이트(re-render) - Update 제거는 화면에서 사라지는 것 - UnMount 이를 코드로 나타내면 // 생성 & 제거 useEffect(() => { console.log("Mount!"); return () => { console.log("UnMount!"); } }, []); .. 2023. 2. 1. [React] DOM 선택하기 리액트를 사용하면서 DOM에 접근할 땐 useRef()를 사용한다. const nameInput = useRef(); const [state, setState] = useState({ name: "", email: "", password: "", }); const dataSubmit = () => { if (state.name.length < 1) { alert("빈값이면 안돼요."); return nameInput.current.focus(); } } return ( ... 제출 ) nameInput을 console.log로 확인해보면 jQuery나 바닐라JS 사용할 때 보던 화면을 보게 된다. 위에서 만든 nameInput 안에 current가 있고, 그 안에 value, style 등등이 있다. 리.. 2023. 1. 31. [React] state 변경 공통화 하기 리액트를 사용하면서 state가 여러개 일 때 각각 해줬었는데, 왜 공통화할 생각을 한번도 안했는지 반성했다. 내가 평소 사용하던 코드 const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); return ( { setName(e.target.value); }} /> ... ) 이렇게 해왔는데, 이러한 코드를 공통화 하면, // const [name, setName] = useState(""); // const [email, setEmail] = useState(""); // const [password, setPassword] = useSt.. 2023. 1. 30. [Docker] React 프로젝트를 Docker를 이용해서 배포하기 Docker를 이용해서 React 프로젝트를 배포해보려 한다. 먼저 AWS 계정이 있어야하고, 인스턴스가 있어야한다. 프로젝트가 ec2에 있는 상태라 가정(나는 git 설치 후 git pull로 받고, npm run build까지 해둔 상태) 지난번 Spring 프로젝트 배포와 비슷하지만 훨씬 간단하다. 1. ec2를 업데이트하고 프로젝트를 받기 위해 git을 설치 한다. # ec2 업데이트 sudo yum update -y # git 설치하기 sudo yum install git 2. 프로젝트 경로 중 package.json과 같은 경로에 Dockerfile을 생성해서 아래 코드를 넣어준다. FROM node:16 as builder # 작업 폴더를 만들고 npm 설치 WORKDIR /usr/src/a.. 2022. 10. 6. 이전 1 다음 728x90
