typescript (8) 썸네일형 리스트형 npm 라이브러리를 만들어보자!(2) 안녕하세요. 미룬이 메리입니다.왜 미룬이고 물으신다면, 지금 이 포스팅을 쓰기 싫어 미뤘기 때문이죠. (하하) 오늘은 두가지에 대한 포스팅을 추가적으로 써보려고 합니다.1. Typescript 지원2. Github Actions를 사용한 배포 자동화1. Typescript 지원가깝지만 먼 사이, 타입스크립트를 예제 라이브러리에 적용시켜 봅시다. 기존 예제는 이전 포스팅을 참고해주세요. 1-1. 타입스크립트 설치// ts를 js로 변경하는 컴파일러 제공npm install typescript 1-2. ts-node 설치// ts파일을 js로 컴파일해서 node 실행 제공npm install -D ts-node 1-3. tsconfing.json 생성npx tsx --init 설치가 완료되면 tsconfin.. 인스타그램 API 연결하기 - 2편 : API 연결 안녕하세요. 다시 돌아온 맛도리 탐정입니다.이번 편에서는 이전에 포스팅을 진행했던 Next.js + 인스타그램 API를 마무리 짓도록 하겠습니다. 4. 테스트 사용자 인증순서에 따라 아래의 인증 창 URL을 구성합니다. https://api.instagram.com/oauth/authorize ?client_id={app-id} &redirect_uri={redirect-uri} &scope=user_profile,user_media &response_type=code app-idredirect-uri표시된 부분 (클라이언트 OaAuth 리디렉션 URI | 콜백 URL 승인 취소 | 데이터 삭제 요청 URL)에배포된 사이트의 주소를 입력해 주고 하단의 변경 내용 저장 버튼을 클릭해 줍니다. 그.. 인스타그램 API 연결하기 - 1편 : 기본 설정 새로운 토이프로젝트가 거의 마무리 단계까지 왔습니다. 제가 먹는 걸 좋아해서 맛집 관련 웹사이트를 간단히 만들어봤는데요. 기왕 하는거 캐릭터도 만들고 인스타그램도 개설해서 관리를 하는 게 어떨까 해서기존 웹서비스(MongoDB사용) 에서 인스타그램 API를 연결해서 데이터를 가져오기로 했습니다. 1. Instagram 기본 디스플레이 API 제품 > Instagram > 기본 디스플레이 > Instagram 앱 ID 필드에서) {redirect-uri}는 2단계에서 제" data-og-host="developers.facebook.com" data-og-source-url="https://developers.facebook.com/docs/instagram-basic-display-api/gettin.. AWS S3 이미지 업로드하기 (with NextJS) 안녕하세요. 오랜만에 쓰는 포스팅이네요. 코드드림 어드민 프로젝트가 거의 마무리되어 가고 있습니다. 저희는 AWS S3를 사용해 이미지를 저장하게 되었는데, 이때 배우게 된 내용을 복기하고자 이번 포스팅을 기획하게 되었습니다. 생각보다 별건 없습니다. 레고 1. AWS 계정 생성하기 우선 계정을 생성해 볼까요? 아래 링크로 들어가서 무료 계정을 생성해 봅시다. Amazon S3 동영상 Amazon S3 시작하기 - 데모(7:37) Amazon S3 데이터 보호 개요 - 버전 관리, 객체 잠금 및 복제(7:41) Amazon S3 Intelligent Tiering 스토리지 클래스 소개(1:18) Amazon S3 Glacier 스토리지 클래스 소개(1:30) 자습 aws.amazon.com 기존에 계정이.. 물러가라! 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 다음
