본문 바로가기

# Tech

(18)
# 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/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/DynamoDB DynamoDB + GUI 로컬 개발환경 세팅하기 테스트는 로컬환경에서 하자! 개발 환경> Windows 10> Node.js (with NPM) 데이터베이스 로직이 잘 동작하는지 확인하기 위해서는실제 데이터베이스에 데이터를 주어가며 확인하는 것이 좋지만. DynamoDB를 AWS 위에서 테스트를 한다면,테스트 과정도 실사용량에 청구되는 것은 물론이고, 테스트케이스 데이터를 매번 삭제하는 것도 귀찮은 작업입니다. 그럴때는 DynamoDB를 로컬에서 테스트하는 것을 고려할 수 있습니다. 데이터베이스를 싹다 날려버리는 것도 편하고,로컬에서 이루어지므로 사용량도 청구되지 않기 때문이죠! Local DynamoDB 설치하기 DynamoDB는 쿼리와 최적화가 어려울뿐이지 설치와 셋팅 자체는 어렵지 않습니다!먼저 아래의 링크에서 자신의 환경에 맞는 DynamoDB..

2019. 12. 9. 12:33

# Tech/React [Typescript React] 상태 끌어올리기 공통된 상태는 끌어올리자 어떤 컴포넌트들은 본질이 같은 데이터를 보여주어야 할 경우가 있습니다. 화씨와 섭씨 변환기가 대표적인 예시인데,둘 중 하나를 바꾸면 반대쪽도 바뀌어야 하기 때문이죠. 사실 화씨와 섭씨의 본질 데이터는 같습니다.본질 데이터를 공유할 수 있도록 제어되는 컴포넌트 기법을 활용하면 되겠군요. 공통된 상태를 공통 조상의 상태로 끌어올리는 것.이것을 상태 끌어올리기라고 합니다.

2019. 12. 7. 14:13

# Tech/React [Typescript React] 컴포넌트 제어 form 요소는 또 다른 내부 데이터를 갖는다. 리액트에서 제공하는 HTML 컴포넌트 중 form 요소는 특별하게 작동합니다.폼 요소 내부에 담긴 데이터는 this.state와는 다르기 때문이죠. 아래의 코드를 한번 살펴볼까요? interface Prop {} interface State { name: string; } class NameForm extends React.Component { constructor(prop: Prop) { super(prop); this.setState({ name: "" }); } render() { return ( ); } } 위 코드에서 this.state.name와 #name.value는 따로 놉니다.사용자가 폼의 값을 바꾸어도 컴포넌트의 상태는 변경시킬 수 없죠...

2019. 12. 7. 13:03

# Tech/React [Typescript React] 리스트 컴포넌트 컴포넌트를 배열에 담아 렌더링하자 여러개의 리액트 객체를 표시해야 할 때는, JSX 문법에 배열을 사용할 수 있습니다.각각의 컴포넌트 타입이 달라도 동작하며, 특히 리스트를 보여줘야 하는 컴포넌트를 만들 때 유용합니다. let list: ReactNode[] = [ Hello, React!, Installation, First, Download the library from the link below. ]; let element = {list}; ReactDOM.render(element, document.getElementById("app")); 이런 사용방법은 리스팅아이템li을 쉽게 출력할 수 있도록 도와줍니다.아래는 순서없는 리스트 태그ul의 예시입니다. HTML : Lorem Ipsum Dolor..

2019. 12. 7. 02:42