javascript

무게 변환기다. 숫자(사진에서는 파운드 기준)을 넣으면 그램과 킬로그램, 온스로 변환해주는 프로그래밍이다. 처음 페이지를 열었을 때 그램, 킬로그램, 온스 창이 닫혀있다가 input 창에 숫자를 입력하면 즉시 변환된다. 별 거 없어서 빠르게 진행할 것이다. 일단 숨기기

입력값을

이미지 슬라이드다. 하얀색 버튼을 누르면 다음 사진으로 넘어간다. 대충 생각해보면 이미지의 width만큼(검정 테두리의 크기)사이즈를 정해놓고 next 버튼을 누를 때마다 translate 하면 될 거 같다. html은 넘기고 js부터 보자. 변수 slide는 이미지들

마치 타자를 치고 있는 것처럼 글자가 하나씩 등장하는 타입 라이팅이다. 깜빡거리는 커서는 animation으로 해결 가능하다. 먼저 커서를 만들어보자!htmlCSS글자가 나올 부분인 aboutme-typing에 relative를 주고::before 를 만든다. 그리고

![](

숫자로 점수를 주면 별이 변하는 스타 레이팅이다. 어제 하다가 막혀서 심기일전 하고 다시 만들어 보겠다.html, css 생략 뭔가 엉성하지만 js로 기능 구현이 중요하기 때문에 넘기도록 한다. 내가 생각한 순서는 일단 selcet에서 item을 고르면 star r

class가 총 3개 필요하다. constructor로 title, author, isbn을 담은 , 입력한 book input을 화면에 출력할 . 안에는 사용자의 입력을 받아 실행된느 함수들이 있다. display(), add(), delete(), showAler

비교연산자"===" 좌, 우항의 데이터 타입과 정보가 일치해야 한다."==" 데이터 타입이 다르다고 해도 정보의 의미가 같으면 (1 과 "1") true가 된다.undefined는 값을 찾지 못하는(정의 되지 않은) 것 null은 값이 없는 것. 반복문조건이 true

지역 변수 / 전역 변수유효범위(Scope)는 변수의 수명을 의미한다. 여기서 포인트는 fscope() 함수가 함수 밖 변수에 접근할 수 있다는 것함수 안에 vscope를 선언하면 그 값을 가진다. global의 경우 전역변수, local은 지역변수vscope에 재할

자바스크립트에서 함수도 객체다. 함수는 값이다. 함수 a는 변수 a에 담겨진 값이다.또한 함수는 객체의 값으로 포함될 수 있다. b는 객체 안에서 변수 역할을 하는 것을 속성(property)라고 한다. property에서 저장된 값이 함수면 즉, 객체의 속성을 값으로

함수의 인자로 함수를 전달할 수 있다. 이것이 콜백의 시작점. > obj.sort() 여기서 매세드 " . " 앞에 있는 것은 객체

클로저란 내부함수가 외부함수의 context에 접근할 수 있는 것을 뜻함. inner는 내부 함수 inner 함수 기준으로 otter는 외부함수다. 함수 안에 함수를 선언하면 응집성이 높아진다. 변수 title을 inner()에서 빼어 outter() 안에 정의했다.

함수를 호출하는 방법은 여러가지다. 아래는 기본적인 호출 방법자바스크립트에서 함수는 객체다. 객체는 속성이 있다. 그 속성에 값이 있다면 프로퍼티고 함수가 있다면 메서드가 된다. 위 예제에서 func는 Function이라는 객체의 인스턴스다. func는 부모의 메서드를

객체란 서로 연관된 변수와 함수를 그룹핑한 것. 객체 내 변수는 프로퍼티 / 함수는 메서드person 이라는 객체를 만들고 프로퍼티 name과 메서드 introduce를 할당했다. introduce의 함수에는 this.name을 포함한 string을 리턴한다. 여기서

전역 객체는 특수한 객체고 모든 객체는 이 객체의 프로퍼티다. 함수 func() window라고 하는 전역 객체의 메소드다. this는 함수를 어떻게 호출하느냐에 따라 지칭하는 대상이 달라진다. 함수 내에서 호출 맥락(context)을 의미한다. this는 함수 안에서

상속은 부모의 로직을 재활용 할 수 있다는 점에서 객체 지향 프로그래밍에서 중요한 개념이다. 위 코드를 조금 바꾸면 이렇게 된다. 결과는 똑같다. Person이라는 함수를 만들고 함수 외부에 Person 함수(=객체)에 프로토타입이라는 프로퍼티를 부여하고 거기에 다

총 3개의 객체가 있다. GrandMother, Mother, Me 그리고 순서대로 Me는 Mother를 상속하고 Mother는 GrandMother를 상속한다. 객체 obj는 Me 생성자 함수로 객체를 만들고 GrandMotherProp에 접근하면 true가 나온다.

자바스크립트의 모든 객체는 Object 객체를 상속받는다. 그래서 모든 객체는 Object 객체의 프로퍼티를 가지고 있다. Object.key()Object.key()는 배열에 담겨있는 키를 가져온다. return은 배열로 한다. Object.prototype.toSt

데이터 타입에는 원시 데이터 타입과 객체 데이터 타입이 있다. 원시 데이터 타입은 기본 데이터 타입, 객체 데이터 타입은 참조 데이터 타입으로도 불린다.숫자, 문자열, boolen, null, undefined 는 primitive type(원시 타입) 그 외는 객체(

Immutability는 데이터의 원본을 훼손하는 것을 막는 것원본 데이터를 훼손하지 않고 데이터를 다룬다. obj을 복사한다고 했을 때 Object에 assgin이라는 메서드를 주면 된다. 첫 번째 인자에 빈 객체를 그리고 두 번째 인자에 복사할 객체를 주면 객체가

dynamic typing language자바스크립트는 런타임에서 타입이 정해지기 때문에 타입에 유의해야한다. class는 틀 object는 틀을 이용하여 찍어낸 데이터를 담는다(instance)class 사용자가 실수하는 것을 보완하기 위해 get()으로 값을 리턴

빈 배열의 타입은 객체다. slice, splice array.slice(시작, 끝) 끝으로 정한 인덱스 바로 앞 요소까지. 시작 인덱스와 끝 인덱스 같으면 빈 배열. 새로운 요소 포함한 배열 반환. array.splice(시작, 삭제할 요소 개수, 추가할 요소)원본을

자바스크립트는 동기적이다. 호이스팅 이후 동기적으로 코드를 처리한다.호이스팅이란 var와 함수 선언들이 최상단으로 올라가는 것.콜백엔 두 가지가 있다. 즉각적 동기적으로 실행하는 Synchoronous call back 그리고 언제 실행되는지 예측 불가인 Asyncho

0 또는 1만 표현할 수 있는 하나의 메모리 조각을 비트(bit)라고 한다. 메모리는 많은 비트로 구성되어 있고 각 비트는 고유한 식별자를 통해 위치를 확인할 수 있다. 효율을 위해 1바이트를 8비트로 지정했다. 모든 데이터는 바이트의 식별자, 메모리 주솟값으로 서로를

wecode 스터디 발표용으로 this 다시 정리자바스크립트에는 함수(function)와 메소드(method)가 있다. 함수는 독립적으로 기능을 수행하고 메소드는 자신을 호출한 객체에 관한 기능을 수행한다. 함수와 객체(메소드) 구분이 느슨한 자바스크립트에서 this는

wecode 스터디 발표용으로 프로토타입 요약 자바스크립트 모든 객체는 자신의 부모 객체와 연결되어 있어서 부모 객체의 프로퍼티와 메소드를 상속 받아 사용할 수 있다. 이러한 부모 객체를 Prototype(프로토타입) 객체 혹은 Prototype(프로토타입)이라고 한

form이 있고 js 에서 지정한 조건을 만족하면 다음 div으로 넘어간다. 만족하지 않으면 배경색이 바뀌고 애니메이션이 호출된다. ![](https://images.velog.io/images/dongha1992/post/04008d9f-a4db-4e18-991

출처 : https://www.youtube.com/watch?v=FN_D4Ihs3LE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=10

promise는 비동기적 수행을 call back 대신 수행할 수 있는 objectPromise 생성자 함수에 파라메터로 resolve와 reject를 받는다. resolve는 기능이 정상적으로 수행해서 마지막에 최종 데이터를 전달한다. reject는 에러가 생기면 중

콜백으로 물린 코드를 promise로 바꾼다.loginUser의 파라메터로 id, password만 주고 return 값으로 promise를 준다. getRoles도 바꿔준다. then으로 콜백지옥 해결!

async와 await은 promise를 간결하고 동기적으로 실행되는 것처럼 만들어준다. 유저의 데이터르 받아오는 fetchUser라는 함수가 있고 10초가 걸린다. user라는 변수에 리턴값을 할당할 때 동기적 실행은 10초가 걸린다.(그동안 자바스크립트 엔진은 다른

startsWith 인자의 string이 객체의 시작 string과 같으면 true반환(endsWith도 있음)includes객체가 인자의 string을 가지고 있으면 true 반환for in은 객체 순회용 근데 배열도 순회 가능하다. for in의 문제점은 자신이 가

set은 set이란 타입이다. 중복없이 유일한 값을 저장할 때, 이미 존재하는지 확인할 때 사용한다.dongha라는 값이 중복되어 set에 담기지 않는다. has로 요소가 있는지 찾을 수 있다. 삭제는 delete 메서드로 weakset은 참조를 가지고 있는 개체만 저

Object create new 연산자 대신 Object.create로 객체를 생성할 수 있다. create는 프로토타입 기반으로 객체를 만드는 것이고 속성은 개별적으로 추가해야 하는 단점이 있다. assign을 쓰면 개선 가능하다. Object assign a

object가 변경, 추가, 삭제 됐을 때 부수적인 일을 실행한다.myObj를 수정할 것이다.어떤 변화를 주면 set 함수가 자동으로 호출된다. get 함수는 리턴을 하는데 get 함수 파라메터로 target, property, receiver를 준다. receiver

웹팩은 bundler다. 서로 다른 패키지의 충돌을 방지하기 할 수 있다. 자바스크립트 뿐만 아니라 여러 모듈을 묶을 수 있다. 애플리케이션의 크기가 커지면 파일을 분리해야 한다. 이때 분리된 파일 각각을 모듈이라고 부른다. 모듈은 클래스 하나 혹은 복수의 함수로 구성

wecode 스터디 발표용으로 요약main.jsindex.jsmain, index 파일 둘 다 하나의 html 에서 실행되기 때문에 다른 파일에서 func라는 이름의 함수를 사용하면 충돌 가능성이 있다. 이를 보완하기 위해 웹팩을 사용한다. 웹팩은 모듈 번들로써 여러

순수함수 오직 return으로 소통하는 함수 add 함수는 인자의 값을 변경하지 않고 외부 상태도 변경하지 않는다. obj1을 참조하면서 새로운 객체를 만들어 리턴한다. 함수형 프로그래밍은 초기값을 유지하면서 값을 다뤄나간다. 일급함수 자바스크립트에서는 함수를

공이 화면 안에서 움직이는 것은 매 프레임마다 공이 새롭게 만들어지는 동시에 화면이 refresh되는 것이다. setInterval로 draw함수가 계속 실행되게 해주면 된다. 원이 프레임마다 움직이게 하려면 변수 좌표를 사용해야 한다.ctx.arc()에 지정 좌표 대

3일 때, 5일 때, 3과 5의 배수일 때, 그 외 조건에 따라 출력하는 함수다. 디버깅을 위해 에러를 넣어주면 else if로 해두면 3과 5의 배수가 걸리는 구간은 이미 앞에서 실행되어서 실행되지 않는다. 이제 에러를 찾고 싶은 부부에 debugger를 넣는다. d

자바스크립트는 싱글 스레드 프로그레밍 언어다. 즉, 한번에 하나의 단일 콜스택만을 가지고 있다는 뜻, 하나의 프로그램은 하나의 코드만 동시에 실행할 수 있다!싱글 스레드이기 때문에 비동기 콜백을 사용해야 한다. 비동기 콜백의 동작원리는 아래와 같다.Runtime ->

좋은 코드를 설계하는 것일반적인 형태인 객체 리터럴사용하기 쉽지만 문제는 보안에 취약하다. 외부에서 프로퍼티가 변경 가능하다. 그래서 익명함수나 클로저로 변수를 보호해야 한다.하지만 이렇게 하면 또 새로운 phone을 만들기 위해서 계속 즉시실행함수를 실행해야 하는 불

1번 nav를 누르면 내가 산 물건 정보가 나옴. nav와 cartInfo 둘 다 이벤트 리스너로 toggl로 class list 추가한다. btn들 다 가져와서 forEach한다. 이제 각 btn에서 이벤트 리스너로 이름/이미지/가격을 가져와야 한다. src를 가져와

csscheckbox 활용. input은 가리고 lable안에 span으로 원을 만들어서 checkbox 자리에 놓는다. scale과 transform 으로 커지게 한다. 투두 밑에 선을 긋는 건 전체 div(하나의 투두)에 after로한다. checked되었을 때도

jump-slide 로직 시작 doodle-jump 로직 > 간격으로 장난쳐서 jump하면 통나무들이 아래로 움직이고 충돌감지해서 밟으면 다시 점프한다. 점프인지 왼쪽인지 오른쪽인지 boolean과 함수를 잘 사용하자. 시작 > 먼저 플랫폼을 만든다. for

https://namu.wiki/w/2048(%EA%B2%8C%EC%9E%84)2048 게임 룰은 위 링크 참고내 생각로직은 간단하다. 먼저 게임이 시작되면 board에 2 혹은 4가 랜덤으로 배정된다. 그리고 방향키를 누르면 모든 숫자가 그 방향으로 이동하며

실행할 코드에 제공할 환경 정보들을 모아 놓은 객체. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this 값을 설정한다. 동일한 환경에 있는 코드들을 실행할 때, 필요한 환경 정보들을 모

콜백 함수란 다른 코드의 인자로 넘겨주는 함수다. setInterval을 호출할 때 두 개의 매개변수를 전달하는데 그중 첫 번째는 익명 함수, 두 번째는 300이라는 숫자. 이 코드를 조금 바꿔서setInterval이라고 하는 다른 코드에 첫 번째 인자로서 cbFunc

자바스크립트는 프로토타입 기반 언어. 클래스 언어는 상속을 사용하지만 프로토타입 기반은 어떤 객체를 원형으로 삼고 이를 복제(참조)한다. let instance = new Constructor 프로토타입의 핵심 내용어떤 생성자 함수를 new 연사자와 함께 호출하면 Co

카테고리를 누르면 해당 카테고리 페이지로 넘어가고 해당 카테고리에 맞는 데이터를 서버에서 받아 와야 한다. 즉, router 후에 query를 가져와서 그것을 서버에 전송해야 하는 것이었다. 다른 팀원의 파트였는데 프로젝트 기간 중에는 결국 시간적 압박으로 해결하지 못

키가 있는 데이터를 저장한다는 점에서 객체와 유사하다. 하지만 키에 다양한 자료형을 허용한다. 배열처럼 삽입 순서를 기억한다. 기본 매서드무려 키로 객체를 허용한다. 거의 깡패 수준이다. 요소 순회는 for..of로 한다.객체를 맵으로 바꾸기Object.entries를

자료구조를 구성하는 요소도 자신이 속한 자료구조가 메모리에 남아있는 동안 도달 가능한 값으로 취급되어 메모리에서 삭제되지 않는다. 객체의 프로퍼티, 배열의 요소, 맵/셋을 구성하는 요소들이 이에 해당!맵에서 객체를 키로 사용한 경우, 맵이 메모리에 있는 한 객체도 메모

제곱해 주는 함수 pow다. 이제 두 가지 방식으로 pow를 만들어 보자!4 아니고 16자기 자신을 호출하고 b값, 즉 회수를 줄여간다. b가 1이 되면 실행을 종료한다. 모든 임직원의 급여 더하기 회사의 임직원을 객체로 표현했다. sales 부서의 John과 Alic

인자로 몇 개의 인자가 들어올지 모를 때!...args로 이렇게 변수를 모을 수 있다. arguemnts라는 유사 배열 객체를 이용하면 인덱스를 사용할 수 있다!\*\* 화살표 함수에서는 사용 불가능!전개 연산자는 반대로 배열을 펼칠 때 사용한다. 함수를 호출할 때 .

먼저 선언+할당된 let이냐 함수 다음에 할당만 된 변수냐The answer is: Pete.A function gets outer variables as they are now, it uses the most recent values.Old variable value

와 진짜 신기하다 아름답다

라이브 코딩 당시 내 심정