[TIL] CSS 포지셔닝, JavaScript 문법, MySQL JOIN

개발자도구 스타일 탭을 보면 밑에서 부터 CSS가 적용된다는 것을 알 수 있다.

 

참조한 개발자 도구 관련 포스팅:

https://velog.io/@jonmad/TIL.-%ED%81%AC%EB%A1%AC-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC

 

 

 

CSS의 포지셔닝

 

+ absolute : 상위에서 처음 만나는 relative를 기준으로 좌표를 잡는다 그런데 부모를 쭉 올라가다가 relative를 만나지 못하면  body를 기준으로 좌표잡음.

 

float : 왼쪽, 오른쪽으로 박스나 이미지를 정렬하는데 사용한다.

 

clear : float 속성을 지우는데 사용

 

참고 블로그 : https://aboooks.tistory.com/72

 

 

visibility : hidden     보이지는 않지만 자리는 차지한다.

display: none       보이지도 않고 자리도 안차지한다.

 

내가호출하지않고 시스템에 의해 불리는 함수  --> callback function

---

JavaScript

JavaScript의 네이밍 유래 : 당시 핫한 언어인 JAVA의 네임을 따온 것일뿐 연관은 없다.

 

-VAR  LET 차이 

var 변수의 scope는 선언된 함수  재선언이 가능

let 변수의 scope는 선언된 block  재선언 불가능

괜히 오류 발생시키지말고 let변수를 사용하자..

 

-backtic ( ` ) 

javascript에서 backtick(`) 문자를 사용하여 문자열을 표현한것을 템플릿 리터럴이라고 한다.

이렇게 사용하면, 두가지 기능이 있는데 (1)줄바꿈을 쉽게 할수 있고, (2)문자열 내부에 표현식을 포함할 수 있게 됨.

- JS 자동 형 변환  

더하기연산은 무조건 concat 해버림, 다른 연산에 대해선 자동형변환

 

console.log("40" - 5 )       // 35     JS는 형변환을 할 수 있는한 최대한 지원..(그래서 애매함이 발생)

console.log("40" +5 )      //405      concat 해버림

console.log ( true +1 )  // 2

console.log  (true -1 )  //  0

 

- short circuit연산자

&& 와 || 는 마지막에 평가한 값을 반환한다.

console.log("Hello" || "JavaScript")     // "Hello" 

||연산자는 cross browsing에 중요하게 활용됨

let co = windows.superconsole || window.console     // superconsole 이 있는 브라우저는 superconsole을 co에 할당함

 

 

- JS 에서는 논리값이 필요할 때 논리값으로 판단해서 처리 ( ex false : false, "", undefined, null, 0  나머지는 다 true 인식) 

 

-자바스크립트의 메모리관리

자바스크립트는 메모리를 직접 할당해야 하는 저수준 언어와 달리 객체가 생성되었을 때 자동으로 메모리를 할당하고 쓸모 없어졌을 때 자동으로 해체하는 가비지 컬렉터 기능이 있다. 

가비지 컬렉션 : 참조-세기(Reference-counting) , 표시하고-쓸기(Mark-and-weep) 과 같은 알고리즘이 있다.

 

-반복문

for i of arr

배열 접근할때는 for ~ of  구문 사용

 

자바스크립트의 객체는 java에서의 map과 비슷하다.

for key in person

객체에 접근 할때는 for ~ in 구문 사용

 

-JSON ( JavaScript Object Notation)

 

자바스크립트의 함수는 1급 객체(자바에서의 객체를 의미, (JS에서 함수도 객체다))이므로 값으로 사용가능. 자바스크립트 객체는 프로토타입이라는 특별한 프로퍼티를 포함 한다.  

var student = {

name : "홍길동",

info : function() {   consol.log(~~~)  }  }

위에처럼 속성에 함수를 할당할 수 있다.

 

객체 생성 : 1. { }를 사용하여 {} 내에 한개이상의 프로퍼티를 추가하여 객체 생성

               2. object 생성자 함수 

ex) var student = new Object();

student.name = '홍길동';      //동적으로 프로퍼티 생성 및 삭제 가능하다.

student.info = function() { console.log (~~ ) } 

              3. 사용자정의 생성자 함수 사용 ( 생성자함수도 똑같이 생김 하지만 생성자함수 부를때 new 연산자 필요함)

ex )  function Student (name) {

   this.name = name;  

   this.info = function() { ~~~ } 

}

var student1 = new Student("홍길동");

 

객체의 속성에 접근할때 "." 이나 "[key]" 를 사용한다.

person.printInfo // 함수 자체

person.printInfo()   // 함수가 실행되고 리턴값을 받아옴

   

 

-함수호이스팅(Function Hoisting)

함수 선언문으로 생성된 함수가 해당 소스코드의 유효범위의 맨 위로 끌어올려지는 것

 

//함수 선언문, 소스코드 최상단으로 끌어 올려짐
function fn_test(temp){
	console.log('fn_test run... temp:'+ temp);
}

fn_test(1); //a호출:함수 선언문 이전에 호출

fn_test(2); //b호출:함수 선언문 이후에 호출

 

fn_test(1);  // a 호출: 함수 표현식 이전 호출

var fn_test = function(temp){
	console.log('fn_test start… temp:' + temp);
};

fn_test(2); // b 호출: 함수 표현식 이후 호출

 표현식으로 선언된 함수는 함수호이스팅이 발생하지 않으므로, 함수 생성 이전에 호출 할 경우 아직 존재하지 않는 함수를 호출게 되므로 오류가 발생함.

 

 

-Window 객체

브라우저에서 동작하는 JavaScript의 최상위 객체  ex) window.console.log(~~) , window.prompt("","")

JavaScript 에서 기본으로 제공하는 각종 프로퍼티와 함수제공 , BOM으로 불리기도함.

 

---

-MYSQL JOIN

 

 

• INNER JOIN: 기준이 되는 테이블 (left table)과 join이 걸리는 테이블(right table) 양쪽 모두에 matching되는 row만 select가 됨.
• LEFT JOIN: 기준이 되는 테이블 (left table)의 모든 row와 join이 걸리는 테이블(right table)중 left table과 matching되는 row만 select가 됨.
• RIGHT JOIN: join이 걸리는 테이블(right table)의 모든 row와 기준이 되는 테이블 (left table)에서 right table과 matching되는 row만 select가 됨.
• FULL (OUTER) JOIN: 기준이 되는 테이블 (left table)과 join이 걸리는 테이블(right table) 양쪽 모두의 모든 row를 select 한다.