[웹서비스 개발팀] 설명 및 타입스크립트

Anna Park·2024년 6월 26일

webservice

목록 보기

5/33

혁신인재 아카데미가 본격적인 챕터로..

강사님: 이재희 팀장님(John Lee)

교육 진행 과정에 대한 설명

책풀스택 리액트, 타입스크립트, 노드

실무 프로젝트를 기반으로 교육 진행

1교시: 오늘 할 공부에 대한 스크럽
2~5교시: 이론에 대한 실습과 과제 제출(과제는 주말에 예정)
6교시: 총정리 및 테스트

먼저 타입스크립트
다음주 12일부터 리액트

평소 해야할 것들

CS -> 정보처리기사 자격증 따기
프로젝트 -> 계속 진행하도록
알고리즘 테스트-> 수업전 오전 1시간정도 연습하기

오늘은 10시 소개, 11시 깃허브 12시부터 타입스크립트, Node.js, npm
(교육환경상 윈도우 환경에서 수업 따라올 것. 변수명, 사용자명, 폴더구조등 똑같이 해주기를 당부)
16시 할일관리 어플 개발, 17시 정리 및 시험

사전 준비 사항
HTML / CSS / JavaScript / CS지식 / 실전 프로그래밍 경험

웹 프로젝트

브라우저 - 서버 - 데이터베이스
프론트엔드 - 백엔드 - 데이터베이스

레포트:

업무에 대한 이해:

웹 프로젝트 진행 단계

PM의 프로젝트설명 미팅:킥오프
협업 툴: 잔디 지라 깃허브
퍼블리싱+개발=프론트엔드
인프라(네트워크) 엔지니어가 사전 환경구성 -> (로컬)프론트,백 개발 -> 네트워크 엔지니어

깃허브 깃랩

https://github.com/ 프로필 페이지 만들기
https://gitlab.com/

책: https://github.com/JungYeolYang/Full-Stack-React-TypeScript-and-Node-acorn
-> 공부해보기

실습환경: VSCode
extensions추가
prettier
tailwindcss

간단한 실습을 해보자

powershell 쳤던 명령어

$env:SCOOP='C:\Scoop'
[Environment]::SetEnvironmentVariable('Scoop',$env:SCOOP,'User')
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -scope CurrentUser
irm get.scoop.sh | iex

scoop install git aria2
scoop install nodejs-lts
node -v
scoop bucket add extras
scoop install touch
scoop install googlechrome ->chrome

scoop install vscode   -> code
vscode
ctrl shift p >user >setting.json 
추가     
"editor.defaultFormatter": "Solarized Dark",
"editor.formatOnSave": true,
"[typescript]": {
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"javascript.updateImportsOnFileMove.enabled": "always",

####powershell
cd..
PS C:> mkdir dev
PS C:> cd dev
PS C:\dev> mkdir projects
PS C:\dev> pwd
PS C:\dev> cd .\projects\ cd+tab
PS C:\dev\projects> mkdir p1
PS C:\dev\projects> cd p1
PS C:\dev\projects\p1> pwd
PS C:\dev\projects\p1>npm init ## 사용하자
PS C:\dev\projects\p1>sudo npm i -g typescript ## 컴파일러 실행
PS C:\dev\projects\p1>cat .\package.json ## 확인하는 방법
PS C:\dev\projects\p1> code . ## vscode실행
vscode에서 파일string-vs-number.ts 추가
작성

let b = "6";
console.log(a + b);

PS C:\dev\projects\p1> tsc string-vs-number.ts ## ts파일이 js로 바뀜, 저수준 언어로 바꿔라
PS C:\dev\projects\p1> node string-vs-number.js
56

p1>test-age.ts

interface User {
  name: string;
  age: number;
}

function canDrive(usr: User) {
  console.log("user is", usr.name);

  if (usr.age >= 16) {
    console.log("allow to drive");
  } else {
    console.log("not allow to drive");
  }
}
const tom: User = {
  name: "tom",
  age: 20,
};

canDrive(tom); // user is Tom