본문 바로가기

반응형

생활코딩

(27)
[생활코딩 JS] object inheritance 객체 상속 (자바스크립트 객체지향 프로그래밍 시리즈) 📌클래스를 통한 상속이 아닌, 객체를 통한 상속에 대해 알아보고자 한다. ✍️ 주류 클래스 기반 객체지향언어의 방식 객체의 속성은 클래스 단에서 이미 결정이 된다. 객체가 다른 객체의 속성을 상속받을 수 없다. 그러나 자바스크립트에서는 다르다! 자바스크립트에서는 가능하다. 객체가 직접 다른 객체로부터 상속받을 수 있고, 얼마든지 상속관계를 바꿀 수 있다는 것! 또 다른 객체로부터 상속받기를 원한다면, 링크 교체를 통해 간단하게 상속관계를 바꿀 수 있다. 이 링크를 'prototype link'라고 한다. 이 링크가 가리키고 있는 객체를 'prototype object'라고 부른다. 📌__proto__를 이용해서 상속받을 수 있다. or 📌Object.create(); 를 이용해서 상속받을 수 있다.
자바스크립트의 클래스와 오브젝트의 차이점 알아보기(feat. 파이썬이랑 뭐가 다를까?) 📌 클래스와 오브젝트 붕어빵 틀(template) : 클래스 object: 팥을 넣으면 팥붕어빵, 크림 데이터를 넣으면 크림 붕어빵! ✅파이썬에서의 클래스와 객체 개념과 같다. 둘다 객체지향언어! 📌자바스트립트에서 클래스 사용하는법 파이썬과 다르게 자바스크립트에서는, 클래스를 선언하기 위해 'constructor'가 필요하다. 파이썬에서는 def 와 self를 사용했다면, 자바스크립트에서는 'constructor/method와 this'를 이용한다. 구조는 유사하다. 또한 오브젝트를 생성할 때도 차이가 있다. 파이썬에서는 별다른 별도 코드 없이 그냥 생성하면 되는데, 자바스크립트에서는 const와 new를 써준다. 📌 Getter & Setter incapsulation => private 만드는 것 클..
[생활코딩 리액트] 이벤트 state 변경하기 (feat. bind 함수, setState함수) 📌이벤트 설치 (1); 테스트 (링크 클릭시, alert창 띄우기) 📌이벤트 설치 (2); 다음페이지로 이동 중지 📌"mode 설정 & render 부분"과 "이벤트를 설치한 부분"을 연결해주면 된다. ⇢🔗 연결시키는 방법 *이벤트 함수 안에서 'this'의 값은 아무것도 가리키지 않게 되기 때문에 오류가 뜬다.* ⇢ 이벤트 함수 바로 뒤에, '.bind(this)'를 추가하여 this의 값을 생성할 수 있다. ✚ 또 하나의 작업이 필요하다. 리액트의 언어 'setState({})'로 모드를 전환해주어야 작동하기 때문. this.state.mode = 'Greeting'; 으로는 작동하지 않는다. 리액트 언어로 모드 전환을 해주니, 비로소 위에서 세팅해준 greeting의 모드의 값들로 로드가 되었다. ..
[생활코딩] DATABASE2 MySQL - 테이블 분리 & JOIN 1. 데이터의 중복을 줄이기 위한, 테이블 분리 위의 테이블을 아래의 두 테이블로 만들면, 자료의 중복을 줄여 유지/보수가 훨씬 더 용이해진다. 그러나 셀렉트 문으로 읽을 때는 두개로 나뉜 테이블을 합쳐서 보기 편하게 읽을 수도 있다. 위의 스프레드시트를 mysql로 아래와 같이 두개의 표로 만들었다. 1) author 표 2) topic 표 2. JOIN topic 테이블의 author_id와 author테이블의 id 값은 같다. 이걸 이용해서, 두 테이블을 한 번에 합쳐서 볼 수 있는 명령어는 바로 'JOIN'이다. SELECT * FROM topic LEFT JOIN author ON topic.author_id = author.id; SELECT문을 이용해, 합치면서 보고 싶은 데이터만 볼 수 있..
[생활코딩] Javascript 객체(object) 쓰기와 읽기 함수 퀵 리뷰 function 함수이름(매개변수1, 매개변수2,...) { 함수가 호출되었을 때 실행하고자 하는 실행문; } 1. 객체 쓰기 2. 객체 읽기 3. 객체에 추가하기 4. 띄어쓰기 있는 객체 추가하고 읽기 for(var key in coworkers) { document.write(key+':'+coworkers[key]+' '); } (Array 배열 기초 참고: http://tcpschool.com/javascript/js_array_basic) 객체에 소속된 함수 = method 객체에 소속된 변수 = property 위의 내용으로 치면, coworkers에 걸려있는 함수인 function(){ }에 해당하는 내용이 바로 method이고, coworkers에 걸려있는 변수인 progra..
[생활코딩] 배열과 반복문의 활용 / 함수의 기본, 매개변수와 인자, 출력 배열과 반복문의 활용 함수 이렇게, 위에 two라는 이름의 함수를 지정해줬고, 이후에 two()라고만 적어주면, 길게 코드를 반복해줄 필요없이 해당 함수를 실행 시킬 수 있다! 매개변수와 인자 parameter & Argumnet 입력(매개변수)과 Parameter & Argument(인자) function sum(left, right){ document.write(left+rigth+' '); } 태그 안에서 함수의 내용을 위와 같이 정의해준다. sum(2,3); sum(3,4); 이렇게 실행시켜주면 왼쪽의 화면처럼 5와 7이 산출된 것을 볼 수 있다. 출력 Return 출력을 이용하면, 단순 덧셈 뿐 아니라, 더 추가적인 다양한 요소들을 출력해야할 때 유용하다. 이전에는 다음과 같은 방식으로 함수를 ..
[생활코딩] javascript - 배열과 반복문 배열 반복문 반복문은 while을 이용해주는 것! i=0 이라는 변수를 먼저 지정해주는 것이다. i
[생활코딩] MySQL SELECT Syntax 특정 Column 값만 보고 싶을 때, 이렇게 모든 표가 아니라, 표 중에서도 id, title, created, authour에 대한 값만 보고싶을때는 ' SELECT 과 From 테이블이름 사이에 해당 열 이름을 넣어준다. 특정 Row 값에 대한 정보만 보고 싶을 때, [Where] 이렇게 authour가 egoing인 값에 대해서만 보고싶을 때는, from topic 뒤에 "WHERE"문을 추가한다. ' 특정 열의 내림차순으로 보고싶을 때, [ORDER BY id DESSC] 특정 갯수까지만 보고싶을 때, [DESC LIMIT] DATABASE를 잘한다의 핵심은, 필요에 따라 이 SELECT문을 잘 사용한다는 것에 있다.

728x90
반응형