javascript (4) 썸네일형 리스트형 물러가라! Next.js (기초) 오늘은 Next.js의 기본적인( = 멋진) 기능 네 가지 기능해 대해서 소개하고자 합니다. 링크 next/link 는 Next.js에서 다른 페이지로 이동하기 위한 내장 컴포넌트입니다. import Link from 'next/link' go to main 위와 같이 코드를 쓰면 HTML에서는 아래와 같이 렌더링이 됩니다. go to main 쿼리 파라미터로 지정하는 경우, href 문자열로 지정하는 방법 외에 객체를 사용해서 지정할 수도 있습니다. go to main go to main 또한, router 객체의 메서드를 활용해서 페이지를 이동할 수도 있습니다. 아래의 코드를 확인해봅시다. import { useRouter } from 'next/router' const router = useRout.. 자 이제 시작이야, Next 세계로 1. Next.js의 렌더링 방법 자, 이제 Next.js를 시작해볼까요? 먼저 신규 타입스크립트용 Next.js 프로젝트를 만들어 봅시다. // 터미널을 켜서 해당 명령어를 입력 $ npx create-next-app@latest --ts 프로젝트명 // @latest > 최신 버전을 의미함 // --ts > 타입스크립트를 의미함 저는 해당 설정으로 신규 프로젝트를 생성하였습니다. 그럼 아래 사진과 같은 파일구조로 프로젝트가 생성될 것입니다. 그럼 이제 생성된 프로젝트를 실행시켜 볼까요? $ cd next-sample $ npm run dev 로그의 내용을 보면 http://localhost:3000 에서 서버가 정상적으로 실행 된 것을 확인할 수 있습니다. 브라우저에 URL을 입력해보면 다음과 같은 .. Hello Typescript - part.2 이전 포스팅에서는 타입스크립트의 기본적인 사양에 대해 훑어보았다면, 이번 포스팅에서는 실제 개발에 도움이 되는 몇 가지 주제를 같이 살펴보도록 합시다. 1. 진짜 타입스크립트... 1. Enum 타입 enum을 사용하면 이름이 있는 상수들의 집합을 정의할 수 있습니다. 숫자와 문자, 두 가지 열거형을 지원합니다. 우선 숫자 열거형부터 살펴봅시다. // 숫자 열거형 enum Direction { Up = 1, Down, Left, Right, } let direction: Direction = Direction.Up directon = 'Up' // string을 넣으려 하면 에러 위의 코드에서 Up이 1로 초기화된 숫자 열거형으로 선언되었습니다. 그럼 뒤따르던 나머지는 자동으로 증가된 값을 갖게 됩니다... Hello Typescript - part.1 0. 타입스크립트 왜 씀? 말만 탈만 타입스크립트를 공부하기 전에 우리는 이 귀찮고 번거로운 친구를 왜 배워야 하는지 알아둘 필요가 있습니다. 그래야 타입스크립트를 포기하지 않고 사용할 수 있기 때문이죠. 타입스크립트는 마이크로소프트에서 개발하고 있는 오픈소스기반의 언어입니다. 정적 타입, 상위 호환 두가지 키워드로 정의할 수 있을 것 같습니다. 웹 애플리케이션의 발전으로 자바스크립트는 폭발적인 인기를 끌었으나, JS는 아직 불안정하거나 미성숙한 부분이 많습니다. 때문에 표준화 단체인 ECMA에서 명세를 계속 개선하고 있기도 하고요. 그럼, "자바스크립트를 보다 안정적이고 보다 성숙하게 업데이트하면 되는 거 아니야?"라고 생각할 수 있을 것 같은데, 이 친구는 하위 호환을 중시하는 언어입니다. 그래서 사.. 이전 1 다음
