컴파일 할 대상은 ./src 하위에 있는 파일들로 설정하며 컴파일 완료한 파일은 ./dist 경로 하위에 배포하도록 설정합니다. 여기까지 완료하였으면 tsc 명령으로 컴파일 할 수 있습니다. 컴파일을 정상적으로 수행하고 나면 프로젝트에 ./dist 라는 경로가 생성되고 하위에 app.js, main.js 파일이 생성됩니다. 현재까지 프로젝트 구조는 아래와 같습니다.
프로젝트 구조
컴파일 한 js 파일들을 번들링하기 위해 webpack을 설정합니다. 가장 기본적인 설정만 넣어서 아래와 같이 webpack.config.js 파일을 프로젝트 루트에 작성합니다.
본 포스트는 MySQL에서 UPDATE나 DELETE를 하려고 할 때 발생하는 에러(오류코드 1093)에 대한 설명입니다. 상세 오류 메시지는 You can't specify target table 'TABLE' for update in FROM clause 와 같이 표시됩니다.
오라클이나 티베로 등에서는 아래와 같은 Query가 잘 동작합니다.
UPDATE TBP_STAGE_HIST
SET COMPLETE = 'Y'
WHERE ST_DTM =
( SELECT MAX(ST_DTM)
FROM TBP_STAGE_HIST)
위 예시에는 UPDATE를 사용했지만 DELETE 역시 잘 동작합니다. 하지만 MySQL에서는 1093 에러 코드를 리턴합니다. 내용을 보면 You can't specify target table 'TABLE' for update in FROM clause 로, UPDATE나 DELETE 작업을 수행할 때 자기 자신을 직접 참조할 수 없도록 합니다.
위의 경우 해결은 간단합니다. Sub Query에 자기 자신을 사용할 경우 인라인 뷰 형태로 만들어서 사용하시면 됩니다. 위의 Query를 수정하면 아래와 같은 방식입니다.
UPDATE TBP_STAGE_HIST
SET COMPLETE = 'Y'
WHERE ST_DTM =
( SELECT ST_DTM
FROM (SELECT MAX(ST_DTM) ST_DTM
FROM TBP_STAGE_HIST) A
)
본 포스트는 애플 앱 스토어(Apple AppStore)에서 앱을 서비스하기 위해 검수 요청할 때 애플에서 요구하는 Native Apple Map을 지원하기 위한 내용을 다룹니다.
앱 서비스를 하나 만들어서 먼저 구글 플레이스토어에 런칭한 후 아이폰 앱도 만들어서 애플 앱 스토어에 검수를 요청했는데, 대강 아래와 같은 사유로 Reject 메시지가 전달 되었습니다.
Guideline 4.0 - Design Your app's location feature is not integrated with the built-in mapping functionality, which limits users to a third-party maps app
검수를 요청한 앱에는 특정 판매점을 찾아가기 위한 길찾기 기능이 포함되어 있었고, 길찾기 기능을 선택하면 휴대폰에 설치되어 있는 네이버 맵을 호출하여 길찾기 기능을 제공하는 형태였습니다. (아래 그림 참고)
길찾기 기능
구글 플레이스토어 심사 당시에는 문제가 되지 않았지만 애플에서는 디자인 가이드 라인에 따라서 위 내용과 같이 third-party 앱이 아닌 이미 built-in 되어 있는 애플 맵을 통해 길찾기 기능을 제공해야 한다는 Review 였습니다. 사실 애플 맵에 길찾기 기능이 있는 것도 확인해보지 않았었고, 대부분 길찾기 기능을 네이버 맵을 사용하기에 수정은 하지 않고 회신 처리했습니다.
회신 내용 한국에서는 대부분 네이버 맵을 사용하여 길찾기 기능을 제공하고, 사용자의 휴대폰에 설치되어 있지 않은 경우 손쉽게 설치할 수 있도록 앱 스토어로 안내합니다. 모든 지도 기능을 애플 맵을 통해 제공하라는 무리가 있습니다.
어느 정도 납득이 될 줄 알았지만 애플에서는 다시 Reject이 왔습니다. 사유는 대강 아래와 같습니다.
Guideline 4.0 - Design Specifically, your app limits users to a third-party maps app, but does not give users the option to launch the native Apple Maps app. Apps that use a third-party maps, need to offer native Apple Maps to users as an equivalent option.
다른 앱으로 서비스를 반드시 해야 한다면 사용자가 애플 맵도 선택할 수 있게 동등한 옵션을 주라는 권고강제였습니다. 하여 Apple Map API를 찾아보니 의외로 많은 기능들이 있었습니다. 아래 링크에 상세한 API 가이드가 나와 있습니다.
본 포스트는 React 애플리케이션 작성 시 로딩 다이얼로그, 프로그레스를 표시할 때 사용할 수 있는 오픈 소스인 React Spinners 사용에 대한 글입니다.
애플리케이션에서 서버 인터페이스나 모바일 Device의 기능을 사용하기 위해서 인터페이스 할 때, 아니면 내부적으로 무언가를 분석해야 해서 사용자와의 인터페이스를 잠시 막아두고 싶은 경우 Loading Dialog를 많이 사용합니다. jQuery를 사용할 때도 괜찮은 오픈 소스가 있어서 사용하거나, 아니면 그냥 Layer를 하나 뒤집어 씌운 다음에 괜찮은(?) 그림이나 애니메이션 하나를 올리는 방법을 사용했습니다.
React 애플리케이션에서 사용하기 괜찮은 오픈 소스가 하나 있어 소개합니다. 사실 코드에 대한 설명은 더 필요없을 정도로 깔끔하게 아래 사이트에 정리되어 있습니다.
처음에는 Loading Component는 표시되지 않아야 하므로 초기 state는 false로 선언합니다. 이제 UI를 블록할 필요가 있는 부분에 Loading Component를 적용합니다. 아래 예시는 모바일 데이터를 통해 현재 위치를 가져오는 부분에 적용한 예시입니다.
현재 위치를 수신하기 전에 loading state를 true로 변경한 후 작업이 정상으로 완료되거나, 실패로 완료되어도 loading state는 false로 변경합니다. 이제 마지막으로 UI Rendering code를 return 하는 부분에 state에 변경에 따라 Loading Component를 표시하거나 제거하는 로직을 추가합니다.
{
loading ? <Loading /> : ''
}
위와 같이 작업하면 간단하게 Loading Dialog를 표시할 수 있습니다. 위의 예시를 사용한 화면은 아래와 같습니다.
Back-end는 살짝 변경해서 NestJS 기반으로 구성했지만 별반 다를 내용은 없습니다. Front-end는 React + Typescript로 구성해 보았습니다. 원리는 수집한 자료를 기반으로 나름의 알고리즘으로 서버에서 분석을 해서 번호를 생성한 후 Front-end에 전달하면 Front-end에서 추천번호를 보여주는 방식입니다.
UX는 아래와 같이 구성되어 있습니다.
Lotto-Kit 메인 화면
로또 번호를 5개까지 생성할 수 있고 (마음에 들지 않는 번호는 재생성할 수 있습니다.) 근처에 있는 1등 당첨 판매점과 일반 로또 판매점을 조회할 수 있습니다. 또한 우리 앱에서 생성한 번호 중 실제로 1등~5등에 당첨된 번호가 있으면 [당첨내역]에서 조회할 수 있습니다.
그리고 회차 별 당첨번호도 조회할 수 있고, 생성한 번호를 지인에게 선물할 수도 있습니다.
한 번쯤 애플리케이션에 관심이 있으신 분은 다운로드 하셔서 평가 부탁 드립니다.
구글 플레이스토어에서 "lottokit"을 검색하시거나 아래 URL로 바로 다운로드 하실 수 있습니다.
이 포스트는 Java 에서 여러 개의 단어 조건을 equals로 비교할 때 equals 대신 Arrays.asList().contains 를 사용하는 방법을 설명합니다.
Java 업무 프로그램을 작성하다 보면 A이거나 B이거나 C일 경우에 어떤 코드를 실행시키는 형태의 조건문을 많이 작성합니다. 이렇게 조건이 몇 개 없을 때는 equals를 사용해도 가독성이 나쁘지 않고, 변경에도 문제가 없지만 조건이 많을 경우에는 프로그램도 길어져 가독성이 떨어질 뿐만 아니라 변경 시에도 좀 헷갈리는 경우가 있습니다.
설치 과정은 별로 특별할 것이 없으므로 별도로 설명하지 않습니다. 설치 과정 중 MySQL root 계정을 설정하는 부분이 있는데 본인이 사용할 root 계정을 정확하게 입력하고 기억합니다.
접속정보 설정
설치가 완료되었다면 MySQL Workbench를 켜고 일단 root 계정으로 접속합니다.
MySQL Workbench
위 스크린 샷의 MySQL Connections 부분에 [+] 버튼을 클릭하여 새로운 Connection을 하나 생성하는데, 계정의 비밀번호를 Keychain에 저장하고 싶으면 [Store in Keychain ...] 버튼을 클릭하여 비밀번호를 기억시켜 둡니다. 여기서는 굳이 비밀번호는 저장하지 않겠습니다.
새 Connection 생성
식별할 수 있는 Connection Name과 접속 정보를 확인한 후 [OK] 버튼을 선택하면 아래와 같이 Connection이 하나 생성됩니다.
Connection 생성 확인
선택하고 비밀번호를 입력하여 root 계정으로 로그인 합니다.
데이터베이스 접속
데이터베이스 생성
이제 사용할 데이터베이스 및 사용자를 하나씩 생성해 보겠습니다. 먼저 아래 스크립트로 데이터베이스를 먼저 생성합니다.
CREATE DATABASE testDB DEFAULT CHARACTER SET utf8 collate utf8_general_ci;
testDB 라는 이름의 데이터베이스를 하나 생성하고 해당 데이터베이스의 기본 Charater-set을 UTF-8로 설정합니다. 이어서 사용자 계정도 하나 생성합니다. testid 라는 계정을 생성하고 비밀번호는 test01!로 생성하겠습니다.
CREATE USER 'testid'@'%' IDENTIFIED BY 'test01!';
이제 생성한 계정에 testDB의 개체들을 사용할 수 있는 권한을 부여합니다.
GRANT ALL PRIVILEGES ON testDB.* to 'testid'@'%';
다시 로그인해서 정상적으로 로그인이 되는지 확인합니다. 위에서 하신대로 [New Connection]을 하나 열고 로그인하시면 됩니다.
생성한 테이블에 데이터를 한 건 입력하고 SELECT 해서 테이블이 정상적으로 생성되었는지 확인합니다.
INSERT INTO TB_TEST VALUES (1, 'TEST');
SELECT *
FROM TB_TEST
Node.js 프로젝트 설정
위와 같이 데이터베이스에 대한 설정을 마쳤으면 이제 Node.js 에서 해당 데이터베이스를 사용하도록 설정합니다. 위의 포스트를 따라해서 "Hello World"까지 출력해 본 상태라면 현재 package.json은 express 모듈만 설치하여 아래와 같은 상태입니다.
