왜 데이터 타입이 그렇게 중요한가? 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..

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..

글 수정 수정 기능을 구현해보자. 아직 페이지가 없어 404가 뜰 것이다. 우선 /src/app/update/[id]/page.tsx 파일을 만들어 주고 기본 틀만 제공하자. 그런데 수정이란 크게 2가지의 합성이다. Update = Create + Read 따라서 수정을 진행할 때 읽고 만드는 두 가지가 모두 필요하다. 기본적인 UI는 Create에 있는 page.tsx에서 가져오자. 그런데 Update는 원본이 적혀 있어야 하기 때문에 Read 기능도 필요하다. 그런데 Create는 클라이언트 컴포넌트이고 Read는 서버 컴포넌트로 구현되어 있다. 그래서 이걸 그대로 사용할 수는 없다. useEffect와 fetch를 이용해서 데이터를 가져오는 작업이 필요하다. 그리고 가져온 데이터를 form 안에 넣..