[220517 / Day 11] animation, JS 기초

1. animation

- animation-direction : 애니메이션의 진행방향, 순방향 역방향 왕복 이 있음 / alternate = 왕복

- @keyframes : 변화를 지정해주는 것 / 시작 끝만 지정할 거면 from, to로 하고 퍼센트로 할 수도 있음

- animation: ani1 5s 3 alternate => ani1 을 5초동안 움직이고 3번 반복하고 왕복

- animation-fill-mode: forwards; => 끝나고 어느 위치에 있을 건지, forwards = 끝자리

 

JS

1. 기초

- 출력확인방법 : 간단한 건 따로 실행 파일 없이 브라우저 통해 출력 가능, node.js 이용해 브라우저 말고도 확인 가능

 

- 데이터 : 어떻게 저장하고 출력하는지

- 변수라는 걸 만들어서 쓸거임 변수는 variable 이라고 함 var, let, const 이용

- let 을 먼저 사용 / let a = 0 -> a 라는 변수에는 0 이 할당되어있다는 뜻, 확인하려면 console.log(a) 라고 적으면 확인 가능

- 콘솔은 제어판, 로그는 출력 기록

- <script> 헤드 바디 둘다 적어도됨

- 브라우저에 개발자 모드 콘솔 가면 확인 가능

 

2. 출력확인방법 

나중에 다시 정리 : 

node.js 프로그램 실행법 53p

<script> 문서에 삽입해 웹 브라우저로 실행 58p

 

3. vscode 에서 node.js 프로그램 실행하는 방법

- terminal 키기 : vscode 맨 하단을 끌어올리거나, 상단의 terminal → new terminal 누르거나, 단축키 ctrl shift ` 

- terminal 끄기 : 단축키 ctrl shift p → terminal : clear 누르거나, terminal 오른쪽 상단의 휴지통, >powershell 위에 마우스 오른쪽 누르고 kill terminal

- nodemon 설치 : npm install -g nodemon

- nodemon 키기 : nodemon 파일이름 / 예를 들어 nodemon js01.js

- npm (Node Package Manager) : 쓸 수 있는 명령어 다 있음

-  -g : 글로벌 노드가 깔려있는 모든 컴퓨터

- nodemon 종료 : ctrl c

 

4. 메모리

 - 코드 code : 프로그래밍 코드

 - 데이터 data : js 에서 저장한 데이터들, 정적 변수(원시타입의 자료형: 숫자 123, 문자 등 값이 정해져 있는 것) 전역변수

 - 힙 heap : 동적인 데이터(객체, 함수, 배열 등)

 - 스택 stack : 함수 같은 걸 실행하는 순서가 차곡차곡 쌓임 , 매개변수 지역변수

예를 들어 데이터 공간에 b 라는 주소를 만들고 1 이라는 데이터를 넣음 그럼 b 를 부르면 1 이 나옴