React 완벽 가이드21 React+Typescript Typescript타입스크립트타입스크립트는 자바스크립트의 superset 언어이다.자바스크립트를 기반으로 하나, 자바스크립트보다 더 확장된 프로그래밍 언어이다.타입스크립트는 리액트와는 다르게 자바스크립트 라이브러리가 아니다.이로 하여금 자바스크립트의 기존 기능을 기반으로 새로운 기능을 만들거나, 기존 기능을 확장하지 않는다.대신에 자바스크립트의 주요 문법보다 확장된 문법을 가진다. 타입스크립트는 정적 타입(statically Typed)의 특징을 갖는다.자바스크립트는 동적 타입(dynamically Typed) 언어임을 생각하면 대조적이다. 원시 타입(Primitives Type)자바스크립트의 기본형 데이터는 숫자형, 문자열, 불리언(boolean)형, null, undefined이 있다.let age:.. 2024. 8. 23. NextJS Deep Dive NextJS Deep Dive 파일 기반 라우팅과 리액트 서버 컴포넌트 app 폴더는 NextJS 프로젝트에서 가장 중요한 폴더이다. 이 app 폴더에서 전반적인 웹 사이트에 넣고 싶은 페이지를 설정할 수 있다. app폴더의 page.js 파일을 통해 만드는데, 이 page.js 파일은 layout.js 파일과 마찬가지로 보호된 파일명이다. 이 page.js 파일은 NextJS에게 페이지를 렌더링해야 한다고 말해준다. 이 컴포넌트의 특별한 점은 서버 컴포넌트라는 것이다. 서버 컴포넌트 React만으로는 만들 수 없고, NextJS에서 지원하는 형식이다. 표면적으로는 일반적인 컴포넌트이지만, NextJS가 이 컴포넌트가 서버에 렌더링되고, 컴포넌트 함수가 서버에 실행되는 것을 보장한다. Terminal이 .. 2024. 4. 1. React Query/Tanstack Query React Query/Tanstack Query Tanstack Query(React Query) React-Query로도 불리며, HTTP 요청을 전송하고, 프론트엔드의 UI를 백엔드 데이터와 동기화시키는 데에 도움을 주는 라이브러리이다. 무조건 Tanstack Query(이하 리액트 쿼리)를 사용할 필요가 없고, useEffect 혹은 axios 등으로도 작업을 할 수 있다. 하지만 Tanstack Query를 이용하면 코드가 매우 간결해지고, 내장된 고급 기능을 이용하면 작업이 좀 더 수월해진다. 빈번하게 변경되는 데이터가 아니라면 매번 서버에 요청을 날리는 것보다, 캐싱된 정보를 제공하는 것이 서버의 부담을 줄이면서도 사용자 경혐을 향상시킨다. 리액트 쿼리는 다음과 같은 이슈를 해결한다. 동일한 .. 2024. 4. 1. Deploying React Apps Deploying React Apps 배포 과정 배포할 때, 거치는 과정은 다음과 같다. 코드를 작성하고 테스트 최적화가 가능한지 파악(지연 로딩이 가능한가도 파악) 프로덕션용 앱 빌드(코드 패키지 최적화) 지연 로딩 리액트의 최적화 테크닉 중에서 React.memo()를 사용할 수도 있지만, 필요한 코드만 로딩함으로써 최적화를 이끌어낼 수도 있다. 지연 로딩(Lazy Loading)은 특정 코드를 필요할 때만 로딩하는 방법이다. 만약 프로젝트가 지연 로딩 없이 빌드되고 최종 사용자에게 전달될려면, import 문들에 포함된 코드들이 최종 사용자들에게 전달되기 전에 모든 코드가 불러와져야 한다. 기초적인 앱에서는 문제가 되지 않지만, 복잡한 앱인 경우, 수많은 라우트와 컴포넌트가 문제될 수 있다. 또한 .. 2024. 4. 1. User Authentication User Authentication 사용자 인증의 원리 사용자가 로그인 요청을 백엔드에 보낸다. 그러면 서버는 어떻게 응답을 해야 하는가? 단순히 응답에 yes라고 대답하면 안된다. 가짜 응답으로 정보를 탈취할 수 있기 때문이다. 보통 다음에 저술될 두 가지 방법을 사용한다. 서버 사이드 세션(Server-side Sessions) 프론트엔드와 백엔드가 분리되지 않은 풀스택 앱에서 자주 사용하는 대중적인 방법이다. 클라이언트가 로그인하고 인증된, 서버에 고유 식별자를 저장한다. 기본적으로 yes를 서버에 저장하고, 식별자를 이용해, 그 대답을 특정 클라이언트와 연결한다. 그리고 그 식별자를 다시 클라이언트에 보낸다. 그 이후, 클라이언트가 요청을 통해 보호되어 있는 리소스에 접근할 때, 해당 식별자를 전.. 2024. 4. 1. A Multi-Page SPA with React Router A Multi-Page SPA with React Router 라우팅이 하는 일 도메인 이름 뒤의 경로에 따라 웹페이지의 콘텐츠를 변경시키는 것 단순히 다른 경로에 대해 다른 콘텐츠와 다른 HTML를 로딩하는 것으로 라우팅를 구현할 수는 있지만, 항상 새로운 콘텐츠를 가져와야 하는 단점이 있다. 매번 새로운 HTTP 요청을 하고, 새로운 HTTP 응답을 받는 과정에서 지연이 발생하여, 결국은 사용자 경험이 저하된다. 그래서 SPA에서는 HTML 요청을 한번만 전송하고, HTML과 추가적인 JavaScript가 다운로드된다. 그 후, 클라이언트에서 실행되는 추가 JavaScript 코드가 사용자가 화면에서 경험하는 것들을 실제로 조절하게 된다. 클라이언트 측의 리액트 코드가 현재 사용중인 URL을 감시하고.. 2024. 3. 29. 이전 1 2 3 4 다음