[카테고리:] 미분류

Fetch 코드 패턴

프론트엔드 단 개발에서 밥 먹듯 사용하는 데이터 요청 코드입니다.

import { useState, useEffect } from "react"

export default function People() {
    const [ people, setPeople ] = useState([])
    
    useEffect(() => {
        fetch("https://jsonplaceholder.typicode.com/users")
            .then(response => response.json())
            .then(result => setPeople(result))
    }, [])

    return <div>
        <h2>People</h2>
        <ul>{ people.map((person, index) => <li key={person.id}>{person.name}</li>) }</ul>
    </div>
}

위의 코드도 좋지만, 다음 코드가 더욱 좋습니다.

import { useState, useEffect } from "react"

export default function People() {
    const [ people, setPeople ] = useState([])
    
    useEffect(() => {
        const getPeople = async () => {
            const response = await fetch("https://jsonplaceholder.typicode.com/users")
            const result = await response.json()
            setPeople(result)
        }
        getPeople()
    }, [])

    return <div>
        <h2>People</h2>
        <ul>{ people.map((person, index) => <li key={person.id}>{person.name}</li>) }</ul>
    </div>
}

#중지

systemctl stop nginx

#시작

systemctl start nginx

왼쪽은 반사 재질이고 오른쪽은 굴절 재질인데.. 각각의 재질은 다음과 같습니다.

const cubeMaterial1 = new THREE.MeshStandardMaterial({ color: 0xffffff, envMap: textureCube, metalness: 1, roughness: 0 });
const cubeMaterial2 = new THREE.MeshPhongMaterial({ color: 0xccfffd, envMap: textureCube, refractionRatio: 0.985, /* reflectivity: 0.9 */ });

재질의 refractionRatio와 reflectivity 속성은 MeshPhongMaterial에서만 사용할 수 있다는 점에 주의할 것.

웹 개발에서 HTML을 JS나 TS의 문자열로 구성하는 경우가 흔한데요. 이 경우 HTML에 대한 문자열에 대한 각 구문에 대한 색상 적용이 안되어 코드 가독성이 떨어집니다. 이런 경우 VS.Code에서 효과적으로 활용할 수 있는 확장 기능입니다.

위의 확장 기능을 통해 적용된 예시는 다음과 같구요.