Vscode 기능
Peek : alt+12() 함수 코드 바로가기
Html css support 클래스 바로가기 (잘안됨)
refactoring
: ctrl + shift + R : 함수,변수로 싸기, 다른 파일로 옮기기
rename symbol
: F2 리네임, 다른 파일도 다 바꿔줌
snippets
: 인포트 단축키, vue 단축키
react snippets : 리액트에서 쓰기
tabnine : ai 코드 단축키(유로)
debugger
: 빨간점 찍기 : 정지시켜줌 순차적으로 실행 가능함
multi cursor
: alt +click 동시에 수정 가능함
emmet
: 단축 명령어
power mode
: 화려한 효과
https://www.youtube.com/watch?v=mh-0twurNRE
크롬 개발자도구
Ctrl + shift + p
: screenshot - 캡쳐
: coverage - css js 파일 중 현재 페이지에 필요없는 코드를 %로 알려줌
: Fps meter - 어떤 fps 쓰는지 잘 보여줌
: sensor - 스마트폰 센서로 어떻게 보이는 지 볼 수 있음 (파노라마)
크롬에서 바로 수정 하기 source - filesystem : 파일선택시 바로 파일 수정 가능
console의 눈알을 누르면 결과를 바로 볼 수 있음
: sinppet 코드를 길게 짜 볼수 있음
: ad block 테스트(block ads on this site) - 광고가 제거된 사이트의 모습을 볼 수 있음
타입스크립트1 (.ts)
크기가 큰 사이트를 만들 때 사용함
타입을 엄격히 검사해줌
설치 및 기본세팅
터미널 npm install -g typescript
React 프로젝트에서 Typescript 사용할 경우
-
이미 있는 React 프로젝트에 설치하실거면
npm install --save typescript @types/node @types/react @types/react-dom @types/jest -
그냥 React 프로젝트를 새로 만들거면
npx create-react-app my-app --template typescript
Vue 프로젝트에서 Typescript 사용할 경우
-
작업폴더경로에서 터미널을 오픈하신 후
vue add typescript -
이제 vue파일에서 타입스크립트를 쓰려면
<script lang="ts">
</script>파일 추가 생성- 컨파일 옵션 지정함 : ts 변환 버전 js지정
// tsconfig.json
{
"compilerOptions" : {
"target": "es5",
"module": "commonjs",
“strictNullChecks”: true //null타입 엄격하게 체크
}
}터미널에서 tsc -w 입력해두면 자동변환됨
자바스크립트 파일 생성해줌
사용법
let 이름 : string = “이름”;
string 대신 [], string[], {name?: string} 등이 들어올 수 있음
|(or)을 사용하여 쓸 수 있음
타입지정을 변수에 담아 사용할 수 있음
type 내타입 =string | number;(이름은 대문자로 사용 많이함)
type Member = [number, boolean]
type Member = { [key: string] : string, }
함수에 타입지정 가능
function 함수 (x:number) : number {
return x*2
}클래스 타입지정
class User {
name: string;
constructor(name:string){
this.name=name;
}
}https://codingapple.com/unit/how-to-install-typescript-in-local-vue-react/
TypeScript2
narrowing 방법 : 타입확정
-
if (제목 != null) {}
-
instanceof // 가장 많이 방법
let 제목 = document.querySelector(‘#title’); // null
If(제목 instanceof Element){ // 자식이냐
제목.innerHTML = ‘반가워요’
} a 태그일 경우 HTMLAnchorElement로 해야함(태그마다 따로 정해져 있음)
-
as 사용하기
let 제목 = document.querySelector(‘#title’) as Element; -
오브젝트에 붙이는 ?. null이면 undifined를 출력
if (제목?.innerHTML != undifined) {}
버튼?.eventListener()으로 narrowing을 함
API가 뭐냐면
서버와 손님이 주고받고 위한 방법(코드)
요청시 코드실행
Rest api : api 작성론
모든 프로그램은 api를 가질 수 있음
프로그램을 동작시키기 위한 방법 마치 메뉴판 같은 거
Api 판매를 하기도 함
구글링 잘하는 법 7개
- 내가 무엇을 모르는 지 질문부터
문법을 모른다
or 라이브러리 사용법을 모른다
or 그냥 만드는 법을 모른다 - 영어로 검색 추천
- “”검색 : 필수적으로 포함, after:2020 최신 문서들, - 제외함, *단어 까먹으면
- 유튜브 검색도 좋음
- 라이브러리 에러는 깃허브 repo에서 찾는 게 빠를 수도 있음, reddit도 좋음
- 네이버 검색 카페
크롬 공룡게임 만들기 1편(원리와 구현방법)
기능
1. 화면에 네모,원을 그릴 수 있어야함 css, 캔버스
2. 프레임마다 코드실행 가능해야
3. Collision check를 할 수 있어야함
: 중학교 수학으로 좌표 체크
만들기
canvas 태그 생성
script로 캔퍼스 생성
// 라이브러리 사용이 좋음
// 생 개발 시
Function 프레임마다실행() {
reqestAnimationFrame(프레임마다실행);
ctx.clearReact(0,0, canvas.wudth, canvas.height);
장애물 생성()
dino.draw()
}
프레임마다실행();https://www.youtube.com/watch?v=qkTtmgCjHhM
웹업셈블리(.wasm)
프로그래밍 언어를 .wasm으로 변환해 브라우저로 적용
장점
1. 다른 언어로 작성한 프로그램도 브라우저에서 실행이 가능함
2. 작동속도가 빨라서 씀(c++,c)
빠른 이유: 자바스크립트는 실행시 복잡한 과정을 통해 실행됨, wasm은 단순함 => 안정적으로 빠름
