본문으로 건너뛰기

[바라봄 개발log] 반려동물과 대화 기능 만들기 두 번째

· 약 6분
Jeonghun Kim
Frontend Developer

잡담

또롱이(우리집 고양이)와 대화하면 어떨까?! 라는 단순한 아이디어로 반려동물 채팅 MVP를 만든 지 벌써 3년이 지났다. (ChatGPT 활용해 반려동물 대화 기능 만들기)

AI Agent도 없던 시절이라, 반려동물 채팅 기능까지 유지보수하기는 1인 개발자로서 쉽지 않았다.

그렇게 얼마 지나지 않아 당시 연결해둔 LLM API가 종료되었고, 단일 문자열 프롬프트에 강하게 의존하던 구조는 LLM API 변경에도 쉽게 망가져버렸다.

그렇게 방치된 기능으로 2년이 흘렀다.

ReactNative - 실시간 Data streaming (SSE)

· 약 2분
Jeonghun Kim
Frontend Developer

Server-Sent Events(SSE) 란?

서버에서 클라이언트로 실시간으로 데이터를 보낼 수 있게 해주는 웹 기술.

SSE는 HTTP 연결을 사용하며, 클라이언트가 'text/event-stream'이라는 MIME 타입으로 GET 요청을 서버에 보내고, 서버는 이 연결을 유지. 이후 서버가 새로운 이벤트를 이 연결을 통해 전송함.

웹소켓과 비슷하지만, SSE는 단방향 통신만을 지원함. 만약 클라이언트에서 요청을 보내기 위해서는 별도의 HTTP 요청을 사용해야 됨.

RN 에서의 SSE

Javascript - Event Loop

· 약 2분
Jeonghun Kim
Frontend Developer

이벤트 루프란?

자바스크립트는 싱글 스레드(single-thread) 기반으로 동작됨. 즉, 한 번에 하나의 작업만 처리할 수 있다는 것을 의미. 하지만 자바스크립트는 이벤트 루프(event loop)를 통해 비동기적으로 동작할 수 있도록 지원.

이벤트 루프는 자바스크립트 엔진의 메인 스레드에서 동작하는 무한 루프. 이 루프는 실행 중인 코드와 이벤트 큐(event queue)를 관찰하고, 이벤트 큐에 이벤트가 들어오면 해당 이벤트를 처리하는 작업을 수행.

[바라봄 개발log] ChatGPT를 이용한 반려동물 대화 개발

· 약 2분
Jeonghun Kim
Frontend Developer

잡담

필자의 본업은 코딩학원의 직원으로 주 업무는 외주개발이지만, 종종 아이들에게 강의도 하고 학부모 상담도 한다.

그리고 수 년전부터 코딩을 잘 모르시고 OA, 자격증을 원하시는 학부모 상담시 이런 말을 했었다.

'아이들이 성인이 되었을 때의 미래는 지금으로선 상상하기 힘들다. 20년 전 스마트폰을 상상하지 못했듯.'

'그렇기 때문에 아이들이 코딩을 배움으로 AI가 어떻게 생각하고, AI에게 어떻게 명령해야 할지를 깨우치는 게 중요하다.'

ReactNative - JSX와 Babel

· 약 1분
Jeonghun Kim
Frontend Developer

JSX란?

JSX는 Facebook에서 개발한 JavaScript의 확장 문법. React와 함께 사용되며, 컴포넌트 기반 UI 라이브러리.

JSX는 XML과 유사한 문법으로, HTML 태그와 비슷한 형태로 UI를 작성할 수 있음.

컴파일러에 의해 JavaScript 코드로 변환됨.

Babel이란?

ReactNative - 레이아웃 스타일 Flex Gap

· 약 1분
Jeonghun Kim
Frontend Developer

Gap 이란?

react native 0.71 버전 부터 지원.

Flex Gap 속성을 사용하면 각 아이템들의 margin 값을 일일히 조정하지 않고도, 아이템들 사이의 간격을 일관되게 유지할 수 있음.

(단, 0.71 버전의 경우 픽셀만 지원. 백분율과 같은 값은 불가.)

마진 사용시 가장자리까지 적용됨.

[바라봄 개발log] 홈페이지 업데이트 / DAU 200 후기

· 약 2분
Jeonghun Kim
Frontend Developer

항상 개발 완료가 진짜 시작이더라...

바라봄 홈페이지를 오픈한지 약 2달, 단순히 바라봄을 설명하는 홈페이지로 남겨 놓기엔 너무 아까웠다.

그래서 홈페이지를 어떻게 활용할지 많이 고민했다.

SEO를 통해서 상위 노출을 시키고 싶었지만 검색 순위 상승을 위해선 백링크가 중요하다고 한다.

백링크란? - 위키