본문 바로가기

# Tech

(23)
# Tech/NodeTS 자바스크립트 및 NodeJS 메모리 누수 피하기 (+ 메모리 구조, 가비지 컬렉터) 개요 어느 프로그래밍 언어든지 마찬가지겠지만 해당 언어의 내부 메모리 구조와 가비지 컬렉션 전략을 이해하지 못하면 해당 언어가 낼 수 있는 최대의 성능을 올바르게 이끌어낼 수 없습니다. 유틸리티 정도의 작은 프로그램이라면 괜찮겠지만, 큰 규모의 프로그램을 작성해야 한다면 이야기는 달라지겠죠. 해당 포스트에서는 자바스크립트의 메모리 구조와 가비지 컬렉션에 대해 설명하고, 올바르지 않은 코딩 패턴에 대해 설명합니다. 선행 지식 해당 포스팅을 이해하기 위해 필요한 지식들을 설명합니다. 참조형 변수 C++과 다르게 자바스크립트는 변수의 타입이 참조형인지 값인지 코드에서 명확하게 보이지 않으므로 처음에는 둘의 구분이 어려울 수 있지만, 실제로는 매우 쉽습니다. 다음 2가지만 기억하세요. 배열과 객체는 레퍼런스(주..

2020. 9. 30. 14:31

# Tech/PostgreSQL 튜닝 [튜닝] 커서기반 페이지에서 임의의 정렬조건의 순번 계산하기 개요 커서기반 페이지네이션에서 임의의 정렬조건의 순번을 계산해야 하는 상황이 있을 수 있습니다. 다음 상황을 살펴보겠습니다. 커서로는 IDX가 쓰일것이고 어떠한 항목도 필터링하지 않았을 때 순번으로도 활용할 수 있지만, X가 작성한 게시글만 보기위해 필터조건을 건다면 IDX는 더이상 순번으로 사용할 수 없습니다. 이러한 상황에서 어떻게하면 효율적으로 SEQ를 계산할 수 있을까요? 🤔 실습 데이터 생성 -- 테이블 생성 CREATE TABLE TEST ( idx int4 primary key, userid int4, contents text ); -- 인덱스 생성 CREATE INDEX test_userid_idx ON TEST(userid, idx); -- 데이터 생성 INSERT INTO TEST SE..

2020. 5. 19. 20:47

# Tech/ChromeExtension 크롬 익스텐션의 각종 개념들 개념 구글 크롬 익스텐션이란 크롬 브라우저를 조작할 수 있는 권한을 가진 막강한 프로그램을 의미합니다. HTML, JavaScript, CSS와 같은 웹 기술을 기반으로 두고있기 때문에, 프론트엔드를 다뤘던 경험이 있다면 쉽게 익힐 수 있습니다. 핵심 파일 익스텐션을 만드는데 필요한 핵심 파일들은 다음과 같습니다. 각각의 파일에 대해 짤막하게 설명하겠습니다. 📦 chrome-extension ┣ 📜 manifest.json ┣ 📜 icon.png ┣ 📜 popup.html ┗ 📜 background.js manifest.json 안드로이드의 AndroidManifest.xml와 매우 비슷합니다. 익스텐션의 각종 메타정보와 필요한 권한목록을 명시적으로 적어야 합니다. 만약, 권한목록에 없는 기능을 사용한다..

2020. 4. 26. 22:12

# Tech/React [번역] 리액트로 고성능 무한 스크롤 구현하기 이 게시글은 [Akshay Sharma]가 작성한 [Building High-Performance Infinite Lists in React]의 번역본입니다. 개요 인터넷은 무한 스크롤(Infinite scroll)을 적용한 제품들로 넘쳐나고 있습니다. 무한 스크롤은 정보의 소비를 매우 쉽고 중독적으로 만드는데, 트위터나 인스터그램같이 타임라인이나 피드를 소비하는 제품에 매우 적합하죠. 하지만, 자바 스크립트로 무한 스크롤을 구현하는 것은 꽤 어렵고, 특히 각각의 피드가 수천개의 구성요소로 구성되어있다면 문제는 더 복잡해집니다. 일단 문제들을 한번 나열해봅시다. 문제점 기존의 컴포넌트가 리사이징될 때, 렌더링이 매우 느려진다. 스크롤을 할 때마다 랙이 걸린다. 수천개의 컴포넌트로 가득찬 DOM은 브라우저..

2020. 2. 14. 14:26

# Tech/NodeTS alias를 사용하여 import 구문을 깨끗하게 만들자! Alias 어떤 경로에 별명(Alias)을 붙이고 모듈을 불러올 때, 이 별명을 활용하는 것을 Alias imports라고 합니다. 또한 별명을 활용하면 상대경로 방식이 모두 제거되므로, Absolute imports로도 불립니다. 먼저, 아래의 코드를 리팩토링하는 것부터 시작해봅시다. 최종적으로는 한 줄로 축약되고, 이 과정에서 모든 ../../../는 제거될 것입니다. import { IColumnVisibility } from "../../../interfaces/IColumnVisibility"; import { ILicense } from "../../../interfaces/ILicense"; import { ISoftware } from "../../../interfaces/ISoftware..

2020. 2. 13. 17:26

# Tech/NodeTS barrel를 사용하여 import 구문을 깨끗하게 만들자! Barrel 배럴이란 개념을 사용하면 import 구문을 축약함으로써, 코드를 더 깨끗하게 유지보수할 수 있습니다. 이것을 요약하자면 여러 모듈을 묶어서 다시 export하는 모듈로 정의할 수 있는데, 아래 코드처럼 하지말고, ./impl/에 {a, b, c}를 export하는 배럴을 두면 한줄로 축약할 수 있습니다. // ./src/app.ts import { a } from "./impl/a"; import { b } from "./impl/b"; import { c } from "./impl/c"; console.log(a, b, c); 아래처럼요. // ./src/app.ts import { a, b, c } from "./impl/barrel"; console.log(a, b, c); 물론 아래..

2020. 2. 13. 16:41

# Tech/React Next.JS에서 동적 세그먼트 사용하기 Dynamic Segment 동적 세그먼트란 /user/:id/:operation에서 id와 operation처럼 경로에서 사용되는 변수를 말하며, 쿼리 문자열 방식보다 경로명이 좀 더 깔끔해지는 효과를 얻을 수 있습니다. 동적 세그먼트는 여러 형태로 쓰일 수 있는데, 살펴보면 대부분 아래의 형식입니다. 1. 경로의 뒤에 쓰이는 경우. /user/:id 2. 경로의 중간에 쓰이는 경우. /user/:id/edit 3. 혼합 형태 user/:id/edit/:attr 위와 같은 동적 경로를 Next.js에서 어떻게 구현하는지 차근차근 살펴봅시다. 경로의 뒤에 쓰이는 경우 pages 폴더에서 대괄호로 감싸진 폴더나 파일은 동적 세그먼트로 취급됩니다. 즉, /user/:id를 표현하고 싶다면, 아래처럼 폴더구조..

2020. 1. 19. 22:59

# Tech/NodeTS 타입스크립트 런타임 타입 가드 타입 체크는 컴파일에 이루어진다. 타입스크립트의 타입 체크는 Only 컴파일 시간에 이루어집니다. 컴파일 시간에는 비교적 엄격하게 타입체크를 하는편이지만, 그 외에는 타입체크가 거의 없다시피 하기때문에, 런타임시에는 진짜 그 타입이 맞는지 체크하는 것이 어렵습니다. 이 와중에 any가 포함되면 믿었던 컴파일 타입체크도 무용지물이 되는데, 아래 코드가 오류없이 컴파일되는것만 봐도 알 수 있습니다. interface Args { n: number; s: string; } let invaildArgs: any = { num: 3, str: "str" }; let fakeArgs: Args = invaildArgs; console.log(fakeArgs.n, fakeArgs.s); 위의 코드에서 fakeArgs..

2019. 12. 17. 20:27