본문 바로가기
반응형

공부397

[react, next.js, redux] material-ui 를 이용해 다크테마 적용하기(Layout.js 적용) 다크모드는 유튜브를 보면 알 수 있는데 본래 흰바탕의 화면이 검은 바탕의 화면으로 변경되는 것을 말한다. 아래 사진을 보면 단번에 이해될 것이다. 일반 유튜브 다크모드 유튜브 material-ui 에서는 theme를 이용해 이를 조절할 수 있는데, 이번에 이걸 적용하는 방법에 대해 알아볼 것이다. 우선 테마를 등록해야 한다. 다음처럼 ThemeManager.tsx 파일을 만들어 생성하도록 하자. (여기서는 타입스크립트를 사용했기 때문에 tsx 확장자를 사용한 것이다. js, jsx 로 만들어도 상관없다) 여기서는 3개만 생성했다. 원하는 만큼 만들어 등록하는 것도 추천. 테마에 활용할 수 있는 컬러종류는 아래 링크 참조. red, pink, purple indego, teal 등 여러가지 있다. http.. 2021. 4. 1.
[react] wrapper.getServerSideProps 의 문제점(store 값 초기화 문제) 이게 맞는지 모르겠는데.... 일단 정리해둔다. login.tsx 파일에다가 다음처럼 설정을 해두었다. export const getServerSideProps = wrapper.getServerSideProps( // wrapper.getServerSideProps( (context) => { console.log("=================================") // console.log(Object.keys(context)) console.log(context.store.getState()) return { } } ) 그런데 이렇게 하니 문제가 발생했다. 이 페이지에서 redux에 저장하는 값이 있었는데, 이 페이지를 벗어 난 다음 다시 이 페이지로 진입했을때 (새로고침하지 않고 r.. 2021. 3. 30.
[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.
반응형

티스토리툴바