[TIL] api주소 관리하기 | 함수 표현식 vs 함수 선언식

config 파일 만들기(feat. export / import)

• 백엔드 API주소는 배포 전까지 매번 주소가 바뀐다
• 테스트 할 때마다 API주소를 쓴 곳을 찾아 바꾸기는 비효율적
  → config.js 를 만들어 API 주소를 변수처럼 사용해주자
  

/* config.js */
const BASE_URL = 'https://0.00/000:8000';

const API = {
  products: `${BASE_URL}/products`,
  categories: `${BASE_URL}/categories`,
};

export { API };

/* config 변수를 쓸 파일 */
import { API } from './config'

fetch(`${API.products}`)

• config.js는 src폴더 안에 만들어야 한다. public 폴더는 접근 불가.
• export 와 import 맞춰주기
  • export default config; ↔ import config (중괄호 ❌)
  • export { config } ↔ import { config } (중괄호 ⭕️)
  • export 때 default가 안 붙으면 중괄호 해주어야 함. 여러 개를 import해 올 수 있기 때문.

함수 표현식 vs 함수 선언식

함수 표현식(function Expression)

    sum(1, 2); // error!

    const sum = (a, b) => {
        return a + b;
    }

• 정의한 함수를 변수에 할당하는 것.
• arrow function (화살표 함수) 사용 ⭕️
• 호이스팅의 영향을 받지 않아 표현식보다 먼저 함수 호출이 되면 에러가 난다.

함수 선언식(function declartion)

    sum(1, 2); // 3

    function sum(a, b){
        return a + b;
    }

• 할당 없이, 함수 선언만 있는 것. 필요한 부분에서 호출해 주어야 함.
• arrow function (화살표 함수) 사용 ❌
• 호이스팅의 영향을 받아 선언식이 끌어올려진다.

input type="reset"

: 초기화가 간단해진다!
초기화하는 로직을 머리싸매고 고민했는데….쩝…. reset이라는 속성이 있었다
input은 참 다양한 기능을 갖고 있는 것 같다. 한 번 정리를 해야겠음!!!

단, form 태그로 상위를 감싸지 않으면 reset이 제출되지 않음. 꼭꼭 form으로 감싸주기