$ ls -lt posts/ | sed -n 81,100p
SY Tech Blog_
-
React Native Animated로 애니메이션 구현하기
란 React Native에서 애니메이션을 구현하기 위해 사용되는 라이브러리이다. Animated는 / 메소드를 사용해 시간에 따른 애니메이션 전환을 실행시킨다. 주요 개념 : 애니메이션을 입힐 컴포넌트에 대한 하나 이상의 style 속성 : 애니메이션을 업데이트 하는 메소드 이 때 애니메이션 value에 직접 접근해서…
[mobile] -
React Native 휴대폰 설정 화면 열기
OS 별로 설정 화면을 여는 메서드가 다르다. 다음에도 참고 하기 위해 기록해둔다. Linking React Native의 기본 모듈 을 사용하면 쉽게 구현할 수 있다. Linking은 App link를 사용할 수 있는 인터페이스이다. , 는 웹 사이트에서 사용하는 URL 스키마이다. 마찬가지로 휴대폰에서 사용되는 링크…
[mobile] -
React useRef hook 사용하기
는 렌더링이 될 필요 없는 값을 참조하기 위한 리액트 훅이다. 사용법 는 라는 한 개의 프로퍼티를 가지는 object를 반환한다. 초기 값은 값이 된다. 값을 저장하고 있다는 점에서 와 비슷하게 느껴지지만 와 다르게 useRef는 프로퍼티를 수정하여 값을 바꿀 수 있다. (useState는 setValue 함수를 사용해…
[frontend] -
React Native 기기 사용 권한 설정하기
Application permission 이란 앱에서 장치 수준 기능에 대한 액세스를 제어하고 규제하는 수단이다. 일반적으로는 카메라나 위치 정보 접근과 같은 장치의 하드웨어 기능 및 개인 데이터 액세스 기능과 같이 개인 정보에 영향을 미칠 수 있는 기능이 포함된다. React Native 문서에는 Android 권한을…
[mobile] -
head meta 태그로 Kakao 메세지 미리보기 설정하기
og (Open Graph) Tag 카카오톡 메세지에 URL만 붙여넣어도 컨텐츠의 이름, 썸네일, 설명이 나타날 때가 있다. head 내부에 meta 태그로 데이터를 넘기면 카카오톡에서 링크를 읽어 미리보기를 띄워주는 것이다. 링크 공유시 투박한 링크만 뜨는 것 보다 당연히 미리보기가 나타나는 것이 서비스에 좋을 것이다…
[frontend] -
Jest function mocking과 context
문제 테스트 코드를 작성하던 중 함수가 실행되었는지 테스트하는 부분이 계속 정상적으로 실행되지 않았다. 콘솔을 찍어보면 실행된 것은 확실한데 실행 횟수는 0으로 나오는 상황이었다. original.ts original.spec.ts 에러는 다음과 같았다. 하루를 날려서 알아낸 결과 가 달라서 생긴 문제였다. 으로 moc…
[testing] -
Typescript declare
는 이미 다른 파일에서 정의된 변수를 사용할 때 type 오류가 발생하는 것을 막는 용도로 사용할 수 있다. html 파일에서 차례대로 load 되어서 값을 읽는데 문제가 없을 것임에도 Typescript는 해당 변수에 대한 정보를 알 수 없기 떄문이다. 문은 Javascript로 변환할 때 사라진다. 이렇게 정의된 변…
[frontend] -
yarn 전체 라이브러리 upgrade
yarn upgrade 에 명시된 버전 범위 내에서 패키지들을 업데이트 한다. 파일도 재생성된다. yarn upgrade latest 명령어가 실행되지만 에 명시된 버전 범위는 무시된다. yarn outdated 설치된 모든 패키지의 dependency를 리스팅한다. 현재 설치된 버전과 최소 요구 버전, 그리고 최신 버…
[misc] -
Method Naming Convention
Apple 개발자 문서를 참고하여 정리한다. 일반적인 Rule 이름은 소문자로 시작한다. 뒤에 붙은 단어의 첫번째 글자는 대문자로 작성한다. , / 등의 문장부호는 이름에 포함시키지 않는다. (camel case 사용) 예외 케이스 통용되는 명칭을 사용하는 경우(ex. PDF) 대문자로 시작할 수 있음 여러 privat…
[misc] -
NestJS Service 상속을 해도 될까?
현재 만들고있는 app의 구조를 개선하던중 service 상속과 dependency injection에 대해 고민하게 되었다. 내가 맡은 프로세스는, A 요청시 A 컴포넌트를 실행하고 B 요청시 B 컴포넌트를 실행한다. A와 B는 각각의 설정 방법이 다르지만 공통적으로 사전에 수행되어야하는 작업들이 있다. 코드를 넘겨받…
[backend] -
Dependency Injection
Understanding dependency injection Dependency injection, 또는 DI는 Angular의 기본 컨셉입니다. DI는 Angular 프레임워크에 결합되어 Components, Directives, Pipes, Injectables과 같은 decorator로 class를 필요에 맞게…
[misc] -
Webhook 테스트 사이트
Callback url 동작을 테스트 해야 했는데 좋은 사이트를 찾았다. webhook.site 접속하면 uuid를 붙여서 새로운 url을 생성해준다. 거기로 요청을 보내면 사이트에서 확인할 수 있다. 화면 좌측에는 최근에 전송한 요청들이 차례대로 나타난다. 거기서 요청을 누르면 화면 중앙에 요청에 대한 세부 정보들이…
[misc] -
cloudwatch log insights query sdk
javascript sdk를 사용해 cloudwatch log insight를 사용하는 법을 정리한다. 코드 참고 Stackoverflow
[cloud] -
Web Components
Web Components는 재사용이 가능한 커스텀 element를 만들 수 있게 해주는 기술이다. 캡슐화를 함으로써 나머지 코드와 별개로 실행된다. 따라서 코드가 섞여서 혼란을 가져오진 않을까 걱정할 필요 없이 여기저기 붙여 재사용 할 수 있다. 세 가지 주요 컨셉이 있다. Custom elements 커스텀 elem…
[frontend] -
pm2 permission denied 에러
pm2로 프로세스를 시작하려고 했는데 에러가 발생했다. 를 사용해 root 사용자로 사용하고 있었다. 권한 문제인 것 같아 root가 아닌 다른 사용자로 프로세스를 시작하려고 했는데 아래와 같은 에러가 나타났다. 서치해보니 root 사용자가 아닌 사용자는 1024 이하 포트를 열 수 없다고 한다. (참고) 프로세스는 r…
[troubleshooting] -
AWS RDS Aurora MySQL DataGrip으로 접속하기
DataGrip이 그렇게 좋다고해서 사용해보려고 설치했는데 연결이 잘 안돼서 좀 헤맷다. 데이터 소스 리스트를 보면 MySQL이 보인다. 선택하고 DB 정보를 입력하고 을 누르면 연결이 잘 되는지 확인할 수 있는데 계속 접속 에러가 났다. 한참 헤맷는데 생각보다 간단하게 해결할 수 있었다. 설정에서 ’MySQL’을 누르…
[misc] -
실시간 집계 데이터 처리 프로세스 개선 기록
무려 2년 전 입사한지 얼마 지나지 않았을 때 작성한 건데 생각보다 잘 썼다..?? 저때 열심히 살았나보다. 서비스에 라이브 송출 플레이어가 추가되면서 실시간 데이터 처리를 맡게 되었다. 이전에 있던 다른 일반 VOD 재생 데이터들은 관계형 데이터베이스에서 DynamoDB를 사용하도록 프로세스가 수정된 상태였다. VOD…
[history] -
Web Component 대신 iframe을 선택한 이유
내가 개발한 페이지에서 커스텀 플레이어를 만들 수 있는 부분만 기존 서비스에 추가하기 위한 작업을 시작했다. 기존 페이지에 영향을 주지 않으면서 컴포넌트를 추가하기 위한 기술을 찾아보니 웹 컴포넌트라는게 있었다. 생각보다 오래전부터 존재했던 기술이라 신기했다. 생소한 개념이라 여러가지를 리서치했다. 생각보다 종류가 많았…
[misc] -
SOLID 원칙
SRP (Single Responsibility Principle) ’클래스를 변경하는 이유가 한 가지 이상 있어서는 안 된다.’는 말이 있다. 한 개의 클래스가 한 가지 일만 하도록 하는 것은 매우 중요하다. 클래스의 기능이 많아질수록 역할이 불분명해지고 의존하고 있는 모듈들에 어떤 영향을 끼칠지 알 수 없기 때문이다…
[cs] -
Code Deploy 배포 자동화 이슈
온프레미스 인스턴스에 작업 codedeploy agent config 파일이 없다는 이슈 명령어 사용시 config file이 같은 디렉토리에 생성된다. 명령어 사용시 위치에 파일을 만든다. SSL validation error 시도해본 방법들 certification 경로를 못 불러오는건 아닌가 하여 환경 변수 재설정
[cloud]