Javascript

[30일차] HTML Layout / Bootstrap / HTML canvas / 개발환경구축

20220901(목) 목차 - HTML Layout - Bootstrap - HTML canvas - 개발환경구축 header - (1) 문서 상단에 내용을 배치할 때 사용한다. - (2) 페이지 안의 특정 영역 안에서도 header 태그 사용이 가능하다. nav - 내비게이션 링크 모음 바 section - 문서의 내용을 담으면 된다. article - section과 비슷한 느낌이 부분이 있지만, article을 모아서 관리할 수 있는 게 section aside - 사이드 바 쪽 내용(section & article - 메인 내용 / aside - 그 외 내용) https://www.w3schools.com/html/html_layout.asp HTML Layout El..

[28일차] html / css 복습 / JavaScript / 함수 / Object / JSON / Event

20220829(월) 목차 - html 복습 - CSS 복습 - JavaScript - 함수 - Object - JSON html : 정보(tag + content)의 집합 = meta-data real-data 정보 = meta-data + real data => Element = tag + contents : h1태그가 글자를 크게 출력하는 것이다. X / "첫번째 헤드라인"이라는 "의미"를 가지고 있음! O : 그냥 굵게 만들기 / : 해당 콘텐츠의 중요성 tag : 태그를 사용 시 가급적 그 태그에 의미를 부여한다는 접근에서 해야함 ex) 내비게이션 바를 만들 경우의 태그 사용 div로 묶는 것으로 끝내지 말고 / css의 기능을 만족시키기 위해 필요한 태그 정보 역할을 하는 - ..

[27일차] Video 이론 / 디코딩 / Real Apple Pro canvas

20220826(금) 목차 - Video 이론 - Real Apple Pro canvas RGB 8bit 8bit 8bit ➡ 256 x 256 x 256 = 1600만 컬러 1920 x 1080 이미지 한 장에 (1920 x 1080 x 3byte) = 6Mbyte ➡ 미쳤다! 너무 용량 커 초당 30프레임으로 해야 인간이 영상을 부드럽다고 판단 20분짜리 비디오 하나 계산해보면 20분 x 60초 x 30프레임 x (한 프레임당) 6Mbyte ➡ 21만 6천Mbyte ➡ 210GB ➡ 미쳤다! 너무 용량 커 데이터를 압축시키자! 1) 손실 압축 - 필요없는 데이터를 걷어낸다. 2) 무손실 압축 - 패턴을 보고서 압축하는 방식(ex. zip 알고리즘) 111000/111000/11..

[26일차] scroll 시 발생되는 이벤트 핸들러

20220825(목) 목차 - scroll 할 때 발생되는 이벤트 핸들러 - currentSection1 이벤트 핸들러 { 1. yOffset 2. sectionYOffset scrollProc(); } 스크롤 할때마다. 1) yOffset 계산 2) sectionyOffset 계산 3) mode 설정 4) scrollProc() 호출. ➡ playAnimation() 스크롤 할 때 우리가 적용해야하는 css값을 계산해서 animation을 적용하기 ➡ 한 범위 내에서만 Animation 돌게 하기 //현재 섹션에서 적용해야할 CSS값을 계산하는 함수. const calcValue = function(values) { ..

[24일차] VIEW / WinMerge / Opacity / Translate

20220823(화) 목차 - VIEW - WinMerge - Opacity - Translate - 빨간 상자 : VIEW (스크롤 바, 상단 프레임 미포함된 정보만을 보여주는 이 부분) - 스크롤 바, 상단 프레임 부분 : FRAME - VIEW + FRAME = WINDOW - VIEW의 높이 : window.innerHeight WinMerge 다운로드 링크 https://winmerge.org/downloads/?lang=en Download WinMerge - WinMerge Download WinMerge The easiest way to install WinMerge is to download and run the Installer..

[23~24일차] position / 개인 프로젝트 진행

20220822(월) 목차 - position - 개인 플젝 진행 position 이란? - html 문서에서 element를 배치하는 방법 - element의 위치를 지정하는 방법 static 기본값 relative 자기 자신 기준으로 배치 - 일반적인 문서 흐름에 따라 배치 #two { position: relative; top: 20px; left: 20px; background: blue; } absolute 부모 요소를 기준으로 배치 - 일반적인 문서 흐름에서 재거하고, 페이지 레이아웃에 공간도 배정 X - 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치 - 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록 기준 #two { position: abs..

[22일차] flex / Stack / Queue

20220819(금) 목차 - CSS, flex 복습 - Stack - Queue - stack : 차곡차곡 쌓아 올린 형태의 자료구조 - push : stack에 data를 넣는 연산 - pop : stack에서 data를 빼는 연산 - Stack-Full 인 경우, SP(Stack Pointer) 값은? 마지막에 머물러있다. ➡ 더이상 못넣어,,push 미실행 const max = 5; // 데이터 개수의 최대치 const stack = []; // 스택 자료구조 let SP = 0; // Stack Pointer let count = 0; // null을 리턴한경우 stack full..

[18일차] 알고리즘 / 버블 정렬

20220812(금) 목차 - 알고리즘 - 버블 정렬 의미 : 데이터에 관한 문제를 해결하는 방법(n가지) 알고리즘 성능 평가 방법이 많은데 어떤 게 좋은거지? ➡ 성능평가를 해서 좋은 것을 사용하려고 한다. 알고리즘이 주어진 문제를 해결하는데 걸리는 시간과 데이터 입력량의 함수 관계를 해석하는 과정 BigO : 최악의 경우를 기준으로 정확하게 보는게 아니라 패턴으로만 보겠다. (어떤 것이 더 좋은 알고리즘인지) bubble sort - 앞에서부터 두 수를 비교, 큰 수가 뒤로 가는 형식으로 맨 뒷자리 부터 큰 수가 채워지게 된다. 더보기 // [선생님 풀이] // asc = ture : 오름차순 , asc = false : 내림차순 // ...ar은 파..

[17일차] Scope / 호이스팅 / 문서 객체 / Event

20220811(목) 목차 - Scope - 호이스팅 - 문서 객체 - Event 개념 - 변수가 유효성을 가지는 범위 - 스코프는 기본적으로 프로세스 메모리 맵의 구조에 의존적. - 선언된 위치에 따라 스코프가 결정 - 같은 이름으로 변수가 선언된 경우 스코프가 겹칠 수 있음. - 스코프가 겹칠 때 어떤 변수가 우선권을 가지는지 판단하는 기능이 필요하며 이러한 기능을 식별자 해석(identifier resolution)이라고 함 1. 모든 변수는 메모리에 올라간다. 2. 식별자 결정 global 영역에 변수가 할당되면 어디서나 접근이 가능하다. 전역 변수에서 지역변수로는 접근 불가능 지역변수에서 전역 변수로는 접근 가능 만약, 지역변수와 전역 변수의 이름이 같다면? 가까운 ..

[16일차] new 연산자 / prototype / JSON / Math.@

20220810(수) 목차 - new 연산자 - prototype - JSON - Math.@ Heap에 Object를 할당하고 object의 ref 값을 리턴하는 연산자. const a = new Date(); 생성자 : Object를 초기화하는 function 1) 기본 생성자 (default Construction) - parameter X, JS 에선 기본 제공, 자동 호출 2) 비기본 생성자 (Overloaded Construction) - parameter O, 기본 제공이 아닐 수도 있다. const a = new Date(); const today = new Date(); 에서 괄호가 필요한 이유? ➡ 괄호 안에는 초기화할 값을 넣는 것이다! 생성된 객체는 기본생성자(..

[15일차] 객체지향 이론 / 객체형 / Object literal / JS 데이터타입

20220809(화) 목차 - 객체지향 이론 - 객체형 - Object literal - JS 데이터 타입 [과거] 게임 코딩하기 공격 함수/걷는 함수/뛰는 함수/방어 함수/용사 별 공격 함수/몬스터 별 공격 함수/등등 엄청나게 많이 필요함 미친 짓을 했다...! ↓ [현재] 지극히 인간적이게 변한 게임 코딩 칼{공격력/빛남/모양 등} / 용사{공격/걷기/뛰기/방어 등} ➡ 용사{칼/방패/ 등등} 합치자! * 정보공학 구조적 기법 : 패러다임 자체를 바꾸지 않는 한, 게임 코드 같은 것을 실세계에 적용하려면 답이 없다..! 우리가 실제 세계와 컴퓨팅 월드를 일치시킨 것이다. 일치시킨 것이 분리시킨 것보다 훨씬 더 낫다. C++탄생 C언어의 기능을 갖다 쓰되, 기능을 합치는 기능을 만..

[14일차] 콜백함수 (forEach / map / filter) / arrow / time

20220808(월) 목차 - 콜백함수 (forEach / map / filter) - arrow - time sugar_code : 문법적으론 맞진 않는데 사람들이 너무 많이 사용해서 쓰기로 한 코드 Garbage Collection : https://mangkyu.tistory.com/118 [Java] Garbage Collection(가비지 컬렉션)의 개념 및 동작 원리 (1/2) 1. Garbage Collection(가비지 컬렉션)이란? [ Garbage Collection(가비지 컬렉션)이란? ] 프로그램을 개발 하다 보면 유효하지 않은 메모리인 가바지(Garbage)가 발생하게 된다. C언어를 이용하면 free()라는.. mangkyu.tistory.com < 함수를 ..

[13일차] JS 함수 호출방식 / 가변 파라미터 / 디폴트 파라미터 / 콜백

20220805(금) 목차 - JS 함수 호출 방식 - 가변 파라미터 - 디폴트 파라미터 - 콜백 + 의미 가변적인 파라미터 개수를 처리하기 위한 기법 *로직은 비슷한데 파라미터 개수가 계속 달라질 때 = 1. 함수를 많이 만들어야 할 때, 2. 로직이 거기서 거기일 때 형식 : function function_name(…rest_parameter) { } // 최솟값 구하기 const getMin = function(...ar) // 끝없는 배열ar을 받는다 { // min : 최소값이라고 판단되는 값. let min = ar[0]; for(let i = 1; i ar[i]) {..

[12일차] for 응용 / function 응용 / Debugger

20220804(목) 목차 - 시험 리뷰 - for 응용 - function 응용 - Debugger 1. for 사용해서 국어 성적 합계 및 평균 구하기 // [국어, 영어, 수학] * 6 구조로 배열을 만든다. const score = [[80, 90, 74], [84, 94, 80], [80, 90, 88], [82, 86, 90], [92, 80, 80], [70, 80, 88]]; // 국어 성적 let kor_sum = 0; let kor_avg = 0; for (let i = 0; i // [심화] 함수로 더 해볼까? 배열을 집어넣어서 합계와 평균을 던져줘! const calcScore = function(ar) { let ..

[11일차] 함수 / 임시변수

20220803(수) 목차 - 함수 - 임시 변수 - 시험 함수 통에는 원인이 여러 개가 들어간들, 결과를 하나로 뽑아야 한다. console.log("abc"); 함수 : 호출 (call) ➡ parameter / Argument ➡ return value // 함수 기본식 const 함수명 = function() { } // 함수 호출하기 함수명 (); - 익명 함수 : 함수의 이름이 없음 (확장) // function prototype(함수원형) = 함수를 사용하는데 필요한 모든 정보 const add = function(val1, val2) { let result = val1 + val2; return result; } // 위에 들어가있는 영역과 들어가있지 않은 영역은 완전히 다른영..

[10일차] 반복문 for / while / 제어 break 와 continue

20220802(화) 목차 - 반복문 for - 반복문 while - 제어 break 와 continue if : 범위로 생각함 switch : 범위라고 생각을 안함 / 점으로 표시할 수 있으면 되도록 switch문 사용하기 switch 특징 : 깔끔하고 읽기좋고 readability가 확 늘어난다. 무엇(데이터 / 연산)이 몇번 반복되는지 ex) 구구단의 2단은 2와 *가 9번 반복된다. for(let i = 0; i < 9; i++) // for(초기값, 비교, 증감치) = loop Counter { console.log(i); } // {JS 코드} 2단 출력 1. for 문의 사용법 2. IPO 관점 3. loop Counter..

[9일차] JavaScript Switch / Array

20220801(월) 학습목표 - 분기문, 반복문, 배열 배우기 목차 - % 연산자 - index - ==와 ===차이 - ++a와 a++차이 - if-else 응용 - 선택문 Switch문 - 배열 Array _ 나머지(mod) 연산, 알고리즘에서 많이 사용됨 * 나머지를 구하는 연산자 % 1. x% n이라 했을 때 x에 어떤 값이 오더라도 결과는 n보다 작다. 2. x값이 증가하면 결과는 순환한다. 0 ~ n-1, 다시 0 ~ n-1 3. x < n인 경우 결과는 x이다. 컴퓨터는 나누기를 어떻게 할까? ➡ 컴퓨터는 나누기를 빼기로 구현한다. 더보기 12/3 (12%3 = 0) = 12 - 3 : 1번 뺌 = 9 - 3 : 2번 뺌 = 6 - 3 : 3번 뺌 = 3 - 3 : 4번 뺌 = 0 12/5..

[8일차] 프로그래밍 / Datatype 자료형 / if-else 문

20220729(금) 목차 - 프로그래밍이란? - Datatype 자료형 - JavaScript - 메모리 기계에 뭘 시킨다. 💢 결괏값이 나온다고 해서 좋은 코드가 아냐! : 컴퓨터는 유한성! 분류 (typeof : 얘 데이터 타입이 뭐야? ➡ 출력 값은 'number' 이렇게 따옴표 달린 문자로 나온다. 문자 입력 시 따옴표 없이 넣으면 typeof(abc) ➡ 'undefined'으로 나온다. ) 1) 기본형 : number (정수, 실수) / string (문자) / boolean (참, 거짓) / undefined / null 2) 객체형 : object 데이터 타입(size)을 만드는 방식 (자바스크립트에서 메모리를 할당하는 방식) 1) 미..

[7일차] 함수와 콘솔 / 논리 연산 / JavaScript / let i = 10; 이해

20220728(목) 목차 - 시험 리뷰 - 함수와 콘솔 - 논리 연산 - JavaScript 함수 (function) : 규칙 있는 관계 / 결괏값은 무조건 하나만 나온다! 입력은 여러 개다! (1) 함수는 계산식 (2) x(원인) parameter는 여러 개 가능 (3) y(결과) return value는 무조건 하나 콘솔 : 입출력 - 입력 콘솔 : 키보드 - 출력 콘솔 : 모니터 : 논리 연산 혹은 불 연산은 참, 거짓 두 가지 원소만 존재하는 집합에서의 연산이다. 비트 연산 논리연산자 (목적 : 거짓 or 참 알아내기 ↔ 사칙연산는 숫자를 알아내는 것이 목적) AND && 둘 중에 하나만 False라면 결과는 False다. OR보다 우선 OR || 둘 중에 ..