본문 바로가기

분류 전체보기54

랭체인(LangChain)이란? 랭체인은 초거대 언어모델을 활용한 어플리케이션 개발 프레임 워크이다. 이를 더 쉽게 말하자면 랭체인은 초거대 언어모델을 기반으로 다양한 언어 처리 작업을 수행하는 도구 모음🛠️이라고 생각하면 된다. 그렇다면 여기서 초거대 언어 모델이란 무엇일까? ▶ 초거대 언어 모델이란? 언어 기반의 모델인데 모델의 크기가 굉장히 크기 때문에 초거대라고 표현한다. 초거대 언어모델은 대규모의 텍스트 데이터를 학습하여 인간의 언어를 이해하고 이를 통해 문장을 구성하는 방법, 단어의 사용, 문맥에 따른 언어의 변화 등을 파악할 수 있다. 그래서 초거대 언어모델을 바탕 자동 번역, 챗봇 서비스 , 정보 검색 및 분석 기능 등으로 활용할 수 있다. 랭체인은 이러한 초거대 언어모델의 기능을 보다 쉽고 효과적으로 활용할 수 있게 하.. 2024. 1. 26.
JSON 문자열 JAVASCRIPT 객체 변환 오류 오류 발생 redis 채팅 데이터를 프론트에 보내기위해서 json 문자열을 javascript 객체로 변환하려 할때 다음과 같은 오류가 발생했다. const change = JSON.parse(chatData); Unexpected non-whitespace character after JSON at position 73 오류 발생 원인 찾아보니 `JSON.parse` 함수는 단일 JSON 문자열만 처리할 수 있기 때문에 오류가 발생하는 거였다. 해결방법 해결을 위해서는 배열 내 각 JSON문자열을 개별적으로 파싱해야한다. forEach를 통해 각 JSON문자열을 개별적으로 파싱했다. chatData.forEach((item) => { const parsedItem = JSON.parse(item); r.. 2024. 1. 25.
웹 실시간 통신 방법(웹소켓, polling,long polling, streaming) 먼저 웹 실시간 통신방법에 대해서 알기 위해서는 http에 대해서 알아야한다. 브라우저에서는 HTTP Protocol을 사용해서 데이터를 주고 받기 때문이다. HTTP란? 쉽게 말해서 클라이언트와 서버가 주고 받는 통신이라고 생각하면 된다. 이러한 http는 ⇒ 클라이언트가 보낸 요청에 대해 서버가 응답을 마치면 맺었던 연결을 끊어버리는 비연결성의 성질을 가지고 있음. ⇒ 따라서 HTTP는 request, response 형태의 단방향 통신이며 한번 통신을 할때마다 많은 양의 데이터를 header에 담아서 보내게 됨 . 이렇게 http는 단방향성이기 때문에 실시간 통신을 하는것처럼 보이기 위해서 서버에게 계속적으로 요청을 보내야하고 요청을 보낼때마다 불필요하게 많은 양의 데이터를 보내야한다는 단점이 있다.. 2024. 1. 25.
실시간 채팅 기능 수정하기(실시간 채팅 업데이트) 예전에 진행했던 트위터 프로젝트 문서를 블로그에 올리면서 많은 오류를 발생했다. 그래서 최근에 트위터 프로젝트 코드를 다시 고쳐나가 시작했다. 그 중 가장 많이 고쳤던 것은 실시간 채팅 부분이다. 오늘 새로 수정한 부분은 채팅 데이터를 실시간으로 반영해서 화면에 보여지게 하는 코드를 수정한 것이다. 예전의 코드에서는 현재 로그인한 유저가 보낸 메세지만 실시간으로 채팅창에 업데이트 되었지만 이제는 다른 유저가 보낸 메세지도 즉각적으로 업데이트된다. 수정된 코드는 다음과 같다. 처음 채팅 데이터를 받는게 아니라 상대방이 새로운 데이터를 보내면 배열 형태가 아니라 오브젝트 형태로 받게 된다. -> 이를 활용해서 만약 웹소켓으로 받은 새로운 데이터가 단일 객체일때 새로운 코드 추가 -> 새 데이터 채팅를 보낸 .. 2024. 1. 24.
메세지 채팅 기능 구현하기(백엔드 코드, redis 연결 ) 이 글은 아래의 메세지 채팅 기능 구현하기 (프론트 코드)와 이어지는 글입니다! 이번 글에서는 백엔드 코드에 대해서 적어볼 예정입니다. 메세지 채팅 기능 (웹소켓, redis, 실시간 알람 기능) 미리보기 📁 채팅 기능 미리보기 실시간 소통을 위해서 웹소켓 통신 방법을 사용하였고, 채팅 데이터를 저장하기 위해서 redis를 사용했다. redis 를 사용하게 된 이유는 기존에 사용하던 mysql 데 in-my-universe23.tistory.com 미리보기 📁 채팅 기능 미리보기 백엔드 웹소켓을 사용해서 실시간 통신을 구축하고 redis를 통해서 유저들 소켓 아이디, 소켓 채팅 데이터 등을 Redis 클라이언트 설정 및 연결 : 데이터 베이스 연결을 설정하고 관리 소켓 이벤트 핸들러 : 클라이언트와 실시.. 2024. 1. 24.
메세지 채팅 기능 (웹소켓, redis, 실시간 알람 기능) 미리보기 📁 채팅 기능 미리보기 실시간 소통을 위해서 웹소켓 통신 방법을 사용하였고, 채팅 데이터를 저장하기 위해서 redis를 사용했다. redis 를 사용하게 된 이유는 기존에 사용하던 mysql 데이터베이스는 상대적으로 실시간 데이터를 가져오기에는 느릴것이라고 판단했고 redis는 빠른 읽기/쓰기 성능 제공, 실시간으로 데이터 접근하고 업데이트, 빠른 응답 시간 유지 Pub/Sub 기능 제공 (특정 집단에 메세지 전달 유용할것이라고 판단) 같은 장점을 가지고 있기때문에 사용하게 되었다. 이번 게시물에서는 채팅 기능 중 프론트 쪽 코드에 대해서 적어보고자 한다. 기능 설명 프론트 Auth 페이지 로그인하면 login통신으로 로그인한 유저 email과 socketId를 보내줌. Message 페이지 u.. 2024. 1. 24.
SearchBar 검색기능 만들기 📁 SearchBar 미리보기 SearchBar 기능 구현 과정을 간단하게 정리해보자면 다음과 같다. 프론트 Search bar 만들기 사용할때 실행할 백엔드 API prop으로 받아옴 search 버튼을 누르면 search 상태값 업데이트 . 전역적으로 관리 업데이트된 search 데이터를 가지고 prop으로 받은 API 실행 백엔드 search value값 param으로 받아서 데이터를 찾을때 search value값이 포함된 데이터만 가져오도록 설정 실제 구현한 코드 각 페이지에서 트윗 데이터를 가져오는 API가 다르기때문에 데이터를 가져오는 함수를 넘겨받아서 사용했다. 그리고 searchBar 디자인은 간단하게 tailwind에서 지원해주는 searchBar를 가져와 수정해서 사용했다. const.. 2024. 1. 23.
트위터 팔로우 기능 구현하기(React, CSS hover기능) 구현한 기능 following 클릭하면 follow 로 바꾸기 팔로우중일 경우, 버튼 위에 마우스를 올렸을때 다른 css주기 구현 과정 데이터베이스에 follow 테이블 생성 & user table과 관계 형성 follow 데이터를 저장하는 saveFollow API 코드 생성 데이터를 가져오는 getTweets파일 수정 ⇒ explore페이지의 people데이터를 가져올때, 데이터 중에서 현재 로그인한 currentUser가 팔로우한 유저의 데이터가 있으면 is_follow값을 true값으로 반환(기본값은 false) 팔로우 버튼 css 수정 백엔드 saveFollow 코드 현재 로그인한 사용자의 이메일 아이디를 통해 유저 id를 찾고 팔로우할 유저와 현재 로그인 유저 데이터를 follow model에.. 2024. 1. 22.
Explore 페이지 만들기 📁 Explore 페이지 미리보기 Explore 페이지 기능에 대해서 간단하게 정리해보자면 다음과 같다. SeacrchBar : 키워드 검색 누르면 해당 키워드를 포함한 데이터를 보여줌. Top : 키워드가 포함된 트윗 데이터들을 하트 수가 많은순으로 보여줌 Latest : 키워드가 포함된 트윗 데이터들을 최신순으로 배열 People : 계정정보에 키워드가 포함된 유저 데이터들을 보여줌 실제 구현한 코드 대부분 백엔드 코드는 getTweet API와 거의 동일하게 사용한다. 다른 점은 트윗 데이터를 가져올때 search 데이터를 가져와서 해당 글자를 포함한 데이터를 가져온다는 점이다. Top부분 마지막에 like 숫자에 따라 많은 순으로 데이터를 다시 정렬하여 프론트 보여주게 된다. data: topUs.. 2024. 1. 22.

티스토리툴바