본문 바로가기
반응형

분류 전체보기386

[react] material-ui, styled-components 같이 쓸때 테마 적용 안될때 material-ui에 테마적용은 잘 되는데, sytled-components 에는 안될때는 ThemeProvider를 살펴봐야 한다. 각각 제공하는 ThemeProvider가 있는데 다음과 같다. // material-ui import {ThemeProvider as MuiThemeProvider} from "@material-ui/core"; // styled-components import {ThemeProvider as StyledThemeProvider} from "styled-components" 이 두개를 다 적용해줘야 styled-components 에서 테마를 꺼내쓰는게 가능하다. 예를들면 다음처럼 설정. _app.js 파일 내 ... import {CssBaseline, ThemePro.. 2021. 4. 9.
[springboot, jwt] jwt로 security 적용 & error 때 result form 지정해 리턴하기 로그인에 성공하면 JWT로 토큰을 발행하도록 할 것이다. 이번 포스팅 샘플 프로젝트는 Kakao 로그인 API를 이용해 로그인 시스템을 구현하는데, 이럴때는 비밀번호가 있지 않고 USER의 ID만 존재한다. 우선 토큰발생하는 클래스를 만들어보자. JwtManager 클래스를 만든다.(이전 포스팅에 자세히 설명되어 있음) lemontia.tistory.com/1021 [springboot, jwt] jwt 로 토큰 생성, 유효시간 관리 하기 이번에는 jwt를 이용한 로그인 인증을 만들려 한다. 일전에 @EnableAuthorizationserver deprecated 되면서 찾던 중 jwt가 있어 이걸 활용하기로 했다(DB로 토큰유효성 확인도 안해서 더 나은거 같기도 하고 lemontia.tistory.c.. 2021. 4. 7.
[springboot, jwt] jwt 로 토큰 생성, 유효시간 관리 하기 이번에는 jwt를 이용한 로그인 인증을 만들려 한다. 일전에 @EnableAuthorizationserver deprecated 되면서 찾던 중 jwt가 있어 이걸 활용하기로 했다(DB로 토큰유효성 확인도 안해서 더 나은거 같기도 하고...) 암튼 시작. JwtManager 를 만들어서 JWT를 통해 토큰을 생성, 토큰 검증 하는 클래스를 만들 것이다. 그전에 다음 dependency를 먼저 추가하자.(gradle 기준) ... implementation group: 'io.jsonwebtoken', name: 'jjwt-api', version: '0.11.2' implementation group: 'io.jsonwebtoken', name: 'jjwt-impl', version: '0.11.2' i.. 2021. 4. 5.
[react, springboot] kakao 로그인 API 연동 카카오 개발자 사이트에 들어간다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 애플리케이션 추가하기를 누른 후 정보를 입력한다 앱 키를 제공하는데, 여기서는 웹 연동만 할 것이기 때문에 해당 정보를 가져온다 앱 키를 제공하는데, 여기서는 웹 연동만 할 것이기 때문에 해당 정보를 가져온다 여기서 JavaScript 키를 가지고 진행할 예정이다. 여기에 추가 설정을 해야하는데, 카카오 로그인을 활성화 설정으로 바꾸고, Redirect URI를 등록해야 한다. 카카오 로그인 활성화는 On으로 바.. 2021. 4. 2.
[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.
반응형

티스토리툴바