전체 글 62

MySQL 인덱스

인덱스란? " 인덱스 == 정렬 " 인덱스는 결국 지정한 컬럼들을 기준으로 메모리 영역에 일종의 '목차'를 생성하는 것. insert, update, delete(command)의 성능을 희생하고 대신 select (Query)의 성능을 향상시킨다. update, delete 행위가 느린거지, update, delete를 하기 위해 해당 데이터를 조회하는 것은 인덱스가 있으면 빠르게 조회된다. 인덱스가 없는 컬럼을 조건으로 update, delete 를 하게 되면 굉장히 느려 많은 양의 데이터를 삭제 해야하는 상황에선 인덱스로 지정된 컬럼을 기준으로 진행하는 것을 추천한다. 인덱스 키 값의 크기 InnoDB (MySQL)은 디스크에 데이터를 저장하는 가장 기본 단위를 페이지라고 하며, 인덱스 역시 페이지..

Database 2022.09.02

PV ? UV ?

PV (페이지 뷰, Page View) 홈페이지에 유입된 사용자가 우리 홈페이지나 채널에서 몇 개의 페이지를 둘러 보았는지. 를 나타내는 수치 UV (Unique Visitor) 중복을 제외한 순방문자의 수. 예를 들어, A씨가 배너 광고를 타고 Q 온라인 쇼핑몰에 들어갔다고 하고 상품 하나만 보고 들어간 쇼핑몰이었지만 꽤 흥미로운 아이템들이 많아 추가로 4 페이지를 더 구경. 이 경우, PV는 5 / UV 는 1 UV는 중복 없는 '순 방문자'를 카운트 한다. ? 한번 그 홈페이지에 접속하면 그 사용자에 대한 UV는 영원히 1일까 ? 그렇지 않다고 한다. 마지막으로 접속한 페이지에서 30분 이상 아무런 액션을 하지 않았거나, 그 홈페이지를 종료한 후 해당 홈페이지에 다시 접속하는 것 등을 이후 액션이라..

카테고리 없음 2022.09.01

React 구조 ? 흐름 ? 리액트가 처음이라면 ?

구조라 해야할지 흐름이라 해야할지.. 어떻게 작동하는지 잘 몰라서 노션으로 정리했던 내용을 옮겨 적으면서 복습하고자 한다. 꼬리에 꼬리를 무는 궁금증을 해결하기 위해 정리했던 나만의 정리 내용 설치방법이나 컴포넌트 작성법 등 무언가 실행하는걸 원했다면 뒤로가기 추천.. 주요 특징 - 컴포넌트 기반 - JSX 문법 사용 - Virtual DOM : HTML DOM의 특정 요소만 바뀌어도 전체 DOM 을 다시 렌더링하는 DOM의 단점을 보완. ( DOM 내의 변경된 부분만 DOM 에 적용하는 기술 제공 , 부분 렌더링으로 성능 향상 ) - 리액트 개발 런타임 환경 : node.js React 동작 흐름 (왜 어떻게 제일 처음에 index.html 을 읽게 되는가에 대해 궁금했음) yarn start 명령어 ..

React 2022.08.31

Webpack 이란

Webpack 은 여러 개의 assets (js, css, png, jpg) 을 웹 브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 있는 자바스크립트 모듈 번들러. Node.js 환경에서 실행되며, npm으로 설치할 수 있다. 사용하는 이유 각기 다른 자바스크립트를 로딩할 때, 스크립트 로딩 순서와 해당 HTML에서 필요하지 않은 js 파일들까지 로딩하여 리소스 낭비가 생긴다. 필요한 파일만 로딩하고 관리하고자 웹팩을 사용하게 되었다. 웹팩에서 모듈은 HTML, CSS, JavaScript, Images, Font 등등을 모두 포함. 요소 하나하나가 모듈인 셈이다. 웹을 만들다보면 이러한 모듈들이 수십개에서 큰 프로젝트라면 수백개가 생성될 수 있는데, 이 수많은 요소들을 하나의 파일로 합쳐주고 압축시켜..

카테고리 없음 2022.08.30

ESlint 란?

Lint란, 실보푸라기를 의미. 프로그래밍에서도 실보푸라기같은 코드들이 있다. '더러운 코드(?)' 당장은 코드가 돌아가도, 다른 사람들이 읽기에는 좋지 않다. 이 부분들을 잡아주기 위해 코드의 오류, 코드 스타일 등을 점검하는 것을 '린터' 또는 '린트'라고 부른다. 이를 사용하면 가독성을 높여줄 뿐만 아니라 동적 언어의 특성인 런타임 버그를 예방할 수 있다고 한다. ESLint는 뭔데 ? ES(EcmaScript : 자바스크립트) + Lint 를 말하며, 확장성이 좋아 많이 쓰이고 있다. 여기서 말하는 확장성이란, 다양한 플러그인을 사용할 수 있기 때문에 새로운 규칙을 추가할 수 있고 손쉽게 다른 회사나 사람의 설정을 도입할 수 있다는 것을 말한다. ESLint로 가장 많이 쓰이는 것이 airbnb에..

카테고리 없음 2022.08.29

User-agent 모바일 확인하기

User-Agent 는 Request Header 의 한 종류로 HTTP 요청을 보내는 디바이스와 브라우저 등 사용자 소프트웨어의 식별 정보를 담고 있다. 임의로 수정될 수 없는 값 기본 형태는 ' User-Agent : / ' user agent에서 comment를 구성하는 형식에 대해 MDN에서는 브라우저를 기준으로 형식을 소개. 보통 Mozilla 정보/버전 + 운영체제 정보 + 렌더링 엔진 정보 + 브라우저 형태로 노출 app으로 접속할 경우, user-Agent 값에 어플 접속 구부자(app-android, app-ios)가 등록되어 있다고 한다. 참고사이트 https://velog.io/@ggong/User-agent-%EC%A0%95%ED%99%95%ED%95%98%EA%B2%8C-%ED%9..

카테고리 없음 2022.08.28

도커 볼륨(Volume) 이란?

도커 볼륨 - 도커 이미지로 컨테이너를 생성하면 이미지는 읽기 전용이 되며 컨테이너의 변경 사항만 별도로 저장해서 각 컨테이너의 정보를 보존한다. - 도커 이미지(읽기 전용) + 도커 컨테이너(쓰기 가능) - 컨테이너 계층에는 원래 이미지에서 변경된 파일 시스템 등이 저장 - 그러나 영속해야하는 데이터들 일 경우 해당 도커 컨테이너를 삭제하면 게층에 저장되어있던 데이터베이스의 정보고 삭제된다는 단점. - 이러한 단점을 극복하기 위한 몇가지 방법으로는 볼륨을 이용하는 방법이 있다. ( 방법은 참고사이트의 주소로.. ) 그러니까, 컨테이너를 사용해서 애플리케이션을 운영하다 보면 새로운 버전의 컨테이너가 배포되더라도 이전 버전의 컨테이너에서 사용하던 파일들을 그대로 사용할 수 있어야 하는데, 이런 경우에 사용..

카테고리 없음 2022.08.26

정규표현식 정리

정규표현식은 이메일 검사, 전화번호, 주민등록번호 등 유효성 검사를 할 때도 사용되지만 XSS 공격을 대비하여 보안처리 할 수도 있기 때문에 이번 기회에 정리해보려고 한다. 다른 분의 블로그 자료와 함께 '모던 웹을 위한 JavaScript jQuery 입문 3판' 책을 참고하여 정리하였다. 정규표현식 문법 \d 숫자를 대표하는 글자들 (d는 digit의 약자) => 숫자 \D 숫자를 제외한 문자 => 숫자 아님 \w 글자를 대표하는 글자들 (w는 word의 약자) => 아무 단어 (숫자 포함) \W 글자 대표 문자를 제외한 글자들(특수문자, 공백 등) => 아무 단어 아님 \s 공백 문자(스페이스, 탭, 뉴라인) \S 공백 문자를 제외한 문자 => 공백 문자 아님 + '하나 혹은 그 이상 연결된' 라는..

Query Between 과 >=, <= 성능 차이

부등호와 Between 을 실행하면, Where을 이용한 부등호 비교 조회가 더 빠르다. 왜? CPU Cycle 을 적게 소모했기 때문이다. 천만건이 들어있는 테이블 아래와 같이 카운팅하는 쿼리를 작성해 실행했을 때, [x BETWEEN $1 AND $2] -> 평균 4.118333 초 [x >= $1 AND x 평균 3.442857 초 시간이 소요되었다고 한다. 두 개 쿼리의 실행계획이 동일했고, 모든 데이터가 Buffer pool에 cache(Warming up)된 상태에서 실행했기 때문에 상태는 거의 동일했다고 보여진다. 그리고 하나 더 알게 된게, MySQL에서 DATETIME 형식의 데이터를 고속으로 검색할 때는 UNIX_TIMESTAMP 함수를 이용하면 DATETIME 형식보다 3배~4배(?)..

Database 2022.08.24

쿼리 Query 최적화 및 튜닝

쿼리 최적화의 필요성 웹사이트 전문가 제이콥 닐슨은 응답 속도에 따른 유저 경험을 다음과 같이 평가한다. - 0.1초 : 즉각적인 응답이라는 느낌 - 1초 : 지연을 감지하고 컴퓨터가 결과를 처리하고 있다는 느낌을 받지만, 아직 스스로 제어할 수 있다고 느낌 - 10초 : 사용자가 집중력을 유지할 수 있는 한계 - 10초 이상 : 유저의 신경이 돌아오기 쉽지 않음 따라서, 보통 10초의 유저 경험은 사이트를 즉시 떠나게 한다고 말한다. API 콜의 지연이 유저경험에 지장을 준다면, 쿼리 최적화를 고려해볼 수 있다. 쿼리 최적화 및 튜닝 기술 1. Use Column Names Instead of * in a SELECT Statement 테이블에서 몇 개의 컬럼만을 조회하는 경우라면, SELECT * 을..

Database 2022.08.23
728x90