typescript를 쓰면서 다양한 에러를 보게되는데 이번엔 하위컴포넌트에 데이터를 전달하다가 생기는 오류가 있었다. 메세지는 다음과 같다. TS2322: Type '{ children: never[]; key: string; category: Category; }' is not assignable to type 'IntrinsicAttributes & ParamProps'. Property 'children' does not exist on type 'IntrinsicAttributes & ParamProps'. 해당 코드는 아래와 같다. interface Category { id: string; name: string; algorithms: Algorithm[]; } interface Algorith..

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..

로그인에 성공하면 JWT로 토큰을 발행하도록 할 것이다. 이번 포스팅 샘플 프로젝트는 Kakao 로그인 API를 이용해 로그인 시스템을 구현하는데, 이럴때는 비밀번호가 있지 않고 USER의 ID만 존재한다. 우선 토큰발생하는 클래스를 만들어보자. JwtManager 클래스를 만든다.(이전 포스팅에 자세히 설명되어 있음) lemontia.tistory.com/1021 [springboot, jwt] jwt 로 토큰 생성, 유효시간 관리 하기 이번에는 jwt를 이용한 로그인 인증을 만들려 한다. 일전에 @EnableAuthorizationserver deprecated 되면서 찾던 중 jwt가 있어 이걸 활용하기로 했다(DB로 토큰유효성 확인도 안해서 더 나은거 같기도 하고 lemontia.tistory.c..

이번에는 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..

카카오 개발자 사이트에 들어간다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 애플리케이션 추가하기를 누른 후 정보를 입력한다 앱 키를 제공하는데, 여기서는 웹 연동만 할 것이기 때문에 해당 정보를 가져온다 앱 키를 제공하는데, 여기서는 웹 연동만 할 것이기 때문에 해당 정보를 가져온다 여기서 JavaScript 키를 가지고 진행할 예정이다. 여기에 추가 설정을 해야하는데, 카카오 로그인을 활성화 설정으로 바꾸고, Redirect URI를 등록해야 한다. 카카오 로그인 활성화는 On으로 바..

다크모드는 유튜브를 보면 알 수 있는데 본래 흰바탕의 화면이 검은 바탕의 화면으로 변경되는 것을 말한다. 아래 사진을 보면 단번에 이해될 것이다. 일반 유튜브 다크모드 유튜브 material-ui 에서는 theme를 이용해 이를 조절할 수 있는데, 이번에 이걸 적용하는 방법에 대해 알아볼 것이다. 우선 테마를 등록해야 한다. 다음처럼 ThemeManager.tsx 파일을 만들어 생성하도록 하자. (여기서는 타입스크립트를 사용했기 때문에 tsx 확장자를 사용한 것이다. js, jsx 로 만들어도 상관없다) 여기서는 3개만 생성했다. 원하는 만큼 만들어 등록하는 것도 추천. 테마에 활용할 수 있는 컬러종류는 아래 링크 참조. red, pink, purple indego, teal 등 여러가지 있다. http..

이게 맞는지 모르겠는데.... 일단 정리해둔다. 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..

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 와 ..

이전 콘솔 버전에는 폴더를 클릭해서 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..

프로젝트 만들때마다 세팅하는게 귀찮아(...) 자주 쓰는것들 위주로 구성하여 기본설정 한다. 사용하지 않은 것은 직접 빼서 커스텀 하시길. 여기서는 크게 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..

다음처럼 에러가 발생했다. 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"; ..

프로젝트가 늘다보니 공통으로 쓰이는 것이 생겼고, 그러다보니 모듈을 통합+재활용 용이하게 하는 방법을 찾던 중 gradle을 이용한 multi project 설정이 좋겠다 싶어 선택했다. 다만 이건 설정뿐만 아니라 이후 유지보수하는데도 꽤 애를 먹는 부분이 있는데 때문에 팀원간의 내용공유가 잘 될수록 좋다. 여기서는 진행을 Intellij 로 했다. 그럼 시작해보자. 우선 Root역할을 할 프로젝트를 생성한다. 생성할때는 gradle 프로젝트로 할 것이며 이름은 blog-systems 라고 지을 것이다. 자바 버전은 11로 한다 프로젝트 이름과 폴더명은 맞추는게 좋다. Finish를 누르면 다음과 같이 아주 간단한 프로젝트가 생성된다. settings.gradle 에 설정한 이름이 rootProject...

로그인 한 후에 받은 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 ..

[도메인]/swagger-ui.html 로 접속을 시도할 때 다음화면으로 접근에 실패했다. HttpSecurity 에 swagger-ui를 오픈해줘야 한다. @Configuration @EnableResourceServer @RequiredArgsConstructor public class ResourceServerConfig extends ResourceServerConfigurerAdapter { ... @Override public void configure(HttpSecurity http) throws Exception { http .authorizeRequests() .antMatchers("/api/test/**").permitAll() // swagger 추가 .antMatchers("/sw..

정리) 1) 여러 DataSource를 사용하는 중이라면 그 중 @Primary를 등록하여 EntityManagerFactoryBuilder 가 생성되도록 한다. 2) 만약 @Primary를 사용할 수 없다면 아래 직접설정하는 방법을 사용한다 JPA 설정을 위해 세팅중 다음 에러가 발생했다. 주입받을 EntityManagerFactoryBuilder를 생성하지 못해 발생한 에러. ... @Bean public LocalContainerEntityManagerFactoryBean testEntityManagerFactory (EntityManagerFactoryBuilder builder) { ... 에러메세지 Caused by: org.springframework.beans.factory.NoSuchBe..