영상편집 툴의 대표적인 Adobe Premiere Pro에서 동작하는 플러그인을 개발중인데 해당 플러그인은 HTML, CSS, JavaScript로 개발할 수 있다. 따라서 React환경을 구축해서 빌드하였다. 하지만 React App은 클라이언트 사이드 렌더링을 통해

서론 1편까지 Github Action과 Lightsail을 연결하기 위한 환경설정을 했다. 이번 편에서 실제로 Github Action의 워크플로우와 yml파일을 이용해 Lightsail 인스턴스에 접근하고 배포를 자동화 해보자. .yml 파일 작성 ci/cd에 대

AWS Lightsail 인스턴스에 서버를 띄울 일이 있었는데 CI/CD를 적용해보기로 했다. 하지만 EC2에 관련된 내용이 주로 있었고 Lightsail에 관련된 내용은 거의 없어서 이번 기회에 잘 정리 해놓으려고 한다.대부분 서버를 EC2로 띄우던데 EC2는 복잡하

토큰 인증 방식을 공부하다보면 항상 탈취 위험에 대한 이야기가 나온다. 실제로 토큰 탈취가 어떻게 일어나는지 궁금해서 찾아보았고. 대표적인 사례에 대해 조사해보았다.토큰 기반의 인증 방식에서 토큰은 세션과 다르게 무상태(stateless)라는 특징을 가지고 있다. 그래

EMotion 추천인 페이지를 개발하는 도 이상한 버그를 발견했습니다. 유저정보 API를 가져오는 함수를 호출했는데 자꾸 이전 액세스 토큰으로 요청을 보내고 정상적인 응답이 오지 않는 버그였습니다.그리고 서버에서의 로그도 찍어봤지만 전혀 찍히지 않았고, 심지어 서버의

토큰(token)은 본래 ‘징표’, ‘형식물’이라는 뜻에서 유래하여 상품권이나 서비스의 교환권을 뜻하는 영단어로, 화폐의 기능을 대신하는 유가증권의 일종이다. 실물로 주조될 경우 대개 화폐와 비슷한 모양으로 발급되며 재질은 동전부터 종이띠의 형태까지 다양하다. 카지노

NestJs는 아주 간단한 CLI를 제공한다. 아래의 명령어로 nest를 글로벌로 설치하고 새 프로젝트를 만들 수 있다.Nest 프로젝트를 생성nest 프로젝트를 설치 시 ts-jest도 함께 설치가 되는데 KT망에서 설치가 안되는 이슈가 있다. package.json

이 챌린지의 목표는 TypeScript에 존재하는 유틸리티 타입인 Pick 타입을 자체적으로 사용하지 않고 새로 구현하는 것을 목표로한다.T에서 K 프로퍼티를 추출한 새로운 타입을 만드는 것이 목표이다.다음과 같은 코드가 있다.위 인터페이스에서 title과 compla

git branch -d 로컬에서 삭제했다고 해서 원격 브런치 까지 삭제되지 않습니다. 따라서 원격 브런치에서도 삭제해주어야 합니다.git push origin --delete 로컬저장소에서도 더이상 유효하지 않는 브런치를 정리해야합니다. 특정 원격 저장소의

프로젝트를 개발하면서 Drag & Drop 기능이 필요했는데 예전부터 써보고 싶었던 모듈인 react-beautiful-dnd를 사용해 DND를 개발해보았다. 설치 타입스크립트 환경에서 개발했기 때문에 type까지 설치해주었다. 라이브러리 이해 DragDropCo

최근 스와이퍼(캐러셀)을 사용해야하는 경우가 있었지만 인덱싱 기능이나 화살표 기능, 오토 플레이 등과 같은 스와이퍼 옵션 기능을 사용할 필요가 없었기에 오버 엔지니어링이라고 판단하여 그냥 드래그 가능한 리스트를 직접 개발했다.이 때 발생한 문제가 리스트에 스타일링한 o

Ctrl + /Ctrl + Shift + p 누르고 Indent Using Spaces 또는 Indent Using Tabs 검색.Ctrl + ,Ctrl + \`Ctrl + BCtrl + 1 or 2Ctrl + PageUp /PageDownCtrl + P Ctrl +

프로젝트 수정할 것이 있어 오랜만에 git clone을 하고 node_modules를 설치한 뒤 yarn start를 했더니 아래와 같은 에러가 떴다.웹팩 버전 안맞어보아하니 웹팩 버전이 안맞는것 같은데... 웹팩 버전이 맞지않는 이슈는 처음이라 해결방법을 찾아보기로

코드의 가독성은 매우 중요하다. 프로젝트를 하다보면 개개인의 코드 작성 스타일이 다르기 때문에 이를 통일화 해서 코드를 작성하여야 한다 . 누구는 Tab을 2칸으로 띄우는 반면에 4칸으로 띄우는 사람도 있고, 세미콜론을 찍는 사람도 있는데 찍지 않는 사람도 있다. 이러

Github page로 React 프로젝트를 배포하는 방법.Github 리포지토리를 하나 만든다.프로젝트를 commit하고 push한다.프로젝트에 패키지를 설치한다.package.json 파일을 수정한다..명령어를 실행하면 build파일이 나오면서 해당 리포지토리의 설