π Code Review Check Point!
β
HTML 무μνμ§ λ§μ!
- μ맨ν±ν μ½λλ₯Ό μ¬μ©ν΄μΌ νλ€
- νμΌμμ νλμ μ»΄ν¬λνΈλ§ λ§λ€κΈ°
β
CSSλ 곡λΆκ° νμνλ€
- flex : μ λ ¬μ΄ μλ μΈλ‘λ°©ν₯μΌ λ, μλ―Έμμ΄ flexλ₯Ό λ¨λ°νμ§ λ§μ.
- μ¬λ°± μ€μ¬μ© : κ°μ λ‘ μμΉ/ν¬κΈ°λ₯Ό μ§μ ν΄μ νλ©΄ μ μ€μμ λμ§λ§μ.
- height μ무λ°λ μ£Όμ§ λ§μ
β
styled Componentλ₯Ό μ¬μ©νλ©΄μ classNameμ μ§μ νλ κ²½μ°
- νΉμ, styled-componentμ css/sassλ₯Ό νΌμ©νμ¬ μ¬μ©νλ©΄ μλμΉ μμ μ€μΌ(μ€λ³΅) λ°μμΌλ‘ μ΄λ €μμ§λ€.
β
μ μ§λ³΄μνκΈ° μ¬μ΄ μ½λ. μ€λ‘μ§ κ·Έκ²λ§ μκ°νμ
μμ
λ‘ κ΄λ¦¬ν΄μΌν λ³μλ₯Ό νμ μΌλν΄λμ!
export const BASE_URL = `https://jsonplaceholder.typicode.com`;
export const ERROR_MESSAGE = 'Failed to fetch data';
export const LIMIT = 10;
export const DEFAULT_PAGE = 1;
β
κ²μΌλ₯Έ κ°λ°μμκ² μ’μ μ½λκ° λμ¨λ€
- importλ μ λκ²½λ‘λ‘ !
- import μμλ 보기 μ½κ² λμ΄ν΄μΌνλ€.
π κΌ μκ³ κ° Keywords
utils ν¨μ
- utils: μμ‘΄μ± μμ΄ κ³΅ν΅μ μΌλ‘ μμ£Ό μ¬μ©λλ λ‘μ§μ λͺ¨μλμ ν΄λ
- μ£Όλμ΄μ λ―Έλ€λ 벨μ μ°¨μ΄
Client 리μμ€λ‘ λ°μ΄ν° μ¬μ© (mock data)
UI ꡬμ±μ νμνμ§λ§ λ°±μλ APIκ° μ€λΉλμ§ μμμ λ,
νλ‘ νΈμλ κ°λ°μκ° νμμ μν΄ μνλ‘ λ°μ΄ν°λ‘ λ§λ€μ΄ UIλ₯Ό 미리 κ°λ°ν μ μμ΅λλ€.
β
JSON & ν΅μ
JSON
- JSON(JavaScript Object Notation)μ λ°μ΄ν°λ₯Ό μ£Όκ³ λ°μ μ μλ λ°μ΄ν° νμμ΄λ€.
- JSONμ΄ μλ°μ€ν¬λ¦½νΈμ λ¬Έλ²κ³Ό μ μ¬νκΈ΄ νμ§λ§ μλ°μ€ν¬λ¦½νΈλ μλκ³ , μλ°μ€ν¬λ¦½νΈμμλ§ μ¬μ©ν μ μλ κ²λ μλλ€. λ§μ νλ‘κ·Έλλ° μΈμ΄μμ JSON νμ±κ³Ό μ§λ ¬νλ₯Ό μ§μνλ€.
1. JSONμμ μ¬μ© κ°λ₯ν νμ
( 6κ°μ§ )
- string
- number
- boolean
- null
- object
- array
β μΌλ°μ μΌλ‘ κ°μ²΄μ λ°°μ΄μ΄ JSON λ°μ΄ν° ꡬ쑰μμ μ΅μμ λ 벨μ μλ€.β‘ μ¬μ©ν μ μλ νμ
2. μλ°μ€ν¬λ¦½νΈμ λ€λ₯Έ μ
- Stringμ κ°μ λ,
"μλ°μ΄ν"
λ§ μ ν¨ν¨.
- κ°μ²΄μ Property Nameλ
"μλ°μ΄ν"
λ‘ κ°μΈμΌν¨.
{
"name": "wecode"
}
3. νμ±κ³Ό μ§λ ¬ν(Parse & Stringify)
- JSON λ°μ΄ν°λ₯Ό νμ±νλ©΄ μλ°μ€ν¬λ¦½νΈ κ°μ²΄κ° λμ΄ μλ°μ€ν¬λ¦½νΈμμ λ°μ΄ν°λ₯Ό μ¬μ©ν μ μλ κ²μ΄λ€.
- μλ°μ€ν¬λ¦½νΈμμμ JSON κ°μ²΄λ λ¬Έμμ΄μ JSON νμ±νκ³ μ§λ ¬ν νλ λ©μλλ₯Ό κ°κ³ μλ€. λκ° λ§κ³ λ νΉλ³νκ±° μλ€! λ!
stringify()
: μλ°μ€ν¬λ¦½νΈ κ°μ²΄λ₯Ό JSON λ¬Έμμ΄λ‘ μ§λ ¬ν νλ€.
parse()
: JSONμ νμ±νμ¬ μλ°μ€ν¬λ¦½νΈ κ°μΌλ‘ λ°κΎΌλ€.
4. json νμΌλ‘ λ§λ€μ΄ ν΅μ νλ©΄ λλ€
- [λ°©λ²1]
public
μ json νμΌμ μμ±νκ³ fetch
νκΈ°
- [λ°©λ²2]
.json νμΌ
μ import
νκΈ°
β
μμ λ°μ΄ν° μ¬μ©
- data νν
- μ½κ³ κ°νΈ
- μ§κ΄μ
- jsonμμ μ¬μ©ν μ μλ λ¬Έλ² μ¬μ© κ°λ₯
const COMMENT_LIST = [
{
id: 1,
userName: 'wecode',
content: 'Welcome to world best coding bootcamp!',
isLiked: true
},
{
id: 2,
userName: 'joonsikyang',
content: 'Hi there.',
isLiked: false
}
];
export default COMMENT_LIST;