M9 개발블로그

자바스크립트에서 this는 보통 함수를 호출한 주체가 무엇인지에 따라 결정된다. 그리고 함수는 보통 자신만의 this를 갖고 있다. 하지만 화살표 함수만큼은 기존의 this와 다른 점이 있다. 그래서 일반 함수와 화살표 함수에서 this의 다른 점이 무엇인지 정리해보겠다. 화살표 함수는 부모의 this를 받아온다. 일반 함수는 함수를 호출한 주체 또는 자신의 this(즉, 자신을 포함하고 있는 주체. 여기서는 return으로 반환된 객체)를 갖는다. 그래서 일반 함수를 사용하며 부모의 this를 받아오기 위해서 종종 bind 메서드를 활용하게 된다. 하지만 화살표 함수는 부모의 this를 받아오기 위해 bind를 할 필요가 없다. 왜냐하면 이미 부모의 this를 받아오는 것이 화살표 함수이기 때문이다. ..

DOM은 JavaScript가 HTML 같은 웹 문서에 접근하여 조작할 수 있게 해주는 프로그래밍 인터페이스이다. 웹 브라우저가 HTML 코드를 해석할 때, HTML의 요소들을 각각 객체로 만들고, 객체 간에 부모관계를 구성하는 트리구조로 만들어 메모리에 저장한다. 이렇게 브라우저가 HTML 요소들을 객체 형태로 만들어 저장함으로써, 자바스크립트가 HTML에 접근할 수 있게 된다.

html의 요소를 화면에 어떻게 보이게 할지를 정해주는 속성인 display에 대해 정리해보겠다. inline과 block 속성을 정리하기 앞서 inline과 block 레벨의 차이점을 정리해보겠다. 1 2 3 div{ width:70px; height:70px; background:red; margin-bottom:20px; } span{ background:black; width:20px; height:20px; } 위의 html, css코드의 결과는 아래의 사진이다. div가 block 레벨이고, span이 inline 레벨이다. 그런데 이 코드를 작성하며 알 수 있는 사실은 block레벨 첫째, 위에서 아래로 열을 기준으로 블록처럼 쌓인다. 둘째, 태그 안에 텍스트를 작성하지 않아도 화면에 표현할..

html의 element의 위치를 이동시키고자 할 때 position의 값이 어떻게 설정되어있냐에 따라 이동 위치가 달라진다. static Position의 기본 설정 값은 'static'으로 설정되어 있다. #container{ background:blue; } div{ width:70px; height:70px; background:yellow; margin-bottom:20px; } #item{ background:red; left:20px; top:20px; } 위의 css코드에서 빨간색 박스(id="item")의 위치를 top:20px , left:20px로 설정했다. 하지만 박스가 이동하지 않고 자신의 위치를 지키고 있다. 그 이유는 position이 기본적으로 static의 값으로 설정되어있..

연결 지향적 프로토콜 TCP TCP는 송신 프로세스와 수신 프로세스(서버와 클라이언트) 간에 데이터 전송을 위해 연결을 맺는 연결 지향적 프로토콜이다. 데이터 전송을 위해 연결을 맺은 후, 데이터 전송에 필요한 작업이 모두 완료되었으면 연결을 끊는다. 이때 송수신 프로세스(서버와 클라이언트) 간에 연결을 맺는 작업을 3way handshake라고 하며, 연결을 끊는 작업을 4way handshake라고 한다. 이번 글에서는 3way handshake에 대해 정리해보겠다. 3way handshake 3wayhandshake는 두 프로세스가 데이터를 전송할 준비를 맞췄다는 것을 보장하는 역할을 한다. 과정을 살펴보면, 그림 참고: hack-cracker.tistory.com/120 1. 맨 처음 Client..

자바스크립트에서는 비교 연산자가 2가지가 있다. 1. ==(추상 또는 느슨한 비교) 이 경우 두 개의 변수 타입을 같은 타입으로 변경하여 검사를 진행한다. 그래서 해당 값이 동일한지 아닌지를 비교한다. 예를 들어 const st='3'; const num=3; console.log(st==num); // true console.log(st!=num); //false 같은 자료형으로 맞췄을 경우 같은 값이기에 true가 출력된다. 2. ===(엄격비교) 이 경우에는 타입과 해당 값이 모두 같아야 한다. const st='3'; const num=3; console.log(st===num); // false console.log(st!==num); //true 그러면 객체인 경우의 비교연산자들은 어떻게 되나..

자바스크립트에는 호이스팅이라는 것이 존재한다. 호이스팅이란 어느 위치에 선언되었는지 상관하지 않고 유효 범위의 맨 위로 선언을 끌어올리는 것이다. 이때, 할당 되어있는 부분은 끌어올리지 않고 선언 부분만 끌어올리게 된다. 그래서 선언과 할당이 분리된다고도 한다. 호이스팅이 일어나는 대상으로는 두가지가 있다. 첫째, var 변수 둘째, 함수 이 두가지가 자바스크립트에서 호이스팅이 일어난다. 그러면 var변수부터 살펴보겠다. var hoisting console.log(test); // undefined test=4; console.log(test); //4 var test; 처음에 test변수를 선언하지도 않고 console.log를 통해 출력했는데 undefined가 출력됐다. 에러가 발생하는 상황이라고..

자바스크립트에서는 변수를 선언할 수 있는 방법이 3가지가 있다. var와 let, 그리고 const가 있는데 let과 const는 es6문법에 추가된 변수 선언 방법이다. 그렇다면 기존에 var를 내버려두고 왜 추가되었는지 살펴보겠다. var에 대한 문제점 1. hoisting console.log(test); test='테스트'; var test; //console.log 결과값: undefined var test를 맨 밑에 선언했는데 cosole.log(test) 결과는 undefined로 출력된다. (※undefined란 변수가 선언됐지만 값이 할당되지 않았을 때 undefined가 할당된다). 또한, console.log(test); test='테스트'; console.log(test); var ..

트랜잭션이란 - 데이터베이스의 상태를 변화시키기 위해 이루어지는 하나의 작업 단위이다. 여기서 하나의 작업 단위라는 것이 어떤 건지 이해를 쉽게 하기 위해 예를 들어보자면, 은행에서 ATM을 통해 돈을 인출한다고 가정하자. 그런데 기계의 오작동으로 돈이 인출되지 않았지만 전산상에는 돈이 인출되었다고 등록되어있다. 또는 돈은 나왔는데 전산상에 등록이 안되었다. 이러한 상황이면 굉장히 위험한 상황이다. 그래서 돈이 인출된 기록이 전산에서 올바르게 등록되고, 돈도 제대로 인출이 되어야만 하나의 과정이 정상적으로 처리되었음을 확인할 수 있다. 여기서 ATM에서 돈을 인출하는 이 과정이 하나의 묶음으로 처리된다. 이게 바로 하나의 작업 단위라고 생각하면 된다. 트랜잭션 명령어 트랜잭션의 명령어로는 Commit과 ..

새롭게 테이블을 만들 경우, CREATE TABLE ground_reservation ( id bingit, ground_id bigint, [CONSTRAINT 제약조건이름] FOREIGN KEY (ground_id) REFERENCES ground(id) ); 이미 테이블을 만들었을 경우, alter table 테이블 명 add constraint 제약조건명 foreign key(칼럼명) references 참조하고자 하는 테이블명(컬러명); alter table ground_reservation_list add constraint groundID foreign key(ground_id) references ground(id);