react
-
[Vite] 로컬 개발환경에서 https 도메인 설정하기Javascript & TypeScript 2022. 12. 24. 22:40
React, Vue, Svelte와 같은 프론트엔드 기반 웹 서비스에서 실제 운영중이거나 개발 된 주 도메인의 쿠키(Cookie)값을 확인하기위해, 로컬 환경이지만 마치 실제 운영중인 사이트의 서브 도메인(sub domain)처럼 사용해야 하는 경우가 있다. 이를 해결하려면 아래와 같은 준비가 필요하다. 1. @vitejs/plugin-basic-ssl 설치 @vitejs/plugin-basic-ssl 모듈 설치 및 적용을 통해 https 통신이 가능하도록 해야 한다. 2022.12 Vite4 설명상에선 자체 서명된 인증서도 사용할 수 있다고 하나 정상동작하지 않는다. vite.config.js import { sveltekit } from '@sveltejs/kit/vite'; import basicS..
-
[React] ffmpeg.wasm 메모리 누수 문제 해결Javascript & TypeScript 2021. 5. 8. 16:11
몇칠 전 ffmpeg.wasm 패키지를 소개했던 적이 있다. (ddochea.tistory.com/147) 웹 클라이언트만으로 미디어 파일에 대한 인코딩/디코딩 기술을 사용할 수 있다는 장점과 함께, memory leak이 발생하고 있는 이슈가 있어, 실제 서비스 개발에 도입하기엔 무리가 있을 것 같다고 했었다. 그리고 나서 오늘 좀 더 확인해보는 시간을 가졌는데, thread 관련 문제가 있는건 맞지만, 메모리 부분은 내가 코딩을 잘못해서 생긴 것을 깨닫게 되었다. 이 문제는 내가 만든 예제 뿐만 아니라, 공식사이트에 소개하고 있는 React 예제도 같은 문제가 있다. 아래 코드 공식사이트 예제 코드이다. import React, { useState } from 'react'; import { crea..
-
[Javascript] 브라우저에서 사용하는 인코딩 및 디코딩 패키지 ffmpeg.wasm 소개Javascript & TypeScript 2021. 5. 5. 18:10
미디어파일을 인코딩/디코딩 하는 작업을 구현하는 프로그래머라면 ffmpeg란 오픈소스 툴을 들어본적이 있을 것이다. 카카오 팟플레이어 곰플레이어 등, 상당수의 미디어 플레이어나 인코딩 프로그램에 직/간접적으로 사용되는만큼 파급력이 높다. CLI 명령어 기반이라 이를 편히 사용할 수 있는 UI 기반 툴도 많이 나와있다. 그러나 특성상 웹에서 사용은 어려웠다. 물론 호스팅을 통해 미디어파일을 인코딩/디코딩 서비스를 제공하는 웹사이트도 심심찮게 볼 수 있었겠지만, 어디까지나 내 미디어파일이 웹서버에 업로드되어 처리한 후, 결과를 내려받는 형식이기 때문에 함부로 이용하면 소중한 지적재산권(?)을 내 손으로 넘겨주는 꼴이 될 수 있다. 이와 같은 불상사를 방지할 수 있는 패키지. ffmpeg.wasm를 소개한다...
-
[Javascript Event] Drop 이벤트에 preventDefault, stopPropagation를 적용해도 동작하지 않는 현상 해결Javascript & TypeScript 2021. 4. 27. 23:12
React 프로젝트에서 파일을 Drag & Drop 하기 위한 기능을 구현하고 있었다. React를 대상으로한 Drag & Drop 컴포넌트가 오픈소스상에 많이 존재하긴 하지만, 간단한 기능 구현마저 라이브러리로 도배해야할까 싶어 직접 구현하고 있다. (결국 진행이 간단치 않게 되었다. 🤣) 소스코드는 아래와 같다. import React, { useState, useRef, useEffect, useCallback } from "react"; import { Container, createStyles, Grid, makeStyles, Paper, Theme, } from "@material-ui/core"; const useGridStyles = makeStyles((theme: Theme) => cr..
-
[React] React Router를 적용해도 첫 메인페이지("/") 위치만 표시되는 현상 해결법Javascript & TypeScript 2021. 4. 26. 21:32
Router가 필요한 React 프론트엔드 구현 중 Router를 이동해도 계속 "/" 위치의 컴포넌트만 표시되는 현상이 발생했다. 소스코드는 아래와 같다. route("/")}>Cover route("/Test")}>Test setPrefersDarkMode(!prefersDarkMode)}> 이유를 찾을 수 없어 상당히 헤맸다. 해결법은 를 가장 하단으로 내리면 된다. route("/")}>Cover route("/Test")}>Test setPrefersDarkMode(!prefersDarkMode)}>
-
[WSL2] WSL Ubuntu에 실행한 Web이 host OS에서 localhost로 접속이 안되는 현상을 해결하는 무식한 방법ETC 2021. 4. 25. 15:28
보다 간단한 방법을 https://ddochea.tistory.com/153 에 작성했습니다. 해당 방법을 먼저 시도해보시고, 안될경우 본 포스트 방법을 시도해보시기 바랍니다. WSL에 React 프로젝트를 생성하고 웹 접속을 테스트해보았다. 그런데 기본 접속 정보인 http://localhost:3000 로 접근이 되지 않았다. IP를 입력해서 접근할 순 있겠지만, 이렇게 되면 "Debugger for Chrome"을 통한 React 프로젝트 디버깅을 수행할 수 없다. 해결법을 찾았으나, 상당히 무식한 방법이었다. 만약 다른 네트워크 설정이 포함되어있다면 시도하지 않는 것을 추천한다. 1. 설정 이동 Windows 검색창에서 설정(Settings)를 찾아 연다. 2. 네트워크 및 인터넷(Network ..
-
[9일차] nailed it! 구현 마무리 및 해결되지 않은 문제프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 14. 12:16
nailed it! 9일차를 끝으로 미완성된 재생 Progress bar 기능과 함께 프로젝트를 마무리 지었다. 실제 서비스하기엔 여러모로 부족하지만 애당초 실제 서비스 목표가 아니라 "iPhone과 mp3는 있지만, 맥북도, 앱스토어에 게시된 앱들도 믿지 못해서 직접 만든 웹 기반 음악 플레이어"에 상당 부분 충족했기 때문이다. 완성된 UI는 아래와 같다. 음악 커버 부분은 재생중인 음악별로 커버를 만들어 넣기 귀찮아서(!?) React 기본 이미지를 넣었다. 테스트 중에 Web Title에 현재 재생중인 음악 제목이 표시되었으면 좋겠다 싶어 수정했다. 프로그래스 바는 material-ui 에서 제공하는 LinearProgress 컴포넌트를 이용했으며 아래와 같이 간단하게 구현했다. 해결되지 않은 문제..
-
[8일차] React Prop를 이용해 음악 재생 리스트 하위 컴포넌트 구현프로젝트 개발/뮤직플레이어 웹앱 2021. 2. 13. 21:09
어제 기능적인 부분은 다 구현했다고 생각했는데 재생리스트를 놓치고 있었다. 그래서 8일차인 오늘은 아직 구현하지 않은 음악 재생 리스트 화면을 구현하는데 치중했다. 음악 리스트 화면은 음악 재생화면의 하위 컴포넌트 형태로 구성했으며, 음악 재생 버튼을 누를때 표시된다. 표시된 음악리스트는 indexedDB 순서에 따라 정렬되어 표시된다. 만약 셔플을 했다면, 셔플된 랜덤한 순서로 정렬되어 표시된다. 리스트에 표시된 음악 제목을 선택하면 해당 음악으로 바로 재생하며 하단의 X 버튼을 누르면 리스트가 닫힌다. 아래는 구현한 음악리스트 화면 컴포넌트에 대한 전체 소스이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 걸 React에선 Prop 라고 불리는데, 컴포넌트간에 종속적인 부분이 생기는 것 같아..