본문 바로가기

dev

hls.js를 사용한 웹 라이브 스트리밍 클라이언트 최근에는 라이브 스트리밍 서비스를 쉽게 찾아볼 수 있습니다. 예전부터 조금씩 성장해왔던 즐길거리 위주의 개인방송 뿐만 아니라, 최근에는 라이브 커머스 등 다양한 산업에서 라이브 스트리밍이 이용되고 있어요. 웹에는 이러한 서비스를 위한 다양한 프로토콜이 있습니다. 대표적으로 MPEG-DASH, HLS, MSS, HDS 등이 있는데요. 그 중 HLS 라는 프로토콜은 HTTP에 기반한 만큼 사용이 간편해 대중적으로 사용되고 있습니다. HTTP 기반이라 인기있다니... 뭔가 REST Api가 떠오르네요🙂. 검색해보니 실제로 비슷한 이유로 다른 프로토콜보다 선호되는 경향이 있다고 합니다. HTTP를 사용하기 때문에 다른 프로토콜에 비해 방화벽 설정이 쉽고, 기존 웹 서비스를 위한 인프라를 그대로 사용할 수 있어 ..
Redux 개념 이해하기 Flux 패턴 redux는 Flux 패턴의 구현체입니다. 따라서 Flux 패턴을 먼저 이해하면 자연스럽게 Redux를 이해할 수 있습니다. facebook은 우리가 흔히 알고 있는 MVC 패턴을 사용하는 대신, Flux라는 새로운 방식의 아키텍처를 사용하고 있습니다. Flux의 가장 큰 특징은 데이터가 한쪽 방향으로만 흐른다는 것입니다. 이를 단방향 데이터 흐름 이라고 표현합니다. 아래의 글을 읽으면 Flux가 얼마나 직관적인지 알 수 있습니다. Flux 패턴에서 모든 데이터의 변경은 action 으로 표현됩니다. 예를 들면 '카운터 증가' 를 다음과 같이 액션으로 정의할 수 있습니다. const increaseCounterAction = { type: "INCREASE_COUNTER" }..
[번역글] react functional component에서 setState를 동기식으로 사용하기 react 프로젝트에서 본격적으로 functional component를 사용한 이후로 처음 맞닥뜨린 이슈는 useState가 비동기로 동작하는 것이었습니다. setter를 호출한 뒤, 바로 값을 가져다 쓰면 업데이트 되지 않은 값이 참조되는😥 문제인데요... 아마 함수형 컴포넌트를 사용하시는 분이라면 한번쯤 고민해봤을 문제라고 생각합니다! 그리고 저처럼 왜 react는 이걸 비동기로만 쓰게 해놓은거야😡 라며 화내보신 분도 분명.. 분명 한분쯤은 있으리라 생각합니다. 글의 원문은 함수형 컴포넌트에서 useState를 동기식으로 사용하는 방법과, react 팀이 왜 이 기능을 기본 기능으로 추가하지 않는지를 모두 설명해 줍니다! 원문을 참조하시려면 useStateWithPromise: a custom ho..
RN에서 TS사용시 styled-components/native type import 에러 1. 증상 및 환경 - window10 - styled-components 5.2.1 - @types/styled-components 5.1.7 2. 원인 native.d.ts 를 찾지 못해서 발생 3. 해결책 1) @types/styled-components를 설치했는지 확인한다. 2) 타입스크립트에서 noImplicitAny 옵션을 끈다. 초기에 styled components에 타입이슈가 많았을 때 쓴 방법이라고 한다. 그냥 에러로 잡지 않는 것이기 때문에 해결책이라 보기는 어렵다. 3) @types/styled-components 대신 @types/styled-components-react-native를 사용한다. github.com/dooboolab/hackatalk/pull/331 Fix St..
vscode에서 expo react native 디버깅 유튜브에 동영상이 있는데, 동영상대로 하면 제대로 디버깅 되지 않습니다. react native tools 공식 문서를 따라하면 제대로 설정됩니다. 1. React native tools 설치 및 설정 - vscode 에서 react native tools extension을 설치합니다. - 설정에 들어갑니다. - packager 포트를 19001로 변경합니다. 2. launch.json 설정 - vscode 디버그 탭에 create a launch.json file 클릭해 launch.json 파일을 생성합니다. - 아무거나 선택해 줍니다. 저는 VS Code Extension Development 선택했습니다. - Add configuration을 클릭한 후, Debug in Exponent를 선택합..
RN 초기 설정시 발생한 에러 처리 1.Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0 #29829 react native cli 를 설치 후 react-native init 시 발생하는 에러다. Gradle 버전 이슈이며, 비교적 최근에 발견된 이슈다. 글을 읽다 보면 적절한 처리법이 있다. github.com/facebook/react-native/issues/29829#issuecomment-727280671 Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0 · Issue #29829 · facebook/rea..
typescript indexable types 타입스크립트로 사이드 프로젝트를 하던 도중, 인덱스 시그니처(Object[key]) 형태로 객체 접근 시 에러가 발생했다. No index signature with a parameter of type 'string' was found on type ... 해결책을 찾아보니 인덱스 시그니처를 사용하려면 타입을 인덱싱 가능한 타입으로 지정해야 한다. [ key : KeyType ] : PropertyType 형태로 지정이 가능하다. 이렇게 지정하면 KeyType의 키로 속성에 접근이 가능하다. 참고로 key라는 이름은 임의로 정한 것이다. 아무 이름이나 써도 무방하다. type FormData = { [key: string]: string | undefined; username: string; passwo..
크로스 브라우징 크로스 브라우징 정의 모든 브라우저와 디바이스에서 가능한 동등한 수준의 정보, 기능을 제공하는 것. ex) 스크린 리더에서도 사이트를 읽을 수 있도록 함 똑같이 보일 필요는 없음( 최신 버전에서는 3D 이미지를 구버전 브라우저에서는 평면 도형을 보여주는 방식 ) 플랫폼 사용자가 수용 가능한 수준으로 핵심 기능과 정보를 제공하도록 하는 것 크로스 브라우징 원칙 특정 브라우저에 종속성을 가진 기능은 가급적 사용을 배제한다. 웹 사이트는 그래픽을 연결하지 않은 상태로도 사용 가능해야 한다. 핵심 정보는 반드시 텍스트/HTML 포맷으로 제공되어야 한다. ex) flash 같은 것으로 전체 화면을 구성해서는 안된다. 핵심 정보를 표현하는데 이미지를 사용하는 것은 최소화해야 한다. 사용한다면 텍스트 형식의 alt ..

티스토리툴바