μ§μ π
βΌ Lighthouse Performance λΆμ
[web] Lighthouse μΉνμ΄μ§ μ±λ₯λΆμ (Performance)
νκ²μ§κ² μ½λλ₯Ό μμ±νκ³ μΌμ μ μ«κ²¨ λμμΈμ λ°λΌνκΈ°μ κΈκΈν΄ μ±λ₯λ°μ 무μνλ μ μ 1λ .. μ΅κ·Ό κ°λ°μ λ§μ΄ μ΅μν΄μ§λ©΄μ μ±λ₯ λ° μ΅μ νμ ν₯λ―Έκ° μκ²Όμ΅λλ€. κ·Έμ€ μ μΌ μ½κ² μ¬μ©ν
phrygia.github.io
ποΈ λ§λ¬΄λ¦¬ : 2μ£Όκ°μ μ€κΈ νλ‘μ νΈ νκ³
Taskify νλ‘μ νΈλ₯Ό μμν μ§ μΌλ§ μ λ κ² κ°μλ°, λ²μ¨ 2μ£Όκ°μ μ¬μ μ΄ λ§λ¬΄λ¦¬λμμ΅λλ€. π
νλ‘μ νΈ λ°νλ 무μ¬ν λλκ³ , μ§κΈμ νλ‘μ νΈκ° μλ£λ ν μ΅μ’ νκ³ ν¬μ€ν μ νλ €κ³ ν©λλ€. π
μ΄λ² νλ‘μ νΈλ₯Ό ν΅ν΄ λ§μ κ²μ λ°°μ°κ³ , νμλ€κ³Ό ν¨κ» λ¬Έμ λ₯Ό ν΄κ²°ν΄κ°λ©° μ±μ₯ν μ μμλ μκ°μ΄μμ΄μ. κ·ΈλΌ Taskify νλ‘μ νΈλ₯Ό λλμ보며, μ΄λ² νκ³ λ₯Ό μμν΄ λ³΄κ² μ΅λλ€!
π λ°°ν¬ λ§ν¬ : https://taskify-9-1.vercel.app/
μλ‘μ΄ μΌμ κ΄λ¦¬ π― Taskify
Taskifyλ₯Ό ν΅ν΄ μΌμ μ κ΄λ¦¬ν΄λ³΄μΈμ
taskify-9-1.vercel.app
notion | github issue |
![]() |
![]() |
μ΄λ κ² νμλ€κ³Ό ν¨κ» μ΄μ¬ν λ¬λ €μ¨ 2μ£Όμλ€μ :)

π― νλ‘μ νΈ λͺ©ν : μΌμ κ΄λ¦¬ μμ€ν κ°λ°
Taskifyλ νμλ€κ³Ό ν¨κ» λ§λ μΌμ κ΄λ¦¬ μμ€ν μ λλ€. λͺ©νλ ν¨μ¨μ μ΄κ³ μ§κ΄μ μΈ μΌμ κ΄λ¦¬λ₯Ό μ 곡νλ λꡬλ₯Ό λ§λλ κ²μ΄μμ΄μ.
μ¬μ©μλ ν μΌ λͺ©λ‘, λ§κ°μΌ μ€μ , μ°μ μμ μ§μ , μΌμ 곡μ λ±μ κΈ°λ₯μ ν΅ν΄ λ ν¨μ¨μ μΈ μΌμ μ κ΄λ¦¬ν μ μμ΅λλ€. ποΈ
π μ£Όμ κΈ°λ₯
1. λμ보λ κ΄λ¦¬ μμ€ν
- λμ보λ μμ± λ° μμ
λμ보λλ₯Ό μμ±νκ³ , μ¬μ©μκ° μΌμ μ κ΄λ¦¬ν μ μλ μ»¬λΌ κΈ°λ°μ μΈν°νμ΄μ€λ₯Ό μ 곡ν©λλ€.
const handleUpdate = async () => {
if (dashboardId) {
try {
const updatedDashboard = await updateDashboard(
dashboardId,
title,
color
); // API νΈμΆλ‘ λμ보λ μ
λ°μ΄νΈ
setColor(updatedDashboard.color); // μ
λ°μ΄νΈλ μμ μν μ€μ
setDashboardDetail(updatedDashboard); // μ
λ°μ΄νΈ λ λμ보λ μμΈ μ 보 μ€μ
await useDashBoardStore.getState().setDashboards(); // λμ보λ λͺ©λ‘ κ°±μ
} catch (error) {
handleError(error); // μλ¬ λͺ¨λ¬ νμ
}
}
};
- μ»¬λΌ κΈ°λ°μ μ§κ΄μ μΈ μΌμ κ΄λ¦¬
νμ μ΄λμ κΆν κ΄λ¦¬ κΈ°λ₯μ ν΅ν΄ νμ μ μννκ² μ§νν μ μμ΅λλ€.
μ€μκ° λκΈ μμ€ν μ ν΅ν΄ νμλ€ κ°μ μ견μ κ΅ννκ³ , λκΈμ μμ νκ±°λ μμ ν μ μμ΅λλ€.
2. μ€μκ° νμ κΈ°λ₯
- νμ μ΄λ λ° κΆν κ΄λ¦¬

- μ€μκ° λκΈ μμ€ν μΌλ‘ μ견 κ΅ν

3. μ¬μ©μ μΈμ¦ λ° κΆν κ΄λ¦¬
- μμ ν λ‘κ·ΈμΈ/νμκ°μ μμ€ν
- νμ΄μ§λ³ μ κ·Ό κΆν μ μ΄
// λ‘κ·ΈμΈν μ¬μ©μλ§ μ κ·Ό κ°λ₯νλλ‘ μ€μ
export const getServerSideProps: GetServerSideProps = async (context) => {
return withAuth(context);
};
4. λμ보λ 컀μ€ν°λ§μ΄μ§
μ¬μ©μκ° λμ보λ μμμ μμ λ‘κ² μ€μ ν μ μλ κΈ°λ₯μ μ 곡ν©λλ€. μ΄λ₯Ό ν΅ν΄ κ°μΈνλ μΌμ κ΄λ¦¬ νκ²½μ λ§λ€μ΄ λκ° μ μμ΅λλ€.
- μμ ν λ§ μ€μ
// λμ보λ μμ μ΅μ
const COLOR_CHIPS = [
{ id: 1, color: "#7AC555" },
{ id: 2, color: "#760DDE" },
{ id: 3, color: "#FFA500" },
{ id: 4, color: "#76A5EA" },
{ id: 5, color: "#E876EA" },
];
// μμ μ ν μ μμ μν μ
λ°μ΄νΈ
const handleColorChange = (selectedColor: string) => {
setColor(selectedColor);
};
5. μν κ΄λ¦¬ μμ€ν
Zustandλ₯Ό νμ©νμ¬ νλ‘μ νΈ λ΄μ μ μ μν κ΄λ¦¬λ₯Ό κ°μννκ³ ,
μ€μκ° λ°μ΄ν° λκΈ°νλ₯Ό ν΅ν΄ μΌμ κ³Ό ν μΌμ λ³κ²½μ¬νμ μ¦μ λ°μν μ μλλ‘ νμ΅λλ€.
- Zustandλ₯Ό νμ©ν ν¨μ¨μ μΈ μν κ΄λ¦¬
- μ€μκ° λ°μ΄ν° λκΈ°ν
6. λ°μν λμμΈ
- λͺ¨λ°μΌλΆν° λ°μ€ν¬ν±κΉμ§ μ΅μ νλ UI
- tailwind css μ¬μ©
7. μλ¬ μ²λ¦¬ λ° λ‘λ© μν κ΄λ¦¬
μ¬μ©μ μΉνμ μΈ μλ¬ λ©μμ§μ λ‘λ© μνλ₯Ό κ΄λ¦¬νκΈ° μν΄ λ‘λ© μ€νΌλμ κ°μ μκ°μ μμλ₯Ό μΆκ°νμ΅λλ€.
- μ¬μ©μ μΉνμ μΈ μλ¬ λ©μμ§
- λ‘λ© μν νμ
π¨π» κ°λ° κ³Όμ κ³Ό μ΄λ €μ
νλ‘μ νΈλ₯Ό μ§ννλ©΄μ λ€μν κΈ°μ μ λμ κ³Ό νμ λ¬Έμ λ₯Ό λ§μ£Όνμ΅λλ€. κ·Έ μ€μμλ κ°μ₯ μ΄λ €μ λ μ μ μΈμ¦ μμ€ν κ³Ό μν κ΄λ¦¬μμ΅λλ€.
β μν κ΄λ¦¬
Zustandλ₯Ό μ¬μ©νμ¬ μΈμ¦ μνμ λμ보λ μ 보λ₯Ό μ μμ μΌλ‘ κ΄λ¦¬νλ κ²μ΄ μ²μμ μ‘°κΈ λ―μ€μμ§λ§, μ¬μ©λ²μ μ΅νκ³ λλ ν¨μ¬ κΉλνκ³ μ§κ΄μ μΌλ‘ μνλ₯Ό κ΄λ¦¬ν μ μμμ΅λλ€.
β νμ
νμλ€κ³Ό νμ νλ©° Gitκ³Ό GitHub Issuesλ₯Ό μ κ·Ήμ μΌλ‘ νμ©νμ¬ μΌμ κ³Ό ν μΌμ κ΄λ¦¬νκ³ , μλ‘μ μμ μ μ½κ² νμΈνκ³ λ°μν μ μμμ΅λλ€. νμ λꡬμ μ€μμ±μ λ€μ ν λ² κΉ¨λ¬μμ΅λλ€.
β μλ¬ μ²λ¦¬
μλ¬ μ²λ¦¬ λ‘μ§μ΄ μ¬λ¬ κ³³μ λΆμ°λμ΄ μμ΄ μΌκ΄μ± μκ² μλ¬ λ©μμ§λ₯Ό μ λ¬νλ κ²μ΄ μ΄λ €μ μ΅λλ€.
μ΄λ₯Ό ν΄κ²°νκΈ° μν΄ useErrorModal 컀μ€ν ν μ λμ νμ¬ μ€μμμ μλ¬λ₯Ό μ²λ¦¬νλλ‘ κ°μ νμ΅λλ€.
π§ λ°°μ΄ μ
- ν¨μ¨μ μΈ μν κ΄λ¦¬: Zustandλ₯Ό νμ©νμ¬ μ μ μν κ΄λ¦¬λ₯Ό ν¨μ¨μ μΌλ‘ μ²λ¦¬νλ λ°©λ²μ λ°°μ κ³ , 볡μ‘ν λ‘μ§μ κ°κ²°νκ² μ μ§ν μ μμμ΅λλ€.
- νμ λꡬμ νμ©: GitHub Issuesμ κ°μ λꡬλ₯Ό ν΅ν΄ νμλ€κ³Όμ νμ μ μννκ² μ§νν μ μμκ³ , μ½λ 리뷰μ νΌλλ°±μ λΉ λ₯΄κ² μ£Όκ³ λ°μΌλ©° νλ‘μ νΈλ₯Ό μ§νν μ μμμ΅λλ€.
- ν μ€νΈμ λλ²κΉ : μ€μ μ΄μ νκ²½μμ λ°μν μ μλ λ€μν μλ¬ μν©μ μ²λ¦¬νκΈ° μν΄ μλ¬ μ²λ¦¬ λ‘μ§μ ν΅ν©νκ³ , μ¬μ©μ κ²½νμ κ°μ ν μ μμμ΅λλ€.
πΏ μμ¬μ΄ μ
β μκ° λΆμ‘±
κΈ°λ₯μ ꡬννλ λ° νμν μκ°μ΄ μ νμ μ΄μ΄μ, λͺ¨λ κΈ°λ₯μ μλ²½νκ² κ΅¬ννλ λ° μ΄λ €μμ΄ μμμ΅λλ€. νΉν λμμΈκ³Ό μΈλΆ κΈ°λ₯ ꡬνμμ μ‘°κΈ λ μ¬μ λ₯Ό λκ³ μμ νμΌλ©΄ μ’μμ κ² κ°μ΅λλ€.
β ν μ€νΈ λΆμ‘±
μλνλ ν μ€νΈλ₯Ό ν΅ν κ²μ¦μ΄ λΆμ‘±νλ μ μ΄ μμ¬μ μ΅λλ€.
ν₯ν νλ‘μ νΈμμλ Jestμ κ°μ λ¨μ / ν΅ν© ν μ€νΈλ₯Ό μ§ννκ³ μΆμ΅λλ€.
π κ²°λ‘
Taskify νλ‘μ νΈλ λ¨μν κΈ°λ₯μ ꡬννλ λ° κ·ΈμΉμ§ μκ³ , νμ , μν κ΄λ¦¬, UI/UX λμμΈ λ± λ€μν μΈ‘λ©΄μμ λ§μ κ²μ λ°°μ΄ μμ€ν κ²½νμ΄μμ΅λλ€. νμλ€κ³Ό ν¨κ» λ¬Έμ λ₯Ό ν΄κ²°νλ©°, κ°λ°μλ‘μ ν λ¨κ³ λ μ±μ₯ν μ μμλ μκ°μ΄μμ΄μ. μμΌλ‘λ μ΄ κ²½νμ λ°νμΌλ‘ λ λμ κ°λ°μκ° λκΈ° μν΄ κ³μ λ Έλ ₯ν κ²μ λλ€! πͺ
π ν μ€ν
Taskify νλ‘μ νΈλ₯Ό ν΅ν΄ κΈ°μ μ μ±μ₯κ³Ό νμ κ²½νμ μμ μ μμκ³ , μμΌλ‘ λ λ§μ λμ κ³Ό νμ΅μ ν΅ν΄ κ³μν΄μ λ°μ ν΄ λκ° κ²μ λλ€. π