왜 데이터 타입이 그렇게 중요한가? JS의 변수에는 어떤 데이터 타입의 값도 할당 될 수 있다. let myname = 'byein'; string 값이 담겨 있던 변수에 아래처럼 number 값이 담기더라도 에러가 발생하지 않는다. myname = 1; JS는 이런 문제를 사전에 막아주지 못하고 나중에 프로그램을 사용하다가 나중에 버그가 있는 걸 발견할 수 있다. 그럼 타입스크립트는 어떻게 이런 문제를 해결할 수 있을까? 변수에 데이터 타입을 지정하는 방법 타입스크립트는 변수 선언 시에 데이터 타입을 지정한다. 그럼 TS를 JS로 컴파일 할 때 다른 값이 할당되면 오류를 발생시켜 알려준다. let myname: string = 'byein'; myname 변수에 string 타입을 지정했는데 아까처럼 ..

Node.js 설치 만약 Node.js가 이미 설치되어 있다면 넘어가고 아니라면 아래 사이트 가서 LTS(Long Term Support) 버전 설치 https://nodejs.org/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org TypeScript 설치 npm install typescript --save-dev 프로젝트 초기화 npx tsc --init 위 명령어를 실행하면 tsconfig.json 파일 생성이 된다. tsconfig.json 파일을 열고 아래 설정을 추가한다. src 폴더 내에 있는 모든 TS 파일을 컴파일하고, 결과를 build 폴더에 저장한다. { "includ..

TS Playground TS 온라인 플레이그라운드는 웹 브라우저에서 TS 코드를 작성하고 실행할 수 있는 도구다. 사용방법은 다음과 같다. 1. 접속 https://www.typescriptlang.org/play TS Playground - An online editor for exploring TypeScript and JavaScript The Playground lets you write TypeScript or JavaScript online in a safe and sharable way. www.typescriptlang.org 2. 코딩 코드를 작성하면 자동으로 TS를 JS 코드로 변환하고 오른쪽 창에 변환된 코드를 보여준다. 3. 실행 "Run" 버튼을 클릭하여 TS 코드를 실행할 수 ..

Typescript란? Typescript = Javascript + Type Check TS는 JS에 타입 체크가 추가된 것으로 JS를 코딩하게 되면 100% 동작한다. 하지만 JS에서 TS를 코딩하게 되면 동작하지 않는다. 범주가 다르기 때문이다. 데이터 타입 체크 JS는 무엇이든 담을 수 있어 편리하지만, 그 안의 내용을 정확히 알 수 없어 매번 확인해야만 한다. 이처럼 JS는 Dynamic Type이기 때문에 변수의 데이터 타입을 명확하게 알기 어렵고 따라서 데이터 타입의 안정성이 낮다. TS는 안에 어떤 것이 담기는지 명확하게 알 수 있으며, 다른 것들을 담지 못하도록 보장한다. 이처럼 TS는 변수의 데이터 타입을 명확하게 지정해주어 안정성을 높여준다. TS를 왜 사용해야 하는가? JavaScr..

환경변수 & 졸업 현재 강의에서는 주소가 localhost로 하드코딩되어 있다. 그런데 개발할 때 사용하는 api와 실서버 api의 주소가 다를 수 있다. 이런 정보를 애플리케이션의 소스코드에서 떨어트려 별도로 관리해야할 일이 생길 수 있다. 아래 환경변수 관련 문서를 보면 .env.local 파일을 홈디렉토리에 만들고 아래와 같이 애플리케이션이 사용하는 정보를 넣어주면 된다. https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables Configuring: Environment Variables | Next.js Next.js comes with built-in support for environmen..

글 삭제 이번엔 삭제를 구현해보자. Control.tsx 파일에서 onClick 이벤트를 추가해주고 fetch를 작성해주자. 삭제 메소드를 추가하기 위해 option을 따로 설정해주자. 테스트하면 글을 선택하고 삭제버튼을 눌렀을 때 삭제가 됐고 refresh를 하면 삭제가 잘 된 걸 확인할 수 있다. 그럼 삭제한 경우 데이터가 사라진 것이니까 루트로 이동하도록 처리하자. 이를 위해서는 router가 필요하다. 삭제가 끝나면 push해서 루트로 이동하고 서버 컴포넌트들을 다 refresh를 해야하니까 router.refresh도 처리해주자. // /src/app/Control.tsx 'use client'; import Link from 'next/link'; import { useParams, useRo..