๐๋ฆฌ์กํธ๋ก ๊ตฌํํ ํ ์ผ ๊ด๋ฆฌ ์น ์ดํ๋ฆฌ์ผ์ด์
-
์ฌ์ฉ๋ ์ธ์ด ๋ฐ ํ๋ ์ ์ํฌ: react, css/Scss, node.js, express
-
์๋ฒ ๋ฐฐํฌ: heroku
-
๊ธฐํ(ํธ๋์ค ํ์ผ๋ง, ๋ฒ๋ค๋ง) : webpack, babel
- ํ ์ผ ์ถ๊ฐ
- ์ถ๊ฐ๋ ํ ์ผ์ ๊ธฐ๋ณธ์ ์ผ๋ก Doing
- All, Doing, Completed ๊ตฌ๋ถํด์ ๋ณด์ฌ์ง๋ ํ ์ผ ๋ฆฌ์คํธ
- react-router๋ฅผ ์ด์ฉํ ๋ผ์ฐํ ๊ณผ fallback ์ฒ๋ฆฌ
- ํ ์ผ ๋ฆฌ์คํธ์ ์ํ ๋ณ๊ฒฝ ์ ์ค์๊ฐ์ผ๋ก ๋ฐ์
- ์ํ ์ ํ
- Fold ๋ฒํผ ํด๋ฆญ ์ ํ ์ผ ๋ฆฌ์คํธ ๋ณด์ด๊ธฐ <-> ์จ๊ธฐ๊ธฐ ์ ํ
- ์ฒดํฌ ๋ฒํผ ํด๋ฆญ ์ Doing <-> Completed ์ ํ
- ํด์งํต ๋ฒํผ ํด๋ฆญ ์ ํ ์ผ ์ญ์
-
dev์ production ๋ถ๋ฆฌ
- ๊ฐ๋ฐ์ฉ url ๊ณผ ๋ฐฐํฌ์ฉ url์ ๋ถ๋ฆฌํ๊ธฐ ์ํด definePlugin ์ฌ์ฉ
- build ๊ฐ ์ ์์ ์ผ๋ก ์คํ๋๋์ง ํ์ธํ๊ธฐ ์ํด ์คํฌ๋ฆฝํธ ์คํ์
NODE_ENV
ํ๊ฒฝ ๋ณ์๋ก ๊ตฌ๋ถํด์ ์ ๋ฌ
// package.json์ scripts ์ฝ๋
"scripts": {
"start": "node app.js",
"dev-server": "webpack-dev-server --open --config webpack.config.dev.js",
"build": "webpack --config webpack.config.js",
"dev-build": "NODE_ENV=dev webpack --config webpack.config.js"
},
// webpack.config.js์ plugins ์ฝ๋
const url =
process.env.NODE_ENV === "dev"
? `http://localhost:3000/todos`
: "https://michelle-todo.herokuapp.com/todos";
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({template: `./public/index.html`}),
new webpack.DefinePlugin({URL: JSON.stringify(url)})
]
-
useState: ํ๋์ ์ปดํฌ๋ํธ์์ ๊ด๋ฆฌํ๊ณ ์ถ์ ์ํ๊ฐ ์์ ๋
- AddTodo์์ input์ฐฝ์ ์ ๋ ฅ์ด ๋ฐ์ํ ๋ ๋ง๋ค ๋ณํ๋ ๊ฐ์ ๊ด๋ฆฌ
- Navigation์์ Fold ๋ฒํผ์ ํด๋ฆญํ ๋ ๋ง๋ค ๋ณํ๋ ๊ฐ์ ๊ด๋ฆฌ
const AddTodo = () => {
const [inputValue, setInputValue] = useState("");
}
const Navigation = () => {
const [toggle, setToggle] = useState(true);
}
-
useEffect: ์ฒซ ๋ ๋๋ง ์์๋ง / ๋ ๋๋ง์ด ์ผ์ด๋ ๋ ๋ง๋ค / ์ด๋ค ๊ฐ์ด ๋ณํ ๋๋ง ์คํ ์ํค๊ณ ์ถ์ ์ฝ๋๊ฐ ์์ ๋
- useFetch(custom hook)์์ ์ฒซ ๋ ๋๋ง ์์๋ง ์ด๊ธฐ ๋ฐ์ดํฐ ์์ฒญํ๋ ํจ์ ์คํ
const useFetch = (cbFunc, url, errorHandler) => {
const fetchInitialData = async (cbFunc, url, errorHandler) => {
try {
// ๋ฐ์ดํฐ ์์ฒญ
} catch (errorMsg) {
// ์๋ฌ ์ฒ๋ฆฌ
}
};
useEffect(() => {
fetchInitialData(cbFunc, url, errorHandler);
}, []);
return loading;
};
-
createContext: ๊ณ์ธต์ด ๋ณต์กํ๊ฑฐ๋ ์ฌ๋ฌ ๊ฐ์ ์ปดํฌ๋ํธ๋ค์๊ฒ ๋์ผํ ๋ฐ์ดํฐ๋ฅผ ์ฝ๊ฒ ์ ๋ฌํด์ฃผ๊ณ ์ถ์ ๋
- TodoStore์ด ๊ด๋ฆฌํ๋ value๋ค์ children ์ปดํฌ๋ํธ๋ค์ด ์ ๊ทผํ ์ ์๋๋ก ์ค์
export const TodoContext = React.createContext({});
export const ToDoStore = ({ children }) => {
const [datas, dispatch] = useReducer(TodoReducer, []);
const [error, setError] = useState(false);
const loading = useFetch(setInitTodoData, URL, errorHandler);
const { todoCnt, doneCnt } = filterdData(datas);
return (
<>
<TodoContext.Provider
value={{ datas, error, loading, dispatch, todoCnt, doneCnt }}
>
{children}
</TodoContext.Provider>
</>
);
};
-
useReducer: ์ปดํฌ๋ํธ์ ๋ด๋ถ ๋ก์ง์ ๋ถ๋ฆฌํ๊ณ ์ถ์ ๋
- ToDoStore์์ ๊ด๋ฆฌํ๋ datas(ํ ์ผ ๋ชฉ๋ก)์ ์์ , ์ถ๊ฐ, ์ญ์ ํ๋ ๋ก์ง์ TodoReducer๋ก ๋ถ๋ฆฌํ์ฌ ๊ด๋ฆฌ
const TodoReducer = (todoData, { type, payload }) => {
switch (type) {
case "INIT_TODO": {}
case "ADD_TODO": {}
case "CHANGE_TODO": {}
case "DELETE_TODO": {}
}
};