분류전체보기 234

typescript에서 runtime interface 체크하기

Interface type check at runtime with Typescript 타입스크립트에서 메서드로 받는 parameter가 2가지의 인터페이스로 오는 경우가 생겼다. 한가지는 주소검색으로 특정 위치목록을 받을때는 A라는 interface이고, 주소가 없는경우 서버에 등록후 리턴받을때는 B라는 interface 형태로 받게된다. 이때, A일경우에는 A에만 있는 속성인 c를 사용하고싶고, B인경우에는 B에만 있는 속성인 d.e 를 사용하고 싶었다. 그래서 A타입인지를 구분해주는 함수를 하나 만들었다. export function isAType(workingSpot: A | B): workingSpot is A { if (!workingSpot) return false; return (workin..

mssql 세로 데이터를 동적으로 가로로 출력 with asp

집계조회 페이지를 만들어야 하는데, 상품별 데이터는 세로로 나와야하고, 특정 데이터(여기서는 창고)는 가로로 동적으로 만들어야 해서 정리합니다.. 주요 테이블은 2개입니다. 현재 서비스에는 상품을 관리할 수 있는 상품테이블이 있고, 여러가지 기능 중에 창고간에 상품을 이동시킬 수 있는 창고이동이란 기능이 있습니다. 1. 상품테이블 2. 창고이동 테이블 구현해야 할 화면은 아래와 같습니다. 일단 기준은 창고이동 테이블의 데이터이므로 "계" 셀 뒤의 데이터를 조회해봅니다.. SELECT A.PRODUCT_CODE, SUM(A.TOTAL_AMOUNT) AS TOTAL_AMOUNT FROM [창고이동테이블] A WHERE [조건] GROUP BY A.PRODUCT_CODE 상품 코드별로 그룹지어 이동수량을 조회..

react navigation v5 drawer 추가하기

react-navigation에서 제공하는 기능으로 drawer를 추가할 수 있다. @react-navigation/drawer 를 인스톨 해준다. npm install @react-navigation/drawer 기본적인 코드는 아래와 같다. import { createDrawerNavigator } from '@react-navigation/drawer'; const Drawer = createDrawerNavigator(); function MyDrawer() { return ( ); } Navigator를 반환하는 함수를 하나만들면 되는데, Drawer Navigator는 헤더가 없는게 특징이다. 직접 header 컴포넌트를 만들어서 넣어주면된다. 커스텀한 메뉴를 추가하거나, 스타일을 주고싶은 경..

window 10 theme 변경 (mac 테마로 변경하기)

www.deviantart.com/search?q=theme DeviantArt - Discover The Largest Online Art Gallery and Community DeviantArt is the world's largest online social community for artists and art enthusiasts, allowing people to connect through the creation and sharing of art. www.deviantart.com 위 사이트에서 마음에드는 테마를 고른다. 일단은 www.deviantart.com/niivu/art/BIB-2-0-800970529 이 테마로 진행한다.. 테마 아래 설명글을보면 support for [윈도우버전]..

react native 안드로이드 emulator api 연동시 localhost 이슈

android 개발시에 백엔드 api를 통해서 localhost의 9090포트로 호출시 response를 못받는 상황이 발생. axios의 문제인가해서 http://다른 url을 통해서 해봤더니 잘 받아온다.. adb reverse 커맨드를 통해 설정을 해줘야 하는듯하다. https://stackoverflow.com/questions/33704130/react-native-android-fetch-failing-on-connection-to-local-api React Native Android Fetch failing on connection to local API I'm using the fetch API in my react-native Android app to make requests to a..

React Native 윈도우 내 개발환경 세팅

개인 노트북은 mac이지만 사내 pc가 window이기 때문에 복습겸 환경세팅을 정리함. 개발 환경은 expo와 react native 두가지 방법이 있지만, expo는 교육용 딱 그뿐이라고 들었기때문에 거르도록 한다. 물론 expo로 구현가능한 기능들의 범위를 확실히 인지하고, 가능하다면 expo도 좋은듯하다. 휴대폰에도 expo앱만 받아서 간단하게 개발중인 앱을 띄울 수 있었고, PC에서도 금방금방 확인할 수 있었던걸로 기억한다. 하지만, 사용하지않은 네이티브 모듈때문에 앱 사이즈가 커지는 문제와 expo에서 제공하지않은 모듈이 생기면 추가할 때 불편함이 있는 문제가 있다. 기본적으로 create-react-native-app으로 생성할경우는 expo기반으로, react-native init 으로 생..

티스토리 사운드클라우드 넣기 wikplayer

티스토리 (tistory) 에 사운드클라우드 (soundcloud) 추가하기. 예전에 다른사이트에서 사클 연동이 잘 안되는 현상이 있어서 지웠던 적이 있다. 다시 알아보니, http://www.wikplayer.com/라는 사이트가 있다. 위자드를 설정할 수 있는 화면을 제공해준다. create new playlist를 누르면 스킨선택으로 이동한다. 기본스킨은 좀 색감이 이상해서 hybrid player 탭으로 가서 `roseLove`를 선택해보았다. 다음을 누르면 playlist를 설정할 수 있는데, 각 링크를 넣을수도 있고 플레이리스트 자체 링크를 넣을수도 있다.. 나는 내 사클 계정의 likes 목록을 링크로 넣어주었다. https://soundcloud.com/19park/likes pk List..

vuejs 공공데이터 공적 마스크 판매 정보 api 사용해보기 (3)

이전에는 공공데이터 api를 사용해서 리스트를 출력하고, vuejs 공공데이터 공적 마스크 판매 정보 api 사용해보기 (2) 이전에는 공공데이터 api를 이용해서 간단하게 ui구현을 해보았다. /storesByAddr api를 이용해서 address값을 조회조건으로 추가해보려고한다. 일단 행정구역은 api를 찾기 귀찮(?)아서 통계분류포털 에서 행정구.. 19park.tistory.com 행정구역 분류를 mysql로 관리하여 nodejs express로 대충 api를 만들어서 조회조건을 구현했다. 이제 리스트를 클릭하면 판매처 상세정보와 위/경도값을 가지고 지도에 표시해보려한다.. 일단 구현할 상세페이지 컴포넌트를 만든다. vuetify의 bottom sheet로 한번 만들어보자. 그리고 doOpen과..

vuejs 공공데이터 공적 마스크 판매 정보 api 사용해보기 (2)

이전에는 공공데이터 api를 이용해서 간단하게 ui구현을 해보았다. /storesByAddr api를 이용해서 address값을 조회조건으로 추가해보려고한다. 일단 행정구역은 api를 찾기 귀찮(?)아서 통계분류포털 에서 행정구역분류를 엑셀로 받았다. UI쪽 조회조건 구현은 3개의 셀렉트박스를 구현할 예정이다. ex) 첫번째 셀렉트박스엔 서울특별시, 대전광역시 등 `시` 목록이 나열. 서울특별시가 선택되어있으면 두번째 셀렉트박스엔 강남구, 은평구 등 시에 해당하는 `구` 목록이 나열. 은평구가 선택되어있으면 세번째 셀렉트박스엔 갈현동, 구산동 등 구에 해당하는 `동` 목록이 나열. 위 엑셀파일에는 분류코드와 시, 구, 동 정보가 있어서 db에 넣어서 사용하면 될듯하다. 일단 backend 와 fronte..