# offset

43개의 포스트
post-thumbnail

offset 페이징, cursor 페이징

안녕하세요? 이번에 우아한테크캠프 프로젝트를 진행하면서 조회 페이징 구현을 하면서 정리한 내용입니다. Offset 페이징 대부분 처음 페이징을 배울 때 사용하는 페이징 방식입니다. 다들 처음에 페이징을 한다면 이 방식을 썼을거라고 생각합니다. SQL의 offset과 limit 구문을 사용하는 방식입니다. 아래는 SQL query 예시입니다. 이런 형태의 페이징이 됩니다. (출처: 백준) 이 방식의 장점은 구현이 쉽고, Spring Data JPA에서 Pageable이라는 객체를 사용하여 간단하게 페이징을 구현할 수 있는 장점이 있습니다. Offset 페이징의 단점 offset 페이징 쿼리는 offset까지 데이터를 조회한 뒤 limit 범위의 데이터를 읽는

2023년 9월 17일
·
0개의 댓글
·
post-thumbnail

Offset and Cursor Pagination 비교

Index 데이터의 양이 증가하면서, 페이지네이션은 소프트웨어 개발의 필수적인 부분이 되었다. Request 마다 큰 용량의 데이터를 내려주는것 대신에, 페이지네이션은 더 작은 용량으로 나누어 클라이언트에게 데이터를 전달 해 줄 수있다. Cursor 페이지네이션과 Offset 페이지네이션은 각각의 장단점을 가지고 있는 일반적인 알고리즘이다. Offset Pagination 우리가 알고 있는 일반적인 Pagination 이 Offset Pagination 이다. offset Pagination UI Offset 페이지네이션은 offset과 limit을 SQL 명령어를 통해 데이터를 가져온다. 각각의 request에 클라이언트는 page_size(offset)와 page

2023년 8월 30일
·
0개의 댓글
·
post-thumbnail

[PL] Ch10. Implementing Subprograms

10.1 The General Semantics of Calls and Returns 10.2 Implementing "Simple" Subprograms 10.3 Implementing Subprograms with Stack-Dynamic Local Variables 10.4 Nested Subprograms ![](https://velog.velcdn.co

2023년 8월 28일
·
0개의 댓글
·
post-thumbnail

Django - Bootstrap

Bootstrap 반응형웹 생성 가능 -> css 보다 더 예쁘게 만들어주는 기능을 알아보자. > 위에 link는 css > 처음 head 전에 붙혀넣기 아래 link는 java script > 마지막 body 전에 붙혀넣기 >> 순서가 크게 상관있는건 아니지만 HTML 파일 특성상, 위에서부터 읽혀 내려온다. 처음 CSS 역할: 아래 있는 것을 이쁘게 꾸며준다. (시작) 아래 Java Script 역할: 동작구현을 하게 해준다. (마지막) 인터넷

2023년 8월 21일
·
0개의 댓글
·
post-thumbnail

230323 DB_AUTO_INCREMENT, PAGING(LIMIT, OFFSET)

AUTO_INCREMENT 자동으로 증가하는 속성 무조건 들어가고 절대 중복되지 않기 때문에 PK로 활용된다. Auto_Increment 생성 방법 1. 테이블 생성시 속성으로 지정하는 방법 create table auto_inc( no int(10) auto_increment primary key ,name varchar(10) not null ); 2. 이미 생성된 테이블에 추가하는 방법 auto_increament 가 설정 되는 컬럼은 키가 있어야한다. 그러므로 설정하려는 컬럼의 값 중에 중복과 NULL이 있어서는 안된다. create table test( no int(10) ,name varchar(10) not null ); there can be only one auto column and it must be defined as a key 즉, 하나의 auto column만 존재 할 수

2023년 3월 23일
·
0개의 댓글
·
post-thumbnail

[NestJS]: Pagination with TypeORM (feat. Refactoring)

시작하기에 앞서 "페이지네이션(Pagination)" 이란 개념을 들어본 적이 있을 것이다. 흔히 페이지 수(쪽 수)를 매기고 정렬할때 쓰이는 개념으로써 우리가 웹 혹은 앱에서 자주 다루게 된다. 개발 초보인 나로써는 "페이지네이션"을 오로지 프론트 단에서만 필요한 개념이라 생각했다. 아무튼 이번 포스팅에서는 백엔드에선 페이지네이션이 어떻게 쓰이는가를 간단히 알아보고, Nest 프레임워크를 통해 구현해보고자 한다. 그 과정속에서 얻게 되었고, 경험하게 되었던 여러 코드및 방법들을 녹여보고자 한다. Pagination & Backend "페이지네이션" 하면 위와 같은 이미지를 많이 떠올릴 것이다. 유저가 애플리케이션을 사용 중 특정 게시

2023년 2월 2일
·
0개의 댓글
·
post-thumbnail

[Front-end 수업] #066일 #067일 #068일

JavaScript POFO 클론코딩 + 반응형 >결과 >반응형 결과 HTML CSS JavaScript #Script 01 변수 Agency 함수를 만들고 init 함수 안에 사용 할 함수를 다 넣어놓는다. this : parallax( ); this : header( ); this : section1( ); this : secti

2023년 1월 29일
·
0개의 댓글
·

[LeetCode] 176. Second Highest Salary / 178. Rank Scores / 184. Department Highest Salary

176. Second Highest Salary https://leetcode.com/problems/second-highest-salary/description/ > ### Requirements Write an SQL query to report the second highest salary from the Employee table. If there is no second highest salary, the query should report null. The query result format is in the following example. 💡 MAX()는 결과값이 없으면 NULL을 반환한다. Solution 178. Rank Scores https://leetcode.com/problems/rank-scores/ > ### Requirements Write an SQL query to rank the scores. The ra

2023년 1월 16일
·
0개의 댓글
·
post-thumbnail

상위 n개 레코드

LIMIT : 취득하는 데이터의 건수를 지정한다! Table에서 맨 앞의 레코드 두개를 가져온다. ORDER BY랑 궁합이 잘맞는다. 이렇게 작성하면 Column을 오름차순으로 정렬한 데이터 중 앞에서 두개를 가져온다. OFFSET : 취득하는 데이터의 위치를 지정한다. table에서 데이터를 한개만 가져오는데, 위에서 세번째 데이터를 가져오게 된다. (0이 시작이므로 2는 세번째이다.) ---

2023년 1월 13일
·
0개의 댓글
·

class _ offset

선택자.classList.add(); //추가 선택자.classList.toggle(); //클래스 없으면 넣어주고 있다면 삭제한다. 선택자.classList.remove(); //클래스 삭제 선택자.classList.cotains(); //클래스의 존재 유무에 따라 true, false 반환 //한개의 클래스만 제어할 수 있음 선택자.className //클래스의 이름을 가져옴 선택자.className = 'active' //선택자의 클래스를 active로 변경

2023년 1월 10일
·
0개의 댓글
·
post-thumbnail

[Object Detection] Architecture - 1 or 2 stage detector 차이

Object detection 아키텍처에는 1-stage detector과 2-stage detector가 있습니다. 본 글에서는 두 아키텍처 모델의 차이점에 대해 알아보려고 합니다. [출처: Zou et al. 2019. Object Detection in 20 Years: A Survey] 1-stage 방식에는 대표적으로 YOLO 시리즈와 Retina-Net, SSD, EfficientDet 등이 있으며, 2-stage 방식에는 RCNN 시리즈와 SPPNet 등이 있습니다. 2-Stage Detector 먼저 2-stage detector 입니다. ![](https://velog.velcdn.com/images/qtly_u/post/92

2023년 1월 4일
·
0개의 댓글
·
post-thumbnail

offset에 대해 알아보자

지난 글에 이어서 면접 때 받았던 질문에 대해 다시 정리를 해보았다. offset offset을 검색했을 때 다양한 정의와 역할이 검색되었는데, 나는 CSS에서 사용되는 것에 대해 찾아보았다. > offset이란 기준이 될 요소에 위치를 정하는 것이다. 사실 이렇게만 봤을 땐 무슨 얘기지? 라는 의문이 들었다. 더 살펴보니 흔히 사용되고 있는 CSS의 position 속성에서 사용되고 있다고 한다. 그럼 일단 position에 대해 알아보고 가자! position position은 화면에 요소를 배치하기 위한 방법을 정하는 CSS 속성이다. 속성값으로는 static, relative, absolute, fixed, sticky가 있는데, 여기서 static, relative, absolute를 다뤄보려고 한다. static ![static](https://velog.velcdn.com/images/jaeyeong815/post/

2023년 1월 2일
·
0개의 댓글
·
post-thumbnail

Front-end 국비지원 #051일

JQuery JQuery animate JQuery Scroll animate 스크롤 애니메이트 >section 1 결과 >HTML >CSS >script > id=header 영역을 header로 변수를 지정하고 $(window).scroll의 함수를 생성한다. window의 scrollTop(); 의 값은 scTop의 변수로 담고 if문으로 윈도우의 스크롤 값이 section1의 top 스크롤의 값 -200을 뺀 위치 (section1의 위치에 까지 도달해서 이미지와 텍스트가 나오면 늦기 때문에 내리기 전의 영역부분에서 부터 나타나주는게 좋기때문) 에 도달 하면 animate가 작동하는 원리이다. >기존의 영역이 화면 밖인 -100% 값으로 빠지거나 영역밖으로 빼

2022년 12월 25일
·
0개의 댓글
·
post-thumbnail

Front-end 국비지원 #036일

반응형 페이지 제작 1-2 > 지난 1-1 header 영역 이어서 제작한다. >HTML > CSS >Script >뉴스 부분 호버하면 멈추고 마우스를 떼면 뉴스가 하단에서 숨겨진 상태로 계속 슬라이드 된다. > 결과 JavaScript Back To Top (top으로 이동 버튼 만들기) >결과 >HTML >CSS >Script accordion 메뉴 만들기 > 결과 ![](https://velog.velcdn.com/images/nuyhes/post/ab980644-ca40-4

2022년 12월 4일
·
0개의 댓글
·

[TIL] Inset, Offset, 레이아웃 변경 메소드

Inset, Offset ? > inset과 offset의 정확한 정의를 잘 모르는 느낌이라 찾아 보았다. 참조 https://minosaekki.tistory.com/36 Inset은 더 작은 것으로 더 큰 것이 설정되는 것(예로, 작은 사진이 큰 사진 안에 있는 것 같은)인 반면에 offset은 균형 잡힌 역할을 하게 하는 것이다. 만약, 그림자의 inset이 (-10, -10) 이라면 그림자는 해당 객체보다 10픽셀 넓고 10픽셀 높은 것이다. 음수로 넣게 되면 그림자를 크게 만들고 양수로 만들면 그림자의 크기를 더 작게 만든다. Content Inset content view가 safe area 또는 scroll view의 가장자리로부터의 inset을 의미 content inset은 하위 뷰 콘텐츠에 상하좌우로 빈 공간(padding)을 주는 것이다. 위에서 자기 자신의 바깥쪽이 아닌 안쪽으로 공간을 주는 것을 의

2022년 12월 4일
·
0개의 댓글
·

Jquery 클릭 시, 해당 태그로 이동..

script 부가 설명 offset.top - 172 : 위의 네비게이션바의 크기(172px) 만큼 위치를 조정하였음. .navEl_01 : 클릭 할 버튼의 className .section03_02 이동할 div의 className animate : 애니메이션 offset : 위치 scrollTop : 화면 기준 위로 가게 위치 400 : 0.4초의 스크롤 애니메이션

2022년 8월 30일
·
0개의 댓글
·
post-thumbnail

220822 JavaScript

scroll 스크롤바의 위치가 이동되는 이벤트(마우스휠이나 스크롤바의 스크롤을 누름에 따라) scrollTop() 스크롤바의 스크롤탑에서 부터의 위치, 스크롤바 위치 조정 scrollTop(수치) 두번째 상자의 위치에 걸치게 됨. offset().top 요소가 문서상단에서 떨어진 top값을 가져오기 ![](https://velog.velcdn.com/images/honey1122/post/02335a5c-9598-4664-8a80-fbdaf8cca776/imag

2022년 8월 25일
·
0개의 댓글
·

@GestureState와 offset을 활용해서 View 움직이기

예전에 DragGesture를 통해서 View를 움직이는 방법을 소개한 적이 있는데요. 그 때는 그냥 @State에 CGFloat를 할당해서 구현했었습니다. 하지만 좀 더 Gesture에 특화된 property wrapper가 있는데요. 바로 @GestureState입니다. GestureState @GestureState는 Gesture와 연결하는 특수한 @State 변수입니다. 이 변수를 DragGesture를 통해 업데이트하고 이 값을 View의 offset에 연결하여 View를 움직입니다. @GestureState 변수의 초기값은 CGSize.zero입니다. 따라서 View는 원래 위치에 존재합니다. 그리고 DragGesture에 updating이라는 메소드로 연결합니다. binding으로 연결해주어야 하고요. 어떤 방식으로 업데이트할 것인지 클로저로 정의해주어야 합니다. 해당 클로저는 3가지 인자를 받는데요. 첫 번째는 Gesture.Value 타입으로 드래그

2022년 8월 21일
·
0개의 댓글
·
post-thumbnail

220817 JavaScript

Hoisting 개념 함수 안에 있는 선언들을 끌어올려 Parser가 함수 실행 전 해당 변수 or 함수들을 한번 훑음. var변수 선언과 var함수 선언문에 호이스팅 일어남. 선언만 끌어올려짐. 문제점 error가 아닌 undefined 출력. (초기값이 없다면 선언과 동시에 undefined로 초기화되는 특징) Parser가 var a;를 맨 위로 끌어올려 훑었기 때문. 해결 ES6+에서 const, let을 사용. 그렇다면, 호이스팅을 왜 알아야 할까? ES5로 컴파일 해야하는 경우도 있기 때문. let, const는 호이스팅이 발생하지 않을까? let, const또한 호이스팅이 발생. 단, 선언과 동시에 초기화 되지 않아 호이스팅이

2022년 8월 19일
·
0개의 댓글
·

[React--Monster예제 3] Limit과 offset을 활용해 pagination 구현하기

그동안 해보고 싶었던 기능중 하나는 바로 pagination기능이다. 보통 구현을 하기전에 "어떻게"를 먼저 생각해보곤 하는데, 실제로 구현에 들어가기 전에 고민했던 시간이 비교적 많았다. 사고의 흐름 1 fetch()로 데이터를 다 받아오고 useState에 저장. 1,2,3,...Next 버튼마다 onClick 이벤트를 이용한다. 이벤트가 일어날 대 실행되는 함수에는 각각의 데이터마다 부여된 id값을 이용해 조건문처리를 해준다. 참인 조건에 따라 데이터 list를 useState에 저장 . . . 이 방법은 버튼마다 조건이 달라야하고 그만큼 반복적인 코드가 많이 들어가기 때문에 아닌듯해서 포기. > 포기 후 구글링을 해보니 페이지네이션 알고리즘을 이용한다는 걸 알게됨. offset과 limit값을 동적으로 사용해 map함수로 뿌려주는 방법이었다. 👆 실제 구현 > 구현하려고 보니 예제코드에 어떻게 구현해야 되는지 설명한

2022년 8월 14일
·
0개의 댓글
·