Framework overview 이 글은 노마드 코더의 NextJS 시작하기라는 무료 강의를 듣고 작성되었습니다. 강의링크 1.0 Library vs Framework 1.1 Pages Next.js에는 기본적으로 pages라는 폴더가 있는데, 그 폴더는 라우터 역할을 한다. 안에 index.js를 만들면 로컬호스트의 메인페이지에 자동으로 렌더링 된다. 만약 about.js를 만들면 /about 페이지에 해당 내용이 렌더링 되는 방식이다. 즉 파일의 이름이 url이 된다. 하지만 그 안의 컴포넌트의 이름은 상관이 없다. 하지만 그안에 렌더링 될 컴포넌트는 default export가 되어야 한다. 또한 next.js는 자동으로 404페이지를 제공해준다. pages 폴더 안에는 반드시 index.js가 ..

Block Chain 이 글은 노마드 코더의 타입스크립트 무료 강의를 보고 노트 정리를 한 글입니다. 강의링크 5.0 Introduction 5.1 Targets 프로젝트 폴더 생성후 npm init -y를 통해 새 package.json 파일을 생성해준다. package.json을 다음과 같이 수정해준다. { "name": "blockchain", "version": "1.0.0", "description": "", "scripts": { }, "keywords": [], "author": "", "license": "ISC" } 그리고 타입스크립트를 설치해주자. 터미널에 npm install -D typescript 라고 적으면 된다. 그러면 package.json에 devDependencies 가 ..

Classes 이 글은 노마드 코더의 타입스크립트 무료 강의를 보고 노트 정리를 한 글입니다. 강의링크 4.0 Classes 이번에는 객제지향 타입스크립트에 대해 배워보자. 타입스크립트로 클래스를 만드는 방법은 아래와 같다. class Player { constructor( private firstName:string, private lastName:string, public nickName:string ) } 타입스크립트에서는 constructor에서 public, private 속성을 부여할 수 있다. const ttolbe= new Player("Ttolbe","Na","Tolby") ttolbe.firstName; ttolbe.nickName; 위와 같이 오브젝트를 만들고 firstName 속성을..

Functions 이 글은 노마드 코더의 타입스크립트 무료 강의를 보고 노트 정리를 한 글입니다. 강의링크 3.0 Call Signatures call signature는 함수의 타입을 정하는걸 의미한다. call signature를 호출하는 방법은 아래와 같다. type Add=(a:number, b:number)=>number 두 인자를 숫자로 받고 결과값으로 숫자를 리턴한다는 의미를 갖는다. const add:Add=(a,b)=> a+b call signature를 사용하면 a,b가 숫자 타입이라고 명시할 필요가 없다. 3.1 Overloading 오버로딩은 외부 라이브러리에 많이 사용 된다. 패키지나 라이브러리는 오버로딩을 많이 사용하기 때문에 모양 정도는 알아두는게 좋다. type Add1=(a..

Overview of TypeScript 이 글은 노마드 코더의 타입스크립트 무료 강의를 보고 노트 정리를 한 글입니다. 강의링크 2.0 How TypeScript Works 타입스크립트는 자바스크립트와 다르게 개발자를 보호해준다. 컴파일 이후에 코드의 에러를 알려주는 자바스크립트와 달리, 타입스크립트는 자바스크립트로 변환되기 전에 에러가 있다면 컴파일 되지 않는다. const Tollbe={ nickname:"Tolby" }; Tollbe.hello() 위와 같은 코드는 자바스크립트에서는 실행후 에러를 보내지만 타입스크립트에서는 실행되기 전 에러를 알려준다. function divide(a,b){ return a/b } divide("hello") 위 코드 역시 에러가 난다. 나누기 연산을 통해 타입스..

요즈음 vite가 많이 뜬다고 한다. Vite란 터미널 웹팩으로 일종의 엔진 역할을 한다. Vite는 기존의 react, Vue등을 더빠른 속도로 컴파일 할 수 있게 해주는 장점을 가진다고 해서 한 번 간단하게 사용해 보았다. vite를 사용해 보는 방법은 아주 쉽다. 우선 터미널에 아래와 같이 적자. npm create vite@latest 그러면 패키지를 설치하라고 뜨는데 y를 누르면 된다. 그 다음 프로젝트 명을 쓰라고 한뒤 폴더 이름을 설정하면 vanilla, vur, react, preact, lit, svelte 등의 variant를 선택하라고 뜬다. variant를 선택 한 뒤에 타입스크립트 사용여부도 선택할 수 있다. 모두 설정 한 뒤에 터미널에 아래와 같이 적으면 된다. cd vite-p..

Vue Computed/Watch Computed computed 를 통해 data 필드를 감지하고 새로운 필드를 정의해서 사용하는 법을 알아보자. 여기 data안에 firstName과 lsatName이 객체로 저장되어 있다. data() { return { firstName: 'Jane', lastName: 'Johnson', }; }, 이 두 객체를 한번에 렌더링 하고 싶으면 아래와 같이 적는 방법이 있다. Hello {{ firstName }} {{ lastName }} computed에 선언 된 값은 data에 선언 된 값과 완전히 동일한 역할을 한다. computed에 아까와 같은 함수를 선언하고 h1 태그에 적용해보자. Hello {{ firstName }} {{ ..

Vue 이벤트 처리하기 - click/change/key Click 이벤트 Vue 에서 가장 많이 보게 될 click 이벤트 처리법을 먼저 살펴보자. Add 1 The count is {{ count }} 이제 버튼을 누를 때마다 값이 1씩 증가하게 만들어 보자. Vue에서는 이벤트를 추가할때 v-on 속성을 사용한다. 여기서는 클릭 이벤트를 사용하므로 v-on:click="" 속성을 사용하고 큰 따옴표 안에 함수를 넣어주면 된다. (v-on:click=""은 @click=""으로 줄여쓸 수 있다.) Add 1 이벤트에 사용되는 함수는 script 태그안의 methods:{} 안에 넣어주면 된다. 전에 말했듯 메소드의 함수가 data에 접근하기 위해서는 this.을 사용해야 한다. 위처럼 함수를 넣고 클..

Vue 렌더링 리스트 렌더링 select와 option태그, 그리고 배열로 이루어진 객체 데이터를 통해 리스트 렌더링을 하는 방법을 알아보자. 우선 data에 아래와 같이 값을 부여하자. data() { return { options: [ { v: '02', t: '서울' }, { v: '21', t: '부산' }, { v: '064', t: '제주' }, ], }; }, 이제 tempalte 태그 안에 아래 와 같이 적자. {{i}}-{{ city.t }} 위 코드를 실행하면 0-서울, 1-부산, 3-제주의 세 옵션들이 생성 된 것을 볼 수 있다. v-for 속성의 기본 구조는 v-for="(item, index) i..

Vue 데이터 바인딩-attribute/class/style 속성 데이터 바인딩 이미지의 src를 바인딩 해봄으로서 속성 바인딩 방법을 알아보자. 프로젝트의 public 폴더에 img 폴더를 생성한 뒤 파일을 넣고 위와 같이 template안에 img 태그에 속성을 부여해주면 실행 시 이미지를 볼 수 있다. 데이터의 return 값에 src 객체를 넣어서 src속성을 바인딩해보자. 이번에는 input 값이 비었을 때 버튼을 disabled 시키는 방법에 대해 알아보자. Click 로직은 간단하다. 받아온 textValue값이 비었다면 버튼은 활성화 되지 않는다. 만약 v-bind:disabled=true 이면 버튼은 비활성화되고 v-bind:disabled=false 이면 버튼은 활성화된다. 데이터의 r..