본 포스트에서는 리액트와 타입스크립트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다.
 
 

React + TypeScript Naver API로 목록 만들기

우리가 사용하는 JavaScript라는 언어는 동적 타입의 인터프리터 언어입니다. 따라서 별도로 컴파일이라는 과정을 거치지 않으며 작성한 코드를 브라우저가 실행하는 런타임에 오류가 발생합니다. 작성한 코드가 그대로 브라우저에서 해석되어서 실행된다는 것은 개발의 편리함이라는 관점에서 보면 아주 좋지만, 프로그램 작성 단계에서는 타입 등에 대한 오류를 걸러내지 못한다는 단점도 있습니다.

 

2012년에 마이크로소프트는 JavaScript에 정적 타입을 추가한 형태인 TypeScript를 발표했습니다. TypeScript는 정적 타입의 컴파일 언어로 코드 작성 시 목적에 맞는 타입을 선언하고 이에 맞지 않을 경우 컴파일 단계에서 오류를 발생시킵니다. TypeScript는 역사가 그리 길지 않은 언어이지만 강력한 생태계를 가지고 성장하고 있습니다.

 

저번 포스팅에서는 Naver 검색 API를 사용하여 뉴스와 도서를 검색하는 애플리케이션을 JavaScript 기반으로 작성해 보았습니다. 이번 포스팅에서는 동일한 애플리케이션을 TypeScript 기반으로 작성해 보겠습니다.

 

이번 포스팅부터 보시는 분들을 위해 개발할 애플리케이션의 Concept를 간단하게 설명합니다.

아래 그림과 같이 뉴스와 도서를 검색할 수 있는 애플리케이션을 작성합니다. 탭 버튼으로 조회할 카테고리를 결정할 수 있고 검색어를 입력하면 해당 키워드에 맞는 뉴스나 도서 목록을 검색할 수 있습니다.

 

[뉴스] 검색

[도서] 검색

다음 포스트에서는 React + TypeScript로 개발하기 위한 프로젝트를 생성해 보겠습니다.

300x250

+ Recent posts