FE26 [배포] TypeScript + Express 배포하기 TypeScript + Express 배포하기 웹 페이지는 html, css, js 이외의 파일은 읽지 못한다. 그러니 내가 짠 코드를 웹 페이지가 읽을 수 있는 파일로 변환한 build용 파일이 따로 있어야 한다. 배포를 하기 위해서는 build 파일들이 있어야 하는 것이다. TypeScript로 작성된 프로젝트를 배포하기 위한 과정을 알아보자. 배포는 클라우드타입에서 진행하였다. (클라우드타입으로 배포하는 법: https://inthedev.tistory.com/57) 사이트에 배포하고 싶은 파일, build 폴더 생성을 위한 명령어, 실행 명령어를 입력해주면 배포가 완료된다. 그 과정은 1. npm ci 2. tsc : ts 파일을 js 파일로 변환 3. node app.js : 실행 이 과정을 컴.. 2023. 3. 3. [배포] 클라우드타입으로 Express 배포하기 클라우드타입으로 Express 배포하기 Express로 작은 프로젝트를 만들고 나서 배포를 하기 위해 클라우드타입 이라는 서비스를 이용하였다. 유튜브 조코딩님의 영상을 참고하여(https://youtu.be/SGGebq48h3Y) Express를 배포하는 방법을 소개하려 한다. 1. 클라우드타입 홈페이지 회원가입 https://cloudtype.io/ 모두의 플랫폼팀, 클라우드타입클라우드타입은 클라우드 기반 애플리케이션을 빠르게 개발하고 배포할 수 있는 클라우드 애플리케이션 플랫폼입니다.cloudtype.io 깃허브로 가입하면 깃허브에 올린 Repositories와 연동이 편하다. (다른 방식으로는 가입 안 해봐서 모르겠음...) 2. + 버튼 눌러서 프로젝트 형식 선택하기 상단의 +를 누르면.. 2023. 3. 2. [TypeScript] interface와 type의 차이점 interface와 type의 차이점 # 확장하는 방법의 차이 1. interface 확장 방법 interface User { name: string age: number } interface WebUser extends User { website: string } interface Student { name: string age: number } interface Student { id: number } interface는 extends를 이용하거나 혹은 그냥 선언으로도 확장이 가능하다. 2. type 확장 방법 type User { name: string age: number } type WebUser = User & { website: string } type은 &을 이용하여 확장할 수 있다. 그러.. 2023. 2. 25. [JavaScript] 이벤트 루프 이벤트 루프 # 자바스크립트는 싱글 스레드 언어 자바스크립트는 싱글 스레드 언어로 한 번에 하나의 작업만 처리할 수 있다. 하지만 비동기 작업을 할 수 있다. 어떻게 가능한 것일까? 이를 이해하기 위해서는 자바스크립트가 웹 브라우저 내에서 동작한다는 사실을 알아야 한다. 웹 브라우저 내에 있는 기능들이 자바스크립트를 도와주어 비동기 작업을 처리할 수 있게 해준다. # 웹 브라우저 내부 자바스크립트 밖에 Web API가 존재한다. 즉, Web API란 브라우저가 제공하는 비동기 API이다. 자바스크립트는 이렇게 외부의 도움을 통해 비동기 작업을 처리할 수 있다. 콜스택에서 비동기 코드를 만나면 해당 코드는 Web API 영역으로 빠진다. 그리고 그 비동기 작업은 이후 queue라는 곳으로 이동하여 대기하다.. 2023. 2. 21. [배포] GitHub로 React 배포하기 Github로 React 배포하기 1. gh-pages 패키지 설치하기 npm install --save gh-pages // or yarn add gh-pages 2. package.json에 homepage 추가하기 "homepage" : "http://(본인username).github.io/(Repository이름)", 3. package.json의 scripts에 predeploy와 deploy 항목 추가 "scripts": { "predeploy" : "npm run build", "deploy" : "gh-pages -d build" } * 배포하기 전 주의할 점 React 프로젝트에서 BrowserRouter를 사용했다면 페이지 배포 후 에러가 생길 수 있음. 로컬 환경에서는 기본 주소가 .. 2023. 2. 8. [TypeScript] 제네릭 제네릭 # 제네릭(Generics)이란? 타입스크립트를 사용하면 변수의 타입을 변경할 수 없다. name: string이라든지, age: number라든지, 변수 선언과 동시에 타입이 지정되기 때문이다. string | undefined 처럼 작성해주면 약간은 유연하게 사용할 수 있으나 기본적으로 타입은 항상 고정되어 있다. 그러나 프로그래밍을 하다보면 변수의 타입이 바뀔 수도 있다, 혹은 하나의 함수에 다양한 타입의 값을 넣어야 할 수도 있다. 이런 경우에는 타입을 고정적으로 지정하면 오히려 불편해진다. 따라서 타입을 직접적으로 고정시키지 않고 변수처럼 언제든지 변할 수 있도록 해주는 장치가 등장하였는데, 이를 제네릭(Generic)이라고 한다. function add(x: string | number.. 2023. 2. 1. 이전 1 2 3 4 5 다음
