$ ls -lt posts/ | sed -n 121,140p

SY Tech Blog_

• 2022-02-23

  [React Native] screenshot 다루기

  보호된 영상 컨텐츠의 스크린샷을 막기위해 리서치를 진행했다. 몇가지 방법을 찾았는데 결론부터 말하자면 IOS / Android 양쪽에서 완벽하게 캡처 동작을 막을수는 없다. 그래도 이벤트를 감지해 후처리를 해줄 수는 있다. react native screen capture secure ScreenCaptureSecure…

  [mobile]
• 2022-02-06

  Github OAuth 로그인

  Github OAuth 로그인 깃허브에서 제공하는 API를 사용하면 쉽게 유저 정보를 불러와 사용할 수 있다. 위 공식문서를 참조하면 간단하게 구현할 수 있지만 한 번 정리만 해놓으려고 한다. Github OAuth Application 생성 Github 계정 설정 Developer settings OAuth Apps…

  [frontend]
• 2022-01-17

  NodeJS pm2 ProcessContainer.js 오류

  NodeJS pm2 ProcessContainer.js 오류 Node 앱을 따로 시작하는 것은 문제가 없는데 PM2로 실행하는데서 자꾸 문제가 발생했다. 문제 및 에러로그 요런 오류가 뜨면서 실행이 되지않았다. pm2 env가 변경되어 발생하는 에러라고 한다. 해결 pm2 env 디렉토리를 삭제하고 pm2를 다시 설정하…

  [backend]
• 2022-01-13

  Actor model framework

  액터 모델은 상태를 공유하지 않고 메시지만 주고받는 액터 단위로 동시성을 다루는 모델이다. 락 없이 동시성 문제를 피할 수 있는 원리와 Akka, Orleans 같은 대표 프레임워크를 정리했다.

  [backend]
• 2022-01-12

  Event handler의 등록 및 삭제

  Event handler의 등록 및 삭제 이벤트 등록 EventTarget.addEventListener() Argument type: 이벤트 유형을 나타내는 문자열 listner: 이벤트 알림을 받는 function 객체 options capture: 으로 전송하기 전, 등록된 리스너로 이벤트의 전송여부를 나타내는 B…

  [frontend]
• 2021-12-13

  Cloudwatch Log Insights query

  Cloudwatch Log Insights는 로그 그룹을 쿼리하는 데 사용할 수 있는 쿼리 언어를 지원한다. 로그 유형의 필드를 검색하고 기호로 시작하는 필드를 자동으로 생성한다. Cloudwatch 로그를 일일이 뒤지고 싶지 않다면 사용법을 알아두는게 좋다. 쿼리 명령어 | 명령어 | 설명 | | | | | displ…

  [cloud]
• 2021-12-13

  Express.js Typescript 보일러플레이트 만들기 (for WEB)

  Express는 Nest와 달리 정해진 구조가 없기때문에 구글링을 해도 개발자에 따라 코드 작성 방식이 크게 차이가난다. Nest로 프로젝트를 구성하면 알아서 구조가 잡히고 여러 면에서 편리하지만, 현재 맡은 프로젝트에서는 API 개발도 아니고 간단한 페이지만 만들면 되는데 Nest를 쓰기에 필요이상으로 프로젝트 크기가…

  [backend]
• 2021-12-10

  [Node.js] Handlebar Missing helper 에러

  express에서 핸들바로 개발하는 중.. ’partial’ 기능을 사용하려는데 에러가 잡히지가 않았다. 스택오버플로우에서 알려준대로 해도 설정이 안먹히는 것 같았다. helper를 정의했는데도 에러가 뜨고 partial folder 경로를 정해줬는데도 자꾸 못 찾아왔다. 드디어 알아낸 문제의 원인은 과 이 두개의 vi…

  [backend]
• 2021-12-06

  Git submodule 추가

  hexo로 블로그를 생성해 테마를 설치해서 사용하면 다른 로컬 환경에서 블로그 프로젝트를 clone 했을 때 디렉토리 내부의 테마 디렉토리들이 비어있는 상태로 받아지는 것을 볼 수 있다. 내부에 git 레파지토리가 따로 구성되어있기 때문인데 다른 컴퓨터에서도 원활하게 사용할 수 있도록 submodule을 설정해줬다. s…

  [misc]
• 2021-11-18

  Webpack file-loader 경로 오류

  Webpack file loader 경로 오류 문제 jpg, gif 등 이미지 파일 처리를 위해 검색을 하다보면 ’file loader’를 사용하는 방식이 가장 많이 뜬다. 나의 경우 강의를 듣고 따라하며 ’file loader’를 프로젝트로 적용시켰는데, JS 파일에서 import한 이미지는 제대로 넣어졌으나 css…

  [frontend]
• 2021-11-18

  [React Native] babel plugin config 이슈

  IOS 15 업데이트가 나오고 시뮬레이터에서 하도 많은 오류를 보다보니 어떤 오류가 나도 다 xCode 때문일 거라고 생각했다. 그래서 이 요상한 에러로 하루를 날려버렸다 🙀 에러 이런 에러가 떴는데 에러 앞쪽에 Babel이 보였던걸로 보아 babel config 문제가 발생한것 같았다. 내 프로젝트에 추가된 babe…

  [mobile]
• 2021-11-18

  Webpack loader 사용하기

  Webpack Loader Webpack은 기본적으로 자바스크립트 번들러이기 떄문에 다른 형식의 파일을 번들링 하기 위해서는 loader 가 필요하다. 예를들면 css, sass, jpg.. 등 정적 asset들을 처리할 수도 있다. 또한 파일을 파일을 pre process하는 것도 가능하다. 사용 방법 webpack.…

  [frontend]
• 2021-11-15

  Webpack

  Webpack이란 webpack 은 Javascript용 static module bundler이다. 한 개 이상의 entry points 를 통해 내부적으로 dependency graph를 만들어 모든 모듈을 번들링 시켜주어, 결과적으로 프로젝트에서는 한 개의 번들만 import 시키면 된다. 이게 webpack의 기…

  [frontend]
• 2021-08-30

  TypeORM

  TypeORM TypeORM 은 다양한 플랫폼에서 TypeScript와 JS로 실행되는 ORM이다. ORM이란 ’Object Relational Mapping’의 줄임말이다. 최신 JS를 지원하고 DB로의 작업을 효율적으로 수행할 수 있도록 도와준다. Entity Entity는 DB에 저장되는 데이터의 형태를 보여주는…

  [backend]
• 2021-08-23

  NestJS란

  NestJS NestJS? NestJs는 Node.js용 프레임워크이다. Typescript를 전격 지원하고 OOP(Object Oriented Programming), FP(Functional Programming), FRP(Functional Reactive Programming)으로 이루어져있다. NestJS는 N…

  [backend]
• 2021-06-06

  Context

  GraphQL에서 란 특정 실행에서 모든 resolver에 의해 공유되어지는 object를 말한다. 사용자 인증 정보나 현재 사용자 또는 데이터베이스 연결과 같은 데이터를 유지하는데 유용하다. 각 resolver에서 세번째 파라미터로 존재한다. context는 모든 모듈에서 공유되어지므로 GraphQL에 별다른 cont…

  [backend]
• 2021-06-06

  Middleware

  Middleware 미들웨어는 route handler 이전에 실행되도록 하는 함수이다. , 객체에 접근할 수 있고 라는 미들웨어 함수가 사용된다. 에서 흔히 사용되는 미들웨어와 같은 개념이다. 구현 Nest에서 미들웨어는 함수 또는 클래스로 구현이 가능하다. 클래스로 만들경우 인터페이스를 구현해야한다. 함수로 구현하는…

  [backend]
• 2021-06-05

  JWT(Json Web Token)

  JWT 토큰 기반 인증방식이다. 제공되는 API를 유지보수 하던 중 jwt를 처음 봤다. 유저와의 인증 작업을 수행하는 어플리케이션은 직접 전체를 만들어본 적이 없기 때문이다. 너무나 흔하게 사용되는 기술이니만큼 잘 알아둬야겠다는 생각이들어 정리한다. Stateless 서버 Stateful 서버 : 클라이언트 상태 정보…

  [cs]
• 2021-05-23

  ConfigService로 환경변수 사용하기

  ConfigService 사용하기 프로젝트 환경에 관련된 변수들이 있다. 예를들면 DB에 관한 정보라던가 AWS 접근 정보라던가. 이런 정보들을 .env에서 관리하도록 프로젝트를 구성했다면 으로 변수에 접근할 수 있다. 하지만 이렇게 하는 것은 NestJS에서 선호하는 방식은 아니다. NestJS에서는 을 사용하기를 권…

  [backend]
• 2021-05-16

  InputType vs ArgsType

  InputType vs ArgsType InputType GraphQL의 Mutaion 인자로 object를 받아야 하는 경우 input type 을 사용한다. 아래와 같이 사용한다. Mutation을 구현하는 resolver 에서 Input type을 사용하기 위해서는 의 인자로 이름 을 넘겨줘야한다. 이렇게 작성한…

  [backend]