Next.js ?

Next.js는 React 라이브러리의 프레임워크이다. 

이를 통한 큰 장점은 plain react앱의 한계를 극복하기 위함인데, 

리액트의 단점 중 하나인 취약한 SEO를 위한 SSR 또는 SSG를 가능하게 하기 때문이다. 

CSR을 하는 리액트의 특성상 SEO에 취약한데,

next.js가 pre-reloading을 통해 데이터가 랜더링 된 페이지를 미리 가져오게 해준다.

덕분에 사용자 경험에도 도움이 될 뿐 아니라 SEO까지 장점을 얻을 수 있다.

SSR과 CSR까지 혼합해서 사용이 가능한 장점도 있다.

물론, Next.js없이도 SSR구현이 가능하다. 이미 진행된 플젝에서 Next를 중간에 도입하는 경우 비용이 많이 드는 단점이 있어 처음부터 Next를 도입하는 것이 좋다.

Next.js의 다양한 기능

직관적인 페이지 기반 라우팅

link컴포넌트를 통해 페이지간 매끄럽고 빠른 전환이 가능

코드를 분할해서 로드 타임 감소

이미지 최적화

그 외 api routes등 react 프로젝트의 성능 향상을 위한 기능들이 존재해서 편리하다.

사람이 프로그래밍 언어로 작성을 하면 기계어(컴퓨터가 이해 할 수 있는 언어)로 컴파일 하는 과정이 필요하다.

보통의 컴파일의 과정은 컴파일을 하게 되면, 결국 바이트 코드로 변환이 된다.

컴파일 과정을 보면 JS코드를 AST(추상 문법 트리)로 먼저 변환을 하는데 

컴파일러가 이 AST를 바이트 코드로 변환을 하면 컴파일이 종료 된다.

📌보통의 컴파일러 과정

JS > AST >  바이트 코드 > 실행

타입스크립트는 먼저 코드를 AST로 변환 하고, 

바이트 코드로 바로 변환하는 것이 아닌 타입검사를 통해 코드상 오류 여부를 확인한다.

검사 실패시 컴파일이 종료되고, 만약 정상코드라면 

AST를 JavaScript로 변환 후 컴파일이 종료된다. 

이때 타입관련 문법은 사라지고 안전한 JavaScript코드로 변환을 한다.

그렇게 만들어진 JavaScript로 변환 된 뒤에 

보통의 컴파일의 과정인 AST > 바이트 코드로 변환을 하게 된다.

📌타입스크립트의 컴파일러 과정

TS > AST > 타입 검사 > JS > AST >  바이트 코드 > 실행

요즘 디스코드를 매일같이 사용하고 있는데, 

오늘은 스터디에서 화면공유를 해야 할 일이 있었다.

아직까지 사용해보지 못한 기능이었는데, 서로의 화면을 공유하려고 할 때

아래와 같은 오류가 발생 되었다. 

화면 공유 권한

주의! 앱에 화면 녹화 권한이 없어요. 권한을 부여하고 앱을 재시작 할 때까지 예기치 못한 결과가 나올 수 있어요.

라는 문구가 뜬다.

mac 사과 아이콘 > 시스템 설정으로 들어가서

"개인 정보" 조회를 해서 개인정보 보호 및 보안을 클릭한다.

그럼 이 중 화면 및 시스템 오디오 녹음이라는 부분 선택

여기서 디스코드는 꺼져있는 걸 볼 수 있는데,

활성화를 시켜준다.

Touch ID 혹은 암호를 통해 확인을 한차례 거치고

Discord를 종료할 때까지 화면 콘텐츠를 기록하지 못할 수 있습니다. 

같은 문구가 나온다.

그냥 재시작 안내이니 종료 및 다시 열기로 다시 열어줬다.

다른 화면으로 해당 블로깅 하는 걸 열어뒀는데,

라이브 아이콘이 뜨면서  잘 보여지는 걸 볼 수 있다. 

이제 화면공유 할 일이 잦을 듯 하니 미리미리 처리해두기 :)

key는 리액트에서 어떤 항목을 추가, 삭제, 변경 등을 할 때 

식별을 위해 사용하게 됩니다.

key는 변경되지 않는 유일값으로 설정하는데, 

보통 ID가 유일하기에 ID값을 사용하는 경우가 많습니다.

key값이 존재하지 않으면 배열 중간의 값이 제거가 되는 등

해당 인덱스에 대한 값이 변하게 됩니다.

이때문에 고유한 값으로 key값을 주게 되면,

배열내 값이 변경이 되어서 리렌더링을 할 때,

값을 재사용 하는 경우 불필요한 렌더링을 줄일 수 있어서 최적화에도 도움을 줍니다.