๐ฉ๐ค ํ๋ก ํธ์๋/react
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdKPaFN%2FbtrXCI14RTB%2F1YrmLMx5bFPWrkPAF5Tuf0%2Fimg.png)
[React Router][Webpack] ์ค์ฒฉ ๋ผ์ฐํ ์ฌ์ฉ ์ 404 Not Found ์ค๋ฅ
React Router nested routes 404 Not Found Error React Router ์ค์ฒฉ ๋ผ์ฐํ React Router๋ก ์ค์ฒฉ ๋ผ์ฐํ ์ ํ๋ฉด ์๋์ ๊ฐ์ด ์์ฑํ ์ ์๋ค. import { Routes, Route } from 'react-router-dom'; function App() { return ( ... ); } React Router nested routes 404 Not Found Error /admin ๊ฒฝ๋ก๋ก ์ ์ํ ๋ค ์๋ก๊ณ ์นจ์ ํ๋ฉด ๋ฌธ์ ์์ด ์ ๋๋ก ์๋ํ๋ค. ํ์ง๋ง /admin/all-problems ๊ฒฝ๋ก๋ก ์ ์ํ ๋ค ์๋ก๊ณ ์นจ์ ํ๋ฉด 404 Not Found ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. ํด๊ฒฐ ๋ฐฉ๋ฒ script์ src๋ฅผ ์ ๋๊ฒฝ๋ก๋ก ์ค์ ํด์ค๋ค. index.html์ scrip..
์ปดํฌ๋ํธ ์ ๋ง๋ค๊ธฐ: ๋ฐ์ดํฐ ์ถ์ํํ๊ธฐ
ํ ์คใ ฃSLASH 22 - Effective Component ์ง์ ๊ฐ๋ฅํ ์ฑ์ฅ๊ณผ ์ปดํฌ๋ํธ ์์์ ์ฐธ๊ณ ํ์ฌ ๊ธ์ ์์ฑํ์์ต๋๋ค. ์ ํ์ ํญ์ ๋ฐ๋๋ค. ๋ณ๊ฒฝ์ฌํญ์ ์์ฃผ ๋ฐ์ํ๋ค ์ข์ ์ ํ์ ์ํด์๋ ๋ณ๊ฒฝ์ ๋ฐ๋์ ํ์ํ๋ค ๋ณ๊ฒฝ์ ์์ธก ๋ถ๊ฐ๋ฅํ๋ค ๋ณ๊ฒฝ์ ๋์ํ๊ธฐ Item์ด๋ผ๋ ์ปดํฌ๋ํธ ์ด๋ฆ๋ง ๋ณด๊ณ ๋ ์ปดํฌ๋ํธ๊ฐ ์ด๋ค ์ญํ ์ ํ๋์ง, ์ด๋ป๊ฒ ๋ณด์ฌ์ง๋์ง ์ ์ ์๋ค. ๋ณ๊ฒฝ์ ์ ์ฐํ๊ฒ ๋์ํ๋๋ก ์ปดํฌ๋ํธ ๋ง๋ค๊ธฐ ์ปดํฌ๋ํธ? ์ปดํฌ๋ํธ๋ 3๊ฐ์ง ํน์ง์ ๊ฐ๋๋ค. 1. ์ปดํฌ๋ํธ๋ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๋ค ์ปดํฌ๋ํธ๋ ๋๊ฐ์ง ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๋ค. ์ธ๋ถ์์ ์ฃผ์ ๋ฐ์ ๋ฐ์ดํฐ ๋ด๋ถ ๋ฐ์ดํฐ(์ํ) 2. ์ปดํฌ๋ํธ๋ UI๋ฅผ ๋ณด์ฌ์ค๋ค. ์ปดํฌ๋ํธ๋ ๋ฐ์ดํฐ๋ฅผ ์ด๋ป๊ฒ ๋ณด์ฌ์ค ๊ฒ์ธ์ง๋ฅผ ๊ฒฐ์ ํ๋ค. 3. ์ปดํฌ๋ํธ๋ ์ฌ์ฉ์์ ์ํธ์์ฉํ๋ค. Headless ๊ธฐ๋ฐ..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbmQZrk%2FbtrVvuR0anW%2FL2Dv2aIr509D4cALaI7LVK%2Fimg.png)
[React] useState ์ด๊ธฐ๊ฐ์ด undefined์ด ๋๋ ์ค๋ฅ
๋ฌธ์ ์ํฉ props๋ก ์ ๋ฌํ ๊ฐ์ state์ ์ด๊ธฐ๊ฐ์ผ๋ก ์ฌ์ฉํ์๋ค. ํ์ง๋ง state ๊ฐ์ props๋ก ์ ๋ฌ๋ ๊ฐ ๋ค๋ฅด๊ฒ undefined๋ก ์ค์ ๋์๋ค. ์์ธ useState(initialValue)์์ initialValue๋ ์ฒซ๋ฒ์งธ ๋ ๋๋ง์์๋ง ์ฌ์ฉ๋๋ค. ๊ทธ ํ์๋, props๋ก ์ ๋ฌ๋ intialValue ๊ฐ์ด ๋ณํ๋๋ผ๋ ์ ์ฉ๋์ง ์๋๋ค. props๊ฐ ๋ฐ๋๋ฉด ์ฌ๋ ๋๋ง์ด ์ผ์ด๋์ง ์๋์? ๋ถ๋ชจ ์ปดํฌ๋ํธ์ state๋ฅผ props๋ก ์ ๋ฌํ ๊ฒฝ์ฐ๋ง ์ฌ๋ ๋๋ง์ด ์ผ์ด๋๋ค. ์์ ๊ฒฝ์ฐ๋ ๋ถ๋ชจ ์ปดํฌ๋ํธ์ state๋ฅผ ์ ๋ฌํ ๊ฒ์ด ์๋๋ผ ๋ณ์๋ฅผ ์ ๋ฌํ๊ธฐ ๋๋ฌธ์ ๋ ๋๋ง์ด ๋ค์ ์ผ์ด๋์ง ์๋๋ค. ํด๊ฒฐ ๋ฐฉ๋ฒ 1. useEffect useEffect ์ฌ์ฉํด์ props๋ก ์ ๋ฌ๋ initialValue๊ฐ ๋ณ๊ฒฝ๋๋ฉด set..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FehOPbV%2FbtrUSuFPGIp%2FVt2mkbZw7NyeQMM8Egkwh1%2Fimg.png)
[React] Webpack์ผ๋ก React ์์ํ๊ธฐ 2 - react, typescript, eslint, prettier
2022.12.29 - [react] - [React] Webpack์ผ๋ก React ์์ํ๊ธฐ 1 - webpack, babel-loader [React] Webpack์ผ๋ก React ์์ํ๊ธฐ 1 - webpack, babel-loader Webpack Webpack์ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ดํ๋ฆฌ์ผ์ด์ ์ ์ํ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ด๋ค. Webpack์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ํ๊ฒฝ์์ ์ฃผ๋ก ์ฌ์ฉํ๊ณ ์๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ด๋ค. HTML, CSS, Javascript, ์ด๋ฏธ์ง ๋ฑ์ ๋ชจ๋ ํ๋์ ํ min-kyung.tistory.com ๊ธธ๊ณ ํ๋ํ ์นํฉ ์ค์ ์ ๊ธธ.. react ์ค์น npm i react react-dom ์ด์ ๋๋ต์ ์ธ ์นํฉ ์ค์ ์ ๋ง์น๊ณ ๋ฆฌ์กํธ๋ฅผ ์ค์นํ๋ค. typescript ์ค์น ๋ฐ ์ค์ ํ์ผ npm i -D ty..
![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbWK73a%2FbtrUTJinPqI%2FkiDnChlKvTjDi9cJK2E4lk%2Fimg.png)
[React] Webpack์ผ๋ก React ์์ํ๊ธฐ 1 - webpack, babel-loader
Webpack Webpack์ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ดํ๋ฆฌ์ผ์ด์ ์ ์ํ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ด๋ค. Webpack์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ ํ๊ฒฝ์์ ์ฃผ๋ก ์ฌ์ฉํ๊ณ ์๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ด๋ค. HTML, CSS, Javascript, ์ด๋ฏธ์ง ๋ฑ์ ๋ชจ๋ ํ๋์ ํ์ผ๋ก ๋ฒ๋ค๋งํ๋ค. ์์กด ๋ชจ๋์ด ํ๋์ ํ์ผ๋ก ๋ฒ๋ค๋ง๋๋ค. React์ Webpack ํ๋ก์ ํธ๋ฅผ ์์ํ๋ฉด์ Webpack ๋ฒ๋ค๋ฌ๋ฅผ ์ฌ์ฉํด์ ๋ฆฌ์กํธ ๊ฐ๋ฐ ๋น๋ ํ๊ฒฝ์ ์ง์ ๊ตฌ์ฑํ๊ธฐ๋ก ํ์๋ค. ๊ทธ๋ฅ CRA๋ฅผ ์ฐ๋ฉด ์๋๋? ์นํฉ ์ค์ ์ ์ฌ์ค ๊ท์ฐฎ๊ณ boilerplate๋ผ๊ณ ์์ฑํด์ฃผ์ด์ผํ๋ ๋ถ๋ถ์ด ๋ง์์ ์ด๋ฅผ ๊ฐ๋จํ๊ฒ ์ค์ ํ๊ณ ์ถ์ ๊ฒฝ์ฐ์๋ Create React App์ธ CRA๋ฅผ ์ฌ์ฉํ ์ ์๋ค. ๋ฆฌ์กํธ ๊ณต์๋ฌธ์์๋ ์ต์ํ์ ํด์ฒด์ธ์ผ๋ก ์์ํ๋ ๋ฐฉ๋ฒ์ผ๋ก CRA๋ฅผ ์๊ฐํ๊ณ ์๋ค..ใ ..