프론트엔드 기초: React + TypeScript

0 javascript 들어가기 전

0-1 강의목표와 커리큘럼

• 자바스크립트의 공부 목적

  • 웹 프론트엔드 영역 구현

  

  

  

  

  

  • 최종 목적은 여러 기능들을 합친 어플리케이션을 만드는 것
    • 여기서 서비스를 기획하고 개발하고 유지보수할 수 있어야 함

  

0-2 실습환경 세팅하기

• 실습환경 세팅

  • IDE : 문서를 실행하고 편집할 수 있는 프로그램으로 VSC, WS가 있음
  • 터미널 : 컴퓨터에게 코드실행을 명령하는 애뮬레이터, iterm을 주로 사용함
  • 브라우저 : 화면에서 구현하는 것을 확인하는 웹 브라우저

• 브라우저와 개발자 도구

  • 브라우저마다 JS의 형태가 다를 수 있음
  • 로드할 수 있는 형태는 다양하나 주로 HTML을 주로 사용함
    

• 브라우저 기초

  • 크롬브라우저에서 속성을 보면 파일이 로드되는 것을 볼 수 있음
  • js 파일을 만들고 html과 연결되는 것을 확인해볼 수 있음

  

  

• 개발자 도구

  • Elements : 로드된 파일의 소스를 볼 수 있음
  • console : js를 실행시킬 수 있음
  • sources : 브라우저에 로드된 모든 소스를 확인할 수 있음
  • network : 네트워크 통신 로그를 확인
  • perfomance : 웹의 성능을 확인
  • application : 브라우저의 저장기능을 확인(storage)

• 브라우저와 디버깅

• 개발을 하면 issuef를 만나게 되고 이를 분석하고 수정하는 것을 디버깅이라고 함

  • 주로 의심가는 부분에 로깅을 해서 찾음
  • 이때 console에서 log, dir 메서드를 이용함
  • 런타임 때 브레이킹 포인트를 지정하여 확인하기도 함

1 Javascript 흝어보기

1-1 JavaScript언어의 특징 - 인터프리터 언어

• 인터프리터 언어란?

  • 컴퓨터는 우리가 작성한 개발 언어를 컴퓨터는 직접 해석할 수 없음
  • 이 때 기계어로 바꾸는 방식이 다른데 컴파일과 인터프리터가 있음

  

  

  

  • 자바스크립트는 인터프리터 언어이기 때문에 컴파일과 러닝을 동시에 실행하고 사람이 컴파일을 해줘야 하는 수고로움이 없어서 간편함

1-2 JavaScript언어의 특징 - 그 외 특징

• 변수의 타입 : 동적 타입의 언어
  • 변수에 들어가는 값에 따라 런타임에 타입이 추론됨
    
• 함수의 특징 : 일급객체
  • 함수는 객체와 동일하게 사용할 수 있음, 값과 동일하게 취급할 수 있음
    
• 상속의 형태 : 프로토타입 기반의 상속
  
  
• 페러다임 지원 : 함수형, 명령형, 객체지향형 프로그래밍 ...등
  

1-3 JavaScript 표준화 - JavaScript의 탄생배경과 ECMAScript

• 기술 발전에 따라 여러 버전이 생김
  

• JS도 발전에 따라 버전별 특징이 다름
  

• 탄생배경

1-4 JavaScript 표준화 - ECMAScript 2015+로 개발하기

• ECMA Script 2015는 ES6라고 하기도 함

• 특정 브라우저에서 기능이 지원되지 않는 경우 Caniuse를 사용하여 지원여부 확인 가능

2 데이터와 형태

2-1 데이터를 담는다 : 변수

2-1-1 변수란?

• 데이터를 담아두는 메모리의 주소를 네이밍한 것

2-1-2 변수 생성 방법과 호이스팅

• 로그와 변수의 위치만 다른 것인데 왜 결과가 다를까?

• 변수는 3단계에 걸쳐 생성이 된다.

  • 선언, 초기화, 할당 단계이다.
  • 이는 코드를 평가하는 단계와 실행단계에서 이루어진다.

  

  • 또, 변수의 키워드(var, const, let)별로 생성단계가 다름

  

  

  

  

  

  

  

  

2-1-3 변수 실습

2-2 데이터 형태 : 자료형

2-2-1 자료형이란?

• 데이터 별 타입을 자료형이라 함

• 원시타입은 값을 변경할 수 없으며, 값의 형태로 전달되어 참조형태가 아님

• 객체타입
  

2-2-2 원시타입 Number Type, BigInt Type (infinity, NaN)

2-2-3 원시타입 String Type, Boolean Type

2-2-4 원시타입 undefined와 null Type, Symbol Type

2-2-5 Reference type

2-2-6 동적 타입 언어

3 데이터 처리 기본

3-1 데이터 처리

3-1-1 연산자 - 단항 연산자, 산술연산자

3-1-2 연산자 - 관계 연산자, 동등 연산자

3-1-3 연산자 - 이진논리 연산자, 기타 연산자들

3-2 데이터 처리 : 함수

3-2-1 재사용 처리기, 함수

3-2-2 JavaScript 함수의 특징

3-2-3 함수의 사용 패턴

3-2-4 함수 실습

• arguments 객체는 함수 내부에서 전달된 모든 인수를 배열 형태로 다룰 수 있도록 도와주는 자바스크립트의 기능

3-2-5 함수 생성 방법

• 함수 선언문
  

• 함수 표현식
  

• 생성자 함수

  • 이 코드는 new Function()을 사용하여 동적으로 함수를 생성하는 방법을 보여줍니다.
  • 생성된 함수는 문자열을 인수로 받아 그 내용을 실행하게 됩니다.
  • 하지만 보안상의 이유로 일반적으로는 잘 사용되지 않으며, 동적 코드 실행이 필요한 상황에서만 사용합니다.

  

• 화살표 함수
  

3-2-6 함수의 여러가지 형태

• 즉시 실행 함수(초기화 처리에 주로 사용)
  

• 재귀함수

  • 코드가 종료되지 않고 무한으로 반복할 수 있으므로 if문으로 종료 조건을 주어야 끝남

  

• 중첩함수 : 함수 안에 함수를 중첩
  

• 콜백함수 : 매개변수에 함수를 넣음, 특정 이벤트가 발생했을 때 호출이 되는 함수로 쓰임