본문 바로가기
반응형

분류 전체보기386

[js] video.js 사용하기 (속도조절, 품질 조절 옵션) javascript 를 이용한 태그를 쓰는 것중에 유명한 것으로 video.js 가 있는데 홈페이지는 여기를 참조. https://videojs.com/ Video.js - Make your player yours Make your player yours with the internet's most popular open source video player framework videojs.com 사용법은 간단하다. html 태그에 직접 쓰는 방법과 javascript 를 통해 옵션을 넣어 하는 방법. 개인적으로는 다양한 옵션을 건드려야 하므로 javascript 에서 처리하는걸 추천한다. 그리고 속도조절, 진행바 표시 등은 기본에 포함되지만 품질조절은 plugin 을 이용해야 한다. video.js 와 .. 2021. 3. 26.
[aws] s3 폴더 내 파일 public-read 권한 주기(aws cli 이용) 이전 콘솔 버전에는 폴더를 클릭해서 public-read 권한을 줄 수 있었는데, 바뀐 콘솔화면에서는 그게 불가능하다. 그래서 오브젝트 하나씩 들어가 변경해줘야 하는데 그럴시간은 없고(...) 그래서 awscli 를 통해 일괄 변경하는 기능을 소개하고자 한다. aws cli 설정방법은 이전 포스팅을 참조 lemontia.tistory.com/992 [aws] aws cli로 s3 파일 삭제(console에서 파일삭제 실패 시-파일명 한글일 경우 실패함) aws s3파일 중에 한글로 되어있는 경우 console 에서 지우는데 계속 실패하여 aws cli로 지우기로 했다. 오랜만에 aws cli를 사용하는데, 다음의 에러가 발생했다. $ aws zsh: /usr/local/bin/aws: bad interp.. 2021. 3. 24.
[react, redux, next, typescript] 프로젝트 만들때 최소 설정하는 것 정리 프로젝트 만들때마다 세팅하는게 귀찮아(...) 자주 쓰는것들 위주로 구성하여 기본설정 한다. 사용하지 않은 것은 직접 빼서 커스텀 하시길. 여기서는 크게 3가지를 설명한다 1. axios 기본설정 2. ui 적용(material-ui, styled-component 사용) 3. cookie를 이용한 authorization 등록 & SSR에서 자동 header에 설정하기 관련 설정 & 코드는 다음 github에 저장되어 있다. https://github.com/lemontia/react-project-base-config lemontia/react-project-base-config Contribute to lemontia/react-project-base-config development by crea.. 2021. 3. 22.
[react, material-ui] material-ui style 사용중 SSR 에러 발생(Prop `className` did not match. Server) 다음처럼 에러가 발생했다. Prop `className` did not match. Server: "MuiTypography-root WithStyles(ForwardRef(Typography))-root-8 MuiTypography-h6" Client: "MuiTypography-root WithStyles(ForwardRef(Typography))-root-2 MuiTypography-h6" ... 해당에러는 SSR 에서 생성된 className이 CSR 로 옮겨졌을 때 동일한 className을 찾지 못해 발생하는 에러다. SSR은 next.js를 사용으며 해결법은 다음과 같다. page/_document.js 파일을 만든 후 다음 코드를 삽입한다. import React from "react"; .. 2021. 3. 19.
[gradle, springboot] multi project 설정하기 프로젝트가 늘다보니 공통으로 쓰이는 것이 생겼고, 그러다보니 모듈을 통합+재활용 용이하게 하는 방법을 찾던 중 gradle을 이용한 multi project 설정이 좋겠다 싶어 선택했다. 다만 이건 설정뿐만 아니라 이후 유지보수하는데도 꽤 애를 먹는 부분이 있는데 때문에 팀원간의 내용공유가 잘 될수록 좋다. 여기서는 진행을 Intellij 로 했다. 그럼 시작해보자. 우선 Root역할을 할 프로젝트를 생성한다. 생성할때는 gradle 프로젝트로 할 것이며 이름은 blog-systems 라고 지을 것이다. 자바 버전은 11로 한다 프로젝트 이름과 폴더명은 맞추는게 좋다. Finish를 누르면 다음과 같이 아주 간단한 프로젝트가 생성된다. settings.gradle 에 설정한 이름이 rootProject... 2021. 3. 17.
[react, next.js] SSR환경에서 access_token, refresh_tokne 관리하기(cookie이용) 로그인 한 후에 받은 access_token을 관리하는데는 여러가지가 있지만 여기서는 쿠키를 이용한 관리. 그리고 재활용을 확인해보려 한다. 처음 react를 공부할때 애먹었던 것중 하나도 이것이었는데, redux에 넣어두어도 새로고침하면 모두 사라지는 문제가 있었다. 이것에 대해 3가지 대안법이 있는데 1. Cookie에 저장 2. localStorage에 저장 3. Session에 저장 하는 방법이었다. 2번인 localStorage는 SSR이 적용되었을때 써먹지 못한다. 그래서 일단 제외. 세션을 이용한 방법은 아직 정리가 다 끝난 상태가 아니라 일단 1번인 Cookie에 저장하기로 했다. 다음 패키지를 설치한다. npm i react-cookies npm i @types/react-cookies .. 2021. 3. 12.
반응형

티스토리툴바