fd27_연구노트

React 프로젝트 생성

npx create-react-app@latest react-sample --template typescript

npm start : 개발서버 실행하기

npm run build: 실서비스를 위한 app을 빌드하기

간단 리엑트 사용

npm run build : 명령어를 실행하면 build 디렉토리에 js, css, index.html이 생성된다.

serve -s build: 웹 실행

pulbic/index.html이 src/index.tsx의 스크립트를 실행하는 구조이다.

public/index.html

src/index.tsx

초간단 컴포넌트

import React from 'react';

/**
 * 단순히 input 값만 출력하는 컴포넌트이다.
 * @constructor
 */
// 이름을 입력하기 위한 텍스트 박스를 반환한다.
const Name = () => {
  // input 요소의 onchange 이벤트에 대한 콜백 함수를 정의한다.
  /**
   * 개발로 배포하면 test는 두번 출력됨
   * 실서비스로 배포하면 test는 한번만 출력됨
   */
  console.log('test') // 두번 출력됨
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 입력된 텍스트를 콘솔에 표시한다.
    console.log(e.target.value)
  }

  return (
    // style 객체의 키는 캐멀 케이스가 된다.
    <div style={{padding: '16px', background: 'grey'}}>
    {/*  for 대신 htmlFor를 사용한다. */}
      <label htmlFor={'name'}>이름</label>
    {/*  class나 onchange 대신, className이나 onChange를 사용한다. */}
      <input id={'name'} className={'input-name'} type={'text'} onChange={onChange}/>
    </div>
  );
};

export default Name;

function add(x, y) {
    console.log('arguments length:', arguments.length)
    console.log('arguments:', arguments);
    return x + y;
}

console.log('add result', add(5, 6, 7))

/*
arguments length: 3
arguments: [Arguments] { '0': 5, '1': 6, '2': 7 }
add result 11
*/

자바스크립트의 함수 안에서 arguments 객체를 사용할 수 있다. arguments 객체는 함수 호출시 인수가 저장되는 객체이다.

자바스크립트 함수 정의 (function definition) 방법...

// 함수 선언문(function declaration)
function add(x, y) {
    return x + y;
}

// 함수 표현식(function expression)
const sub = function (x, y) {
    return x - y;
}

/*
함수 표현식에서 아래 부분은 함수 리터럴이다. 
함수 리터럴로 인해 생성된 표현식(값으로 평가됨)을 sub 라는 식별자로 지정하는 것이다.
function (x, y) {
    return x - y;
}

*/

// Function 생성자 (function() constructor)
const multiplication = new Function('x', 'y', 'return x*y');

// 화살표 함수(ES6)(arrow function)
const division = (x, y) => x / y;

console.log(add(10,5));
console.log(sub(10,5));
console.log(multiplication(10,5));
console.log(division(10,5));

함수 선언문은 표현식이 아닌 문.

함수 표현식은 표현식인 문이다. 

그리고 표현식인 문은 값으로 평가 될 수 있다.

함수 선언문은 함수 호이스팅이 되고, 함수 표현식은 변수 호이스팅이 된다.

함수 선언문은 코드를 작성할때 함수를 선언하지 않았는데도 함수의 호출이 가능하므로 함수 표현식을 사용하는 것이 좋다.

함수 선언문: 함수 객체가 런타임 전에 생성.

함수 표현식: 함수 객체가 런타임에 생성.

함수 생성자: 클로저를 생성하지 않음. 일반적으로 사용하지 않는 방식.

화살표 함수: this 바인딩 방식이 다름. prototype 프로퍼티가 없음. arguments 객체를 생성하지 않음. 생성자함수로 사용할 수 없음.

url의 paramater가 요청마다 변경될 수 있도록 타임스템프를 붙힌다.

$.ajax({
  url: "/data.json?" + $.now(),
  data: data,
  type: "GET",
  success: function (res) {
  }
});