[우아한 테크러닝] 1회차 정리

🌟우아한 테크러닝 1회차

🎯Typescript란?

https://www.typescriptlang.org/play?#code/Q 타입스크립트는 javascript의 구문과 의미를 지원하면서 동시에 정적 유형을 지원하는 오픈소스 프로그래밍 언어입니다.

🎯Typescript 기본정보

• 타입 추론과 명시 컴파일러가 10이라는 숫자를 넣으면 숫자인걸 추론할 수 있습니다. 타입을 명시해주려면 lef foo : 타입명 의 형식으로 명시해줍니다.
• Type Alias type 의미부여된 이름 = 형식; 으로 타입에 닉네임을 붙여 가독성을 높입니다. 자바스크립트로 변환시 컴파일타임까지만 작동한 뒤 사라집니다.

• type alias와 interface를 이용하여 객체생성

      type 객체이름 = {
          요소 : 형식;
      }
  
      interface 객체이름 {
          요소 : 형식;
      }
  
      const 변수 : 객체 {
          요소입력,
      }

  둘의 차이는 나중에 다룰 것!

🎯React

• React 프로젝트 맨 상단에 항상 React를 import 하는 이유 리액트 컴포넌트 패키지를 항상 임포트 시켜야합니다. createlement 메소드를 사용하기 때문입니다. 우리가 흔히 사용하는 <APP/> 은 JSX라는 문법입니다. 이 엘리먼트는 실제로 React.createElement()를 간단하게 호출하기 위해 쓰입니다. crateElement 메소드가 호출되면 JSX로 들어온 데이터를 (tagname, props, child)의 형식의 javascript로 변환합니다.
• Reactstrictmode 리액트 컴포넌트들중에서 리액트가 판단하기에 문제점을 가지고 있는 컴포넌트에 대하여 경고를 보내줍니다. 개발단에서만 작동합니다.

• React 기본 컴포넌트 정의방법

  import React from 'react';
  import ReactDOM from 'react-dom';
  
  
  //리액트 컴포넌트
  function App(props){
  return(
  <h1>{props.title}</h1>
  )
  
  }
  
  //reactdom.render 은 최상위에서만 한번 호출(트리형태)
  ReactDOM.render(
  <React.StrictMode> 
      <App title="Tech hello?" color="blue"/>
  </React.StrictMode>,
  //props에 title이라는 속성 넘겨줘서 app에 넣을 수 있음.
  document.getElementById('root')
  );

+) CLI 장단점 장점 : 간단하고 앵간한건 다 제공합니다. 단점 : 제공하지 않는 세팅을 하는게 힘들며 다양한 환경에 대한 대응이 어렵습니다.