스럽 공식 블로그

mysql의 데이터를 사용해서 elastic search에서 검색을 하기 위해서는 elastic search 에 우리의 데이터베이스에 있는 데이터들을 담는 작업을 따로 해줘야한다. 그리고 elastic search와 database를 일정 간격으로 동기화해주는 작업은 필수이다! 이를 위한 도구로서 logstash를 사용할 것이다. logstash가 무엇인지는 아래 링크 참고하자. [Elastic Search] ELK 로컬환경에 설치하기, 버전 변경하기 (for MAC) 검색 시스템을 구축하기 위해 먼저 ELK Stack 환경을 구성하려고한다. (ELK는 Elastic Search와 Logstash, Kibana를 앞글자만 딴 단어이다.) 스럽 ELK Stack 구성 Java 11 Elastic Searc..

Elastic Search 2023. 4. 30. 00:08

기존의 Sluv 애플리케이션의 문제점을 보완하기 위해 webView로 처리했던 로그인 부분을 native 코드로 변환하면서 적은 글입니다. SwiftUI를 처음 접해보는 초보자 입장에서 카카오 로그인을 진행하다보니 막히는 부분도 많았고 어떻게 진행하는지 정리하는 차원에서 글을 적게 되었습니다. How to Implement 1. Kakao Developers에 등록하기 카카오톡 소셜 로그인을 하기 위해서는 일단 Kakao Developers 사이트에 앱을 등록해야합니다. 앱을 등록하기 위해서는 Kakao Developers 사이트에 로그인하고 등록해야 합니다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능..

iOS 2023. 4. 29. 23:54

AOP란? AOP란 Aspect Oriented Programming. 즉, 관점 지향 프로그래밍이다. AOP는 횡단 관심사의 분리를 허용함으로써 모듈성을 증가시키는 것이 목표인 프로그래밍 패러다임이다. 코드 그 자체를 수정하지 않는 대신 기존의 코드에 추가 동작(어드바이스)을 추가함으로써 수행하며, 어느 코드가 포인트컷(pointcut) 사양을 통해 수정되는지를 따로 지정한다. 이를 통해 기능의 코드 핵심부를 어수선하게 채우지 않고도 비즈니스 로직에 핵심적이지 않은 동작들을 프로그램에 추가할 수 있게 한다. - 위키백과 - 즉, AOP는 핵심 비즈니스 로직에서 횡단 관심사를 분리해 애플리케이션의 특정 부분에 적용하는 것을 말합니다. 횡단 관심사? 횡단 관심사란 애플리케이션의 여러 핵심 비즈니스로직에 공..

Backend 2023. 4. 29. 22:48

앞선 글에서는 React 컴포넌트의 생성에 있어 Typescript의 중요성과 이의 장점에 대해 정리했습니다. 이번 글에서는 Styled-components 와 Typescript를 활용하여 컴포넌트의 재사용성을 높이는 방법을 알아보겠습니다. Styled Component 란? 우선 Styled Coponent에 대해 설명하는 걸로 시작하겠습니다. styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com Styled Component는 React에서 스타일을 작성하는 방식 중 하나입니다. 기존에..

Frontend 2023. 4. 29. 15:42

사용자들의 회원가입과 로그인을 간편하게 바꿔주는 소셜 로그인입니다. 최근에는 로컬 로그인은 구현하지 않고, 소셜 로그인으로만 구현을 하는 앱들이 늘어나고 있습니다. Sluv은 3개의 소셜 로그인 서비스를 제공합니다. [카카오, 구글, 애플] 어떻게 구현했는지 소개해드리겠습니다. 시작하기에 앞서 Sluv은 Client-Side-Rendering도 아니고 Server-Side-Rendering도 아닌, 네이티브(안드로이드, IOS), Client Sever(React)와 Server(Spring)이 공존하는 환경입니다. Client-Side-Rendering 혹은 Server-Side-Rendering일 경우 처리하는 부분이 달라질 수 있습니다. 카카오 소셜 로그인 1. 로그인 정보 (Front → Kak..

Backend 2023. 4. 29. 15:39

애플리케이션에는 수많은 컴포넌트가 존재하고, 이러한 컴포넌트들은 다양한 페이지, 또 다른 컴포넌트 내에서도 활용될 수 있습니다. 다음은 현재 스럽의 디자인 내용입니다. 그림을 보면, 버튼만 하더라도 수많은 케이스가 존재합니다. 버튼의 사이즈부터 배경색상, 글자 색상, 버튼 테두리, 아이콘의 유무, 심지어 같은 사이즈의 버튼 내에서도 서로 다른 디자인을 갖고 있습니다. 제일 처음에 나온 Button/Medium의 경우를 잠시 살펴보면, 4가지의 케이스가 존재합니다. 하지만 이렇게 많은 컴포넌트들을 하나하나씩 매번 생성하게 된다면, 코드의 가독성이 떨어지게 되고, 동일한 내용의 코드가 반복되기 때문에 코드의 양이 늘어나는 등 퍼포먼스 측면에서도 다양한 문제점이 존재합니다. 따라서, 모든 React 컴포넌트 ..

Frontend 2023. 4. 29. 14:14

엘라스틱 서치는 인덱스에 저장된 문서를 검색할 수 있도록 다양한 검색 기능을 제공한다. 문서는 색인시 설정한 분석기에 의해 분석 과정을 거쳐 토큰으로 분리되는데, 이러한 분석기는 색인 시점에 사용할 수 있지만 검색 시점에 사용하는 것도 가능하다. 활용 가능한 검색 기능들을 알아보고, 스럽에서 어떻게 적용하고 있는지 살펴보자 ! (분석기에 대한 내용 아래 링크 참고) [Elastic Search] 데이터 모델링 엘라스틱서치에서는 색인할 때 문서의 데이터 유형에 따라 필드에 적절한 데이터 타입을 지정해야한다. 이러한 과정을 매핑이라하며, 매핑은 색인된 문서의 데이터 모델링이라고도 할 수 있다. gyu-ree.tistory.com 특정 문장이 검색어로 요청되면 분석기를 통해 분석된 토큰의 일치 여부를 판단해서..

Elastic Search 2023. 4. 29. 09:04

DB로 들여다보는 Sluv의 성장 과정 (1) 저번 글에서는 Sluv의 DB를 설계하는 3단계 방법을 소개했습니다. 이번글에서는 Sluv DB를 설계하면서 어려웠던 점과 그 부분을 어떻게 해결했는지에 대해 소개해드리겠습니다. Sluv DB를 설계하며 어려웠던 부분은 다음과 같습니다. 1. 기존에 DB에 있는 Brand와 Celeb이 아닌 새로운 Brand나 Celeb을 사용자가 추가하는 경우. 2. 질문하기 커뮤니티의 타입에 따라 저장해야 하는 정보의 종류가 달라 발생하는 문제. Sluv DB를 설계하면서 어려웠던 점 1 1. 기존에 DB에 있는 Brand와 Celeb이 아닌 새로운 Brand나 Celeb을 사용자가 추가하는 경우. Sluv의 정보 공유 게시글을 등록할 때는 착용한 Celeb과 어떤 브..

DB 2023. 4. 28. 23:22