JavaScript
JavaScript (1) 프로그래밍 언어로, HTML 상에서 쓸 수 있는 언어 JavaScript 기초 문법 (1) 변수 선언 - 이름에 특정한 값을 부여하겠다는 뜻 - let 뒤에 원하는 변수 이름을 적고 = 뒤에 값을 적으면 된다 ex) let num = 10 // 변수를 선언할 때는 앞에 let 을 쓴다 console.log(num) - 콘솔창에서 직접 코드 입력할 때는 변수 이름만 적고 엔터를 쳐도 값을 확인할 수 있음 ex) num // 10이 출력됨 - 변수를 한 번 선언하고 나서는 그 값을 바꾸어줄 수 있다. ex) let num = 20 num //20 num = 2 num //2 - 변수 선언을 먼저 하고 값을 나중에 넣어줄 수도 있다. ex) let num num // 아직 값이 정의..
웹 기초
웹 동작 개념 (html 을 받는 경우) (데이터만 받는 경우가 훨씬 많다.) (1) 웹페이지: 서버에서 미리 준비해두었던 것을 '받아서' '그려주는 것'. * 즉, 브라우저가 하는 일은 - 1. 요청을 보낸다. (서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보냄) - 2. 받은 HTML 파일을 그려준다. HTML (1) 개념 - HTML : Hypertext Markup Language - 브라우저 화면에 표시되는 문서를 작성하는 데 쓰는 Markup 언어 (2) 역할 - 태그(tag) 라고 불리는 요소들을 이용해 화면 분할 - 텍스트와 이미지, 하이퍼링크 등을 배치 - 개발자 도구에서 elements 탭 > 웹페이지 구성하는 HTML 요소 확인 가능 - 각 태그들은 보통 시작..
Line Width
- 하는 일은 선을 그리는 것 뿐 : lineTo, stroke - 이전에 그려진 선과 새로운 선의 연결을 끊어주기 : ctx.beginPath(); - ctx.fillColor (안을 채워주는 색) - ctx.stokeColor (선 색)
CANVAS API
* 자동완성 안 뜰 때 : /** @type {CanvasRenderingContext2D} */ - 정의 : canvas API 창이다. -canvas API 는 Javascript로 그래픽을 그릴 수 있게 해주는 API - 모든 canvas 는 Javascript 가 메인 html 에서는 짧게 canvas로 불러오기만 한다. -context : 캔버스에 그림을 그릴 때 사용 - fillRect : 단축함수(선들을 먼저 그리고(rect) fill(채우기) 할지 stroke(선만) 할지 선택해야 함) - (point 1) 기본적으로 코드에서 모든 단계들을 하나씩 다 해야한다 선을 만들고, 선을 만들고, 색을 적용해야한다. - (point 2) 경로를 나눌 수 있다. (befinPath) - moveTo ..
깃(2)
1. 파일 생성 2. vs code에서 폴더 열기 3. 폴더의 파일 생성 4. vscode 터미널 열기 5. 터미널에서 git init 입력 -> 폴더에 git 저장소 생성됨. 6. 이름과 이메일 등록함 : git config --globla user,name"..이름.." , git config --globla user,email"..이메일.." 7. git status 입력해서 상황 살핌 8. 아직 commit(백업) 되지 않은 파일 확인할 수 있음 9. git add-A 명령어로 모든 것을 (타임캡슐에)저장 10. git commit -m"...캡슐 이름..." 명령어로 commit(타임캡슐 묻음) 11. git status 명령어로 상황 살펴보면 더이상 commit(백업)할 ..
깃(1)
함께 공부하면서 직접 결과물을 낼 수 있는 프로젝트 팀에 참여하게 됐다. 아이디어 구상부터 서비스 완성까지 하기에 앞서 주어진 가이드에 맞춰 공부하기로 했다. 1. 필요한 이유 - 버전 관리 : 바뀌기 전 내용들도 중간 중간 저장(백업)할 수 있음. (나중에 언제 필요로 하게 될지 모름. ) 웹 또는 웹사이트 또는 게임 등 소프트웨어를 만들기 시작하면 파일들이 다 담기는 프로젝트 폴더가 있다. 그 폴더에서 git 을 시작하면 폴더의 모든 수정내역들이 저장되는 {.git} 이라는 폴더가 생긴다. commit이라는 명령어 실행 -> 폴더의 전체 내용이 박제됨. (의미있는 변화가 있을 때마다 박제, 용량 노차지 새로 만들 파일 생성, 수정된 내역 복원, 지웠던 파일 복구 애매할 때 : 가지치기 ..
리액트(7)
리액트 = 사용자 인터페이스를 구축하는 자바스크립트 라이브러리 리액트 = 컴포넌트가 전부 컴포넌트 = 스타일을 만드는 Html 코드와 CSS 코드 그리고 어떤 로직을 위한 자바스크립트의 결합 : 각각의 빌딩 블럭 리액트 장점1 = 재사용 가능(반복을 피함) 리액트 장점2= 코드베이스를 작고 관리 가능한 단위로 유지 가능 (하나의 명확한 과제와 초점에 대해 집중 가능 ) ------------------------------------------ 본격 실습 ---------------------------------------------------------- * 리액트 코드 = 결국 자바스크립 코드 * index.js = 가장 먼저 실행되는 파일 * npm start 프로세스 - 개발자 서버 가동하고 코..
리액트(6)
배열 관련 내장함수 : map (여러개의 데이터를 한 번에 다른 형태로 변환하기 위해서 사용) const numbers = [1, 2, 3]; 문법 : const doubleNumberArray = numbers.map( (num) => { 배열의 원소인 숫자 1,2,3에서 각 실행됨 매개변수(이름 원하는 대로) returm num * 2; }); console.log(numbers); //[ 1, 2, 3 ] console.log(doubleNumArray); // [2, 4, 6] 자바스크립트 요약 1. 화살표 함수 - 문법 : const 무념상 = () => { console.log('코딩천재'); } - 생략 1. 정확한 argument 가 있는 경우 괄호 생략 const callMe = name..
리액트(5)
*스프레드와 다른점 = 스프레드 : 모든 원소와 프로퍼티 가져와서 새 배열이나 객체 또는 우리가사용하는 어떤 것에 전달. = 디스트럭쳐링 : 원소나 프로퍼티 하나만 가져와서 변수에 저장. * 배열 디스트럭쳐링 마치 새 배열 생성하는 모양새이지만 변수 a와 b에 Hello 와 Max 각각 할당 ex) const numbers =[1,2,3]; [num1, , num3] = numbers; console.log(num1,num3); // 1,3 * 객체 디스트럭쳐링 배열을 디스트럭쳐링 해서 가져올 프로퍼티 순서 정하는 곳에 → 중괄호 사용 왼쪽에 {name} 넣고 오른쪽 객체의 name 프로퍼티를 대..
리액트(4)
자바스크립트는 기본형과 참조형으로 나뉨. - 기본형 : const number = 1; - 참조형 :const num2 = number; ( 값 1을 num2에 복사) ( 참조형에는 객체와 배열이 있음.) - 또 다른 예시 const person = { name: 'Max' }; const secondPerson = person; console.log(secondPerson); // 'Max' 객체 person 은 메모리에 저장 상수 person 에는 메모리에 있는 주소를 가리키는 포인터를 저장 person 을 seconPerson 에 할당하면 포인터가 복사될 것 -------------------------------------------------------- 만약 복사된 것을 가진 다음에 perso..
리액트(3)
*스프레드와 다른점 = 스프레드 : 모든 원소와 프로퍼티 가져와서 새 배열이나 객체 또는 우리가사용하는 어떤 것에 전달. = 디스트럭쳐링 : 원소나 프로퍼티 하나만 가져와서 변수에 저장. * 배열 디스트럭쳐링 마치 새 배열 생성하는 모양새이지만 변수 a와 b에 Hello 와 Max 각각 할당 ex) const numbers =[1,2,3]; [num1, , num3] = numbers; console.log(num1,num3); // 1,3 * 객체 디스트럭쳐링 배열을 디스트럭쳐링 해서 가져올 프로퍼티 순서 정하는 곳에 → 중괄호 사용 왼쪽에 {name} 넣고 오른쪽 객체의 name 프로퍼티를 대..
리액트(2)
클래스(class) 이해하기 : 객체를 위한 핵심 청사진 같은 것 * 자바스크립트 객체가 되는 경우 : class키워드로 정의되고, 프로퍼티(name, call)와 메소드('Max', 함수)를 가질 수 있다. class Person{ name='Max' call = ()=>{...} * 프로퍼티와 메소드 추가 : new 키워드 사용 const myPerson = new Person() myPerson.call() console.log(myPerson.name) * 프로토타입 class Human { constructor() { this.gender = 'female'; } printGender() { consol.log(this.gender); } } class Person extends Human { ..