개발잘하고싶다

React Native 웹뷰 브릿지 통신 완전 가이드 (Part 1: 동작 원리)배경React Native 앱에서 웹 콘텐츠를 임베딩해야 하는 상황은 흔하다. 기존 웹 서비스를 재사용하거나, 복잡한 HTML 렌더링이 필요하거나, 웹과 네이티브의 장점을 결합해야 할 때 react-native-webview를 사용한다.하지만 단순히 웹페이지를 보여주는 것을 넘어, 네이티브 앱과 웹뷰 간 양방향 통신이 필요한 순간이 온다:웹뷰 → 네이티브: "다크모드로 전환해줘"네이티브: (다크모드 적용)웹뷰 → 네이티브: "디바이스 정보 알려줘"네이티브 → 웹뷰: "iOS, 버전 1.0.0"웹뷰 → 네이티브: "이 링크를 외부 브라우저로 열어줘"네이티브: (Safari/Chrome 실행)이런 통신을 가능하게 하는 것이 웹뷰..

문제 상황프로덕션 환경에서 6KB 크기의 Lottie 애니메이션 파일을 사용하던 중, 특정 페이지에서 심각한 성능 문제가 발생했다. 파일 용량이 작아 성능 이슈를 예상하지 못했으나, 사용자가 해당 페이지를 3번 정도 방문하면 브라우저가 완전히 멈추는 현상이 재현되었다. 콘솔에는 어떠한 에러나 경고 메시지도 출력되지 않았다.원인 분석문제의 Lottie JSON 파일을 분석한 결과, Repeater 모디파이어에서 극단적인 애니메이션 설정이 발견되었다.Repeater 구조{ "ty": "rp", "nm": "Repeater 1", "m": 2, "c": { "a": 1, "k": [ { "s": [1], "t": 0 }, { "s": [20], "t": 30 }, ..

기본 구조의 문제점원래 구조[FE] → 오디오 전송 → [BE 서버] → STT 변환 → 검증 → AI에 텍스트 전달 → 답변 생성 → 반환 → FE에 표시문제는 단계마다 네트워크 왕복(RTT)이 발생한다는 점이었다.원래 구조의 주요 병목들FE → BE 오디오 업로드(대기)BE → STT 엔진 호출(대기)STT 응답(대기)BE → AI 모델 프롬프트 전달(대기)AI 응답 대기(대기)FE로 다시 전달(대기)즉, 모든 과정이 순차적 + HTTP 기반이라 전체 지연이 누적된다.이 지연은 실제 사용자 경험에서 굉장히 치명적이다:AI와 실제 “대화”를 하는 느낌이 없음질문하고 최대 10초 이상 멈추는 시간이 발생말 끝까지 듣고 전송하는 STT 방식은 STT 변환 시간이 길면 치명적스피커·마이크 순환 문제도 많음이..

📚 WebRTC + LiveKit 실전 개발 시리즈 (Index)WebRTC는 문서만 보고 시작하면 금방 막히는 기술이다.LiveKit을 기반으로 실제 서비스를 구축하면서 겪은 문제와 해결 방법을 정리하고자 이 시리즈를 작성했다.아래 글들은 독립적으로 읽어도 되고, 순서대로 따라가도 자연스럽게 이해된다.1) WebRTC( LiveKit) 선택 이유왜 WebRTC(LiveKit)을 도입하게 되었는지까지 기술 선택의 배경 2) LiveKit 기반 서비스 아키텍처 구조→ (작성 예정 / 링크 추가)AI 롤플레이 서비스에서 WebRTC·WebView·STT/TTS·토큰 서버·분석 서버가 어떻게 연결되는지 전체 구조를 정리한다 3) LiveKit의 핵심 개념 정리 (Room, Track, Participant)..

1. Arithmetic Operations:let a = 5, b = 10;console.log(`Before: a = ${a}, b = ${b}`);a = a + b; // a = 15b = a - b; // b = 5a = a - b; // a = 10console.log(`After: a = ${a}, b = ${b}`); 2. XOR:let a = 5, b = 10;console.log(`Before: a = ${a}, b = ${b}`);a = a ^ b;b = a ^ b;a = a ^ b;console.log(`After: a = ${a}, b = ${b}`); 3. ES6let a = 5, b = 10;console.log(`Before: a = ${a}, b = ${b}`);[a, b] ..

유튜브 강의https://www.youtube.com/watch?v=bh23BDYOry8  1. 효율적인 데이터 관리적절한 자료구조를 사용하면 데이터를 삽입, 삭제, 검색하는 작업이 훨씬 빠르고 효율적으로 수행됩니다.ex) 배열을 사용하면 인덱스를 통해 빠르게 접근할 수 있지만, 삽입이나 삭제가 빈번한 경우 연결 리스트가 더 적합할 수 있습니다. 2. 문제 해결 능력 향상많은 알고리즘 문제는 특정 자료구조를 활용하여 해결할 수 있습니다.ex) 그래프를 사용하면 네트워크 경로 탐색 문제를, 트리를 사용하면 계층적 데이터 구조를 처리하는 문제를 효율적으로 해결할 수 있습니다. 3. 코드의 유지보수성 향상잘 설계된 자료구조는 코드의 복잡성을 줄이고, 변경 사항이 발생했을 때 수정하기 쉽게 만들어 줍니다. ex..

혼자서 혹은 팀으로 사이드 프로젝트 진행할 때, 내가 잘하고 있는지 궁금한 적 없었나요?하지만 혼자하니까 피드백을 받을 방법이 없고, 같이 하는 팀원분들도 영양가 있는 피드백을 주기 어렵다고 느낀 적 없었나요? 만약 Github 를 이용중이시라면, 간단한 코드를 넣어서 피드백을 받으실 수 있습니다. 우선 시작 전에 2가지를 알고 있으셔야 합니다.이 기능은 사용하신 만큼 돈이 듭니다.Github를 사용중이여야 하고, PR을 올릴 때 리뷰를 받기 수월합니다.이미 Github Workflow를 사용해보신 분이 있다면 간단하게 파일 하나만 추가해주시면 바로 적용해보실 수 있습니다. 내가 선택한 Github Work flow https://github.com/marketplace/actions/chicken-co..

앞으로 next.js로 다국어 페이지를 만들때 필요한 요소들입니다. 1. next로 만든 패키지 (app router 로 구성할 예정) 2. 구글 스프레드 시트 3. 구글 스프레드 시트 next 패키지 연동 목차 1. next 프로젝트 만들기 2. next 다국어 기초 프로젝트 셋팅 3. 구글 스프레드 시트 연동하기 4. 구글 스프레드 시트 next 프로젝트 연결하기 1. 프로젝트 생성하기 2. 다국어 관련 라이브러리 설치 yarn add i18next react-i18next

개요 클론 코딩 하기 좋은 소재 중 하나로 애플 페이지가 있습니다. 애플 페이지를 보면 다양한 언어를 지원하는 걸 볼 수 있습니다. 다국어 페이지를 도메인으로 제공하는 방법은 크게 두가지가 있습니다. url은 아래와 같이 분리할 수 있습니다. ex) www.appple.com/kr [서브도메인].[도메인]/[path] Loading... q1.quotes.com 1. 서브 도메인으로 페이지를 분리 ex) kr.apple.com 2. path 로 페이지를 분리 apple.com/kr 1번의 예시는 아래의 사이트로 확인할 수 있습니다. https://ko.duolingo.com/ 무료로 외국어를 배우세요. 게임을 통해 영어를 비롯한 다양한 언어를 배워보세요. 100% 무료로 제공되는, 게임처럼 재미있고 과학..

`target="_blank"` 및 기타 옵션 _blank: 이 옵션은 링크를 클릭했을 때, 새 탭이나 창에서 해당 URL을 엽니다. 링크된 리소스가 현재 탭이나 창과는 독립적인 경우에 주로 사용됩니다. _self (기본값): 링크된 문서를 현재 창이나 탭에서 엽니다. _parent: 링크된 문서를 부모 프레임에서 엽니다. 현재 페이지가 프레임 내에 있지 않은 경우, 이 옵션은 `_self`와 동일하게 작동합니다. _top: 링크된 문서를 현재 창의 최상위 프레임에서 엽니다. 여러 계층의 프레임이 있는 경우, 모든 프레임을 무시하고 최상위에서 문서를 엽니다.