일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- CDD
- self reliance
- css
- 코드스테이츠
- 프론트엔드
- OOP
- JS
- cta버튼
- 객체지향
- 호스트인식
- codestate
- cta button
- frontend
- 프로토타입
- css in js
- 자바스크립트
- Prototype
- 회고
- 계산기
- WAI-ARIA
- 참조자료형
- 개발자
- Router
- 원시자료형
- Javascript #코드스테이츠
- condestates
- codestates
- JavaScript
- 코드스테이스
- html
- Today
- Total
목록전체 글 (78)
jh.nrtv

프로토타입 체인 https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes Object prototypes - Web 개발 학습하기 | MDN Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메소드를 추가하기 위해 프 developer.mozilla.org -> JavaScript는 흔히 **프로토타입 기반 언어(prototype-based language)**라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 **프로토타입 객체(prototype object)**를 가진다는 의미..

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes Object prototypes - Web 개발 학습하기 | MDN Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다. 본 문서에서는 프로토타입 체인이 동작하는 방식을 설명하고 이미 존재하는 생성자에 메소드를 추가하기 위해 프 developer.mozilla.org -> JavaScript는 흔히 **프로토타입 기반 언어(prototype-based language)**라 불립니다.— 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 **프로토타입 객체(prototype object)**를 가진다는 의미입니다. 프로토타..

객체 지향 프로그래밍의 등장 이전에는 절차지향 프로그래밍 ( c, 포트란 등 ) 이 있었다. 객체 지향 프로그래밍 (OOP)의 등장 단순히 별개의 변수들을 순차적으로 발생시키는 것에서 더 나아가, 데이터와 기능이 별개로 취급되지 않고 한 번에 묶여서 처리할 수 있는 객체 지향 프로그래밍이 등장했다. OOP (Object Oriented Programming ) OOP는 프로그램 설계 철학 중 하나이다. OOP의 모든 것은 '객체'로 그룹화된다. OOP의 대표적인 특성은 네 가지가 있는데 이를 통해서 코드의 반복을 줄이고 재사용성을 높일 수 있다. 클래스 (= 청사진 -> 세부사항 없는 상태 ) , 인스턴스 ( 클래스통해 만들어진 객체 ), 생성자 ( 인스턴스에 세부사항 넣음) OOP 특성 4가지 - 캡슐..

객체 지향 프로그래밍은 청사진인 class를 만들고 , 그 청사진을 기반으로 한 객체인 instance를 만드는 프로그래밍 패턴이다. 새로운 class를 선언하기 위한 방법은 ES5와 ES6이 다르다. class 선언 문법은 다음과 같다. // ES5 function classname (parameter1, parameter2, parameter3) { } // ES6 class classname ( parameter1, parameter2, parameter ) { } 인스턴스를 만들기 위해서는 new 키워드를 사용한다. let instanceName = new className ('aaa', 'bbb', 'ccc') let instanceName2 = new className ('aaa2', 'bbb..
벌써 부트캠프를 시작한 지 4주의 시간이 흘렀다는 것이 믿기지 않는다. 지난 4주를 되돌아보면 내 프로그래밍 실력이나 지식은 분명 많이 성장했다. 다만 실력과 이외에 열정이나 에너지는 힘이 많이 빠졌다는 생각이 든다. 부트캠프 합격 당시에 소중한 기회를 준 캠프측에 감사했던 마음과, 6개월 불태워보겠다던 나는 온데간데 없고 '이정도 이해하면 됐겠지 ...? '하는 합리화만 남은 것 같다.🥲 캠프에는 정말 존경할만한 멋진 분들이 많이 계시는 것 같다. 남은 기간동안 동료분들의 실력을 질투하는것보다 자극받고 나를 발전시키는 시간이 되었으면 좋겠다.🍀 KPT Keep 내 기억력을 믿지 않고 꾸준하게 블로그에 기록하고자 했다. 욕심을 버리고 검색을 생활화했다. 규칙적인 생활, 운동 Problem 일일 블로깅이 ..
한줄요약 원시 자료형은 변수를 선언하고 값(value)를 직접 할당하기에 하나의 데이터를 담고있다. 반면 참조 자료형은 원시 자료형이 아닌 모든 자료형으로, 변수를 선언하고 heap의 주소(reference)를 할당하기에 동적으로 변화하는 자료형이다. 예상 꼬리질문 1. 원시 자료형에는 어떤 종류가 있나요? 원시 자료형의 정의에 해당하는 '객체가 아니면서 메소드를 가지지 않는' 여섯 개의 타입이 있다. string, number, bigint, boolean, undefined, symbol 이 있다. 추가적으로 null은 원시타입과 거의 비슷하게 사용되지만 엄밀히 따지면 객체이다. 2. 주소를 할당한다는 것이 무슨 의미인가요? 참조자료형을 위한 특별한 저장공간을 heap 이라고 하는데 그곳에서 해당 참..

JavaScript에서 이야기하는 스코프 역시 무언가 제한된 범위를 잘 들여다보기 위해 사용되는 개념이라고 추측해 볼 수 있습니다. 컴퓨터 공학, 그리고 JavaScript에서의 스코프는 "변수의 유효범위"로 사용됩니다. 이번 챕터에서는 스코프(Scope)의 종류와 각 선언 키워드 (let, const)를 어떻게 사용해야 하는지 알아봅시다. 스코프와 주요 규칙 이처럼 변수에 접근할 수 있는 범위가 존재합니다. 중괄호(블록) 안쪽에 변수가 선언되었는가, 바깥쪽에 변수가 선언되었는가가 중요합니다. 이 범위를 우리는 스코프라고 부릅니다. 스코프 안쪽 -> 바깥쪽 변수에 접근 가능하지만 스코프 바깥쪽 -> 안쪽의 변수에 접근 불가 지역변수는 전역변수보다 더 높은 우선순위를 가진다. 1. 지역스코프 안에 새로운 ..
타입 기초에서 학습한 number, string, boolean과 같은 고정된 저장 공간을 차지하는 데이터를 모두 원시 자료형(primitive data type)이라고 합니다. 반면에 대량의 데이터를 다루기에 적합한 배열과 객체는 참조 자료형(reference data type)이라고 분류합니다. 이런 분류는 데이터를 저장하는 방식에 따른 분류입니다. 원시 타입 데이터 (원시 자료형) number, booleran, null, undefined, string 사물함에 이름표 달고 그 안에 바로 데이터를 넣음 데이터 값을 복사하기에 복사 후 변경해도 기존의 데이터에 영향이 없음 참조 타입 데이터 array, object, function heap 이라는 빈공간을 달고 사물함에 이름표를 달고 주소를 넣는다..

배열 기초 배열은 순서가 있는 값 인덱스(번호)와 요소(element)로 이루어진 값 let my NUmber =[ 73, 98, 86, 61, 96]; myNumber[3] // 3번째 인덱스 조회 // 값 변경 myNumber[3] =200; // 200으로 값 변경 let fruit= ['banana', 'apple','pineapple';] fruit[2] // 'apple' fruit[3] // undefined 2차원 배열 - 행렬과 비슷 method 메소드 종류 ( 온점을 이용한 명령 , 배열의 앞에X 뒤에 나옴 ) myNumber.length ; 배열 길이 반환 myNumber.push(96) ; 배열 끝에 요소(element) 삽입 myNumber.pop() ; 배열 마지막 값 삭제 배열..
계산기 목업 만들기 (css) 버튼 입체감 만들기 box-shadow : 1px 1px 1px 1px black inset; box-shadow 속성에서 1px 1px 1px 1px black inset 값들은 차례로 각각 다음을 의미합니다. h-offset: 필수, 그림자가 수평방향으로 얼마나 떨어진 위치에서 시작할 지를 결정합니다. 양수면 오른쪽으로 떨어진 위치에서 시작하고, 음수면 왼쪽으로 떨어진 위치에서 시작합니다. v-offset: 필수, 그림자가 수직방향으로 얼마나 떨어진 위치에서 시작할 지를 결정합니다. 양수면 아래쪽으로 떨어진 위치에서 시작하고, 음수면 위쪽으로 떨어진 위치에서 시작합니다. blur: 선택, 그림자를 흐리게 할 정도를 결정합니다. 클수록 흐려집니다. spread: 선택, 그..