2020/12 7

[react] react + nextjs + redux + typescript 설정하기(redux toolkit 사용)

react + redux + typescript를 이용한 프로젝트 생성을 알아보려 한다 타입스크립트가 적용되는 reaxt + nextjs 를 설치한다. npx create-next-app --example with-typescript test-app npx 를 사용하는 이유는 이전 포스팅을 참조하면 좋겠다. 참조: lemontia.tistory.com/987 [npm] npm 대신 npx 를 사용하는 이유 npm을 사용하려면 글로벌 모듈로 설정해서 사용하기 때문이다. 글로벌이라는 것은 내 컴퓨터 안에 모든 프로젝트가 접근가능하도록 설정하는건데, 다음과 같은 방법으로 설치할 수 있다. npm insta lemontia.tistory.com redux, redux toolkit, immer 등 추가 설치한다..

[npm] npm 대신 npx 를 사용하는 이유

npm을 사용하려면 글로벌 모듈로 설정해서 사용하기 때문이다. 글로벌이라는 것은 내 컴퓨터 안에 모든 프로젝트가 접근가능하도록 설정하는건데, 다음과 같은 방법으로 설치할 수 있다. npm install 모듈이름 -g 예를들어 리엑트 프로젝트를 생성하는 CLI를 할때 글로벌 설치를 하는데 이런 글로벌 설치의 단점은 다음과 같다 1. 모듈 업데이트 확인 불가 2. 모듈 업데이트 변경으로 인한 다른 모듈 에러 발생 이런 문제를 해결하기 위해 npx가 등장했다. npx란? npm 5.2.0 부터 새로 추가된 도구로써, 1회성으로 원하는 패키지를 npm 레지스트리에 접근해 실행, 설치하는 도구다. 그래서 패키지를 업데이트 하지 않아도 npm 레지스트리에 올라가 있는 최신 버전을 수행한다. 사용법은 간단하다. np..

[react + typescript] redux toolkit 사용하기(createAction , ActionType , createReducer)

redux toolkit은 Redux의 공식 개발도구다. 액션 생성자, 리듀서 자체는 단순 함수인데 문제는 코드가 엄청나게 늘어난다는 불편함이 있다. redux toolkit을 사용하면 코드를 줄이는데 도움을 준다(그리 크진 않은듯...) 여기서는 typescript를 함께 사용하고 있다. 그럼 사용방법에 대해 알아보자 (여기선 리듀서에 대한 설명을 생략한다. 개념을 설명하는 포스팅이 아니기 때문) 우선 다음을 설치한다 npm i typesafe-actions 최근버전은 5.x 버전인데 함수하나가 달라졌다 이전에는 createStandardAction 기능이 5.x 로 넘어오면서 createAction 으로 변경되었다. 관련 github 주소: https://github.com/piotrwitek/typ..

[querydsl] group by 쿼리만들기

데이터를 집계해서 뽑아야 할때가 있는데 예를들면 날짜별로 있는 데이터를 월별로 뽑아야 할때 등이다. 예를들어 다음과 같은 테이블과 데이터가 있다고 해보자. 해당 테이블을 월별로 뽑을때 말이다. 쿼리를 만든다면 MYSQL의 경우 DATE_FORMAT을 이용해 만들 수 있는데, 해당 기능은 Mysql에 의존하기 때문에 일반적으로는 불가하다. 그럼에도 호출하려면 Expressions를 이용해 수행할 수 있다. StringTemplate formattedDate = Expressions.stringTemplate( "DATE_FORMAT({0}, {1})" , salesDaily.yyyymmdd , ConstantImpl.create("%Y-%m")); Expressions.stringTemplate 기능을 사..

[gitlab] root 비밀번호 분실 시 비밀번호 초기화

gitlab 이 설치되어 있는 서버로 접근해야 가능. 여기서는 gitlab-ee 로 설치된 것 한해서 가능하다 서버에 접속한 후 아래 명령어를 실행한다 sudo gitlab-rails console -e production -------------------------------------------------------------------------------- GitLab: 13.2.1 (b55baf593e6) FOSS GitLab Shell: 13.3.0 PostgreSQL: 11.7 -------------------------------------------------------------------------------- gitlab은 PostgreSQL을 사용하는 것을 간접적으로(?) 알게..

[springboot] @SpringBootTest에서 RestTemplate로 localhost 테스트 시 Connection refused

Mock으로 테스트 하는게 아니라 RestTemplate로 localhost를 테스트 한다는 것은 서버가 임시로 떠있고 API를 호출한다는 의미다. 즉 웹서버가 떠 있어야 한다는 의민대 @SpringBootTest를 쓴다면 웹서버를 띄우는 것이 아니라 테스트에 필요한 것들을 실행하기 위해 프레임워크를 해석하는 것이다. 때문에 포트가 명시적으로 할당되 URL을 호출해야 하지만 떠있는 웹서버가 없기 때문에 다음의 에러가 발생하는 것이다. org.springframework.web.client.ResourceAccessException: I/O error on POST request for "http://localhost:8080/oauth/token": Connection refused (Connection..

[react + next] 구글 애널리틱스 적용하기(gtag)

react에다가 애널리틱스를 적용하려면 React-GA 가 많이 나오는데, 이 방법이 안되어서 쓰는 글이다. 일단 애널리틱스가 2종류가 있다는 점을 알아야한다. 1. (기존) 유니버설 애널리틱스 태그 2. (신규) 글로벌 사이트 태그 1번의 경우 javascript 외부링크에 analystics.js 를 연결한다. 2번의 경우 gtag.js 파일을 연결한다. React-GA의 경우는 1번에 해당한다. 그래서 적용하고 나면 analytics.js 링크가 연결되는 것을 확인할 수 있었다. 그런데 새롭게 만든 계정에서는 유니버셜 애널리틱스 생성이 불가했다. (정확히 불가능한건지 아닌지 모르겠지만 어쨋든 생성할 수가 없었다.) 또한 다른 포스팅을 보면 새로 생성한 프로젝트와 매뉴구성이 달랐다. 아래는 그 화면매..