24. 08. 16 TIL

클로저

클로저는 그 함수가 끝난 후에도 그 함수 안에서 사용했던 변수들을 기억하고 계속 사용할 수 있게 해주는 기능입니다. 원래는 함수가 끝나면 변수들도 같이 사라지지만, 클로저를 사용하면 함수 밖에서도 그 변수를 계속 사용할 수 있게 됩니다. 이를 통해 데이터 은닉화가 가능하지만, 잘못 사용하면 메모리 누수가 발생할 수 있습니다.

 

프로미스

자바스크립트에서 비동기 작업을 처리할 때 사용하는 객체입니다. 작업이 성공하면  then으로 결과를 받고 실패하면 catch로 에러를 처리합니다. 프로미스는 비동기 작업이 완료될 때까지 기다렸다가 결과를 한 번만 반환하는 약속이라 할 수 있습니다.

 

next js를 사용하면 좋은 이유

next js는 서버 사이드 렌더링과 정적 사이트 생성을 지원해 빠르고 seo 친화적인 웹사이트를 만들 수 있습니다. 또한 페이지와 api 라우팅이 간단하게 설정되어 개발이 편합니다. 자동 코드 분할과 최적화 기능으로 성능이 뛰어나며, 리액트 기반이라 배우기도 쉽습니다.

 

타입스크립트 쓰는 이유

타입스크립트는 변수나 함수에 타입을 정해줘서 실수를 줄여줍니다. 코드 작성시 자동으로 오류를 찾아주고, 더 쉽게 코드를 관리할 수 있도록 도와줍니다. 기존 자바스크립트에 추가해서 쓸 수 있어 배우기도 쉽습니다.

 

자바스크립트 한계 + 타입스크립트 쓰는 이유

자바스크립트는 타입 검사가 런타임에 이루어집니다. 그래서 개발 중에 타입 오류를 잡기 어렵지만, 타입스크립트는 정적 타입을 제공해서 컴파일 타임에 타입 오류를 잡을 수 있게 해줍니다. 이를 통해 자바스크립트의 한계를 보완할 수 있습니다.

 

비동기 함수

비동기 함수는 작업이 완료될 때까지 기다리지 않고 다른 작업도 처리할수 있게 해주는 함수입니다. 주로 async await를 사용해 시간이 걸리는 작업에 사용됩니다. 코드가 순차적으로 실행되는 것 같아 보여도 백그라운드에서 작업이 완료될때까지 기다렸다가 결과를 처리합니다.

 

프롭스 드릴링

프롭스 드릴링은 리액트에서 상위 컴포넌트의 데이터를 여러 단계의 하위 컴포넌트에 전달할 때 발생하는 문제입니다. 그래서 코드가 복잡해지고, 관리가 어려워지는 단점이 있으며, 이를 해결하기 위해서는 컨텍스트 api나 상태 관리 라이브러리를 사용해서 중앙에서 관리하는 것이 좋습니다.

 

하이드레이션

하이드레이션은 서버에서 렌더링된 html을 클라이언트에서 다시 렌더링해서 인터렉티브하게 만드는 과정입니다. 서버사이드 렌더링으로 초기 로딩 속도를 빠르게 하고 seo를 개선한 뒤에 클라이언트에서 동적 기능을 추가합니다. 

 

es6

let, const 키워드가 추가되어 var를 대체하고, 화살표 함수로 간결하게 함수를 쓸 수 있게 되었습니다. 또한 템플릿 리터럴과 객체, 배열 분해 할당으로 코드 작성이 더 편리해졌습니다.

 

리액트 쿼리

리액트 쿼리는 서버에서 가져오는 데이터를 쉽게 관리하고, 비동기 작업을 간편하게 처리해줍니다. 서버 상태를 자동으로 캐싱하고 동기화하여 클라이언트 상태와의 관리를 단순화 합니다. 이를 통해 데이터를 효율적으로 다룰 수 있습니다.