본문 바로가기

📒 JavaScript29

[JS Tam9생활] #3 객체와 프로퍼티 📌Object 객체 자바스크립트는 객체(object) 기반의 프로그래밍 언어 객체는 mutable (변경 가능한 값) 이다. 기본적으로 거의 모든것이 객체이므로 변경이 가능하다. 객체는 property로 구성된다 JS의 함수도 객체로 취급 : 함수 = property 프로퍼티 : 객체의 상태를 나타내는 값(data) 메서드: 프로퍼티를 참조하고 조작하는 동작 property값이 함수인 경우 객체에 묶여있는 함수 ex) increase : 메서드 num :프로퍼티 var counter = { num : 0, increase : function(){ this.num++ } }; immutable 변경 불가능한 값 const 변수, Object.freeze 객체 mutable 변경 가능한 값 객체,함수,배열,.. 2021. 7. 17.

[JS Tam9생활] #2 FE 상태관리 프론트엔드의 상태관리 프론트엔드를 개발하면서 느끼는 마주하는 어려움 중 하나는 상태 state관리 FE의 상태는 웹 상의 다양한 요소들이 가지고 있는 값을 말하며 이 값들은 사용자의 선택과 방향에 따라 변화한다. 이 상태를 어떻게 관리하고 제어하느냐에 따라 코드의 일관성이 결정되는데, 프론트엔드의 상태관리는 한 곳에서 하면 가장 좋다. 보통은 최상위 component 나 storage에 보관한다. 그렇다면 설계는 ? 보통 아래와 같이 component를 구성하여 부모가 state를 관리하며 상태 변화에 따라 자식 component는 rendering만 해주는 구조로 설계하는 것이 좋다. 부모 component : 상태를 가지고 있는 않음 자식 component : 상태를 가지고 있지 않음 ex ) Tod.. 2021. 7. 16.

[JS Tam9생활] #1 DOM DOM ( Document Object Model) : 프로그래밍 언어로 DOM 구조에 접근할 수 있도록 방법을 제공하여 구조 나 스타일을 변경할 수 있게 돕는 인터페이스. 참고 : https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction - HTML, XML 문서의 프로그래밍 interface - 문서의 구조화된 표현을 제공 - 프로그래밍 언어가 DOM에 접근할 수 있는 방법 제공 DOM을 찾는 방법 아래 메서드를 통해서 getElement getElements querySelector querySelectorAll getElement document.getElementsByTagName('div’) document.. 2021. 7. 16.

[JavaScript] Closure 과 Currying Closure closure 의 장점 활용 값을 가진 함수를 만들 수 있음 function sum(a,b) { return a+b; } function calculate(fn, prev) { return (v) =>{ return fn(prev,v); } const sum100 = calculate(sum, 100) sum100(20); //120 ❖ sum100 sum100 = (v) => { return sum(100,v) } sum100이라는 함수는 어떻게 보면 100이라는 값을 가진 함수가 되는 것이다. 크롬 디버거에서 Scope(유효범위) 를 확인해보면 Closure : { prev :100, fn: f } Currying 값을 가진 함수를 만들 수 있는 함수 ex) calculate 함수 함수.. 2021. 4. 9.

javascript 과 Promise 와 async await 원본 코드 (callback 지옥에 빠질랑 말랑) url의 json 데이터와 json 중 title 데이터를 비동기적으로 출력시키는 code 1초 후 json 출력 그로부터 2초 후 json.title 출력 fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then( (json)=> { setTimeout(() => { console.log(json); setTimeout( () => { console.log(json.title); },2000); },1000); }) 콜백 함수 분리와 then 사용 Promise를 사용해보자 const delay = (data,ms) =>new Promise(.. 2021. 3. 15.

[Javascript] Prototype 을 통한 상속 과 __proto__ +(MDN 예제로 보는 Prototype 상속) 자바스크립트에서 class란? 생성자함수 생성 함수 호출 객체 생성 시 내부 구현 크롱의 수업과 생활코딩 js 객체지향 프로그래밍을 참조하여 MDN에 잇는 Class Model 상속예제 -> Constructor function 과 prototype을 이용하여 상속을 구현해 보았다. Class 를 이용한 상속 Javascript는 프로토타입 based 언어 원래는 class 가 있기 전에 생성자 함수를 이용하여 상속을 구현했다. 따라서 Class 의 extends 를 프로토타입을 통해 구현해보자 Constructor function (생성자 함수) 및 객체 생성 1) Car (부모) , Model (자식) 이라는 생성자 함수 생성 각자의 Prototype 객체가 생성됨 ( Car's prototype ,.. 2021. 3. 12.

[JavaScript ] prototype vs __proto__ + 객체 지향 프로그래밍 자바스크립트의 함수는 객체 function Person(){} var Person = new Function(); 객체이기 때문에 property를 가질 수 있음 ↓ 함께 이해하는 것이 중요 https://rrecoder.tistory.com/87?category=947948 JavaScript 프로토타입(prototype) 이해 Object (객체) 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것 var memberObject = { tami: 'name', developer: 'java', age:'25', } this 메서드가 자신이 속해있는 객체를 가리키는 키워드 객체가 내부적.. rrecoder.tistory.com prototype 과 __proto__ 예시) Person Person.p.. 2021. 3. 11.

[Javascript] __proto__ 와 상속 ► Object(객체)에서의 상속 보통은 class 단계에서 상속을 받고 상속을 받은 class 가 object를 만들지만 자바스크립트에서는 객체 자체를 상속받을 수 있음 prototype link : 객체의 상속을 연결해주는 링크 prototype object : sub object가 상속을 받은 객체 출처)opentutorials.org/module/4047/24626 객체와 객체 상속 실행되는 __proto__ 예제1) var superObj = {superVal:'super'} var subObj = {subVal :'sub'} subObj.__proto__ = superObj; console.log("subVal",subObj.subVal); //sub console.log("superVal",.. 2021. 3. 11.

JavaScript 함수호출 Call / Bind 메서드 처음 자바스크립트를 배울 땐 쓰라는대로 함수를 쓰고 this 도 그냥썼지만, 몇개의 프로젝트를 경험하고 나서 다시 공부해보는 JS는 정말 신기하고 재밌는 도구이구나 .! 자바스크립트의 함수 JS의 함수 : 자신만의 this를 정의하는것 예시로 sayHello 라는 함수를 만들고 this를 실행시키면 Window 객체가 나온다. 즉 JS에서 기본적인 this = windowr객체 라는것 나는 sayHello에서 window를 쓰고싶지 않다. this를 그때그때 알맞은 객체로 바꿔야 하는데 이것이 바로 this의 binding! this를 알맞게 바꿔주는 함수가 있는데 그것이 바로 call apply, bind이다 . 자바스크립트에서는 함수를 많이 다루고 this를 다뤄야 할 경우가 많음!! 자바스크립트에서.. 2021. 3. 11.

이전 1 2 3 4 다음

티스토리툴바