1 브라우저에 화면이 보이는 순서

2 자바스크립트 장단점

자바스크립트 장점

• 속도가 빠르다

  자바스크립트는 '해석된' 언어이기 때문에 자바와 같은 다른 프로그래밍 언어에서 컴파일하는데 필요한 시간을 줄인다. 자바스크립트 역시 클라이언트 측 스크립트로 서버 연결에 필요한 시간을 절약해 프로그램 실행 속도를 높인다.

• 단순하다

  자바스크립트는 이해하고 배우기 쉽다. 그 구조는 개발자들뿐만 아니라 사용자들에게도 간단하다. 또한 구현이 매우 쉬워 개발자가 웹을 위한 동적 콘텐츠를 개발하는 데 많은 비용을 절약할 수 있다.

• 인기가 있다.

  모든 최신 브라우저가 자바스크립트를 지원하기 때문에 거의 모든 곳에서 볼 수 있다. 구글, 아마존, 페이팔 등 유명한 회사들은 모두 자바스크립트를 도구로 사용한다.

• 상호운용성

  자바스크립트는 다른 프로그래밍 언어와 완벽하게 호환되므로 수많은 개발자들이 많은 응용 프로그램을 개발할 때 자바스크립트를 선호한다. 우리는 그것을 어떤 웹페이지나 다른 프로그래밍 언어의 스크립트 안에 넣을 수 있다.

• 서버 로드

  자바스크립트가 클라이언트 측에서 작동하기 때문에 서버로 전송하지 않고 브라우저 자체에서 데이터 검증이 가능하다. 차이가 있을 경우 전체 웹 사이트를 다시 로드할 필요가 없다. 브라우저는 페이지의 선택된 세그먼트만 업데이트한다.

• 많은 인터페이스

  자바스크립트는 매력적인 웹 페이지를 만들기 위해 개발자들에게 다양한 인터페이스를 제공한다. 드래그 앤 드롭 구성 요소 또는 슬라이더는 웹 페이지에 풍부한 인터페이스를 제공할 수 있다. 따라서 웹 페이지의 사용자 상호 작용이 향상된다.

• 다재다능성

  자바스크립트는 이제 프론트엔드뿐만 아니라 백엔드 개발도 가능하다. 백엔드 개발에서 nodeJS는 AngularJS, ReactJS 등과 같은 프론트엔드 개발을 돕는다.

• 오버헤드 감소

  자바스크립트는 코드 길이를 줄임으로써 웹 사이트와 웹 애플리케이션의 성능을 향상시킨다.

자바스크립트 단점

• 클라이언트 측 보안

  JavaScript 코드는 사용자가 볼 수 있기 때문에 다른 사용자가 악의적인 목적으로 사용할 수 있다. 이러한 관행은 인증 없이 소스 코드를 사용하는 것을 포함할 수 있다. 또한 웹 사이트를 통해 데이터의 보안을 손상시키는 일부 코드를 사이트에 배치하는 것이 쉽다.

• 브라우저 지원

  브라우저는 브라우저마다 자바스크립트를 다르게 해석한다. 따라서 코드를 게시하기 전에 다양한 플랫폼에서 실행해야 한다. 구형 브라우저는 일부 새로운 기능을 지원하지 않는다.

• 디버깅 기능 부족

  일부 HTML 편집기가 디버깅을 지원하지만 C/C++ 편집기와 같은 다른 편집기보다 효율적이지는 않다. 또한 브라우저에 오류가 나타나지 않아 개발자가 문제를 감지하기 어렵다.

• 렌더링 중지

  단일 코드 오류로 인해 웹 사이트에서 전체 JavaScript 코드의 렌더링이 중단될 수 있다.

3 타입스크립트 장단점

타입스크립트 장점

• 엄격한 타이핑

  모든 것은 우리가 정의하는 대로 유지된다. 변수가 항상 숫자여야 하는가? 그럼 항상 숫자가 된다.

• 구조 타이핑

  사용하는 실제 구조를 완전히 정의하는 데 신경을 쓸 때 필수적이다. 자바스크립트는 많은 이상한 일들을 할 수 있게 해주므로, 특정 구조에 의존하는 것이 훨씬 안전한 해결책이다.

• 유형추론

  개발자가 컴파일러가 직접 찾을 수 있는 형식을 제공할 필요가 없도록 TypeScript 자체에서 암묵적인 타이핑이 수행됩니다.
  유형을 보기 위해 파일을 앞뒤로 점프해야 하는 것이 피곤해진다.

타입스크립트 단점

• 지나치게 복잡한 타이핑 시스템

  무엇보다도, 타이핑 시스템은 많은 면에서 훌륭한 도구이지만, 때때로 너무 복잡해서 제대로 사용할 수 없을 수도 있다. 그러나 이것은 TypeScript의 단점이라기보다는 JavaScript와 완전히 상호 운용할 수 있기 때문에 더욱 복잡해질 여지가 있다.

• 필수 편집

  타입스크립트에 반대하는 또 다른 주장은 컴파일이 필요한 반면 자바스크립트는 그렇지 않다는 것이다. 하지만 솔직히 말해서, 요즘 대부분의 자바스크립트 응용 프로그램들은 빌드 단계를 필요로 한다. Gulp, Grunt, Webpack, Rollup, Babel 또는 Closure 등 빌드 단계는 필수이며 확장에 방해가 되는 것은 없다.

• 잘못된 안정감

  타입스크립트의 가장 큰 단점은 그것이 당신에게 잘못된 안정감을 가져다 줄 수 있다는 것이다. 언어가 우리를 위해 유형을 확인하고 우리의 코드에 문제가 있을 때 경고할 수 있다는 것은 큰 이점이다. 그러나 이에 너무 많이 의존하는 것은 상당한 위험을 동반한다. 일부 개발자들은 그들이 타입스크립트로 작성하는 모든 것이 100% 방탄이라고 생각하는 경향이 있다. 아니다.

4 리액트

- lifecycle

모든 리액트 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트의 수명은 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질때 끝난다.

라이프사이클은 총 세 가지, 즉 마운트, 업데이트, 언마운트 카테고리로 나눈다.

마운트

DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다. 이때 호출하는 메서드는 다음과 같다.

• constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드이다.

• getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드이다.

• render: 사용자가 준비한 UI를 렌더링하는 메서드이다.

• componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드이다.

업데이트

• props가 바뀔 때

• state가 바뀔 때

• 부모 컴포넌트가 리렌더링될 때

• this.forceUpdate로 강제로 렌더링을 트리거할 때

이렇게 컴포넌트를 업데이트할 때는 다음 메서드를 호출한다.

언마운트

마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 언마운트라고 한다.

• componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드이다.

- useEffect

컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.

마운트

useEffect(()=>{
	console.log('Hello')
},[])

[]를 끝에 삽입하면 가장 처음 렌더링 될 때 한 번만 실행된다.

useEffect(()=>{
	console.log('Hello')
})

[]를 생략하면 리렌더링 될 때마다 실행된다.

업데이트

특정 값이 업데이트 될 때 실행하고 싶으면 []안에 값을 넣어준다.
업데이트 될 때만 실행되는 것이 아닌 마운트 될 때도 실행된다.

언마운트

특정 값이 사라질 때 업데이트 되기 전에 사용하고 싶을 때

useEffect(()=>{
	console.log('Hello')
    return () => {
    	console.log('World')
    }
}.[])