석훈의 끄적끄적 석훈의 끄적끄적

Why Optimization? 인터넷 없이 살 수 없는 요즘, 웹사이트는 빠르게 로딩되고 반응해야 한다. 사용자가 빠른 웹사이트를 선호한다기 보단, 느리고 기다려야 하는 웹사이트를 싫어하기 때문이다. 또한 서비스를 정상적으로 제공하지 못하는 상황이 올 수 있으므로 최적화는 필수이다... How? 디자인과 마찬가지로 서비스를 제공하는 입장에서는 사용자 관점을 생각하는 것이 좋다. 첫 페이지 렌더링 속도 홈페이지 반응 속도 기능 동작 속도 개발 및 테스트를 진행하다 문득... 내 프로젝트는 왜 이렇게 렉이 걸릴까? 하는 생각이 든다면 최적화의 필요성을 느낄 것이다. 문제를 해결하기 위해선 원인을 아는 것이 가장 중요하다. [진단하기] 무엇 때문에 느려졌는가? 어느 상황에서 느려지는가? 다른 곳에서 영향을 ..

1. Github Repository의 알림을 Slack에서 받기 현재 프로젝트에서 알림받는 정보를 Slack에서 받고 싶다고 하자. 예시를 위해서 Repository를 새로 생성했다. Github와 Slack에서 모든 작업을 지원해줘서 매우 쉽게 구성할 수 있을 것 같다. 1-1. Slack App에 Github App 추가하기 채널에서 Github App을 사용하기 위해서는 추가해주어야 한다. 사이드 바에서 추가할 수 있다. Github를 검색해보면 추가할 수 있는 버튼이 생긴다. 그러면 새로운 창이 나오는데 Add to Slack 버튼을 클릭해주도록 하자. 그러면 해당 페이지가 나오는데, 권한에 대해서 물어보는 것이므로 잘 읽고 Allow 해주도록 하자. 이런 메시지가 나온다면 성공적인 것이다. 1..

Express 프로젝트에서 MongoDB를 사용하고 프로젝트를 설정하려 한다. 현재 필자의 프로젝트 상황은 다음과 같음을 유의해야 한다. 실시간 통신을 사용해 db에 로그성 데이터를 저장하고 있다. 실시간 통신을 제공하기 때문에 서버의 확장을 고려하고 있다. Why in Linux(other Server)? 서버의 확장을 고려해서 데이터베이스와 서버를 분리해서 설정하나 다른 프로젝트에서는 왜 데이터베이스를 분리할까? 라는 생각이 들었다. 확장성 병렬 구조의 Scale out 방식의 서버 증설이 필요하다면 DB 분리는 반드시 필요하다. 자원을 서비스 서버와 공유하지 않고 독점적으로 사용하므로 더 높은 성능을 기대할 수 있다. 보안성 서비스와 데이터베이스를 분리함으로서, 두 서버 중 하나가 해킹을 당하더라도..

Why Recoil? 리액트에서 상태 관리를 통해 View를 관리할 때, 전역 상태가 필요한 때가 있다. Context API Hook을 통해서 이를 어느정도 해결할 수 있지만 단일 값만 저장할 수 있고 여러 값들의 집합을 담을 수는 없었다. Redux 보통 이를 해결하기 위해 외부 라이브러리로서 많은 사랑을 받은 Redux를 사용했고 필자도 그랬다. 필자가 사용했을 때 Redux는 액션을 통해 상태를 관리하기 때문에 어떤 데이터가 어떻게 변경되었는지 볼 수 있었다. 이를 통해 수월한 테스트를 할 수 있었던 것 같다. 데이터를 저장소에 저장할 수 있어 브라우저가 종료되더라도 상태를 정할 수 있었다. 복잡한 계층구조를 가진 프로젝트라도 간단히 상태관리를 할 수 있었다. 모든 Redux 상태를 확인할 수 있..

이전 게시물에서 Express에 무사히 Sequelize를 설치 및 설정하였다. 이제 나의 로컬 컴퓨터의 MySQL 데이터베이스에 접근을 했으니, 테이블에 접근을 해야할 차례이다. Table에 접근하기 현재 Sequelize에서 접근하고 있는 데이터베이스에 어떤 Table이던 모델 선언을 해주지않으면 Sequelize에서 사용할 수 없다. 예시를 들기 위해서 위와 같이 User라는 테이블에 대해 접근한다고 가정하자. 모델을 선언하기 위한 폴더(models)에 User.js 파일에 아래와 같이 작성했다. // /db/models/User.js module.exports = (sequelize, DataTypes) => { // User 테이블의 속성들에 대한 선언 const tableAttrs = { id..

ORM? Object Relational Mapping 이다. 이게 뭐냐고? 객체 지향 프로그래밍에서는 객체를 사용한다. 프로그램을 구현하다 보면 관계형 데이터베이스의 데이터를 사용할 수 있는데 이 때 객체 모델과 관계형 모델 간에 불일치가 존재할 수 있다. ORM은 관계형 데이터베이스를 접근하여 데이터를 가져올때 객체와 연결시켜주는 것을 뜻한다. Sequelize! 위에서 ORM을 말한 이유는 Sequelize가 ORM으로 분류되기 때문이다. Sequelize는 NodeJS의 라이브러리이고 자바스크립트 객체와 데이터베이스를 매핑해준다 ???: 자바스크립트에서 관계형 데이터베이스 라이브러리를 사용해서 데이터를 가져오면 객체로 나오잖아요? Sequelize를 사용하면 자바스크립트 구문만을 사용함에도 SQL..

1. mysql-server 파일 다운로드 sudo apt install mysql-server 2. mysql 설치 sudo apt install mysql-server 설치 당시 물어봤던 것들 비밀번호 플러그인을 사용할 것인지? Y 비밀번호 입력 anonymous users를 삭제할 것인지? (해당 계정에서만 접근) N root 계정에 원격 접속을 막을 것인지? Y test database의 접근을 막고 삭제할 것인지? Y privilege 테이블을 재시작 할 것인지? Y mysql 접속 확인 3. mysql 계정 설정 계정 확인 mysql> SELECT user,authentication_string,plugin,host FROM mysql.user; root 계정 비밀번호 설정 # 'passwor..

자바스크립트는 싱글 스레드로 동작한다! 1. 자바스크립트의 구성 메모리 힙 (Memory Heap) → 메모리의 할당을 담당한다. 콜 스택 (Call Stack) [LIFO] → 코드가 호출이 되어 스택으로 쌓인다. Single Thread? → 하나의 Main Thread, 하나의 Call Stack을 가진다는 뜻 비동기는 자바스크립트의 런타임이 아닌 자바스크립트 런타임 환경에서 비동기 API를 지원한다. 2. 자바스크립트 런타임 환경 런타임 환경은 프로그래밍 언어가 실행되는 환경을 뜻한다. 브라우저 node JS Javascript의 엔진과 외부의 런타임 환경들이 조합되어 코드를 실행하게 된다! 3. 자바스크립트 동작 자바스크립트는 싱글 스레드이기 때문에 코드를 순차적으로 실행한다. 실행해야 할 작업..