$ ls -lt posts/ | sed -n 61,80p

SY Tech Blog_

• 2023-06-19

  Wowza Streaming Engine으로 LL-HLS 스트리밍 하기

  HLS와 LL HLS LL HLS는 기존의 HLS를 확장한 프로토콜이다. HLS는 미디어를 segment라는 쪼개진 단위로 잘라 전송하는 프로토콜인데 segment duration 만큼의 latency가 발생할 수 밖에 없는 한계점을 가지고있다. HLS가 처음 발표되었을 때 기본 스펙에서는 30초의 latency를 가지…

  [misc]
• 2023-05-23

  [AWS] SQS batch item failures

  Snowball anti patterns SQS에서 실패 처리된 메세지 핸들링은 매우 중요하다. 보통의 경우 Lambda가 batch를 처리하다 에러가 발생하는 경우 전체 메세지가 큐에 다시 들어가게 된다. 예를 들어 배치 크기가 100인 경우 한 번에 100개의 메세지가 처리되는 건데 77번째 메세지 처리 중 에러가…

  [cloud]
• 2023-05-23

  [AWS] DLQ(Dead Letter Queue) 리드라이브

  DLQ SQS에서 란 성공적으로 처리되지 않은 메세지를 담고있는 큐를 말한다. DLQ는 자동으로 설정되는 것은 아니고, 일단 큐를 생성한 후 해당 큐를 다른 큐의 DLQ로 설정하여 사용할 수 있다. DLQ도 소스 큐와 같은 유형의 큐여야 한다. FIFO 큐의 DLQ는 FIFO 큐가 되어야 하는 것이다. (스탠다드 큐도…

  [cloud]
• 2023-05-18

  [AWS] aws-sdk v3 마이그레이션 (Node.js 18.x 런타임)

  serverless로 Labmda를 컴파일하는데 aws sdk v3를 사용하라는 warning이 계속 나타나서 이참에 업그레이드를 하기로 했다. AWS에서 sdk v3로 코드를 바꿔주는 커맨드가 있긴한데 난 그걸로는 부족해서 이참에 리팩토링도 진행했다. v3로 버전업 되면서 달라진 점이 몇 가지 있는데 장점이 많아 업그…

  [cloud]
• 2023-05-18

  [Error] Typescript process.env undefined 이슈

  아무 세팅없이 를 사용하면 그 타입은 이다. 타입스크립트가 실제로 그 환경 변수가 있는지 알 수 없기 떄문이다. 그래서 타입에러가 가끔 발생한다. 이렇게 작성할 경우 생성자 파라미터 옵션이 모두 으로 되어있기 때문에 타입에러가 발생한다. 해결하기 위해서는 definition 파일을 작성하여 해당 변수가 이라는 것을 타입…

  [troubleshooting]
• 2023-05-16

  [CS] Singleton pattern(JS)

  Singleton pattern은 생성자가 여러 차례 호출되더라도 실제 생성되는 객체는 하나이고 최초 생성 이후에 호출된 생성자는 최초 생성자가 생성한 객체를 리턴하는 디자인 유형이다. 주로 공통된 객체를 여러개 생성해 사용하는 Database Connection Pool과 같은 상황에서 많이 사용된다. 몇 가지 단점도…

  [cs]
• 2023-05-15

  [AWS] serverless AWS Labmda testing - SQS & DynamoDB

  AWS Lambda 테스트 코드를 작성한다. 나는 serverless 프레임워크 위에서 작업을 진행하고 있다. SQS 테스트 serverless 문서에 따라 ElasticMQ를 사용했다. 는 Amazon SQS와 호환 가능한 메시지 큐 시스템이다. Amazon SQS를 테스트 하고 싶을때도 많이 사용된다고 한다.

  [testing]
• 2023-05-15

  [Error] Serverless DynamoDB local 설치 이슈

  테스트를 위해 local DynamoDB를 serverless에 설치하려는데 에러가 발생했다. 설치 명령어를 입력하면 아래 에러가 발생하며 설치가 실행되지 않았다. 검색해보니 이미 많은 사람들이 겪고있는 문제였다. (Error getting DynamoDb local latest tar.gz location undefi…

  [troubleshooting]
• 2023-05-02

  [React Native] 배포 및 릴리즈 기록

  React Native로 개발한 앱을 여러번의 수정을 거쳐 빌드를 마치고 앱 스토어 심사를 기다리고 있다. 순탄하게 흘러갔던 과정이 단 하나도 없었던 것 같아 기록을 남겨놓으려고 한다. 빌드 iOS iOS는 XCode 사용법이 익숙치 않아 초반에 어려움을 느꼈으나 한 번만 세팅만 잘 맞춰놓으면 그 뒤로 문제가 발생한 적…

  [mobile]
• 2023-04-20

  [React] ref 전달하기

  React에서 자식 컴포넌트에 ref를 전달하려고 하면 오류가 발생한다. 위 코드를 실행하면 의도한대로 동작하지 않는 것을 볼 수 있다. 이런식으로 가리키게 하려고 한 것이나 실패한다. warning은 다음과 같다. warning에도 나와있듯 이런 경우 를 사용해야한다. forwardRef 는 고차원 컴포넌트에서 ref…

  [frontend]
• 2023-04-10

  [React] setInterval 내부에서 state 업데이트 하기

  setInterval 콜백 안에서 state를 업데이트하면 값이 한 번만 바뀌고 더 이상 변하지 않는다. 콜백이 처음 렌더링 시점의 state를 클로저로 붙잡고 있기 때문이다. 함수형 업데이트나 useRef로 해결할 수 있다.

  [frontend]
• 2023-04-07

  [Javascript] Closure란

  클로저란 함수의 레퍼런스와 함수를 둘러싼 state, 즉 lexical 환경을 합쳐서 부르는 말이다. 클로저는 내부 함수에서 외부 함수 scope에 접근할 수 있도록 해준다. JavaScript에서 클로저는 함수가 생성될 때마다 함수 생성 시점에 클로저가 생성된다. Lexical scoping 아래 코드를 살펴보자. 은…

  [frontend]
• 2023-04-04

  React Native Xcode archive 실패 - Operation not permitted

  Archieve를 진행하려고 하는데 계속해서 에러가 발생했다. 권한 관련 문제 같아서 설정에서 디스크 접근 권한을 XCode, watchman, webstorm, terminal에 전부 접근 허용을 줘봤는데도 해결이 되지 않았다. 그러다가 watchman 깃허브 이슈에서 요상한 해결책을 찾았다. 디렉토리 내부에 있으면…

  [troubleshooting]
• 2023-04-04

  svg 파일 크기 변경

  로고 이미지로 svg 파일을 받아서 앱 아이콘 사이즈에 맞게 파일 변환이 필요했다. 이미지 비율은 유지하면서 로고가 중앙에 오도록 하여 전체 이미지 크기는 정사각형으로 고정이 필요했다. svg를 png로 변환해주는 사이트들이 많은데 그냥 프로그램을 설치하는게 제일 깔끔한 방법인 것 같다. 😌 rsvg convert 먼…

  [misc]
• 2023-03-27

  Type 'false | Element' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | ComponentType<any> | null | undefined'.

  에러가 발생했던 코드는 아래와 같다. 이 구문은 를 사용하는 inline logical 구문이다. React 공식 문서에서도 찾아볼 수 있다. 코드에 빨간 줄이 뜨긴 하지만 실행은 정상적으로 된다. React는 false를 만난 순간 그 뒤에 나온 코드를 무시하기 때문에 원하는대로 동작하게 할 수 있으나 Typescri…

  [troubleshooting]
• 2023-03-22

  TypeScript : Element implicitly has an 'any' type because expression of type 'string' can't be used to index

  타입스크립트 에러가 발생했다. 실행에는 문제가 없었지만 빨간 줄이 너무 거슬렸다. index signature 관련 에러였다. Index Signature Javascript에서 Object에 문자열로 접근할 수 있다. 이 때 암묵적으로 을 호출하기 때문에 Typescript는 이 때 오류를 발생시킨다. 에러를 보면 알…

  [troubleshooting]
• 2023-03-20

  context로 global data 관리

  React에서는 주로 parent 컴포넌트에서 child 컴포넌트로 를 이용해 데이터를 넘긴다. 이때 많은 데이터에서 공통적으로 필요로하는 데이터가 있다면 props를 통해 데이터를 넘기려면 불편하기도하고 비효율적이라는 생각이 든다. 이럴 때 사용할 수 있는 것이 이다. 직접적으로 props를 통해 데이터를 넘기지 않아…

  [frontend]
• 2023-03-15

  React Native 폰트 적용하기 (native-base)

  폰트 적용하는데 꽤 어려움을 겪었다. 그래서 내용을 정리 해놓으려 한다. iOS와 Android 각각 적용해야 한다. 구글링을 하다보니 을 쓰는 방법도 있는 것 같은데 나는 아래의 방법으로 적용했다. 참고한 블로그들이 정말 도움이 많이 되었다. iOS 폴더를 만들어서 그 안에 폰트 파일을 복사한다. xcode를 실행하고…

  [mobile]
• 2023-03-07

  Reat hooks 정리

  사용할 때마다 틈틈이 정리해놓기 ✨ useMemo 리렌더링 과정에서 사용할 수 있는 캐싱 기법이다. 함수형 컴포넌트는 과정을 거쳐 렌더링되는데 이 때 내부 변수 초기화에 무거운 연산이 포함된 경우 성능이 저하될 것이다. 이런 경우 연산된 결과를 메모리에 저장해놓고 필요한 경우에 불러올 때 사용하는 것이 이다. useMe…

  [frontend]
• 2023-03-07

  React Native bottom modal 넣기

  내가 선택한 라이브러리는 @gorhom/bottom sheet이다. 위클리 다운로드 10만을 넘는 라이브러리로 깔끔한 도큐먼트 페이지도 있어 믿고 사용할 수 있었다. (공식 홈페이지) ) Installation 작성일 기준 설치방법이다. 추가로 설치가 필요한 라이브러리가 있다. expo 사용하지 않는 경우 expo 사용…

  [mobile]