GoGo GoGo

Material에서 Tree 기능은 아래와 같다. Material에서 제공하는 Tree 예제 코드 {{node.icon}} {{node.displayName}} {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} {{node.displayName}} tree를 사용하려고 예제 코드를 실행시켰는데, 특수 문자(코드에서는

나의 이슈 Spring boot에서 Kakao REST API를 사용해야했는데, 'Kakao REST API > 사용자 관리 > 로그인 > 사용자 토큰 받기' 에서 문제가 발생했다. 사용자 토큰 받기 API 설명을 보면 아래와 같다. 위에 설명대로 그대로 호출했는데, 자꾸 400에러가 발생했다. 정상적인 응답 결과는 위에 캡쳐 화면처럼 나와야하는데, 나에게 보이는 에러는 아래와 같았다. {"error":"invalid_grant","error_description":"Redirect URI mismatch."} 처음 에러 메세지를 봤을 때 바로 생각난 것은, 1. 설정에서 저장한 로그인 Redirect URI를 잘못 입력했나? 2. API를 호출할 때 request param의 redirect_uri를 ..

오랜만에 개인 맥북으로 api를 만드려고 했는데, spring boot로 새로운 프로젝트를 만들었더니 Could not transfer artifact org.springframework.boot:spring-boot-starter-parent:pom:2.2.2.RELEASE... 이런 에러가 발생하면서 maven download가 되지 않았다. 프로젝트를 잘못 만들었나 싶어서 계속해서 새로 만들어보고, Spring MVC 프로젝트도 만들어보고, Spring.io 홈페이지에 가서 새 프로젝트를 다운로드 받아보기도 했는데 해결되지 않았다. 에러 로그를 자세히 살펴보니 다운로드하는 nexus 경로가 나와있었는데, 굉장히 낯익은 주소였다. 곰곰히 생각해보니 전 직장 nexus 서버 경로였다..^^ 전 직장에서..

지금까지 다양한 언어를 사용해서 개발을 해왔지만, 실제로 테스트 코드를 짜본적은 거의 없다. 1-2년 전에 API 서버를 만들 때, local 환경에서 JUnit 테스트를 해본 적이 있었는데 이 또한 제대로 테스트를 한거라고 볼 순 없었다. 말이 테스트지 local DB에 테스트용 데이터를 넣어야할 때, JUnit 코드에서 랜덤 함수가 들어간 로직을 돌린 적도 있었다. 아무튼 이번에 Front에서 테스트 코드를 짜볼 수 있는 기회가 생겼는데, 크루의 추천을 받아 Cypress를 이용해서 테스트 코드를 작성해 봤다. Test 종류 테스트에는 단위테스트, 통합테스트, 그리고 E2E 테스트로 나눌 수 있다. 먼저 단위/통합 테스트는 개발자의 관점에서 테스트를 하는 경우를 뜻한다. 서비스 로직을 실행했을 때, ..

치열한 티켓팅을 뚫고 다녀온 FECONF 2019. 프론트엔드 개발자들을 위한 컨퍼런스여서 기대를 많이 했기에 후기를 적어보려 한다. 행사는 잠실 롯데타워에서 진행되었다. 1층에서 신분증 확인을 한 뒤 입장 팔찌를 받아 엘레베이터를 타고 31층으로 올라갔다. 31층에서 내린 뒤, 주최 측에서 준비한 작은 선물들(맨투맨, 볼펜/노트, 노트북 카메라 가리는 스티커)과 생수 1병을 받았다. 그리고 나서 각 기업들이 준비한 설문조사를 하면 상품을 받을 수 있었다. 앞에서 여러 사람들이 서서 설문조사를 하고 있어서 설문조사 URL이 담긴 QR코드를 제대로 찍을 수가 없었다. 나는 도착 전에 메일로 보내준 설문URL 링크를 통해 몇 군데는 미리 설문을 해갔는데, 앞에 사람들이 서있어서 상품을 받기가 조금 힘들었다...

NGXS는 Angular 상태 관리 패턴이자 라이브러리이다. React에서 상태 관리를 하기 위해 Redux를 사용했다면, Angular에서는 NGXS를 사용한다고 생각하면 좀 쉽다. NGXS는 Redux에서 사용되는 CQRS 패턴을 기반으로 모델링되었지만, 클래스 및 데코레이터와 같은 최신 TypeScript 기능을 사용하여 상용구를 줄였다. NGXS에서 주요 개념은 Store, Actions, State, Selects가 있다. 이 4가지 개념들의 흐름은 아래 그림과 같다. React에서 Redux를 공부할 때 봤던 그림과 비슷한데, 이 그림만 보면 완전히 이해가 잘 되지 않았다. documents 페이지에서는 다 영어로 되어있어서, 제대로 이해하기 힘들었다(ㅠㅠ) 그래서 ngxs에서 제공하는 샘플 ..

Redis를 terminal이 아닌 GUI Tool이 필요했는데, 구글링해보면 유명한 tool들이 많았는데, 대부분 유료이고 가격이 엄청 비쌌다 ㅠㅠ 그래서 직장 동료에게 추천 받은 tool이 바로 Medis이다. 홈페이지 : http://getmedis.com Medis - GUI Manager for Redis getmedis.com Medis도 사실 유료지만 가격은 5900원 정도로 다른 tool에 비해 저렴한 편이다. 하지만 내가 조금만 노력하면 무료로 사용할 수 있다! 1. Medis 소스 코드 받기 아래 github에서 코드를 다운받는다. https://github.com/luin/medis luin/medis 💻 Medis is a beautiful, easy-to-use Mac databa..

Angular tutorial 프로젝트를 따라하면서 Observable를 사용했는데, Observable, Observer 두 단어로 설명하다보니 잘 이해가 되지 않았다. 두 용어에 대해 찾아보다가 PoeimaWeb에 아주 좋은 예시가 나와있어 정리해본다. 1. Observable ? Observer? TV 방송국과 TV의 관계를 예로 들어보자. 방송국에서는 영상 정보를 계속해서 방출(emit)해야하고, TV는 방송국에서 방출하는 영상 정보를 가져와야한다. TV에서 방송국의 영상 정보를 가져오기 위해서는 방송국에 요청을 해야하는데, 이 과정을 구독(subscribe)라고 한다. (이 방식은 Push-scenario라고 하며, Pull-scenario 방식은 글 하단 URL에서 확인할 수 있다.) 방금 전..