KBW's cosmos

필자는 Next.js와 Spring Boot를 이용해 서비스를 개발하고 있다. 이번에 무한 스크롤 기능이 필요했는데, No-Offset 방식의 레퍼런스가 많이 없어 애를 먹었다. 시행착오 끝에 잘 작동하여 이를 정리해보고자 한다. 근데 No-Offset이 뭐지? No-Offset 페이지네이션은 Offset을 사용하지 않고 페이지네이션을 진행한다는 말이다. Offset은 게임 개발할 때 많이 쓰이는 단어이기도 하다. 일반적으로 Offset을 사용하는 페이지네이션은 Offset(어디부터) limit(몇개의) 데이터를 불러올지 결정한다. 즉, 네이버 카페 같은 곳에서 볼 수 있는 위와 같은 번호들이 페이지 넘버이고 이 페이지 넘버가 Offset이라고 생각하면 된다. No-Offset은 이러한 Offset을 사..

React-Query의 useMutation을 커스텀 훅으로 만들어두면 편하다. 필자는 여기에 더해 mutate를 다루는 handler 함수를 정의하고 반환하는 방식의 커스텀 훅을 구현하였다. 아래는 예시 코드이다.(Typescript) 주석친 부분은 무시해도 된다. interface MutationProps { postId: number updatePostRequest: UpdatePostType } function usePostMutation( postInfoBeforeUpdate: PostInfoType, userId: number, updatedTitle: string, updatedContent: string, updatedIsAnonymous: boolean ): { handlePostMuta..

최근 하이브리드 앱을 많이 만들었다. 하이브리드 앱은 네이티브 앱에 비해 스토어(구글 플레이스토어, 애플 앱스토어)에 덜 종속적이고 별도의 심사과정없이 최초 등록만 되면 빠른 업데이트가 가능하다는 차별점이 있다. 하지만 하이브리드 앱은 웹뷰를 이용하기에 네이티브 앱에 비해 신경써야할 부분이 조금 더 많다. 이 중 하나가 바로 Flutter와 Webview에 띄워진 웹 간의 통신이다. 필자는 Flutter의 웹뷰 패키지로 아래 webview_flutter 패키지를 사용하였다. (4.0.0 이상 버전 사용) webview_flutter | Flutter Package A Flutter plugin that provides a WebView widget on Android and iOS. pub.dev 1. ..

ios의 경우 제스쳐로 뒤로가기가 가능하지만 기본적인 시스템 뒤로가기가 없다. 하지만 안드로이드의 경우 기본적으로 시스템 네비게이션 바가 있기에 웹뷰로 작동하는 어플리케이션이 비정상적으로 종료되는 것처럼 보일 수 있다. 때문에 웹뷰 구현 시 따로 뒤로가기에 대한 구현을 해줘야한다. 필자는 가장 좋아요 수가 많은 flutter 공식 팀에서 만든 웹뷰 패키지인 webview_flutter 패키지를 사용하였다. https://pub.dev/packages/webview_flutter webview_flutter | Flutter Package A Flutter plugin that provides a WebView widget on Android and iOS. pub.dev 이번에 4.0.0 버전으로 업그레..

ec2에 배포 후 문제가 발생할 수 있다. CI에 문제가 없다면 CD 쪽을 살펴야하는데 필자는 AWS의 CodeDeploy를 사용했다. codedeploy의 로그 파일은 깊숙한 곳에 숨어있어 찾기 어려운 경우가 많은데, 리눅스의 tail 명령어를 사용하면 손쉽게 확인할 수 있다. tail -f /opt/codedeploy-agent/deployment-root/deployment-logs/codedeploy-agent-deployments.log 리눅스의 tail 명령어는 파일의 마지막 행을 기준으로 지정한 행까지 파일 내용 일부(기본값은 마지막 10줄)를 출력해주는 명령어이다. tail 명령어는 일반적으로 로그와 같이 실시간으로 변하는 파일을 분석하는데 많이 사용된다. -f 옵션은 tail을 종료하지 ..

api의 도메인이 https 프로토콜을 사용하면서 swagger에서 CORS 오류가 발생하는 문제가 나타났다. 이는 Swagger가 기본적으로 http로 요청을 보내게 설정되어있기 때문이다. 이는 @OpenAPIDefinition 어노테이션으로 수정해주면 된다. ... import io.swagger.v3.oas.annotations.OpenAPIDefinition; import io.swagger.v3.oas.annotations.servers.Server; ... @OpenAPIDefinition(servers = {@Server(url = "/", description = "Default Server URL")}) @SpringBootApplication public class MyApplicati..

웹 서버란 무엇일까? 우선 웹 서버를 하드웨어 관점과 소프트웨어 관점으로 나누어 보아야한다. 하드웨어 관점 '웹 서버의 소프트웨어'와 웹 사이트의 '컴포넌트 파일'들을 저장하는 컴퓨터 (컴포넌트 파일 : HTML, CSS, JS, 이미지) 웹 서버는 인터넷에 연결되어 웹에 연결된 다른 기기들이 웹 서버의 데이터(컴포넌트 파일들)를 주고 받을 수 있도록 한다. 소프트웨어 관점 웹 사용자가 어떻게 호스트 파일에 접근하는지를 관리 웹 서버는 HTTP 서버 형태로 존재(웹 구현 시)하며, HTTP 서버는 HTTP의 소프트웨어 일부 위 두 가지 관점을 합쳐 보면 웹 서버는 브라우저가 HTTP를 통해 파일을 요청했을 때, 요청이 올바른 웹 서버(하드웨어)에 도달하면, HTTP 서버(소프트웨어)가 요청된 문서를 HT..

Mixed Content 에러... 프론트를 https로 배포 후 http로 서버와 통신하려하면 발생하는 문제다. 이 문제를 해결하기 위해서는 백엔드에서 http -> https로 접근할 수 있게 설정을 해줘야한다. 필자는 Spring Boot로 api를 개발하여 AWS EC2에 배포한 상황이였고 https로 설정하기 위해 찾아본 방법 중 간단하고 저렴한 방법에는 아래와 같은 방법들이 있었다. 1. AWS CloudFront 먼저 AWS의 CloudFront를 활용한 방법이다. 클라이언트가 https로 CloudFront와 통신을 하고 CloudFront와 api를 제공하는 주체는 http로 통신하는 것이다. ACM을 사용하면 ssl 인증서를 공짜로 이용할 수 있다. 후술하겠지만 CloudFront는 C..

CDN, CDN 자주 들어봤는데 간단하게만 이해하고 명확히 그 개념을 알지 못했다. 이번 포스팅을 통해 CDN에 대해 자세히 알아보도록 하겠다! CDN (Content Delivery Network) CDN은 Content Delivery Network의 준말로 직역하면 콘텐츠를 전달하는 네트워크라는 의미이다. CDN은 웹페이지, 이미지, 동영상 등의 콘텐츠를 서버에서 사용자로 전달한다. 그런데, 그런 것들은 이미 인터넷망을 통해 이미 전달되고 있지 않은가? 그렇다면 CDN은 왜 필요한 것일까? CDN은 왜 필요할까? 분명히 CDN 없이도 서비스들은 동작한다. 먼저 일반적인 클라이언트와 서버의 통신을 생각해보자. 누군가 어떠한 사이트에 접속한다는 건 해당 사이트를 제공하는 서버 컴퓨터에 방문자의 컴퓨터가..

문제의 발단은 이러했다. @Getter @NoArgsConstructor @Entity(name = "question_posts") public class QuestionPosts extends BaseTimeEntity { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) @Column(name = "question_post_id") private Long questionPostId; @ManyToOne @JoinColumn(name = "user_id", nullable = false) private Users user; @ManyToOne @JoinColumn(name = "dept_id", nullable = false) private DeptCl..