땅땅 Dev 💻

Swift UI - 4. 로그인 UI 화면 구현 이전에 구현한 회원가입으로 회원이 등록되었다(DRF로 회원가입 API를 구현) 이제 등록된 회원으로 로그인을 진행하고 키체인을 이용해서 Access Token 및 Refresh Token을 저장하여 앱 사용 중 로그인 상태를 유지할 수 있도록 해보자. // // LoginView.swift // mbtiPlayground // // Created by 박종후 on 2022/03/16. // import SwiftUI struct LoginView: View { @State private var email: String = "" @State private var password: String = "" @State private var loginStatus: ..

Swift UI 를 사용한 회원가입 및 로그인 화면 구현 - 백엔드는 Django RestFramework 사용 구현 예시 - 회원가입 회원 가입은 4개 항목 (닉네임, 이메일, 비밀번호(+비밀번호 확인), MBTI 항목)을 입력받는 화면을 만든다. 여기서 MBTI 항목은 HTML에서 말하는 셀렉트 박스 UI를 사용하여 MBTI를 선택하도록 하였다. // // SignUpView.swift // mbtiPlayground // // Created by 박종후 on 2022/03/16. // import SwiftUI struct SignUpView: View { @Environment(\\.presentationMode) var presentationMode: Binding @State private v..

전편에 이어서 채팅방 UI를 구현해보겠다. 채팅방은 클럽하우스 앱의 UI를 참고하여 만들었다. 결과물 화면 결과물 예시 채팅방 상세 화면 구현 채팅방에는 각 유저별 프로필 사진이 들어가야 한다. 그렇기 때문에 프로필 화면도 구현해보자 프로필 화면 구현 프로필 화면의 프로필 사진은 추후 Amazon S3 를 활용해 관리할 예정이다. (REST API로 관련 URL 을 받을 예정). 그래서 이미지 URL 로 프로필 사진을 보여줄 수 있는 UI 가 별도로 필요하다. Swift 에서는 AsyncImage를 사용해서 이미지의 url로(html 에서 image 태그를 사용하는 것과 유사) 사진을 보여줄 수 있다. 아래 코드를 구현하면 다음과 같다. import SwiftUI struct ProfileItem: Vi..

현재 사내에서 키워드를 검색하여 관련 콘텐츠를 보여주는 앱을 구현하고 있다. 기술 기획 - 앱에 들어갈 기술 목록 검색 및 검색 결과 확인 검색 키워드 관련 콘텐츠(텍스트 콘텐츠 또는 채팅방) 텍스트 콘텐츠 음성 채팅방 로그인 첫번째로 텍스트 콘텐츠와 관련 UI를 구현해보자. 텍스트 콘텐츠 UI 구현 텍스트 콘텐츠 상세화면 구현 텍스트 콘텐츠 상세화면에 들어갈 요소는 제목, 출처, 작성일, MBTI 타입, 그리고 콘텐츠 내용이다. 이를 스위프트 UI로 구현하면 다음과 같다. import SwiftUI struct ContentDetail: View { var contItem: ContentDetailData var body: some View { VStack(alignment: .leading){ Gro..

ES로 검색엔진을 구현하였다. 구현된 검색 엔진을 실제 서비스처럼 사용하기 위해 REST API를 구현해보자. REST API의 로직은 단순하게 본다면 2단계이다. 1. 사용자가 검색 키워드를 입력한다. 2. 검색 키워드에 해당하는 문서를 찾는다. 사용자 입력 구현 사용자 입력 구현에서 고려할 점은 단순하게 하나의 키워드만 입력받아서 문서를 상세하게 검색할 수는 없다는 것이다. 유사어, 제외어, 여러 키워드, And 조건, Or 조건 등 다양한 조건으로 검색이 가능하면 사용자에게 더 좋은 검색 시스템이 될 수 있다. 그래서 검색 키워드에서 사용할 수 있도록 특수 커맨드를 정리해보았다. 단일 검색: search= 예) 맨투맨 유사어 검색: search= 예) 맨투맨 +아디다스 => 맨투맨이 포함된 문서에서..

이전 글에서 Elastic Search의 쿼리들을 공부하면서 조금 더 자세하게 데이터 조회를 해보고 싶었다. 그래서 저장된 텍스트들에 한글 형태소 분석기를 적용하여 검색을 좀 더 자세히 할 수 있는 방법을 찾아보았다. Elastic Search 한글 형태소 분석기 Elastic Search 7.0 이후 버전부터는 Nori(노리)라는 한글 형태소 분석기를 사용할 수 있다. (공식적으로는 6.6 버전 이후부터 제공) Nori의 설치는 아래 링크를 참조하여 진행한다. https://www.elastic.co/guide/en/elasticsearch/plugins/current/analysis-nori.html 현 상황 기존에는 아래와 같이 인덱스 & 분석기를 구성하였다. { "settings": { "inde..

필드에 가중치 두기 특정 필드에 가중치를 두는 방법을 사용 - 부스팅 기법. 즉 검색하는 여러 필드 중 중요한 필드를 알고 있다면 그 필드에 가중치를 두어 더 상위로 검색 결과를 올리는 방법 GET product/_search { "query": { "multi_match": { "query": "맨투맨", "fields": [ "category2", "title^2" ] } } } 특정 필드에 가중치를 줘서 특정 필드의 스코어 값을 N배 해주는 효과를 준다. 위 쿼리에서는 title 필드에 2배의 효과를 주었다. 즉 title 필드에서 검색한 결과 스코어에 2배의 효과를 주어 검색 결과를 상위로 올렸다. 논리 쿼리 논리 쿼리는 복합 쿼리로, match, multi_math, match_phrase 등을..

용어 쿼리 용어 쿼리는 완벽하게 매칭되는 단어 혹은 문구를 가져온다. match 쿼리와는 다르게 문장에 대한 full-text-match 검색이기 때문에 문장 전체를 알고 있어야 한다. 기존 review 인덱스에서 review 데이터가 text 타입으로 되어 있어 term 쿼리가 작동하지 않는 문제가 있었다. 그래서 새롭게 인덱스를 구성하였다. "mappings": { "properties": { "prd_id": { "type": "text" }, "review_id": { "type": "text" }, "review": { "type": "text", "fields": { "full": { "type": "keyword" }, // nori 필터를 시도했지만 실패하였다.. 다음에 다시! "nori_..

인덱스 설명 현재 review 인덱스를 생성하였고, review 인덱스의 필드는 아래와 같이 구성되어 있다. "mappings": { "properties": { "prd_id": { "type": "text" }, "review_id": { "type": "text" }, "review": { "type": "text" }, "genders": { "type": "rank_features" } } } 매칭 쿼리 전문(Full-text query) 쿼리로 Match 키워드를 가지고 검색하는 쿼리이다. match에서 사용하는 검색어도 토큰화가 되어 검색한다. 저장된 원문 역시 토큰화 되어 저장되어 있어 가능하다. 하나의 용어를 검색하는 쿼리 GET review/_search { "_source": ["re..