본문 바로가기

typescript

 (6)
타입스크립트 테스트 환경 구축하기 Typescript Test Environment 안녕! 타입스크립트 프로젝트를 Jest로 테스트하려면 어떻게 할지 궁금해 할까봐 준비했어! Jest와 TypeScript 설치! npm용 명령어는 아래! npm install --save-dev jest ts-jest @types/jest typescript yarn 명령어는 아래! ^^ yarn add --dev jest ts-jest @types/jest typescript 프로젝트 루트 디렉토리에 jest.config.js 파일을 생성해. 바로 Jest의 설정을 관리하는 파일이야. module.exports = { preset: 'ts-jest', testEnvironment: 'node', testMatch: ['**/__tests__/**/*.+(ts|js)', '**/?(*.)+(spec|te..
Next.js - Typescript 적용하기 요즘은 타입스크립트가 대세! 왜냐고 묻는다면, 바로 타입이기 때문이야. Javascript의 장점이자 단점이 명시적인 타입이 없다는 점이야. 즉흥적으로 객체에 필요한 멤버변수들을 추가하기때문에 자바스크립트가 매우 빠르게 결과를 얻을 수 있는 반면에, 프로젝트가 커지고, 여러사람이 함께 작업할 수록, 이 멤버 변수가 어디서 정의되서 어떻게 쓰이는지, 어떤 값이 들어오는지 예측하기 힘들어지고, 본인이 만든 코드더라도, 이때문에 발생한 버그를 잡느라 하루이틀 버리는 건 다반사! 결국, 1~2년 이후에는 너도나도 손대기 싫은 코드가 되버리고, 이때 타입을 적용하고자 한다면, 고생이 말도 아니지! 그래서 오늘은 Next.js에 TypeScript를 적용할꺼야. 타입스크립트 아직 모르는 친구 여기 없지? 아직 모른..
Next.js 킬포 Pre-rendering 1. Static-Generation Next.js의 킬링포인트 Pre-rendering 개념은 잘 보고 왔지? Next.js Pre-rendering 안녕친구들! 스타일링까지 잘 따라오고 있어? Next.js 스타일링 팁 (classnames, postCSS, Sass) 튜토리얼 잘 따라오고 있어? 오늘은 쉬어가는 페이지! 알아두면 좋은 몇가지 라이브러리들을 소개할께! 지� ppsu.tistory.com Pre-rendering 첫번째 시간! Static-Generation을 실습할꺼야! Next.js의 Static-Generation은 말그대로 그냥 빌드타임에 미리 HTML을 생성해 두는 건데, 요기 또 쿨한 옵션이 하나 있다! 페이지를 생성할 때, 외부 데이터를 읽어와서 조합할 수 있다는 거야! 빌드할때 API를 호출한 결과로 페이지 ..
Next.js 스타일링하기 3 - 레이아웃 스타일링 https://ppsu.tistory.com/59 Next.js 스타일링하기2 이전시간의 스타일링 기본은 잘 익혔어? https://ppsu.tistory.com/58 Next.js 스타일링 하기 내 웹사이트에 페이지는 추가했고... 오늘은 이쁘게 스타일링 해볼꺼야! Next.js 페이지 추가하기 앱 처음으로 �� ppsu.tistory.com 이번엔 첫 페이지도 좀 이쁘게 만들고 정리해 보려구해. 나만의 자기소개 페이지를 추가하자! 일단 components/layout.module.css를 아래 내용으로 업데이트 하자 .container { max-width: 36rem; padding: 0 1rem; margin: 3rem auto 6rem; } .header { display: flex; flex-..
Next.js 앱 처음으로 수정해보기 첫번째 Next.js 앱만들기는 잘 했어? 첫번째 Next.js 앱 만들기 자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설정 Node.js설치는 필수 노드 홈페이지에 가서 설치해 https://nodejs.org/ 버전은 10.13 이후 버전이면 돼! 자 시작 해볼까? 일단 ppsu.tistory.com 이번엔 요걸 수정해볼꺼야! pages 디렉토리에 index.js파일이 있을꺼야. 13번째 줄에 태그 사이에 "Welcome to" 보여? 요걸 지우고 "안녕하세요"로 한번 바꿔봐! 저장한 다음에 아까 열어뒀던 브라우저 창을 다시 볼까? 오잉?!? 뭐지? 새로고침도 안했는데 메시지가 변했네? 한번 파일을 수정하고 저장만 해봐! 역시나 브라우저가 잘 바뀌네. 왜그럴까? Nex..
첫번째 Next.js 앱 만들기 자 오늘 첫번째 Next.js앱을 만들꺼야. 먼저 환경설정부터 해야겠지? 환경설정 Node.js설치는 필수 노드 홈페이지에 가서 설치해 https://nodejs.org/ 버전은 10.13 이후 버전이면 돼! 자 시작 해볼까? 일단 마음에 드는 디렉토리를 하나 만들고, cd 명령로 그 디렉토리에 들어가서 아래 명령어를 쳐봐바. npm init next-app nextjs-blog --example "https://github.com/zeit/next-learn-starter/tree/master/learn-starter" 내부적으로는 create-next-app이라고 자동으로 프로젝트 설정해주는 명령어를 사용해 이것에 대해서는 나중에 자세히 다를께. 아마 nextjs-blog라는 디렉토리가 생겼을꺼야. ..

티스토리툴바