M9의 개발 일기

최근 새롭게 알림 서비스개편 작업을 맡게 되었다.회사 서비스에서는 php를 사용하고있었지만,TPS 최대 1만 트래픽을 php 싱글 스레드로 할 수 없기에 처음으로 Node를 사용하게 되었다......... 첫관문 부터 고민이었는데 npm과 yarn 둘 중 어느것을 선택하냐의 문제였다. 결과적으로 yarn(yarn berry)을 선택하게 되었다.선택한 이유에는 크게 3가지정도된다. 1. CI/CD 배포 성능 최적화 - 가뜩이나 느린 CI/CD를 빠르게 하고싶었다. npm 같은 경우 배포할때마다 매번 npm install을 진행할텐데, 이 시간을 기다리고 싶지 않았다.(node_modules 다운으로 네트워크 I/O가 엄청 발생하니 느림.) 그래서 Zero-install 개념을 가지고 있는 yarn을 사용하..

자바스크립트에서 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로 설정했다. 하지만 박스가 이동하지 않고 자신의 위치를 지..

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

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

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

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

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