번개애비의 라이프스톼일

클로드코드 머신용 맥미니 원격 셋팅하는 방법

번개애비 — Fri, 3 Apr 2026 14:23:16 +0900

요즘 맥미니에 클로드 코드를 설치하여 AI Native 코딩을 하고 있다.

클로드 코드를 잠깐 써보니까 가끔 Work Directory를 벗어나서 다른 파일을 건드는 위험한 경우가 있기도 하고,

중요파일들의 경우 회사의 보안 거버넌스에도 문제가 될 것이 자명했다.

DELL서버에 비해 귀요미한 맥미니

결국 물리적으로 분리된 별도의 맥미니 환경을 구성하여 이렇게 서버랙에 두어 코딩에이전트로 활용하고 있다.

서버 랙의 환경은 별도의 모니터를 설치하거나 매번 사용때 마다 KVM 연결할 수도 없는 노릇인데,

원격 액세스 환경은 항상 원격지 서버가 Standby 상태가 되어있어야 하는데 MacOS 특성상 잠자기모드에 쉽게 빠지게 되어 원격 액세스 환경에는 몇가지 셋팅이 필요하다.

다음의 셋팅 방법을 팔로우하면 잠자기모드에 빠지지 않고 원격으로 맥미니를 활용할 수 있다.

준비물

맥미니 or 맥북과 같은 MacOS 기기
최초 설치 시 로컬계정으로 설정
최초 설치 시 Siri, TouchID 건너뛰기
안정적인 네트워크 접속을 위한 유선연결

방화벽 끄기

방화벽을 꺼둘 경우, 모든 포트나 모든 권한이 외부에서 허용될 수 있음으로 방화벽을 비활성화할때는 앞단 네트워크에 물리적인 방화벽이나 최소 DHCP(공유기)와 같은 환경에서 셋팅하는 것을 권장한다.

설정 > 네트워크 > 방화벽 "끄기"

잠자기 모드 방지

맥북등과 같은 다른 포맷의 기기에서는 화면이 다를 수 있고, 최초 구매나 OS재설치이후 재부팅 유무에 따라 화면이 다르게 표기되는 경우가 있음으로 아래의 화면이 나타나지 않는다면 재부팅을 시도하는것을 권장하다.

설정 > 에너지 > 에너지 모드

- 고성능 "켬"

- 디스플레이가 꺼져 있을 때 자동으로 잠자지 않게 하기 "켬"

- 네트워크 연결 시 깨우기 "켬"

- 정전 후 자동으로 시작하기 "켬"

설정 > 잠금화면

- 비활성 상태인 경우 디스플레이 끄기 "안함"

- 화면 보호기 시작 후 또는 디스플레이가 꺼진후 암호요구 "안함"

앱스토어에서 Amphetamine 앱 설치

https://apps.apple.com/kr/app/amphetamine/id937984704?mt=12

Amphetamine 앱 실행후 MacOS 상단 상태바의 스위치 아이콘 클릭하여 설정 > 일반

- 로그인 시 Amphetamine 실행 "체크"

- Amphetamine 실행 시 새 세션 실행 "체크"

- 잠자기에서 깨어난 경우 새 세션 실행 "체크"

- Dock에서 Amphetamine 숨기기 "체크"

설정 > 세션 기본값

- 기본 세션시간 "제한 없음"

자동로그인 설정

재부팅시 자동 로그인을 설정하지 않으면 로그인 시 실행하는 앱이 실행되지 않는 문제가 있음. 자동 재부팅후 웹서버가 자동으로 구동되어야 한다거나 원격서버 프로그램이 구동되어야 하는 환경등에서는 반드시 자동로그인이 가능하도록 설정해두어야 한다.

설정 > 개인정보 보호 및 보안 > FileVault "끔"

설정 > 로그인 암호 > 재시동후 자동 로그인 "켬"

설정 > 사용자 및 그룹 > 다음으로 자동로그인 에서 나의 로컬계정을 추가

화면공유 및 원격 활성화

원격 터미널이나 원격 화면 공유등을 위해 원격과 관련된 기능을 켜고 최초 셋팅한 로컬 사용자를 추가한다.

설정 > 공유

- 원격 관리 "켬"

- 원격 로그인 "켬"

- 원격 응용 프로그램 스크립팅 "켬"

- 각 고급기능의 오른쪽 ⓘ 버튼을 누른뒤, 로컬 사용자를 모두 추가한다.

Finder 설정변경

파일명이 . 으로 시작하는 파일명을 보기 위해 숨김파일을 보이게 설정해야 한다.

터미널실행 > 명령어 입력

defaults write com.apple.Finder AppleShowAllFiles YES

Command+Option+Esc 를 눌러 Finder를 "재실행"

Finder > 설정 > 고급

- 모든 파일 확장자 보기 "체크"

- 폴더 우선 정렬 :

- 윈도우에서 "체크"

- 데스크탑에서 "체크"

네트워크 설정

아래 포트번호를 참고해서 DHCP(공유기)의 포트포워딩을 설정해주면 외부에서 접속이 가능하다.

참고로 포트포워딩을 할때 외부포트는 가급적 다른 포트번호로 바꿔서 사용하는게 보안상 좋다.

기능	포트번호 (로컬기준)	비고
원격 화면	5900	VNC방식의 GUI 원격제어
터미널	22	SSH방식의 터미널 원격제어

원격 접속

MacOS환경에서는 기본앱인 화면 공유 앱을 통해 GUI 원격접속이 가능하고 또는 터미널을 열어 "ssh 계정명@아이피주소" 명령어를 입력하여 터미널 원격접속이 가능하다.

외부포트를 변경했을 경우, 화면공유에서는 "아이피주소:외부포트번호" 를 입력하여 접속하고 터미널에서는 "ssh -p 외부포트번호 계정명@아이피주소" 를 입력하여 원격접속을 한다.

VNC 또는 SSH 방식의 원격 접속이기 때문에 다른 앱을 통해서 접속해도 무방하다.

https://apps.apple.com/kr/app/realvnc-viewer-remote-desktop/id352019548

RealVNC Viewer: Remote Desktop 앱 - App Store

App Store에서 RealVNC의 RealVNC Viewer: Remote Desktop 앱을 다운로드하십시오. 스크린샷, 평가 및 리뷰, 사용자 팁 및 RealVNC Viewer: Remote Desktop 앱과 비슷한 다른 앱을 볼 수 있습니다.

apps.apple.com

https://apps.apple.com/kr/app/termius-modern-ssh-client/id549039908

Termius - Modern SSH Client 앱 - App Store

App Store에서 Termius Corporation의 Termius - Modern SSH Client 앱을 다운로드하십시오. 스크린샷, 평가 및 리뷰, 사용자 팁 및 Termius - Modern SSH Client 앱과 비슷한 다른 앱을 볼 수 있습니다.

apps.apple.com

치앙마이의 코워킹 스페이스별 인터넷속도 비교 및 분석 (Comparison of network performance by co-working space in Chiang Mai)

번개애비 — Tue, 27 Jan 2026 11:14:54 +0900

이번에 홀로 치앙마이로 약 한달간 하드워킹하러 왔다.

치앙마이가 인터넷 속도는 나름 빠른편이라고 한다. 근데!

인터넷 속도와 관련된 후기들이 죄다 본인이 치앙마이에서 먹은거 카페간 것들만 올려놓았다 ㅋㅋㅋ (나는 놀러가는게 아니라고!!!)

실제로 리모트 워킹을 나갔을때 화상회의, VPN연결, VNC로의 원격작업 등등 여러가지 업무를 해야 할 상황들이 있는데 구체적으로 얼마나 빠른지, 그리고 구체적으로 어떤 코워킹 스페이스의 인터넷이 원격근무하기 용이한지 정확한 정보가 없어서 리모트워킹을 하면서 내돈내산 인터넷 속도를 비교해보았다.

태국 치앙마이로 Remote working을 가는 분들에게
어느정도의 인터넷 속도로 원격근무가 가능한지를 가늠해주는 지표가 되길 바랍니다.

Yellow Coworking Space ★★

속도요약 : 빠방한 대역폭을 제공하지만 용서되지 않는 레이턴시

이런분들은 비추 : 화상회의, 웹개발 배포작업 등

하루이용료 : ฿442 (약 20,000원)

영업시간 : 24시간

지역 : 님만해민

주소 : 16 2 Nimmanahaeminda Road, Tambon Su Thep, Amphoe Mueang Chiang Mai, Chiang Mai 50200

구글맵 : https://maps.app.goo.gl/rcj5H8m4PHRT6cbW7

총 평
시설 이용후기	1층, 2층으로 구성되어 있고, 화장실도 매우 깨끗함. 하루이용권을 구매 시(฿442) 월컴드링크를 무료로 마실 수 있어서 좋음. 하지만 오후가 되면 자리가 없음. 오전에 방문할 것을 추천함. 면적 대비 카메라 사각지대가 꽤 있어서 물건도난 위험이 있으나, 그 만큼 사람이 많아서 괜춘괜춘. 노느라 일을 못한 사람들 마냥 정말 다들 일만 하고 있는 분위기. 대역폭이 빠방하게 잘 나오지만 레이턴시가 뭔가 파도치는 패턴처럼 좋지 않은 타이밍이 계속 찾아옴.
ISP 회선	True Corporation (태국내 2위)
직결 인터넷 대역폭(속도)	★★★★★ (Avg. 133.5Mbps ≈ 16.6MB/s)
직결 인터넷 레이턴시(지연시간)	★☆☆☆☆ (Avg. 1511ms)
VPN에서의 업무가능 여부	★☆☆☆☆ (대체적으로 가능하지만, 10분~30분정도에 한번씩 매우 느려지는 타이밍이 있어서 답답함)
QoS 여부	제한없음

	WIFI 직결	국내 망 VPN 경유
Netflix 속도비교 (높을수록좋음)
Cloudflare 속도비교 (높을수록좋음)
네이버메인 Document Waterfall 비교 (낮을수록좋음)
KT망내 자사서버 Document Waterfall 비교 (낮을수록좋음)

The Story 106 ★★★★

속도요약 : 한시간마다 WIFI가 끊기지만 준수한 레이턴시

이런분들은 비추 : 유튜브등에 한시간이상의 업로드가 필요한 대용량 업로더

하루이용료 : ฿80 (약 4,000원)

영업시간 : 오전 8:00 ~ 오후 09:00

지역 : 타패문 바깥 동부지역

주소 : 200 Tha Phae Road, Tambon Chang Moi, Mueang Chiang Mai District, Chiang Mai 50300

구글맵 : https://maps.app.goo.gl/261hwx1AHgKdkaVb7

총 평
시설 이용후기	1층은 베이커리 카페로 운영되고 있으며, Coworking Space는 2층에서 이용할 수 있음. 모든 타임에 걸쳐 사람이 매우 적어서 좋았으나, 오토바이는 길에 주차하면 바로 티켓을 받기 십상임. (맞은편 왓 부파람 사찰에 STORY 106에 방문한다고 이야기하고 무료로 주차할 수 있음) WIFI 이용 시 개별 WIFI 패스워드 티겟을 받을 수 있고, WIFI접근 시 해당 계정을 입력해야 이용가능. 커피 한 잔(฿80)을 주문하면 하루종일 이용가능해서 완전 저렴하게 이용가능함. 조용히 대화하고 여유롭게 적당히 흥얼거리며 노트북하는 분위기. 대역폭은 쏘쏘하지만 레이턴시가 치앙마이 코워킹스페이스 중에 베스트라 배포작업하기 좋은 환경이나, 가끔씩 WIFI연결을 다시 시도해줘야하는 문제가 있음. (WIFI 티켓을 2개씩 주는 이유가 있었음)
ISP 회선	TOT (태국내 3위 통신사, 모기업이 NT로 국영기업임)
직결 인터넷 대역폭(속도)	★★★☆☆ (Avg. 84.2Mbps ≈ 10.5MB/s)
직결 인터넷 레이턴시(지연시간)	★★★★★ (Avg. 263.2ms)
VPN에서의 업무가능 여부	★★★☆☆ (1시간마다 WIFI접속이 끊겨서 재연결 필요)
QoS 여부	제한없음

	WIFI 직결	국내 망 VPN 경유
Netflix 속도비교 (높을수록좋음)
Cloudflare 속도비교 (높을수록좋음)
네이버메인 Document Waterfall 비교 (낮을수록좋음)
KT망내 자사서버 Document Waterfall 비교 (낮을수록좋음)

Punspace ★★★★★

속도요약 : 여기 공유기 미크로틱을 씁니다로 정리가능

이런분들은 비추 : VPN을 통해 대용량파일(영상, 3D/LLM 모델 등)을 업로드 해야되는 업무

영업시간 : 오전 9:00 ~ 오후 6:00

하루이용료 : ฿289 (약 14,000원)

지역 : 올드타운 안 치앙마이 전문대 옆

주소 : 10 Wiang Kaew Rd, Sri Phum, Mueang Chiang Mai District, Chiang Mai 50200

구글맵 : https://maps.app.goo.gl/Vxd3nHf9eWaVgHex7

총 평
시설 이용후기	매우 넓은 잔대밭과 울창한 숲에 있는 공간으로 꾸며놓은 곳임. (그냥 힐링 그 자체) 하루 이용권은 준수한 편(฿289)이고, 최초 이용시 계정을 본인이 직접 만들고 해당 계정으로 Wifi를 그대로 이용하도록 하여 뭔가 시스템이 잘 갖춰서 매끄럽게 서비스되는 느낌이다. 대역폭도 준수하고 레이턴시도 매우 좋음. Wifi Captive화면을 미루어볼때 Wifi를 무려 미크로틱을 사용하고 있고, 다른 오피스들과 달리 제대로된 랙 마운트를 구성해서 네트워크에 대해서는 진심인 것 같았다. VPN을 통한 업로드속도를 체크하면서 알게된 사실인데 암호화된 패킷의 업로드속도가 100Mbps으로 근접하면서 소모트래픽이 약 50MB정도 되었을 때 마다 해당 통신포트에 대해 일시적으로 Deny시키는 QoS Role이 설정되어 있는듯 함. VPN을 통해 유튜브 업로드를 진행하는 등 조금 특수한 업무면 힘듬.
ISP 회선	CAT Telecom (태국내 3위 통신사, 모기업이 NT로 국영기업임)
직결 인터넷 대역폭(속도)	★★★★☆ (Avg. 108.5Mbps ≈ 13.5MB/s)
직결 인터넷 레이턴시(지연시간)	★★★★★ (Avg. 296.2ms)
VPN에서의 업무가능 여부	★★★★★ (나 VPN쓰고 있는거 맞지? 라는 생각이 들정도로 너무 쾌적함)
QoS 여부	제한없음

	WIFI 직결	국내 망 VPN 경유
Netflix 속도비교 (높을수록좋음)
Cloudflare 속도비교 (높을수록좋음)
네이버메인 Document Waterfall 비교 (낮을수록좋음)
KT망내 자사서버 Document Waterfall 비교 (낮을수록좋음)

Life Space ★★

속도요약 : 레이턴시와 접속유지가 잘 되지만 너무 답답한 QoS제한

이런분들은 비추 : 영상과 같은 대용량 파일의 업/다운로드가 필요한 사용자

영업시간 : 오전 9:00 ~ 오후 10:00

하루이용료 : ฿180 (약 8,700원)

지역 : 님만해민

주소 : 11 Soi 15 Nimmanhaeminda Road, Mueang Chiang Mai District, Chiang Mai 50200

구글맵 : https://maps.app.goo.gl/Qi7q9wzVT3rB37Su6

총 평
시설 이용후기	님만해민 시내안에 있지만 좀 조용한 위치에 있음. 내가 갔던 모든 코워킹스페이스 통틀어 한국인을 제일 많이 만난 곳이기도 하다. (한국에 잘 알려져 있는듯) 1일 이용권은 ฿180으로 님만해민에서 저렴한 편이고 인근에 있는 Yellow를 의식해서인지 이용권과 함께 1회 무료음료쿠폰과 15%음료할인쿠폰도 준다. 내부 인테리어는 뭔가 학생들을 위한 공부방처럼 되어있는데, 이건 크게 게의치 않으니 패스하고 사용자마다 다운로드에 약 25Mbps, 업로드에는 약 12Mbps의 대역폭 QoS가 걸려있는것으로 보인다! 사용가능한 대역폭이 많이 처참한 수준임. (이 정도면 다운로드시 간신히 3MB/s정도 나온다) 참고로 UiniFi UDM를 사용하고 있는것으로 확인했다. 그나마 나은점은 치앙마이 시내의 코워킹 스페이스 통틀어서 유일하게 VPN접속이 한번도 끊기지 않았다.
ISP 회선	True Corporation (태국내 2위)
직결 인터넷 대역폭(속도)	★☆☆☆☆ (Avg. 26Mbps ≈ 3.2MB/s)
직결 인터넷 레이턴시(지연시간)	★★★☆☆ (Avg. 324ms)
VPN에서의 업무가능 여부	★★★★☆ (대역폭은 구리지만 VPN레이턴시는 이정도면 훌룡함)
QoS 여부	~25Mbps

	WIFI 직결	국내 망 VPN 경유
Netflix 속도비교 (높을수록좋음)
Cloudflare 속도비교 (높을수록좋음)
네이버메인 Document Waterfall 비교 (낮을수록좋음)
KT망내 자사서버 Document Waterfall 비교 (낮을수록좋음)

4Seas Nimman ★★★★

속도요약 : 치앙마이 업로드 대역폭 2위

이런분들은 비추 : MBTI가 i 성향인 분들, 소음에 다소 민감하신 분들

영업시간 : 오전 9:00 ~ 오후 10:00

하루이용료 : ฿80 (약 4,000원)

지역 : 님만해민

주소 : 2 20 Nimmana Haeminda Rd Lane 15, Tambon Su Thep, เมือง Chiang Mai 50200 태국

구글맵 : https://maps.app.goo.gl/aZotGvL3B76JrrNx7

총 평
시설 이용후기	매일 1층에서 오전/오후 블록체인이나 Web3, AI와 관련된 세션이 열린다. 이와 관련해서 다른 코워킹스페이스 공간 중 가장 시끌벅적한 공간이면서 커뮤니티가 활성화된 공간이 아닐까 싶다. 조용히 일하고 싶은 사람에게는 최악이지만 새로운 친구를 사귀고 싶다면 강력추천. 대부분 서구권 아니면 중화권사람들이 대부분인데 몇몇 중궈들은 코워킹스페이스에서 조용히 해달라고 부탁하면서 본인은 더 시끄럽게 전화를 받는 모습을 자주 볼 수 있어서 눈쌀이 자주 찌푸려진다. 3층 공간이 코워킹스페이스 공간이고, 커피 한 잔을 기부? 하는 방식으로 운영된다. (아아 한잔에 ฿80) 공유기는 Unifi UDM을 사용하고 있고 다운로드 속도도 좋지만 업로드 속도가 굉장히 인상적이다. 의자를 지속적으로 교체하고 있는데, 교체되지 않은 의자들은 소리가 굉장히 크다는게 흠이라서 민폐를 끼치는 것을 두려워하는 한국사람은 자리를 미리 잘 잡아야한다.
ISP 회선	3BB (태국내 1위, 모기업이 AIS)
직결 인터넷 대역폭(속도)	★★★★★ (Avg. 222.2Mbps ≈ 27.7MB/s)
직결 인터넷 레이턴시(지연시간)	★★★☆☆ (Avg. 314ms)
VPN에서의 업무가능 여부	★★★★☆ (유일하게 업로드 속도가 다운로드 속도를 능가한다!)
QoS 여부	제한없음

	WIFI 직결	국내 망 VPN 경유
Netflix 속도비교 (높을수록좋음)
Cloudflare 속도비교 (높을수록좋음)
네이버메인 Document Waterfall 비교 (낮을수록좋음)
KT망내 자사서버 Document Waterfall 비교 (낮을수록좋음)

One Workspace ★★★★

속도요약 : 준수한 레이턴시와 어느정도 타협가능한 QoS제한

이런분들은 비추 : 골목안에 있어서 오토바이가 없다면 접근이 조금 어려움

영업시간 : 오전 9:00 ~ 오후 8:00

하루이용료 : ฿249 (약 12,000원)

지역 : 싼티탐

주소 : 29 Hussadhisawee Soi 4, Chang Phueak, Mueang Chiang Mai District, Chiang Mai 50200 태국

구글맵 : https://maps.app.goo.gl/N5Lzfr7JoMAybWet5

총 평
시설 이용후기	아마 4Seas Nimman과 완벽하게 정반대의 성향의 워킹스페이스가 아닐까 싶다. 외진 골목안에 있으면서 사람도 없고, 정말 고요하다. 하루 이용료는 ฿249으로 다소 비싼편은 흠. 1일 이용권을 구매하고 구글후기와 인스타그램을 팔로워하면 1층 카페의 전체 음료중 한가지를 무료로 마실 수 있다. 인근의 님만해민 소재의 다른 워킹스페이스와 같이 UniFi UDM을 사용하고 있으며, 굉장히 특이하게도 2회선을 Active-Active로 구성되어 있다. Cloudflare Speedtest의 대역폭 그래프를 보았을때 인터넷 대역폭에 대한 QoS는 약 50Mbps선에 걸려있지만, 이중화 회선구성 덕분에 레이턴시는 정말 최고였다. 이 정도면 국내상황보다 오히려 더 좋은 경우가 생길 수 있을 정도!
ISP 회선	AIS, 3BB (여기는 특이하게 AIS망과 3BB망이 Active-Active로 구성되어 있다)
직결 인터넷 대역폭(속도)	★★☆☆☆ (Avg. 47.6Mbps ≈ 5.9MB/s)
직결 인터넷 레이턴시(지연시간)	★★★★★ (Avg. 189ms)
VPN에서의 업무가능 여부	★★★★★ (나 VPN쓰고 있는거 맞지? 라는 생각이 들정도로 너무 쾌적함)
QoS 여부	~50Mbps

	WIFI 직결	국내 망 VPN 경유
Netflix 속도비교 (높을수록좋음)
Cloudflare 속도비교 (높을수록좋음)
네이버메인 Document Waterfall 비교 (낮을수록좋음)
KT망내 자사서버 Document Waterfall 비교 (낮을수록좋음)

RealSpace Coworking ★★★★★

속도요약 : 한국보다 속도가 더 빠름

이런분들은 비추 : IPv6를 지원하지 못할 경우, 아예 업무가 불가능할 수 있음 (VPN쓰면 극복가능)

영업시간 : 오전 9:00 ~ 오후 12:00

하루이용료 : ฿300 (약 14,000원)

지역 : 싼티탐

주소 : 32 1 Sirithorn Rd, Chang Phueak, Mueang Chiang Mai District, Chiang Mai 50300

구글맵 : https://maps.app.goo.gl/YMyuNCjwYSkMVbLu7

총 평
시설 이용후기	아직 사람들에게 잘 알려지지 않은 코워킹스페이스이다. 싼티탐 외곽순환도로에 있어서 차나, 오토바이로 접근이 가능하다. 약간 로컬가게처럼 꾸며놓은 입구 덕분에 찾아가기는 쉽지 않은 편. 하지만 일하기는 정말 좋은 공간이다. 뭔가 숨은 보석을 발견한 느낌? 전좌석 모니터와 모션데스크를 갖추고 있고, 1일 이용권은 ฿300으로 치앙마이 시내에서는 다소 비싼축에 끼지만 외관과 달리 내부시설은 정말 좋다. (분위기는 뭔가 밝은 PC방에 온거처럼 되어 있음 ㅋㅋ) DHCP는 통신사에서 제공하는 AIS AX3000을 쓰고 있는데, 아마 치앙마이 코워킹스페이스 중에서는 여기가 속도가 제일 빠르지 않을까 싶다. 살짝 흠이라면 IPv6로 연결된다는 것인데, 어차피 우리는 VPN을 쓸것이 "당연"하기 때문에 크게 중요하지 않을듯 함.
ISP 회선	AIS (태국내 1위)
직결 인터넷 대역폭(속도)	★★★★★ (Avg. 559.7Mbps ≈ 69.9MB/s)
직결 인터넷 레이턴시(지연시간)	★★★★★ (Avg. 182ms)
VPN에서의 업무가능 여부	★★★★★ (한국보다 더 잘나오는 수준)
QoS 여부	제한없음

	WIFI 직결	국내 망 VPN 경유
Netflix 속도비교 (높을수록좋음)
Cloudflare 속도비교 (높을수록좋음)
네이버메인 Document Waterfall 비교 (낮을수록좋음)
KT망내 자사서버 Document Waterfall 비교 (낮을수록좋음)

Alt_ChiangMai ★★★★★

속도요약 : 괜찮은 레이턴시와 한국의 100M 광랜급 대역폭

이런분들은 비추 : 에어컨소리가 커서 소리에 좀 많이 민감하신 분

영업시간 : 오전 9:00 ~ 오후 09:00 (주말은 오후 06:00까지)

하루이용료 : ฿320 (약 16,000원)

지역 : 올드타운

주소 : 129, 1 Intrawarorot Rd, Tambon Si Phum, Mueang Chiang Mai District, Chiang Mai 50200

구글맵 : https://maps.app.goo.gl/8EPaMjDxE5z2eDHM7

총 평
시설 이용후기	1층에 카페와 1~2층에 코워킹스페이스, 그 위층은 숙소로 운영되는 공간이다. 올드타운 내 수안독게이트 바로 인근이라 접근성이 매우 좋은것이 강점이다. 미크로틱의 DHCP를 사용중으로 확인되며, 인터넷대역폭은 Punspace나 4Seas와 비슷한 수준이다. 하지만 레이턴시는 Realspace 다음으로 빠르다! 하루이용료가 ฿320로 가격이 좀 나가지만, 반나절 정도 이용할 수 있도록 4시간짜리 이용권도 존재함. (홈페이지 가격과 차이가 있으니 방문해서 확인하는것을 추천한다.) 일부 모션데스크가 존재하고 무엇보다 근본있는 Dell모니터를 비치해두었다. 카페, 다이닝룸, 세탁실, 탁구대 등 여러 편의시설이 함께 포함되어 있음으로 숙박과 함께 이용하는 것을 추천한다. (하지만 숙박은 치앙마이에서도 비싼편)
ISP 회선	3BB (태국내 1위, 모기업이 AIS)
직결 인터넷 대역폭(속도)	★★★★☆ (Avg. 125.2Mbps ≈ 15.6MB/s)
직결 인터넷 레이턴시(지연시간)	★★★★★ (Avg. 195ms)
VPN에서의 업무가능 여부	★★★★★ (한국보다 더 잘나오는 수준)
QoS 여부	제한없음

	WIFI 직결	국내 망 VPN 경유
Netflix 속도비교 (높을수록좋음)
Cloudflare 속도비교 (높을수록좋음)
네이버메인 Document Waterfall 비교 (낮을수록좋음)
KT망내 자사서버 Document Waterfall 비교 (낮을수록좋음)

인터넷속도는 코워킹스페이스에서 제공하는 기본 WIFI를 사용하는것을 전제로 국내에서 운영중인 사내서버를 통해 VPN망을 사용해서 접근하는 속도도 함께 비교했다. (공용 WIFI환경에서 보안접속을 위한 VPN터널링은 선택이 아닌 필수란 사실을 명심하자!)

단순히 업로드/다운로드의 대역폭뿐만 아니라 개발자 관점에서 매우 중요한 지표 중 하나인 웹서비스의 Document 응답시간도 함께 비교하였으니 참고하자.

참고로 레이턴시 측정은 전세계 pop가 존재한 Netflix, Cloudflare의 측정값은 의미가 없음으로 무시했다.

모든 테스트는 속도변화폭이 있을 수 있음으로 가장 한가한 오전시간대와 가장 혼잡한 시간대를 각각 1회씩 나눠 총 2회씩 테스트했다.

테스트 환경
WIFI 직결	코워킹스페이스에서 제공하는 기본 WIFI를 사용하여 접속한 환경
국내 망 VPN 경유	국내에서 구동되는 VPN을 경유하여 접속한 환경 (KT망-부산, 모든트래픽을 경유, L2TP방식)

테스트 대상
Netflix 속도비교	인터넷 업/다운로드 대역폭 비교 (빠툼타니에 pop 연결가능)
Cloudflare 속도비교	인터넷 업/다운로드 대역폭 비교 (치앙마이 사믕 또는 방콕으로 pop 연결가능)
네이버메인 Waterfall 비교	웹서비스내 Document 레이턴시 비교 (GSLB를 통해 방콕에 pop 연결가능, 30KB대 용량)
자사서버 Waterfall 비교	웹서비스내 Document 레이턴시 비교 (KT망-대전, on-premise단독, MTU최적화X, 48KB 용량)

이 속도 테스트는 해당 오피스의 상황에 따라 언제든 변동될 수 있음.

테스트기간 : 2026년01월~2월

일부 코워킹스페이스의 경우 Wifi SSID를 통해 사용자 인증을 하는것이 아니라 Captive WIFI를 통해 사용자 인증이 이뤄지는데 이 경우, L2TP방식의 VPN터널링에서 접속이 간혈적으로 끊기는 이유가 대부분 Captive기능을 제공하는 웹프록시의 Service Reload 과정에서 발생되는 경우로 유추된다. 근데 이것도 사실 Wireguard와 같은 UDP터널링을 이용하면 해결하는 경우가 대부분이었다.
(Wireguard는 Captive wifi도 우회가 되는 경우도 있었음 ㅋㅋㅋ)

시놀로지에 S3 Bucket을 서비스하는 방법 (MinIO를 대신해서 RustFS)

번개애비 — Wed, 7 Jan 2026 18:30:31 +0900

MinIO가 이제는 라이센스문제가 있어서 MinIO대신 RustFS를 활용하여
시놀로지 NAS를 AWS와 100% 호환되는 S3 Bucket으로 만드는 방법을 설명한다.

시놀로지와 관련하여 MinIO 자료는 많은데 RustFS 자료는 적어서 이렇게 포스팅해본다.

먼저 시놀로지의 패키지 센터에서 Container Manager를 설치한다.

컨테이너 매니저를 켜고 레지스트리에서 rustfs/rustfs 를 다운로드한다.

RustFS의 버킷에 저장되는 파일을 시놀로지에서도 접근할 수 있도록 File Station을 통해 마운트할 폴더를 생성한다.
필자의 경우, /docker/도메인명 과 같은 형식으로 폴더를 생성했다.

여기서 제일 중요한 것은 권한을 할당해줘야 하는데
생성한 폴더를 오른쪽 클릭하여 속성에 들어가서 Everyone에 대한 모든권한을 추가해줘야 한다.
(이 권한이 없으면 RustFS도커가 무기한 재부팅된다.)

다시 Container Manager > 컨테이너 메뉴 에서 아래와 같이 컨테이너를 생성해준다.

포트는 9000 > 9000, 9001 > 9001 로 설정해주고
볼륨은 아까 새로만든 폴더로 설정하고 /data 에 마운트해준다.

마지막으로 RUSTFS_ACCESS_KEY에는 접속할 아이디
RUSTFS_SECRET_KEY에는 패스워드를 입력하고
RUSTFS_EXTERNAL_ADDRESS는 삭제하여 컨테이너를 생성한다.

외부에서 접속할 수 있도록 역방향프록시(Reverse Proxy)를 셋팅한다.
제어판 > 로그인 포털 > 고급 > 역방향 프록시 > 생성을 눌러 아래의 예시처럼 셋팅한다.
대상 포트가 9000은 S3 Bucket의 Endpoint이고 대상포트가 9001은 RustFS를 관리하는 웹관리콘솔이다.

필자의 경우 htts://도메인 을 9000 과 https://console.도메인 을 9001로 셋팅했다.

추가적으로 9001포트에 연결하는 프록시에는 사용자 지정 머리글에서 아래와 같이 WebSocket을 추가해줘야 한다.

이제 HTTPS통신을 위한 SSL인증서를 발급해야한다.
제어판 > 보안 > 인증서 > 추가를 눌러 새 인증서를 Let's Encrypt로 인증서를 발급한다.

[참고1] 시놀로지의 IP를 호스트A로 하여 도메인 설정이 되어있는 상태가 되어있어야함
[참고2] 80, 443포트를 외부에서 접속이 가능하도록 포트포워딩 되어있어야함.

마지막으로 발급한 인증설르 선택하고 설정을 누르면 역방향 프록시에서 추가한 서비스가 나오는데
발급한 인증서의 도메인에 맞춰 연결해줘야한다.
(이거 안하면 인증서오류남)

추가적으로 RustFS의 console에 접속하여 버킷을 만들어서 운영할때,
해당 버킷으로 익명사용자에게 리스트 출력은 막되, 다운로드가 가능하도록 설정하는 방법은 다음과 같다.
(MinIO Client, 일명 mc를 개발클라이언트 PC에 미리 설치해야함)

//policy.json 파일내용
{
    "Statement": [{
        "Action": ["s3:GetBucketLocation"],
        "Effect": "Allow",
        "Principal": {
            "AWS": ["*"]
        },
        "Resource": ["arn:aws:s3:::{버킷명}"]
    }, {
        "Action": ["s3:GetObject"],
        "Effect": "Allow",
        "Principal": {
            "AWS": ["*"]
        },
        "Resource": ["arn:aws:s3:::{버킷명}/*"]
    }],
    "Version": "2012-10-17"
}

#명령어
mc anonymous set-json policy.json {s3Alias}/{버킷명}

그리고... RustFS 콘솔을 통해 새로운 엑세스키를 생성했을때 아래의 권한을 설정하면 특정 버킷의 Read/Write권한이 부여된다.

{
  "ID": "",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "ListBucket",
      "Effect": "Allow",
      "Action": [
        "s3:ListBucket"
      ],
      "NotAction": [],
      "Resource": [
        "arn:aws:s3:::{버킷명}"
      ],
      "NotResource": [],
      "Condition": {}
    },
    {
      "Sid": "RWObjects",
      "Effect": "Allow",
      "Action": [
        "s3:PutObject",
        "s3:AbortMultipartUpload",
        "s3:ListMultipartUploadParts",
        "s3:GetObject",
        "s3:DeleteObject"
      ],
      "NotAction": [],
      "Resource": [
        "arn:aws:s3:::{버킷명}/*"
      ],
      "NotResource": [],
      "Condition": {}
    }
  ]
}

서비스구조개선을 통한 웹(앱)서비스의 대용량 트래픽처리 과정

번개애비 — Thu, 20 Mar 2025 14:41:15 +0900

이번 포스팅은 대용량 트래픽을 처리하기 위한 서버의 구성,

나아가 서버의 변경되는 구성에 따른 전체적인 시스템 구조개선에 대해 다뤄본다.

이 글은 아직 대용량 트래픽을 후두려맞기 전,

커피 한 잔의 여유를 갖고 있는 초심자를 위한 바이블이다.

(내용 중간중간에 챗GPT는 알려주지 않는 현업꿀팁들이 숨어 있으니 한번쯤 읽어보길 추천)

1. 스케일업 (Scale-Up)

대용량 트래픽을 처리하는 가장 간단한 방법이면서, 가장 값비싸고, 한계가 뚜렷한 방법이다.

대용량 트래픽이 유입되는 양이 향후 지속적이지 않을것이 명백할 경우, 추천하는 방법이다.

(왜냐면 별도의 서비스 구조를 변경할 필요가 없고, 서버사양을 변경하기 위한 잠시의 다운타임만 감수하기 때문이다.)

네이버클라우드의 Standard-g3 Server의 사양별 가격표

엄청 쉽다.

현재 사용하고 있는 클라우드 서버의 사양을 더 비싼 사양으로 업그레이드 하면 된다.

단, 물리적인 Dedicated서버를 사용하고 있다면, 더 좋은 사양의 서버로 별도의 마이그레이션을 해줘야 하는 번거로움이 있다. :(

본인이 대용량트래픽을 처음 겪어 본다면, 일단 서버를 Scale-Up부터 해보고 서버를 모니터링 해보자.

2. 웹서버와 데이터베이스서버의 분리를 통한 부하분산

서비스 또는 개발한 사람의 성향(?)에 따라 다르지만 보통 웹서버측의 부하보다 데이터베이스 부하가 통상적으로 더 높다.

때문에 하나의 단일서버에서 동작하는 웹과 데이터베이스를 별도의 서버로 분산해준다.

서비스의 형태와 개발방식이 유별나게 데이터베이스부하가 높다면 한번쯤(?) 생각해 볼 법한 부하분산이다.

1대의 서버가 해야되는 일을 2대의 서버가 해야함으로 Scale-Up을 통한 사양을 확장에 필요한 돈을 더 많이 쓸 수 있다(?) ㅋㅋ

(Ncloud기준으로 s64-g3서버를 2대쓰면 한달에 무려 5,620,480원!)

하지만, 이렇게 웹서버와 데이터베이스서버를 분리했음에도 불구하고 부하를 감당하지 못할경우, 다른 방식을 고려해야되며, 가끔 서버 모니터링에서는 부하가 낮게 감지 되지 않지만, 접속이 버벅인다면 웹서비스와 데이터베이스간 통신도 TCP를 통해 이뤄진다는 사실을 명심하고 한번 더 체크해보자

학부생때 배우는 네트워크의 TCP통신

3. L4나 DNS를 활용한 웹서버의 확장

여기서부터는 웹서버에서 관리되는 세션정보를 데이터베이스에서 통합관리되어야 한다.

보통은 클라이언트의 세션정보를 MySQL에 때려박거나 In-memory기반의 Redis으로 세션을 관리하면 된다.

웹서버를 확장하기 위해 보통 L7 Proxy방식의 HA-Proxy나 Nginx를 많이들 다루는데 NAT방식의 하드웨어 밸런서에 비해 일정수준이상에서는 버벅임으로 여기서는 논외로 하고 L4방식의 로드밸런서나 DNS를 활용한 웹서버 Scale-Out을 다룬다.

(가끔 도커나 EC2에 Nginx Proxy로 로드밸런서 흉내를 내는 경우가 있는데 AWS에서는 닥치고 Elastic Load Balancer를 쓰거나 로드밸런서 장비를 쓰자)

알테온 5224 L4로드밸런서

국내에서는 주로 알테온 라드웨어 제품군의 L4를 많이 사용하는 추세이고, 그 밖에 제품군에서는 F5의 BIG-IP, 시트릭사의 NetScaler등이 있다.

DNS자체만으로도 일부 Scale-Out이 가능한데, 하나의 도메인에 여러 웹서비스 아이피를 호스트A 지정하는 방법이다.
하나의 도메인에 여러 호스트A를 지정하게 될 경우, DNS에 질의가 들어올때 Round-Robin에 의해 여러 호스트A중 하나의 호스트만을 랜덤하게 제공하여 마치 부하분산과 같은 효과를 보여준다.

문제는 이 Round-Robin방식은 정확하게 랜덤한 방식이 아닐뿐더러 서버의 다운을 체크하는 Health check등의 기능이 부재하여 완벽한 Scale-Out의 방법은 아니나, 구글과 같이 대규모 트래픽을 대응해야하는 기업에서는 DNS Round-Robin을 적용하고 뒷단에 L4까지 둬서 처리하기도 한다.

DNS질의 때 마다 웹서비스의 아이피주소가 이렇게 계속 변경된다.

4. 데이터베이스의 리플리케이션을 통한 DB서버의 확장

2번에서 언급한것처럼 통상적인 서비스는 웹서비스보다 데이터베이스의 부하가 더 높다.

때문에 데이터베이스서버를 Scale-Out하여 리플리케이션 확장하는 방법이 있다.

이 방식을 적용하기 위해서는 제공되는 서비스의 코드에서 데이터베이스를 연계할때 입력되는 데이터와 읽는 데이터를 구분할 수 있도록 조치를 해줘야 적용이 가능하다. 입력 또는 수정 데이터는 Master노드에 읽기데이터는 Slave노드를 통해 데이터베이스 쿼리를 실행할 수 있도록 하면 되며, 통상적으로 MySQL(MariaDB)의 리플리케이션의 경우 1개의 Master노드에 n개의 Slave노드들을 두어 사용한다.

MySQL Replication의 예

이와 같이 데이터베이스 리플리케이션을 구성했을때, Master노드에 데이터가 신규로 추가되거나 기존데이터가 수정되면 데이터베이스서버가 알아서 각 Slave노드들에게 추가되거나 변경된 데이터를 전파한다.

문제는 쓰기와 수정의 부하가 많아져 Master노드의 부하가 증가하게 되면 Slave노드로의 데이터 동기화가 지연될수 있는 문제가 있음으로 실시간성 데이터쿼리에 대해 정책을 잘 고려해야한다.

5. 데이터베이스 샤딩을 통한 DB서버의 추가 확장

데이터베이스 마이그레이션을 통해 조회용 데이터베이스의 Scale-Out을 했음에도 불구하고 아직도 데이터베이스의 부하를 개선하지 못했다면, 코드기반의 논리적인 방법으로 데이터를 분산저장하는 형태로 Scale-Out을 고려해야한다.

테이블단위, 데이터범위, 해시값등의 샤딩할 데이터의 기준점을 잡고, 각각의 데이터의 추가와 수정을 특정 데이터베이스 서버가 담당하는 형식으로 분담하는 형태로 샤딩을 진행할 수 있다.

샤딩된 각 데이터베이스 마다 리플리케이션을 통해 Master-Slave node로 추가적인 Scale-Out을 진행할 수 있으며, 아예 Master node 앞단에 L4를 두어 Master 노드자체를 Scale-Out할 수 있다.

6. 나도 대기업처럼 MSA

기능단위로 인프라 자체를 쪼개기 때문에 (예를 들면, 구매페이지, 장바구니, 회원기능등)

각 서비스에 필요한 부하만큼 Scale-Up을 하던 Scale-Out을 하던 개떡같이 짜던 맘대로 하면 된다.

쿠버네티스를 활용한 컨테이너를 통합 관리하고 카프카를 통해 메시지큐를 여러 서비스간 고속으로 송수신하는...

이러한 행위들을 하게 된 이유가 Micro Service Architecture를 위해서이다.

MSA는 각 서비스별 특화된 Scale-Out을 위한 목적도 있지만, 서비스가 너무나 복잡해져서 이제는 과거의 똥코드들을 신입에게 알려주기 힘들어지는 시기가 올때 대부분 전환하는것 같다. 정확하게 표현하자면, 각 서비스가 갖고 있는 레거시를 인정하는 상태로 부분적 마이그레이션 형식으로 운영한다는 것을 의미한다.

엄청나게 세분화된 기능단위별로 독립적인 마이크로서비스를 운영할 수 있기 때문에 이러한 서비스구조를 운영하기 위해서는

기업의 규모가 일정이상 되어야 하고 담당업무별로 체계적인 매뉴얼과 커뮤니케이션 능력이 갖춰져 있어야 한다.

사실, 여기서부터는 개발업무보다 서비스를 운영/관리하는 업무가 더 많을 때가 대부분이고, 이것을 포장하기 위한 용어로는 DevOps가 있다. (그리고, 수백명의 개발자가 없는 대부분의 상황에서는 MSA를 운영하고 유지하는게 배보다 배꼽이 더 크다는 것을 명심하자)

많은 데브콘에서 MSA가 마치 모던한 것처럼 표현하지만, MSA로 전환되는 순간 모놀리식 서비스에서 경험하지 못했던 서비스간 네트워크 지연 또는 실패, 일관성과의 싸움이 시작된다는 것을 명심하자.

7. 상남자의 Serverless

진정한 클라우드 네이티브다.

서버리스라고 해서 서버가 없는건 아니고, 너가 서버를 직접 관리하지 않아도 된다는 뜻이다.

AWS사용자라면 API Gateway와 AWS Lambda를 활용하면 된다.

서버리스 구성의 예 (출처 : https://devocean.sk.com/blog/techBoardDetail.do?ID=163934)

평소에 코드단위로 작성된 Lambda는 잠을 자고 있지만, Request가 발생되면 알아서 AWS가 Lambda의 코드를 실행하고 다시 자러 가는 원리이다. 덕분에 접속자 수에 비례하게 비용이 절감되는 강점이 있지만, Lamdba코드가 깨어나서 실행되기까지의 Cold Start문제가 있다. (근데 이 문제는 Provisioned Concurrency를 사용하거나 일정주기로 ping을 날려서 해결할 수 있음!)

코드만 신경쓰면되고 그 외 모든 것들을 클라우드서비스업체에 일임한 방식임으로 차후 Dedicate서버로 전환하거나 다른 클라우드서비스로 마이그레이션이 굉장히 힘들어지는 종속화되는 것이 단점이다.

그 밖에 잡기술들

- HTTP/1.1 → HTTP/2 H2 → HTTP/3 QUIC 와 같이 웹서비스의 프로토콜 변경

- Cache-Control 및 ETag를 활용한 정적리소스를 캐싱

- CSS Srpite를 활용하여 전송되는 정적데이터양을 최소화

- SSG데이터 자체를 CDN을 통해서 서비스

- WebP, AVIF등의 차세대 포맷을 통해 정적이미지의 파일 크기 최소화

- Lazy loading을 통해 실제 화면에 보여지는 이미지만 로드하도록 변경

- Preload, Prefetch를 통해 사전 로드

- 인덱싱 기반의 쿼리를 사용하고 N+1 문제를 해결

- 기존 데이터베이스 앞단에 데이터자체에 대한 데이터베이스 캐싱

- API뿐만 아니라 쿼리 Level에서 페이지네이션기반으로 설계

- 입장대기페이지 (정말 최악의 시나리오)

이번에 소개한 대용량 트래픽처리에 대한 방법들은 각자가 제공하는 서비스의 유형, 트래픽의 특성, 인프라 운영에 대한 경험등 여러가지를 고려해서 선택해야한다.

조직의 형태, 서비스 유형에 따라 조금씩 다르지만 대규모트래픽에 대해 점진적으로 대응하는 예시로는 아래와 같다.

(트래픽에 대응하기 위해 각 단계를 일부 생략하여 진행하기도 한다.)

DB측 부하집중형 서비스에서는

Scale-up → WAS + DB 분리하여 DB replication → DB 샤딩 → DB단 L4 로드밸런싱 → Kafka 도입하여 트랜젝션분리

WAS측 부하집중형 또는 파편화된 WAS 서비스에서는

Scale-up → WAS + DB 분리하여 WAS단 L4 로드밸런싱 → Serverless 도입

어떤 방법이 정답이고, 어떤 방법이 잘못되었고를 따지지 않고

현재 처한 환경과 대응할 수 있는 범위의 가능한 방법을 종합적으로 판단하여

백만, 천만 유저를 처리할 수 있는 인프라를 구성해보자.

이 고민을 하는 시기가 오면 사실 행복한 고민이긴하다.

그만큼 유저가 많다는 방증이니

Arduino Messagepack(msgpack)에서 다차원배열과 다양한 데이터형태를 Unpack 처리하는 방법

번개애비 — Tue, 25 Feb 2025 21:52:32 +0900

최근 서버와 Arduino간 Websocket을 통해 실시간 통신 프로토콜을 개발하는 과정에서

MessagePack의 데이터처리에 이슈가 있어서 골머리를 앓다가 문제를 해결하여 이렇게 포스팅으로 남긴다.

[참고]
MessagePack은 JSON과 같이 Serialize를 지원하면서도 JSON보다 빠르고 짧은 데이터를 전송할 수 있는 장점이 있다.

먼저, 문제의 원인

서버와 같이 고오급 언어를 사용하는 환경에서는 Array안에 Key에 따라 Value의 데이터형을 다르게 가져갈 수 있다.

하지만, Arduino와 같이 C Language 베이스의 언어는 Array를 선언할때

반드시 Key와 Value의 데이터형을 지정해야하는 만큼 Key에 따라 달라지는 데이터형을 지원할 수 없다.

아래 예시 사례를 보자

//아두이노는 Value가 모두 String과 같이 하나의 데이터형만 Array든 Map이든 담을 수 있다.
{
   "output": "시리얼 출력",
   "is_success": "true",
   "redirect": "/ws/test1",
   "__CORE_EXEC_TYPE__": "WS",
   "timezone": "Asia/Seoul",
   "geocode": "KR",
   "command": "1\n1"
}

//Arduino에서 처리불가능하지만 다른 고급언어는 처리가능
{
   "output": "시리얼 출력",
   "is_success": true,
   "redirect": false,
   "__CORE_EXEC_TYPE__": "WS",
   "timezone": "Asia/Seoul",
   "geocode": "KR",
   "command": 474.0001
}

MessagePack 공식홈페이지 (https://msgpack.org/) 에 제시된 hideakitai의 MsgPack 라이브러리를 참고하여

아래와 같이 예시코드를 작성하면 다음과 같은데 문제는 MsgPack::map_t<String, String> rx_map; 과 같이

Key와 Value 모두 "String" 타입의 데이터만 불러올 수 있는 문제점이 있었다.

#include <Arduino.h>
#include <MsgPack.h>

uint8_t packed_data[] = {
	0x87, 0xA6, 0x6F, 0x75, 0x74, 0x70, 0x75, 0x74, 0xB0, 0xEC, 0x8B, 0x9C, 0xEB, 0xA6, 0xAC, 0xEC, 0x96, 0xBC, 0x20, 0xEC, 0xB6, 0x9C, 0xEB, 0xA0, 0xA5, 0xAA, 0x69, 0x73, 0x5F, 0x73, 0x75, 0x63, 0x63, 0x65, 0x73, 0x73, 0xC3, 0xA8, 0x72, 0x65, 0x64, 0x69, 0x72, 0x65, 0x63, 0x74, 0xA9, 0x2F, 0x77, 0x73, 0x2F, 0x74, 0x65, 0x73, 0x74, 0x31, 0xB2, 0x5F, 0x5F, 0x43, 0x4F, 0x52, 0x45, 0x5F, 0x45, 0x58, 0x45, 0x43, 0x5F, 0x54, 0x59, 0x50, 0x45, 0x5F, 0x5F, 0xA2, 0x57, 0x53, 0xA8, 0x74, 0x69, 0x6D, 0x65, 0x7A, 0x6F, 0x6E, 0x65, 0xAA, 0x41, 0x73, 0x69, 0x61, 0x2F, 0x53, 0x65, 0x6F, 0x75, 0x6C, 0xA7, 0x67, 0x65, 0x6F, 0x63, 0x6F, 0x64, 0x65, 0xA2, 0x4B, 0x52, 0xA7, 0x63, 0x6F, 0x6D, 0x6D, 0x61, 0x6E, 0x64, 0xA3, 0x31, 0x0A, 0x30
};
size_t packed_size = sizeof(packed_data);

MsgPack::map_t<String, String> rx_map;
MsgPack::Unpacker unpacker;
unpacker.feed(packed_data, packed_size);
unpacker.deserialize(rx_map);
if (rx_map.find("redirect") != rx_map.end()) {
    Serial.println("Redirect URL: " + rx_map["redirect"]);
} else {
    Serial.println("Key 'redirect' not found!");
}

Binary 또는 Hex코드 베이스로 동작되고 빠르다고 하니

이 MessagePack의 장점을 십분살려 결국 직접 만들게 되었다.

#include <Arduino.h>

// UTF-8 유효성 검사
bool isValidUTF8(const uint8_t *data, size_t len) {
  size_t i = 0;
  while (i < len) {
    if ((data[i] & 0x80) == 0x00) i++;
    else if ((data[i] & 0xE0) == 0xC0 && i + 1 < len &&
             (data[i+1] & 0xC0) == 0x80) i += 2;
    else if ((data[i] & 0xF0) == 0xE0 && i + 2 < len &&
             (data[i+1] & 0xC0) == 0x80 && (data[i+2] & 0xC0) == 0x80) i += 3;
    else if ((data[i] & 0xF8) == 0xF0 && i + 3 < len &&
             (data[i+1] & 0xC0) == 0x80 && (data[i+2] & 0xC0) == 0x80 &&
             (data[i+3] & 0xC0) == 0x80) i += 4;
    else return false;
  }
  return true;
}

String bytesToHex(const uint8_t *data, size_t len) {
  String hex = "";
  for (size_t i = 0; i < len; i++) {
    if (i > 0) hex += " ";
    if (data[i] < 0x10) hex += "0";
    hex += String(data[i], HEX);
  }
  return hex;
}

String msgpack_unpack(const uint8_t *data, size_t &index, size_t max_len = SIZE_MAX) {
  if (index >= max_len) return "Error: Index out of bounds";
  uint8_t type = data[index++];

  // nil
  if (type == 0xC0) return "null";
  // bool
  if (type == 0xC2) return "false";
  if (type == 0xC3) return "true";

  // int
  if (type <= 0x7F) return String(type); // positive fixint
  if (type >= 0xE0) return String((int8_t)type); // negative fixint
  if (type == 0xCC) return String(data[index++]); // uint8
  if (type == 0xCD) return String((data[index++] << 8) | data[index++]); // uint16
  if (type == 0xCE) return String(((uint32_t)data[index++] << 24) | ((uint32_t)data[index++] << 16) |
                                  ((uint32_t)data[index++] << 8) | data[index++]); // uint32
  if (type == 0xD0) return String((int8_t)data[index++]); // int8
  if (type == 0xD1) return String((int16_t)((data[index++] << 8) | data[index++])); // int16
  if (type == 0xD2) {
    int32_t val = ((uint32_t)data[index++] << 24) | ((uint32_t)data[index++] << 16) |
                  ((uint32_t)data[index++] << 8) | data[index++];
    return String(val);
  }

  // float
  if (type == 0xCA) { // float32
    union { uint32_t i; float f; } u;
    u.i = ((uint32_t)data[index++] << 24) | ((uint32_t)data[index++] << 16) |
          ((uint32_t)data[index++] << 8) | data[index++];
    return String(u.f, 6);
  }
  if (type == 0xCB) { // float64
    uint64_t raw = 0;
    for (int i = 0; i < 8; i++) raw = (raw << 8) | data[index++];
    double val;
    memcpy(&val, &raw, sizeof(val));
    char buf[32];
    snprintf(buf, sizeof(buf), "%.10f", val);
    return String(buf);
  }

  // string
  size_t len = 0;
  if ((type & 0xE0) == 0xA0) len = type & 0x1F;
  else if (type == 0xD9) len = data[index++];
  else if (type == 0xDA) len = (data[index++] << 8) | data[index++];
  else if (type == 0xDB) len = ((uint32_t)data[index++] << 24) | ((uint32_t)data[index++] << 16) |
                               ((uint32_t)data[index++] << 8) | data[index++];
  if ((type & 0xE0) == 0xA0 || type == 0xD9 || type == 0xDA || type == 0xDB) {
    if (index + len > max_len) return "Error: String out of bounds";
    if (!isValidUTF8(&data[index], len)) return "Error: Invalid UTF-8 string";
    String s = String((const char *)&data[index], len);
    index += len;
    return "\"" + s + "\"";
  }

  // binary
  if (type == 0xC4) len = data[index++];
  else if (type == 0xC5) len = (data[index++] << 8) | data[index++];
  else if (type == 0xC6) len = ((uint32_t)data[index++] << 24) | ((uint32_t)data[index++] << 16) |
                               ((uint32_t)data[index++] << 8) | data[index++];
  if (type == 0xC4 || type == 0xC5 || type == 0xC6) {
    if (index + len > max_len) return "Error: Bin out of bounds";
    String hex = bytesToHex(&data[index], len);
    index += len;
    return "\"bin: " + hex + "\"";
  }

  // array
  if ((type & 0xF0) == 0x90) len = type & 0x0F;
  else if (type == 0xDC) len = (data[index++] << 8) | data[index++];
  else if (type == 0xDD) len = ((uint32_t)data[index++] << 24) | ((uint32_t)data[index++] << 16) |
                               ((uint32_t)data[index++] << 8) | data[index++];
  if ((type & 0xF0) == 0x90 || type == 0xDC || type == 0xDD) {
    String out = "[";
    for (size_t i = 0; i < len; i++) {
      if (i > 0) out += ", ";
      out += msgpack_unpack(data, index, max_len);
    }
    out += "]";
    return out;
  }

  // map
  if ((type & 0xF0) == 0x80) len = type & 0x0F;
  else if (type == 0xDE) len = (data[index++] << 8) | data[index++];
  else if (type == 0xDF) len = ((uint32_t)data[index++] << 24) | ((uint32_t)data[index++] << 16) |
                               ((uint32_t)data[index++] << 8) | data[index++];
  if ((type & 0xF0) == 0x80 || type == 0xDE || type == 0xDF) {
    String out = "{";
    for (size_t i = 0; i < len; i++) {
      if (i > 0) out += ", ";
      String key = msgpack_unpack(data, index, max_len);
      String val = msgpack_unpack(data, index, max_len);
      out += key + ": " + val;
    }
    out += "}";
    return out;
  }

  // ext
  if (type == 0xD4 || type == 0xD5 || type == 0xD6 || type == 0xD7 || type == 0xD8 ||
      type == 0xC7 || type == 0xC8 || type == 0xC9) {
    size_t extLen = 0;
    if (type == 0xD4) extLen = 1;
    else if (type == 0xD5) extLen = 2;
    else if (type == 0xD6) extLen = 4;
    else if (type == 0xD7) extLen = 8;
    else if (type == 0xD8) extLen = 16;
    else if (type == 0xC7) extLen = data[index++];
    else if (type == 0xC8) extLen = (data[index++] << 8) | data[index++];
    else if (type == 0xC9) extLen = ((uint32_t)data[index++] << 24) | ((uint32_t)data[index++] << 16) |
                                   ((uint32_t)data[index++] << 8) | data[index++];
    int8_t extType = data[index++];
    String extData = bytesToHex(&data[index], extLen);
    index += extLen;
    return "\"ext(type " + String(extType) + "): " + extData + "\"";
  }

  return "Error: Unknown type 0x" + String(type, HEX);
}

String msgpack_getdata(const uint8_t *data, String key) {
  size_t index = 0;
  uint8_t type = data[index++];
  size_t mapLen = 0;

  if ((type & 0xF0) == 0x80) mapLen = type & 0x0F;
  else if (type == 0xDE) mapLen = (data[index++] << 8) | data[index++];
  else if (type == 0xDF) mapLen = ((uint32_t)data[index++] << 24) | ((uint32_t)data[index++] << 16) |
                                  ((uint32_t)data[index++] << 8) | data[index++];
  else return "Error: Not a map";

  for (size_t i = 0; i < mapLen; i++) {
    String k = msgpack_unpack(data, index);
    if (k == "\"" + key + "\"") return msgpack_unpack(data, index);
    else msgpack_unpack(data, index); // skip value
  }
  return "Error: Key Not Found";
}



void setup() {
  Serial.begin(115200);

  //다차원 배열예제
  uint8_t packed_data[] = {
    0x8D, 0xA6, 0x6F, 0x75, 0x74, 0x70, 0x75, 0x74, 0xB0, 0xEC, 0x8B, 0x9C, 0xEB, 0xA6, 0xAC, 0xEC, 0x96, 0xBC, 0x20, 0xEC, 0xB6, 0x9C, 0xEB, 0xA0, 0xA5, 0xAA, 0x69, 0x73, 0x5F, 0x73, 0x75, 0x63, 0x63, 0x65, 0x73, 0x73, 0xC3, 0xA8, 0x72, 0x65, 0x64, 0x69, 0x72, 0x65, 0x63, 0x74, 0xA9, 0x2F, 0x77, 0x73, 0x2F, 0x74, 0x65, 0x73, 0x74, 0x31, 0xB2, 0x5F, 0x5F, 0x43, 0x4F, 0x52, 0x45, 0x5F, 0x45, 0x58, 0x45, 0x43, 0x5F, 0x54, 0x59, 0x50, 0x45, 0x5F, 0x5F, 0xA2, 0x57, 0x53, 0xAA, 0x40, 0x63, 0x6F, 0x72, 0x65, 0x5F, 0x74, 0x69, 0x6D, 0x65, 0x93, 0x92, 0xBA, 0x77, 0x65, 0x62, 0x73, 0x6F, 0x63, 0x6B, 0x65, 0x74, 0x20, 0x6D, 0x65, 0x73, 0x73, 0x61, 0x67, 0x65, 0x20, 0x72, 0x78, 0x20, 0x73, 0x74, 0x61, 0x72, 0x74, 0xCB, 0x3E, 0xF2, 0xC0, 0x00, 0x73, 0x88, 0xDC, 0xE0, 0x92, 0xAF, 0x68, 0x61, 0x6E, 0x64, 0x73, 0x68, 0x61, 0x6B, 0x65, 0x20, 0x63, 0x68, 0x65, 0x63, 0x6B, 0xCB, 0x3F, 0x21, 0xF8, 0x00, 0x25, 0x6B, 0x7E, 0xBC, 0x92, 0xB1, 0x77, 0x65, 0x62, 0x73, 0x6F, 0x63, 0x6B, 0x65, 0x74, 0x20, 0x74, 0x78, 0x20, 0x73, 0x65, 0x6E, 0x64, 0xCB, 0x3F, 0x1B, 0xD0, 0x00, 0x8E, 0x0E, 0x58, 0xDB, 0xAB, 0x40, 0x71, 0x75, 0x65, 0x72, 0x79, 0x5F, 0x74, 0x69, 0x6D, 0x65, 0x90, 0xAC, 0x40, 0x73, 0x65, 0x6E, 0x64, 0x65, 0x64, 0x5F, 0x64, 0x61, 0x74, 0x61, 0x82, 0xA4, 0x6B, 0x65, 0x79, 0x31, 0xA6, 0x76, 0x61, 0x6C, 0x75, 0x65, 0x31, 0xA4, 0x6B, 0x65, 0x79, 0x32, 0xA6, 0x76, 0x61, 0x6C, 0x75, 0x65, 0x32, 0xA8, 0x74, 0x69, 0x6D, 0x65, 0x7A, 0x6F, 0x6E, 0x65, 0xAA, 0x41, 0x73, 0x69, 0x61, 0x2F, 0x53, 0x65, 0x6F, 0x75, 0x6C, 0xA7, 0x67, 0x65, 0x6F, 0x63, 0x6F, 0x64, 0x65, 0xA2, 0x4B, 0x52, 0xA7, 0x63, 0x6F, 0x6D, 0x6D, 0x61, 0x6E, 0x64, 0xA3, 0x31, 0x0A, 0x31, 0xAA, 0x40, 0x65, 0x78, 0x65, 0x63, 0x5F, 0x74, 0x69, 0x6D, 0x65, 0xCB, 0x3F, 0x65, 0x63, 0x00, 0x4C, 0xCE, 0x5C, 0x3B, 0xAC, 0x40, 0x75, 0x73, 0x65, 0x64, 0x5F, 0x6D, 0x65, 0x6D, 0x6F, 0x72, 0x79, 0xA5, 0x37, 0x2E, 0x32, 0x37, 0x4D, 0xA2, 0x21, 0x21, 0xB6, 0x54, 0x48, 0x49, 0x53, 0x20, 0x49, 0x53, 0x20, 0x44, 0x45, 0x42, 0x55, 0x47, 0x20, 0x4D, 0x4F, 0x44, 0x45, 0x20, 0x3A, 0x21, 0x21
  };

  /*
  //1차원 배열예제
  uint8_t packed_data[] = {
    0x87, 0xA6, 0x6F, 0x75, 0x74, 0x70, 0x75, 0x74, 0xB0, 0xEC, 0x8B, 0x9C, 0xEB, 0xA6, 0xAC, 0xEC, 0x96, 0xBC, 0x20, 0xEC, 0xB6, 0x9C, 0xEB, 0xA0, 0xA5, 0xAA, 0x69, 0x73, 0x5F, 0x73, 0x75, 0x63, 0x63, 0x65, 0x73, 0x73, 0xC3, 0xA8, 0x72, 0x65, 0x64, 0x69, 0x72, 0x65, 0x63, 0x74, 0xA9, 0x2F, 0x77, 0x73, 0x2F, 0x74, 0x65, 0x73, 0x74, 0x31, 0xB2, 0x5F, 0x5F, 0x43, 0x4F, 0x52, 0x45, 0x5F, 0x45, 0x58, 0x45, 0x43, 0x5F, 0x54, 0x59, 0x50, 0x45, 0x5F, 0x5F, 0xA2, 0x57, 0x53, 0xA8, 0x74, 0x69, 0x6D, 0x65, 0x7A, 0x6F, 0x6E, 0x65, 0xAA, 0x41, 0x73, 0x69, 0x61, 0x2F, 0x53, 0x65, 0x6F, 0x75, 0x6C, 0xA7, 0x67, 0x65, 0x6F, 0x63, 0x6F, 0x64, 0x65, 0xA2, 0x4B, 0x52, 0xA7, 0x63, 0x6F, 0x6D, 0x6D, 0x61, 0x6E, 0x64, 0xA3, 0x31, 0x0A, 0x30
  };
  */

  Serial.print("is_success: ");
  Serial.println(msgpack_getdata(packed_data, "is_success"));

  Serial.print("output: ");
  Serial.println(msgpack_getdata(packed_data, "output"));

  Serial.print("redirect: ");
  Serial.println(msgpack_getdata(packed_data, "redirect"));

  Serial.print("__CORE_EXEC_TYPE__: ");
  Serial.println(msgpack_getdata(packed_data, "__CORE_EXEC_TYPE__"));

  Serial.print("@core_time: ");
  Serial.println(msgpack_getdata(packed_data, "@core_time"));

  Serial.print("@query_time: ");
  Serial.println(msgpack_getdata(packed_data, "@query_time"));

  Serial.print("@sended_data: ");
  Serial.println(msgpack_getdata(packed_data, "@sended_data"));

  Serial.print("timezone: ");
  Serial.println(msgpack_getdata(packed_data, "timezone"));

  Serial.print("geocode: ");
  Serial.println(msgpack_getdata(packed_data, "geocode"));

  Serial.print("command: ");
  Serial.println(msgpack_getdata(packed_data, "command"));

  Serial.print("@exec_time: ");
  Serial.println(msgpack_getdata(packed_data, "@exec_time"));

  Serial.print("@used_memory: ");
  Serial.println(msgpack_getdata(packed_data, "@used_memory"));

  Serial.print("!!: ");
  Serial.println(msgpack_getdata(packed_data, "!!"));
  
}

void loop() {
}

unpack을 하는 방법도 심플하게 구성했다.

단순히 msgpack_getdata("uint8_t의 MsgPack HEX코드", "보고 싶은 키"); 를 실행하면 Value값을 반환해준다.

실행결과!!!!

//원래의 배열형태
{
  "output": "시리얼 출력",
  "is_success": true,
  "redirect": "/ws/test1",
  "__CORE_EXEC_TYPE__": "WS",
  "@core_time": [
    [
      "websocket message rx start",
      0.0000178814
    ],
    [
      "handshake check",
      0.0001370907
    ],
    [
      "websocket tx send",
      0.0001060963
    ]
  ],
  "@query_time": [],
  "@sended_data": {
    "key1": "value1",
    "key2": "value2"
  },
  "timezone": "Asia/Seoul",
  "geocode": "KR",
  "command": "1\n1",
  "@exec_time": 0.0002610684,
  "@used_memory": "7.27M",
  "!!": "THIS IS DEBUG MODE :!!"
}

이렇게 자체적으로 개발한 함수에도 한가지 이슈가 있는데,

다차원 배열의 경우, 단일 String key가 아니라서 상위 Key를 함수에 넣으면 하위 배열을 JSON형태로 반환하도록 하였다.

이 경우, 이미 Arduino의 JSON라이브러리가 아주 잘 되어 있음으로 이를 활용하여 쉽게 해결이 가능하다 :)

이 포스팅을 통해 Arduino뿐만 아니라 C Language처럼 저 수준의 언어에서 MessagePack을 사용할때

나처럼 골머리 싸매고 있지 않길....

시뮬레이션을 직접 구동할 수 있도록 원본 코드도 함께 공유한다.

VScode + Platform.IO + Wokwi Simulator (ESP32)

esp32 msgpack test.zip

5.76MB

검열하는 중궈판 openAI - DeepSeek

번개애비 — Mon, 27 Jan 2025 15:07:00 +0900

막대한 자금력과 고급인력을 투입하여 개발하는 인공지능 분야에서

단돈(?) 80억의 자금만으로 기존까지의 다른 인공지능들을 개박살내는 DeepSeek가 R1이 출시되었다.

중국의 한 듣보잡 투자회사가 사이드 프로젝트를 두달동안 만든 모델이라는데

미국의 거대 빅테크기업들의 LLM들을 모조리 올킬했다.

그런데 중국기업이 아니나 다를까 검열을 하는것 같다.

ChatGPT-4o 에서 중국 검열 테스트

DeepSeek-R1 에서 중국 검열 테스트

도덕없는 애미나이 같으니라고...

한편, openAI 는....

똥서버에 웹소켓 100개 연결하기 (php openswoole benchmark)

번개애비 — Tue, 17 Dec 2024 22:02:40 +0900

ReactPHP와 같이 최근 php 진영에서도 node나 golang과 같이

논블록킹 I/O를 지원할 수 있도록 하는 서드파티 익스텐션이 나오고 있다.

그 중에서도 C++로 작성되어 php로 작성된 ReactPHP보다 성능이 좋다고 하는 swoole extension을 테스트 해봤다.

굉장히 단편적고 단순한 테스트임으로 참고만 하길...

일단 테스트서버는 구름 IDE에서 제공하는 가장 낮은 사양의 서버를 준비했다.

0.5vCPU / 1GB Memory를 갖는 빈 컨테이너를 준비했고,

우분투 24.04, PHP 8.3.14에 openSwoole은 22.1.2버전을 사용했다.

(참고로 Swoole과 Openswoole 은 엄연히 다르고 사용하는 방식도 다름!)

cli로 구동되는 php openswoole의 경우, node.js나 golang처럼

프로그램 동작중에 급작스러운 Fetal 에러가 발생되면 프로세스가 종료되면서 서비스전체가 다운될 수 있음으로

pm2를 사용하는 node.js 처럼 Supervisor를 설치하여 php를 감시할 수 있도록 하였다.

다음은 웹소켓 서버를 열어주는 간단한 예제이다.

<?php
	use OpenSwoole\WebSocket\Server;
	use OpenSwoole\Http\Request;
	use OpenSwoole\WebSocket\Frame;

	$server = new Server("0.0.0.0", 9502);

	$server->on("Start", function(Server $server){
		echo "OpenSwoole WebSocket Server is started at http://127.0.0.1:9502\n";
	});

	$server->on('Open', function(Server $server, OpenSwoole\Http\Request $request){
		echo "connection open: {$request->fd}\n";
		$server->tick(1000, function() use ($server, $request){
			$server->push($request->fd, json_encode(["hello", time()]));
		});
	});

	$server->on('Message', function(Server $server, Frame $frame){
		echo "received message: {$frame->data}\n";
		$server->push($frame->fd, json_encode(["hello", time()]));
	});

	$server->on('Close', function(Server $server, int $fd){
		echo "connection close: {$fd}\n";
	});

	$server->on('Disconnect', function(Server $server, int $fd){
		echo "connection disconnect: {$fd}\n";
	});

	$server->start();
?>

/etc/supervisor/conf.d/blabla.conf 에 설정한 supervisor설정은 다음과 같다.

[program:swoole_websocket]
command=php /경로/swoole_websocket.php queue:work
directory=/경로
autostart=true
autorestart=true
user=www-data
stdout_logfile=/var/log/swoole_websocket.log

sudo supervisorctl shutdown 명령후

sudo supervisord -c /etc/supervisor/supervisord.conf 으로 강제 실행하여 openswoole 웹소켓 서버를 실행했고,

원래는 Nginx에서 ReverseProxy를 통해 SSL을 붙여주려하였으나,

귀찮아서 구름에서 제공하는 URL을 그대로 사용했다.

(잘 작동되는것을 보아하니 이 친구도 Reverseproxy임에 틀림이 없다 ㅋㅋ)

웹소켓 클라이언트는 귀찮으니 Piehost에서 제공해주는 웹소켓 테스터를 활용했다.

그냥 무식하게 100개 탭을 열어 웹소켓 연결을 진행했다.

https://piehost.com/websocket-tester

시스템 프로세스별 점유량은 위와 같고...

구름 IDE에서 제공하는 컨테이너 사용량 상태를 봤을때는 아주 아주 준수했다.

생각보다 효율적으로 작동되어 단순한 기능을 작동시키는 마이크로서비스를 구성하기에

아주 좋은 방법일 듯 하다.

해외 커뮤에서 직접적으로 벤치를 진행해서 비교한 결과를 보면

node보다는 성능이 우수하고 golang에 비해서는 약간 못미치는 성능을 보여주는것 같다.

macOS에서 윈도우 키보드의 커맨드키를 설정하는 방법

번개애비 — Mon, 16 Dec 2024 13:32:38 +0900

윈도우 키보드의 경우 Ctrl, Win, Alt 와 같은 조합의 키보드를 사용하지만

macOS에서는 Fn, Control, Option, Command 조합의 키보드를 사용한다.

macOS에서 윈도우용 키보드를 사용하게 되면 아래와 같이 동작된다.

따라서 Command키와 Option키의 배열을 바꿔야 그나마 써줄만한데,

macOS Monterey 12 이후버전에서 어떻게 설정하면 되는지 간략하게 남긴다.

(정말 급하게 윈도우 키보드를 써야되는 상황에서 꿀팁)

상단 작업표시줄에서 애플 아이콘을 누르고 "시스템 설정..." 을 누른다.

설정 항목리스트에서 "키보드"를 선택하고 "키보드 단축키..." 를 누른다.

"보조 키"를 누르고 키보드를 선택해준다.

참고로 맥북이라 Apple 내장 키보드 / 트랙패드가 나타나는 윈도우 키보드를 USB로 연결했다면

USB 키보드등으로 나타나게 되는데 해당 키보드를 선택해주면 된다.

Option 키와 Command 키를 서로 변경해주고 완료를 누르면 끝난다.

이렇게 키 배열을 바꾸고 나면 최종적으로 다음과 같이 동작되게 된다.

애플 M1 Max 맥북과 제온 40코어 128GB 서버 간 php 벤치마크 비교

번개애비 — Sun, 3 Nov 2024 22:30:04 +0900

최근에 M4 Max가 출시되었다는 소식을 듣고 애플 공홈을 돌아다니다가

기존에 잘 쓰고 있는 M1 Max 맥북의 파워가 얼마나 강력한지 와닿지가 않아

과연 M4 Max가 정말 필요할까 생각하다가

아무도 하지않는 뻘짓이지만,

갑자기 궁금해져서 벤츠마크를 돌려봤다.

(의식의 흐름대로 그냥 바로 테스트 돌림)

비교대상의 사양은 다음과 같다.

사실, 2개의 CPU가 사실 출시시기가 너무 다르지만,

무지막지한 코어와 메모리용량을 갖추고 있는 제온서버에 힘을 실어본다.

CPU	M1 Max	E5-2630 v4 (2cpu)
아키텍처	Arm	x86
코어수	8성능코어 + 2효율코어	40코어
램용량	64GB	128GB
PHP 버전	8.2.6
운영체제	macOS Sonoma (14.6.1)	Rocky Linux 9.2
폼펙터	14" Laptop	1U Server
탑재파워	96W (충전파워)	1000W + 1000W (redundant구성)

M1 Max 맥북의 사양

E5-2630 서버의 사양

벤치마크는 https://github.com/rusoft/php-simple-benchmark-script/ 를 사용했다.

(사용하는 방법은 파일 전체를 다운받아서 php -dopcache.enable_cli=0 bench.php 를 실행해주면 끝남)

놀랍게도 겨우 96W도 안먹는 M1 Max가

40코어 인텔제온 서버 대비 2배 가까이 더 높은 성능을 내준다.

(실행시간은 짧을수록, MOp/s는 클수록 높은 성능임)

M1 Max 최종결과

E5-2630 최종결과

다음은 세부 항목별 벤츠 성능 비교이다.

왼쪽이 M1 Max이고 오른쪽이 E5-2630 이다.

진짜 웟더 퍽킹이 아닐 수가 없다.

진짜 애플실리콘에 Mac OS와 같은 GUI가 아닌

CLI 리눅스배포판이 지원이 잘된다면 당장 바로 애플실리콘으로 이전하고 싶다.

구름 IDE에서 저장 시 자동으로 Github에 커밋하는 방법 (공유된 사용자마다 개별계정 연결 방법 포함)

번개애비 — Tue, 29 Oct 2024 04:25:43 +0900

본 방식의 CI/CD 자동화는 구름 IDE를 통해 다수의 사용자에게 개발환경을 공유하면서

다수의 사용자가 실제 구름 IDE에 코드를 작성/수정을 하게 되면

해당 사용자의 Github계정으로 공용 프로젝트에 커밋을 날릴 수 있도록 하는 배포방식이다.

이러한 배포방식은 Github의 main branch 자체를 백업용 저장소로 활용함으로써

구름IDE에서 하나의 파일을 여러 개발자가 동시다발적으로 수정하면서

main branch를 통해 누가 어떤 코드를 수정했는지 추적관리가 용이해진다.

<중요>
본 방식을 활용하여 공용 개발환경을 구축하기 위해서는 사전에 아래와 같은 조치사항이 선행되어야 한다.

1. 구름IDE에 컨테이너가 설치되어 있어야함.
2. Github의 저장소가 해당 컨테이너에 클론되어 있어야 한다.
3. 구름IDE의 컨테이너를 공유한 사용자들도 해당 Github저장소에 Collaborators에 등록되어야 있어야한다.
4. 구름IDE의 최고권한(root) 사용자는 사전에 아래의 명령어를 터미널에 실행시켜두어야 한다.

git config --global user.name "아이디"
git config --global user.email "이메일"
git config --global color.ui auto
git config --global alias.st status
git config --global credential.helper store

구름 IDE에서 컨테이너를 실행한 뒤에 아래와 같이 명령어를 추가한다.

이름에는 적절한 명령어의 이름을 작성하고,

대상프로젝트를 선택한 뒤에 서버 프로세스, 실행 시 탭 열기를 체크한다.

파일 저장 시 실행을 체크해준다.

(백그라운드 실행은 체크를 해제해야함)

해당 명령어의 스크립트에 아래의 코드를 입력하고 명령어를 저장한다.

source ~/.bashrc
git pull origin main
git add ${current.saved.file.path}
git add -u .
git -c user.name="$GIT_NICKNAME" -c user.email="$GIT_EMAIL" commit -m $USER
git push

그 뒤 컨테이너 관리자(root)를 포함하여 해당 컨테이너를 공유받은 사용자(user)는

각각의 컨테이너에 접속하여 ~/.bashrc 에 본인의 Github 이메일과 닉네임을 저장해두어야 한다.

vi ~/.bashrc

export GIT_EMAIL="해당사용자의 깃허브이메일"
export GIT_NICKNAME="해당사용자의 깃허브닉네임"

:wq

그 뒤, IDE의 브라우저를 껏다가 다시 접속을 시도한 뒤에 프로젝트내의 파일을 저장하게 되면

아래와 같이 저장과 즉시 해당 구름IDE 사용자가 설정한 Github 계정으로 저장소 커밋이 수행된다.

WD-N522S (우리넷 LTE Cat.M1 외장형모듈) 사용후기 및 데이터시트 공유

번개애비 — Fri, 21 Jun 2024 15:23:22 +0900

우리넷에서 개발/공급하는 Cat.M1 관련 모듈들의 자료를 구하기가 너무 어려워서 이렇게 포스팅으로 남긴다.

제조사 자료실에도 없고... 따로 단말기 개발신청을 통해서만 구할 수 있는듯.

하드웨어 매뉴얼.pdf

1.06MB

SKT_AT_Commands_v2.0.pdf

1.31MB

WD-N522S의 경우 UART(RS232)로 통신을 해야하는데 참고로 위 사진상의 UART to USB 칩은 CP2105 이다.

컴퓨터의 USB로 AT Command 통신을 직접 날려서 테스트하기 위해서 CP2105 칩에 대한 드라이버를 필수적으로 설치해야함!

아래 운영체제에 맞춰서 설치하면 정상적으로 UART 디바이스가 인식이 가능하다.

일부 해외포럼에서 애플실리콘기반의 MacOS에서는 CP2105 드라이버 인식이 불가하다고 하는데, 나는 왜 잘될까 ㅋㅋㅋ

(아마 MacOS의 경우 설치과정에서 시스템설정 > 개인정보 보호 및 보안 > 응용프로그램이 허용되지 않아서 생긴 문제인듯 함)

CP210x_Universal_Windows_Driver.zip

0.27MB

Mac_OSX_VCP_Driver.zip

1.89MB

맥에서 사용하는 기준으로 여러 시리얼 프로그램을 사용해봤는데 역시 중국인이 개발한 프로그램이 그나마 쓸만했다.

아마 대부분의 하드웨어제품들이 중국에서 개발되고 생산되다보니 관련 소프트웨어도 이제 중국제가 쓰기 편해진듯

참고로 시리얼 연길시 USB to UART가 2개가 신규로 잡히는데 뒤에 숫자값이 들어가 있는 포트로 연결하면 된다.

(엉뚱한 시리얼 포트 연결하고 AT Command 전송해도 응답이 없으니 주의바람)

내 기준으로는 아래와 같이 셋팅하고 연결했다.

- 시리얼포트 : SLAB_USBtoUART9

- 밴드레이트 : 115,200

- 데이터비트 : 8

- FlowContorl : None

- StopBits : 1

- Parity : None

그리고 대충 몇가지 AT Command를 사용해본 결과....

단말기 정보를 불러오기

제조사, 모델명, 펌웨어버전, 하드웨어버전, 그리고 가장 중요한 개통에 필요한 IMEI 코드를 확인할 수 있다.

ATI

가입자번호등 유심과 관련된 정보 구하기

결과데이터의 쉼표 순서대로

모델명, 개통된 전화번호, 단말기의 IMEI, 유심의 ICCID번호

AT*MINFO

보다 구체적인 사용방법에 대한 매뉴얼은 위쪽 첨부파일 중 SKT_AT_Commands 를 다운로드 받으면 확인이 가능하다.

AT Command로 이용할 수 있는 주요 통신은 다음과 같다.

TCP 소켓통신 (웹소켓 아님ㅋㅋ)
UDP 소켓통신
HTTP 통신
HTTPS 통신 (LetsEncrypt로 발급받은 인증서의 경우 TLS버전문제로 인증서도 따로 올려줘함)
SMS 수/발신
MQTT 통신
MQTTS 통신
PING 테스트
DNS 쿼리

위 통신들이 된다고 해서 WD-N522S 가 서버의 역할을 할 수 있는게 없음.

서버는 따로 구성해야되고 WD-N522S 는 단순 접속용 클라이언트 역할만 가능함.

(오피셜로는 SKT가 IPv6 기반이라 안된다고 하는데 내가보기에 SKT향 이동통신 자체가 아이피가 수시로 바꿔되서 그런듯)

TCP 소켓 테스트 해보기

저용량 데이터요금제를 쓸려고해서 높은 계층의 프로토콜이 아니라 TCP/IP 쌩 소켓으로 테스트를 해봤다.

서버는 Oracle Cloud에 Golang을 심플하게 작성했고, 소켓서버가 정상적으로 동작되는지를 확인하기 위해 LTE Cat.M1에서 테스트하기전에 맥북에서 먼저 테스트를 진행해봤다.

"telnet 아이피나도메인 포트번호"를 입력하면 맥북이나 다른 PC에서도 간단하게 테스트가 가능하다.

아래는 WD-N522S에서 AT Command로 TCP서버에 연결하고 데이터를 보내고 받는 예시이다.

ATE0  #에코모드 끄기
AT$$STAT?  #유심상태확인, 유심이 있으면 READY반환
AT+CEREG?  #네트워크연결확인, 연결되면 +CEREG: 0,1반환
AT*RNDISDATA=1  #RNDIS Device 사용, OK반환
AT+WSOCR=0,도메인이나아이피,포트번호,1,0  #소켓서버설정, OK반환
AT+WSOCO=0  #소켓서버연결, 연결성공시 OPEN_CMPL반환, 실패시 OPEN_FAIL반환
AT+WSOWR=0,33,this message is from LTE Cat M.1  #데이터전송, 성공시 OK반환
AT+WSOCL=0  #연결종료

참고로 내가 테스트로 구현한 TCP서버는 에코서버라서 전송한 데이터를 그대로 다시 반환해준다.

TCP 소켓이 통신연결상태나 서버다운등의 이유로 중간에 연결해제될때 아래와 같이 연결이 해제됨을 바로 확인이 가능하다

갑자기 시리얼에서 +WSOEVT:0,DIS_IND 값이 반환되면 0번 소켓연결이 해제된 것이다.

IoT제품의 개발을 할때 전송할 데이터의 종류(데이터의 길이)와 전송할 주기가 굉장히 중요하다.

1시간에 한번씩만 간단한 데이터를 받아도 되는 프로젝트에서는 HTTPS 통신으로 구현하는게 현실적이고

실시간성으로 데이터를 주고 받아야되는 목적이 있다면 TCP 소켓통신을 추천한다.

문제는 TCP소켓통신이 살아있는 쌩 평문을 보내기 때문에 평문을 암호화 처리해줘야되는데,

암호화처리가 싫다고 한다면 MQTTS로 구현하는것을 권장한다.

(SKT 담당왈, 80%정도가 MQTT(S)로 구현한다고 함)

우리는 월 5MB만 사용할 예정인데다 양방향 실시간 통신으로 개발할 예정이라

MQTT를 쓰지 않고 TCP소켓에서 별도의 암호문을 주고 받아야할듯 ㅠㅠ

보통(?) 통신방식별 데이터양

HTTPS >> HTTPS >>> MQTTS >> MQTT >>>>>>> TCP

통신방식별 통신방식

통신방식	서버에서 단말로 데이터 전송	단말에서 서버로 데이터 전송	서버측 구현방식
HTTP(S)	불가	가능	개쉬움. Spring, React, php 등등... 홈페이지처럼 만들면됨. 주로 JSON형태로 데이터를 변환하여 전송함.
MQTT(S)	가능	가능	별도 MQTT 브로커서버를 설치하거나 HiveMQ와 같은 서비스를 구독해서 쓰면 됨.
TCP	가능	가능	직접 코드를 짜서 서버를 구현해야됨.

서버측 개발난이도

TCP >>>>>>>>>>>> MQTT(S) >>>>>>>>>>> HTTP(S)

여기까지 테스트로 뻘짓한 내용들을 기록으로 남겨본다.

다 쓰고 나니 뭔가 주저리주저리 정신없이 쓴거 같네.

리눅스 Google Chrome 설치시 glibc 버전문제로 설치가 불가능할때

번개애비 — Wed, 19 Jun 2024 17:03:41 +0900

개발을 하다보면

크롤링등을 위해 부득이하게 서버에 크롬브라우저를 설치하는 일이 있다.

(특히 Golang 베이스의 크롤링 서비스에서는!)

도커를 쓰면 아주 간편하게 해결되기도 하고 이렇게 머리를 싸매는일이 없지만...

도커를 쓰지 못하는 환경에서는 부득이하게 인프라에 직접 접근해야한다.

하지만, 구글크롬을 설치하는 과정에서

과거 CentOS 7 기준에서 구글크롬의 Stable 버전을 설치할때 위와 같이 libc.so.6(GLIBC_2.25) 에러가 발생될 수 있다.

--> Finished Dependency Resolution
Error: Package: google-chrome-stable-126.0.6478.114-1.x86_64 (/google-chrome-stable_current_x86_64)
           Requires: libc.so.6(GLIBC_2.25)(64bit)
 You could try using --skip-broken to work around the problem
 You could try running: rpm -Va --nofiles --nodigest

문제가된 에러메시지

참고로 CentOS 8부터 GLIBC가 2.25이상의 버전을 사용하는데 이를 해결하기위해 3가지 방법이 존재함.

1. glibc 업그레이드

2. 낮은버전의 구글크롬을 사용

3. 최신버전의 Centos 를 사용

glibc를 임의로 업데이트할 경우 커널이나 다른 프로그램 작동에 오류가 생길 수 있음으로 과거의 구글크롬을 설치하기로 했음.

현재 글을 작성하는 시간기준으로 glibc 버전은 2.17 버전이고 이 버전을 지원가능한 구글크롬의 버전은 123 버전대로 확인했음.

(현재 가장 최신의 구글크롬은 126버전대임)

wget https://dl.google.com/linux/chrome/rpm/stable/x86_64/google-chrome-stable-123.0.6312.105-1.x86_64.rpm
sudo yum -y localinstall google-chrome-stable-123.0.6312.105-1.x86_64.rpm
rm -rf google-chrome-stable-123.0.6312.105-1.x86_64.rpm

위 처럼 실행하면 구 버전의 구글크롬을 정상적으로 설치가 가능하다.

참고로 구글크롬 버전을 확인하는 것은 google-chrome --version 이다.

구글크롬에서 버전별로 리포를 보여주면 참 좋으려만...

저 버전 찾느라 노가다 좀 했는데

이 글을 보는 다른 개발자분들은 나처럼 노가다하지 않길...

KC인증 제품 검색 및 미인증제품 신고방법

번개애비 — Mon, 17 Jun 2024 15:30:50 +0900

KC인증 제품 검색하는 방법

모든 제품이 KC인증 마크를 달고 판매하는게 아니기 때문에 검색 시 주의사항이 있음.

예를 들면 공급자적합성 또는 안전기준준수로 시험을 진행한 제품은 별도의 KC인증번호가 없음으로 조회가 불가능함.

1. 무선통신을 사용하는 제품이거나 인증번호가 "R"로 시작하는 제품 검색

국립전파연구원 : https://www.rra.go.kr/ko/license/A_c_search.do

2. 그 외 다른 제품 검색 (검색이 매우매우 느림!)

제품안전정보센터 : https://www.safetykorea.kr/release/certificationsearch

그렇다면 공급자적합성 또는 안전기준준수로 시험을 진행하여 KC인증마크를 붙이지 않아도 되는 제품은 다음과 같다.

참고) KC인증마크를 붙이지 않아도되는 제품일뿐이지 시험은 반드시 진행해야함.

https://www.safetykorea.kr/policy/targetsSafetyCert#none

미인증제품 신고하는 방법

1. 국민신문고 로그인 또는 회원가입 후 "민원신청" 클릭

https://www.epeople.go.kr/

2. 신청인 기본정보와 민원발생지역을 오프라인인지 온라인 인지에 따라 선택

- 오프라인이면서 신청인과 동일주소일 경우 : 예

- 오프라인이지만 신청인과 동일하지 않는 주소일 경우 : 아니오

- 온라인구매시 : 해당없음

3. 피신청인(판매자) 정보를 입력

4. 민원내용에 "전파인증 또는 KC인증 미인증제품 제보"로 적고 민원내용에는 아래와 같이 작성

간혹 인증번호를 허위기재한 판매자도 있음으로 허위기재되어 있을경우, 허위기재한 인증번호를 적으면 좋음.

첨부파일에는 판매한 제품의 상품페이지 캡쳐나 오프라인구매시 제품사진을 첨부하고 구매영수증도 첨부하면 더더욱 좋음.

5. 마지막으로 처리기관을 알맞게 선택 후 신청

- 전파인증관련 : 과학기술정보통신부

- KC인증관련 : 산업통산자원부

애매할 경우 둘 중에 아무 부처로 민원을 신청하면 자동이관에 따라서 적합한 산하기관 또는 다른부처로 이관됨.

이렇게 하면 최종적으로 KC미인증에 대한 신고가 완료됨.

최근 KC미인증 직구제품에 대해 규제이슈가 많기도하고,

일부 소상공인들이 KC인증이 과도한 규제다라는 말도 많고,

KC인증자체가 적합인증으로써 역할을 못한다라는 말도 많고,

한국 고유의 KC인증이 다른 CE인증처럼 여러나라에서 인정해주지도 않지만

그렇다고 기존 KC인증을 무시하면서 범법행위를 행위를 하는것도 잘못이라고 생각됨.

법이 잘못되면 고쳐야 되는것도 맞지만, 법의 테두리내에서 합법적으로 판매하면서 이야기를 해야한다고 생각함.

일부 몰지각한 판매자 또는 생산자들중에 KC인증번호를 허위 사용하는 경우도 있음으로 제품 구매 시 유의가 필요함.

[PlatformIO] PIO에서 .pio\build\~~~.dblite: No such file or directory 에러가 나타날때 해결방법 공유!

번개애비 — Thu, 18 Apr 2024 23:55:02 +0900

아두이노나 ESP32, ATmega, STM32 와 같은 펌웨어를 개발할때

요즘은 PlatformIO 로 많이들 개발을 진행하게 된다.

PIO(이하 PlatformIO)는 Visual Studio Code의 Extention 모듈로써

임베디드 개발자도 간지나게 VScode로 코드를 작성할 수 있도록 도와준다.

하지만, 최근 PIO가 업데이트되면서 아래와 같은 오류를 내뱉는 경우가 많다.

대부분 해결책들은 VSCode와 PIO를 다시 설치하라는등 의견이 다양하고

PIO측에서도 이 문제를 아직까지 속 쉬원하게 해결하지 못하고 있는듯 하다.

PIO에서 MCU로 업로드하거나 코드를 빌드할때 아래의 /.pio/build/~ 를 자동으로 생성하면서

필요한 코드를 그때마다 가져와서 컴파일하게 된다.

즉, 컴파일과정에서 No such file or directory 에러가 나타난다면,

VSCode를 완전히 재시작하거나

해당 프로젝트에서 /.pio/build 디렉토리를 과감하게 지워주면 정상적으로 빌드되어 문제를 해결할 수 있다!

맨날 펌웨어 짜면서 씨름하게될 미래의 내자신을 위한 메모글

제주도 워케이션 하기 좋은 카페 - 올더타임 토평

번개애비 — Tue, 28 Nov 2023 13:36:32 +0900

제주살이를 하게 되면서 여러 워킹스페이스를 다녔었다.

나와 같이 힘들게 워킹스페이스를 찾으러 다니는 사람들을 위해 다녀온 워킹스페이스를 공유하고,

결국 카페에 정착하게 된 이유를 써본다.

유목민마냥 이곳 저곳을 많이 돌아다니면서 정말 기억에 남는 3곳은 다음과 같다.

1. O-PEACE 조천점 (숙박+워킹스페이스 / 124,000)

공유오피스와 숙박을 모두 해결이 가능하다.

스위트룸 기준 1박에 약 124,000원임. 숙박을 할 경우, 1층 공유오피스를 무료로 이용할 수 있다.

가격이 좀 사악하기도 하고 오피스공간이 생각외로 좁다.

오래있기는 힘들고 공유오피스만 이용했었음. (하루에 16,000원)

공유오피스는 복층구조인데 복층에서 움직일때마다 바닥에서 뿌직소리가 나서 반강제적으로 자리에 스테이하게 됨

O-PEACE 조천점 더 알아보기 : https://o-peace.com/Jocheon

2. O-PEACE 사계점 (숙박+워킹스페이스 / 99,000)

O-PEACE 조천점과 같은 회사에서 운영하는 워킹스페이스지만, 조천점과 달리 넓은 공유오피스를 갖고 있다.

스탠다드룸 기준 1박에 약 99,000원이고 조천점과 동일하게 1층 공유오피스를 무료로 이용할 수 있어서

거의 2주가량 장기 투숙을 하며 워케이션을 했었던 경험이 있다.

근데, 사계는 바람이 너무 쎄다 ㅋㅋㅋ

총알도 여유가 있고 여러명과 함께 숙박 및 작업공간을 함께 생각한다면 최고의 워킹스페이스가 아닐까 싶다.

O-PEACE 사계점 더 알아보기 : https://o-peace.com/48 (조천점과 달리 URL이 그냥 숫자.... ㅎㅎ)

3. 서귀포시 스타트업베이 및 글로벌센터 (워킹스페이스 / 무료)

재단법인 넥스트챌린지에서 운영하는 코워킹스페이스 공간이다.

평시에는 코워킹스페이스를 일반에 무료로 개방하고 있지만, 네트워킹 행사가 잡혀 있을 경우 짤없이 이용이 불가능하다.

별도의 오픈채팅방을 통해서 이용제한을 사전에 안내해주고 있고 스타트업베이와 글로벌센터가 모두 동시에 행사가 있는 경우는 드물기 때문에 스타트업베이에 행사가 잡혀있다면 글로벌센터로 가면 된다.

스타트업베이 오픈채팅방 : https://open.kakao.com/o/goQyPTpe

사전에 오픈채팅방에서 개방여부를 확인하고 현장에서 간단한 사용신청서를 작성하면 누구나 이용가능하다. 하지만 의자가 너무 불편해 ㅠㅠ

결국 이렇게 좋은 작업공간을 두고 스타벅스를 전전긍긍 했었는데,
그 이유는 다음과 같다.

1. 가격적인 문제

하루이틀만 기분내겠다고 일한다면 위 워킹스페이스도 충분히 좋은 공간이 될 수 있지만,

최소 몇개월, 몇년을 보내야 되는 입장에서는 금액이슈가 너무나 컸다.

어차피 하루에 커피 한잔은 무조건 먹기 때문에 스타벅스만한 대안이 없었다.

2. 인터넷 속도

제주도의 인터넷환경은 정말 극과 극이다.

느린 인터넷 속도는 안그래도 느린 VPN성능을 느리게 만들고

잦은 인터넷 끊김문제는 업무에 집중할 수 없도록 방해한다.

특히 개발자 관점에서는 인터넷 속도가 업무에 정말 지대한 영향을 끼친다는것을 이번에 뼈져리게 느꼈다.

근데 적어도 스타벅스는 KT 기가인터넷이 기본이다.

(물론 위에서 소개한 3곳의 인터넷속도는 100점만점에 100점이다.)

그러다가 인근에 괜찮은 장소가 있는것 같아서 현재는 여기에 정착했다.

올더타임토평 : 네이버

방문자리뷰 381 · 블로그리뷰 32

m.place.naver.com

비교적 최근에 생긴 지점인데,

토평점 말고도 제주도 안에서만 본점, 외도점, 아이파크점, 아라초점, 스위첸점 총 6개의 지점이 있다.

아마 토평점이 서귀포 지역에서 유일하게 생긴 지점이고 일단 주차장이 대따 크다 ㅎㅎ

제발 와서 일해주세요 라고 하는것 마냥

콘센트가 진짜 엄청 많음.

그냥 카페테리아 느낌이기 보다 룸이 공간이 정말 많아서

집중해서 빡코딩하기에 아주 좋은 장소인듯하다. ㅎㅎㅎ

마지막으로 인터넷 속도 측정...

KCTV 기가인터넷을 사용중인데 생각외로 레이턴시 품질이나 속도가 만족스럽다.

당분간 여기서 죽돌이가 될거 같다 ㅎㅎ

php 소스코드 난독화 (암호화) 하는 방법

번개애비 — Mon, 20 Nov 2023 22:20:58 +0900

ZendOptimizer 나 IonCube, phpBolt 와 같이 서버에 별도의 Extention (.so, .dll) 을 설치하지 않고

간단하게 php소스코드를 읽지 못하도록 난독화하는 사이트를 개설하게 되어 공유합니다.

https://php-obfuscator.burndogfather.com/

PHP 난독화 도구

php, PHP, 소스코드, 난독화, 암호화

php-obfuscator.burndogfather.com

원본소스코드와 난독화된 코드는 URL형태로 저장됨으로 URL을 공유하면

다른사람에게 손쉽게 원본소스와 난독화된 소스코드를 함께 전달할 수 있습니다.

이런식으로 단방향 해싱을 통해 복호화가 불가능하도록 URL을 함께 생성해줍니다. (URL을 모르면 소스코드를 열람할 수 없습니다)

https://php-obfuscator.burndogfather.com/#C305572196363014E341EBA419E826EF046D70C6929C255B494ACDA8798EF748

PHP 난독화 도구

php, PHP, 소스코드, 난독화, 암호화

php-obfuscator.burndogfather.com

개인적으로 따로 사용하던 난독화 기법인데

더 쉽게 사용할 수 있도록 만들어봤어요.

CentOS 혹은 Rocky Linux 에서 특정 아이피만 SSH/SFTP 허용하기

번개애비 — Mon, 30 Oct 2023 13:29:36 +0900

보안을 위해 SSH나 SFTP접속 시 특정 아이피만 허용하는 방법은 다음과 같다.

방화벽 동작중인지 확인

firewall-cmd --state

running으로 나와야 되며, running이 나타오지 않는다면, 아래의 명령어로 firewalld 를 설치하거나 실행시켜야 한다.

#firewalld 설치
yum install -y firewalld

#부팅시 firewalld 시작
systemctl enable firewalld

#firewalld 실행
systemctl start firewalld

현재 방화벽의 설정정보 보기

firewall-cmd --list-all

기존의 ssh 서비스 혹은 22번포트의 방화벽이 OPEN 되어 있을경우, 서비스를 삭제

firewall-cmd --remove-service=ssh --permanent
firewall-cmd --permanent --remove-port=22/tcp

접속을 허용할 화이트아이피를 firewalld 에 등록

firewall-cmd --permanent --zone=public --add-rich-rule="rule family='ipv4' source address='아이피주소' service name='ssh' accept"

설정한 정보를 firewalld에 바로 반영

firewall-cmd --reload

개발자가 왜 쪽팔리게 이런거까지 해야되?

번개애비 — Tue, 10 Oct 2023 11:29:35 +0900

웹이든 앱이든 어떤 서비스를 개발하는 개발자의 관점에서 서비스를 그 누구보다 잘 이해해야한다고 생각한다.
“내가 만들었으니까 이 로직에 대해 내가 누구보다 잘 알아”가 중요한게 아닌
서비스에 유입되는 고객이나 서비스안에 활동하는 파트너를 이해하고 이를 서비스에 지속적으로 반영해야한다.

내가 만나본 대부분의 주니어 개발자들은 나름대로 네카라쿠배의 섹시한(?) 업무방식에 대한 부푼 꿈을 안고
관련학과로 진학하든 국비학원을 다녔든 부트캠프등을 다녔던 것 같다.

따뜻하고 시원한 사무실에서 컴퓨터에 앉아 히히덕 거리며 코드나 찍어대는 코드몽키보단
직접 고객이 되어 혹은 직접 발품을 팔면서 내가 개발한 서비스를 함께 성장시킬 수 있는 개발자.
멋지지 아니한가?

서비스와 함께 동거동락하며 성장한 개발자는
수 많은 시행착오를 기술적으로든 서비스적으로든 해결해본 경험이 있음으로
단순히 기술스택을 하나하나 격파하며 성장한 개발자보다 더 가치있는 경험을 갖고 있다고 자부한다.

개발자인데 기술적인 관점에서 문제를 해결하는것도 중요하지.
읽기 쉬운 코드, 중복이 없는 코드, 일관성이 있는 코드, 확장성이 있는 코드 등도 좋은 코드이지만
작성하지 않는 코드도 때로는 좋은 코드가 되기도 한다.

요즘 아무나 프레임워크 하나 배워서 개발자라고 하는 개발자 시장에서 앞으로 시니어로 성장해야하는 개발자가
기술스택 따위를 나열하는 “나 어떤 프레임워크를 썼고 이 로직을 어떤 알고리즘을 써서 해결했어”보다
문제해결 중심의 경험을 이야기하는 “필드에 문제를 해결하기 위해 이런시도를 했고 이 문제를 이렇게 해결했어”가 이직시장에서도 더 환영받는다.

08년부터 업계에서 고일대로 고여버린 필자도 이러고 있지만 쪽팔리기는 커녕 즐겁기만 하다.

<함께 읽어보면 좋은 글>

전단지 돌리는 게 뭐 어때서

전단지를 돌리는 게 우습다는 사람들이 있습니다. 네이버 카카오 나와서 겨우 전단지를 돌리고 있냐고.

jeho.page

카카오톡/라인 인앱브라우저에서 외부브라우저 띄우기 (2023.09.21 최신 - inapp browser bypassing)

번개애비 — Thu, 4 May 2023 17:10:12 +0900

이전부터 카카오톡 등과 같은 메신저에서 인앱브라우저를 강제하는 불합리한 조치를
우회하기위해 다양한 방법을 이 블로그에 포스팅해왔었다.

ftp프로토콜을 활용한 우회방법 : https://burndogfather.com/201 [현재는 막힘]

카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS]

현재 이 방법은 iOS15 업데이트로 인해 사용이 불가능한 방법입니다. https://burndogfather.tistory.com/257 사용자가 조금 더 불편하게 접속하는 방법이 현재까지는 차선책이네요 ㅠㅜ 더 쾌적하게? 웹 서

burndogfather.com

강제사파리실행 + 클립보드를 활용하는 방법 : https://burndogfather.com/257 [그 전까지 유일한 방법 ㅠ]

iOS15 업데이트와 함께 찾아온 인앱브라우저 지옥과 최선

카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS] 더 쾌적하게? 웹 서비스를 개발하는 입장에서 클라이언트가 위와 같은 브라우저를 사용할때 정말 피곤합니다. 휴대폰 본인

burndogfather.com

근데 우연하게 우회할 수 있는 방법을 찾았다. (솨리질러! )
본 블로그를 지금 카카오톡 메신저에 전송해서
URL을 눌러보면 사용자가 아무런 조작을 하지 않아도
강제로 외부브라우저로 깔끔하게 실행된다.

사용방법은 다음과 같다.

[카카오톡]
내가 찾지 못한 것인지 다른 개발자들 모두가 볼 수 있도록 카카오톡이 나서서 공유해줘야하는게 아닌가 ㅠㅠ

var target_url = 'https://burndogfather.com';
location.href = 'kakaotalk://web/openExternal?url='+encodeURIComponent(target_url);

[라인]
아주 친절하게도 공개하고 있다!
https://developers.line.biz/en/docs/line-login/using-line-url-scheme/#opening-url-in-external-browser

var target_url = 'https://burndogfather.com';
if(target_url.indexOf('?') !== -1){
    location.href = target_url+'&openExternalBrowser=1';
}else{
    location.href = target_url+'?openExternalBrowser=1';
}

[Full Source]
기존의 Safari를 강제실행하고 클립보드에 복사해놓는 코드를 종합해보면 다음과 같음.
중간중간 주석도 달아두었으니, 전국 각지에서 고분분투 하시는 개발자분들께서 알아서 커스텀해서 쓰시면 됩니다.
(아래 Javascript를 사이트에 붙여놓으면 인앱 우회가 가능해진다. Android / iOS 모두 호환가능)

<script type='text/javascript' charset='UTF-8'>
	var inappdeny_exec_vanillajs = (callback) => {
		if(document.readyState !== 'loading'){
			callback();
		}else{
			document.addEventListener('DOMContentLoaded', callback);
		} 
	};
	inappdeny_exec_vanillajs(() => { 
		/* Do things after DOM has fully loaded */ 
		function copytoclipboard(val){
			var t = document.createElement("textarea");
			document.body.appendChild(t);
			t.value = val;
			t.select();
			document.execCommand('copy');
			document.body.removeChild(t);
		};
		function inappbrowserout(){
			copytoclipboard(window.location.href);
			alert('URL주소가 복사되었습니다.\n\nSafari가 열리면 주소창을 길게 터치한 뒤, "붙여놓기 및 이동"를 누르면 정상적으로 이용하실 수 있습니다.');
			location.href='x-web-search://?';
		};

		var useragt = navigator.userAgent.toLowerCase();
		var target_url = location.href;
		
		if(useragt.match(/kakaotalk/i)){
			
			//카카오톡 외부브라우저로 호출
			location.href = 'kakaotalk://web/openExternal?url='+encodeURIComponent(target_url);
			
		}else if(useragt.match(/line/i)){
			
			//라인 외부브라우저로 호출
			if(target_url.indexOf('?') !== -1){
				location.href = target_url+'&openExternalBrowser=1';
			}else{
				location.href = target_url+'?openExternalBrowser=1';
			}
			
		}else if(useragt.match(/inapp|naver|snapchat|wirtschaftswoche|thunderbird|instagram|everytimeapp|whatsApp|electron|wadiz|aliapp|zumapp|iphone(.*)whale|android(.*)whale|kakaostory|band|twitter|DaumApps|DaumDevice\/mobile|FB_IAB|FB4A|FBAN|FBIOS|FBSS|trill|SamsungBrowser\/[^1]/i)){
			
			//그외 다른 인앱들
			if(useragt.match(/iphone|ipad|ipod/i)){
				
				//아이폰은 강제로 사파리를 실행할 수 없다 ㅠㅠ
				//모바일대응뷰포트강제설정
				var mobile = document.createElement('meta');
				mobile.name = 'viewport';
				mobile.content = "width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui";
				document.getElementsByTagName('head')[0].appendChild(mobile);
				//노토산스폰트강제설정
				var fonts = document.createElement('link');
				fonts.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap';
				document.getElementsByTagName('head')[0].appendChild(fonts);
				document.body.innerHTML = "<style>body{margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif;overflow: hidden;height: 100%;}</style><h2 style='padding-top:50px; text-align:center;font-family: 'Noto Sans KR', sans-serif;'>인앱브라우저 호환문제로 인해<br />Safari로 접속해야합니다.</h2><article style='text-align:center; font-size:17px; word-break:keep-all;color:#999;'>아래 버튼을 눌러 Safari를 실행해주세요<br />Safari가 열리면, 주소창을 길게 터치한 뒤,<br />'붙여놓기 및 이동'을 누르면<br />정상적으로 이용할 수 있습니다.<br /><br /><button onclick='inappbrowserout();' style='min-width:180px;margin-top:10px;height:54px;font-weight: 700;background-color:#31408E;color:#fff;border-radius: 4px;font-size:17px;border:0;'>Safari로 열기</button></article><img style='width:70%;margin:50px 15% 0 15%' src='https://tistory3.daumcdn.net/tistory/1893869/skin/images/inappbrowserout.jpeg' />";
			
			}else{
				//안드로이드는 Chrome이 설치되어있음으로 강제로 스킴실행한다.
				location.href='intent://'+target_url.replace(/https?:\/\//i,'')+'#Intent;scheme=http;package=com.android.chrome;end';
			}
		}
	});
</script>

추신) 인스타그램이나, 네이버 톡톡 메신저등 다른 앱에 대해서도 지속적으로 우회방법을 찾아서 공유하도록 하겠음!

[ 2023.05.04 신규 ]

카카오톡, 네이버라인 우회 코드 추가

kakao_inapp.html

0.00MB

[ 2023.05.11 변경 ]

window.onload 대신 더 빠르게 실행할 수 있도록 일부코드변경

kakao_inapp.html

0.00MB

[ 2023.09.21 변경 ]

틱톡 인앱브라우저 감지 추가

kakao_inapp.html

0.00MB

24종 택배회사별 운송장번호 조회 URL

번개애비 — Thu, 30 Mar 2023 00:06:20 +0900

배송트래킹을 직접 구현할지 모르겠지만, 혹시 몰라서 남겨놓음.

제일 편한방법은 스마트택배 API를 연동하는게 현실적이긴함.

API 전문 : http://info.sweettracker.co.kr/apidoc/

우체국

https://service.epost.go.kr/trace.RetrieveDomRigiTraceList.comm?sid1={#운송장번호}&displayHeader=N

CJ대한통운

http://nexs.cjgls.com/web/info.jsp?slipno={#운송장번호}

한진택배

https://www.hanjin.com/kor/CMS/DeliveryMgr/WaybillResult.do?mCode=MN038&schLang=KR&wblnumText2={#운송장번호}

롯데택배

https://www.lotteglogis.com/open/tracking?InvNo={#운송장번호}

로젠택배

https://www.ilogen.com/web/personal/trace/{#운송장번호}

일양로지스

https://www.ilyanglogis.com/functionality/popup_result.asp?hawb_no={#운송장번호}

EMS

https://service.epost.go.kr/trace.RetrieveEmsRigiTraceList.comm?POST_CODE={#운송장번호}&displayHeader=N

DHL

https://www.dhl.com/kr-ko/home/tracking.html?tracking-id={#운송장번호}

FedEx

https://www.fedex.com/fedextrack/?trknbr={#운송장번호}

UPS

https://track.aftership.com/{#운송장번호}?courier=ups

대신택배

https://www.ds3211.co.kr/freight/internalFreightSearch.ht?billno={#운송장번호}

경동택배

https://kdexp.com/newDeliverySearch.kd?barcode={#운송장번호}

합동택배

https://hdexp.co.kr/deliverySearch2.hd?barcode={#운송장번호}

CU편의점택배

https://www.cupost.co.kr/postbox/delivery/localResult.cupost?invoice_no={#운송장번호}

GS Postbox 택배

https://www.cvsnet.co.kr/invoice/tracking.do?invoice_no={#운송장번호}

TNT Express

https://www.tnt.com/express/ko_kr/site/shipping-tools/tracking.html?searchType=con&cons={#운송장번호}

천일택배

http://www.chunil.co.kr/HTrace/HTrace.jsp?transNo={#운송장번호}

건영택배

https://www.kunyoung.com/goods/goods_01.php?mulno={#운송장번호}

GSM nton

http://expressweb.co.kr/member/loginTracing.do?fwdCode=gexp&bound=AI&langCode=KOR&HBLNO={#운송장번호}

ECMS Express

https://www.ecmsglobal.com/ko-kr/tracking.html?orderNumber={#운송장번호}

굿투럭

http://www.goodstoluck.co.kr/tracking/tracking.php?Txt_word={#운송장번호}

GSI Express

https://gsiexpress.com/track_pop.php?track_type=ship_num&query_num={#운송장번호}

우리택배

http://www.honamlogis.co.kr/page/index.php?pid=tracking_number&SLIP_BARCD={#운송장번호}

오늘의픽업

https://mall.todaypickup.com/front/delivery/list/{#운송장번호}?

인터랙티브 웹을 구현하기 위한 깨알같은 소스코드들

번개애비 — Mon, 13 Feb 2023 15:13:07 +0900

신용카드 카드 입력창

신용카드를 입력받을때 좀더 인터렉티브하게 받을 수 있습니다.

CVV번호를 입력할때는 카드의 뒷면으로 넘어간다.

https://codepen.io/CodeWorks4U/pen/NWBMxPM

NWBMxPM

...

codepen.io

슬라이더

앞글자를 이용하여 좀더 다이나믹한 슬라이더를 만들수 있다.

https://codepen.io/CodeWorks4U/pen/poZBYqL

CodeWorks4U Parallax Drag

...

codepen.io

시간에 따라 바뀌는 배경색

배경색상이 5초간격으로 스무스하게 변경된다.

body{
	animation:changeBG 5s infinite;
    alternate linear;
}

@keyframes changeBG{
	0%{
    	background:#ee6055;
    }
    25%{
    	background:#60d394;
    }
    50%{
    	background:#aaf683;
    }
    75%{
    	background:#ffd97d;
    }
    100%{
    	background:#ff9b85;
    }
}

CSS로 그리는 로딩 사이트

움짤(gif)로 만다는 로딩이 아니라, CSS를 이용하여 보다 매끄럽게 로딩을 만들수 있다.

사이트에 접속하면 다양한 예제들을 볼 수 있다.

https://cssloaders.github.io/

CSS loaders and Spinners

cssloaders.github.io

그라데이션 만드는 사이트

다양한 그라데이션을 만들어주는 사이트이다.

많은 옵션들을 지원하기 때문에 디자이너가 의도한대로 그라데이션을 만들어줄 수 있다.

https://cssgradient.io/

CSS Gradient — Generator, Maker, and Background

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

cssgradient.io

웨이브를 만들어주는 사이트

물결모양을 만들어줄 수 있다.

애니메이션까지 적용하면 물결치는것 까지도 구현이 가능.

https://getwaves.io/

Get Waves – Create SVG waves for your next design

A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!

getwaves.io

CSS 애니메이션 툴킷 사이트

다양한 애니메이션 효과들을 가져다가 사용할 수 있다.

https://animxyz.com/

AnimXYZ

The first composable CSS animation toolkit

animxyz.com

CSS 카드 디자인 세트

카드 디자인과 각각의 애니메이션을 적용할 수 있는 예시들을 모아둔 사이트이다.

https://freefrontend.com/css-cards/

76 CSS Cards

Collection of free HTML and CSS card code examples. Update of May 2020 collection. 41 new examples.

freefrontend.com

사이즈에 반응하는 그리드 예제

반응형 UI를 구성할때 그리드를 사용하면 그리드 영역안에서 요소들을 깨지지 않고 자연스럽게 배치할 수 있다.

.grid{
	display:grid;
    grid-template-columns:repeat(auto-fil, minmax(8rem, 1fr));
    grid-auto-rows: 6rem;
}

마우스오버되지 않은 다른 영역을 흐리게

보통 마우스오버가 되는 대상을 위주로 스타일이 적용되지만,

:not() 옵션을 통해 그외 다른 대상들의 스타일에도 적용할 수 있다.

https://codepen.io/Parth-webdev/pen/qByNgVz

Link Hover Animation

...

codepen.io

그림자효과를 만들어주는 사이트

단순한 그림자가 아니라 그럴싸한 그림자효과를 사용할 수 있다.

https://shadows.brumm.af/

Smooth Shadow

shadows.brumm.af

가로스크롤을 이용한 슬라이더

스크롤에 따라 반응하는 슬라이더를 확인할 수 있다.

롤링배너등에서 사용하면 좋을듯!

https://codepen.io/coding_dev_/pen/mdLJKjN

Scroll Snap in CSS

...

codepen.io

폴리곤과 폴리곤을 비교하여 겹쳐졌는지 확인하기 (Polygon and Polygon Overlapping for PHP & Javascript)

번개애비 — Tue, 27 Dec 2022 18:52:02 +0900

지도에서 폴리곤의 섹터영역을 설정할때 섹터가 중복되지 않도록 제한해야 한다.

이전에 특정좌표가 폴리곤영역내에 존재하는지 확인하는 Point-in-Polygon 알고리즘을 활용하여 해결했는데,

이번에는 폴리곤과 폴리곤을 비교하여 서로 겹쳐졌는지 확인하는 기능을 개발하였다.

폴리곤 좌표와 검색할 좌표를 비교하여 해당 좌표가 폴리곤안에 들어와있는지 확인하는 PHP함수

섹터를 나누는 기능을 개발하기 위해서는 섹터의 영역인 폴리곤과 좌표계를 비교하는 개발소요가 있었다. 예를 들면 이것 처럼.... 기본적으로 Tmap이나 Naver Map에서는 설정한 폴리곤영역에서 사

www.burndogfather.com

(하루가 멀다고 자꾸자꾸 새롭게 개발할게 마구마구 튀어나오고 있는중임)

테스트를 위해 여러개의 폴리곤 좌표계를 활용하였다.

비교 대상이 되는 기본 폴리곤 하나와

기본 폴리곤과 동일한 폴리곤과의 비교,

완전히 겹쳐지지 않는 폴리곤과의 비교,

일부가 겹쳐져 있는 폴리곤과의 비교를 진행하였다.

(아래의 코드는 PHP버전으로 만들었고 맨밑으로 내리면 Javascript로 만든 버전이 있다.)

$polygon_basic = array();
$polygon_basic[] = array("37.535003862601", "126.96876525879");
$polygon_basic[] = array("37.527925065235", "126.95966720581");
$polygon_basic[] = array("37.526382161255", "126.97317123413");
$polygon_basic[] = array("37.535003862601", "126.96876525879");
echo '검색대상 폴리곤 : ';
print_r($polygon_basic);
echo '<br /><br />';

unset($polygon_target);
$polygon_target = array();
$polygon_target[] = array("37.535003862601", "126.96876525879");
$polygon_target[] = array("37.527925065235", "126.95966720581");
$polygon_target[] = array("37.526382161255", "126.97317123413");
$polygon_target[] = array("37.535003862601", "126.96876525879");
echo '검색대상 폴리곤과 동일한 폴리곤 : ';
print_r($polygon_target);
echo '<br />';
if(polygon_polygon_check($polygon_basic, $polygon_target)){
    echo '겹쳐짐';
}else{
    echo '겹쳐지지 않음';
}
echo '<br /><br />';

unset($polygon_target);
$polygon_target = array();
$polygon_target[] = array("37.530375494199", "126.9843006134");
$polygon_target[] = array("37.517834307061", "126.97839332581");
$polygon_target[] = array("37.515626326429", "126.9711971283");
$polygon_target[] = array("37.519892539273", "126.98927879334");
$polygon_target[] = array("37.530375494199", "126.9843006134");
echo '겹쳐지지 않는 폴리곤 : ';
print_r($polygon_target);
echo '<br />';
if(polygon_polygon_check($polygon_basic, $polygon_target)){
    echo '겹쳐짐';
}else{
    echo '겹쳐지지 않음';
}
echo '<br /><br />';

실행결과는 다음과 같다.

(위도경도의 좌표계는 String형이든 Float형이든 아무렇게나 막써도 작동되도록 해놨음.)

아주 잘된다.

폴리곤을 백터화 하여 비교하고자 했으나,

너무나 귀찮아서 무식한 방법으로 일단은 해결했다.

(나중에 다시 제대로 개발해야 할듯 ㅋㅋ)

일단 2개의 폴리곤을 각각 가져온뒤, 폴리곤을 구성하고 있는 꼭지점들을 서로 이어붙여서 각각의 선들로 표현한다.

삼각형일때는 선이 3개가 나올거고,

팔각형일때는 선이 8개가 나올거다.

2개의 폴리곤으로부터 나온 선들을 모두 비교하여 선과 선이 겹쳐져 있는지를 확인하는 방법이다.

단순히 선과 선이 겹쳐져 있는 경우뿐만 아니라 선과 선이 동일한 경우도 존재하고,

선의 시작이나 끝지점이 다른 폴리곤의 선 상위에 놓여있는 경우도 존재했기 때문에,

여러가지 경우의 수가 대응되게끔 개발을 진행했다.

작성한 PHP함수는 다음과 같다.

코드 내부에 주석을 달아두었음으로 코드내용에 대해서는 별도의 설명은 없다. 끝.

function polygon_polygon_check($polygon1, $polygon2){
		
    //함수 입력데이터 검사
    if(!is_array($polygon1) || !is_array($polygon2)){
        return false;
    }

    //중복,빈 좌표 제거
    $polygon1 = array_unique($polygon1, SORT_REGULAR); 
    $polygon1 = array_values($polygon1); 
    $polygon1[] = $polygon1[0]; 

    $polygon2 = array_unique($polygon2, SORT_REGULAR); 
    $polygon2 = array_values($polygon2); 
    $polygon2[] = $polygon2[0]; 


    $polygon1_cnt = count($polygon1)-1;
    if($polygon1_cnt < 3){
        //삼각형이상 되어야 함.
        return false;
    }

    $polygon2_cnt = count($polygon2)-1;
    if($polygon2_cnt < 3){
        //삼각형이상 되어야 함.
        return false;
    }

    //폴리곤을 꼭지점 단위로 선으로 만든뒤,
    //그 선들끼리 서로 겹쳐짐을 비교하여 폴리곤이 겹쳐져 있는지 검사한다.
    for($p=$polygon1_cnt; $p>=0; $p--){
        if($p-1 >= 0){

            //데이터형 변환
            if(strpos($polygon1[$p][0], '.') !== false){
                $polygon1[$p][0] = floatval($polygon1[$p][0]);
            }else{
                $polygon1[$p][0] = intval($polygon1[$p][0]);
            }
            if(strpos($polygon1[$p][1], '.') !== false){
                $polygon1[$p][1] = floatval($polygon1[$p][1]);
            }else{
                $polygon1[$p][1] = intval($polygon1[$p][1]);
            }
            if(strpos($polygon1[$p-1][0], '.') !== false){
                $polygon1[$p-1][0] = floatval($polygon1[$p-1][0]);
            }else{
                $polygon1[$p-1][0] = intval($polygon1[$p-1][0]);
            }
            if(strpos($polygon1[$p-1][1], '.') !== false){
                $polygon1[$p-1][1] = floatval($polygon1[$p-1][1]);
            }else{
                $polygon1[$p-1][1] = intval($polygon1[$p-1][1]);
            }

            //꼭지점을 이어서 선형으로 변경한다.
            $polyline1 = array();
            $polyline1[0] = array($polygon1[$p][0], $polygon1[$p][1]);
            $polyline1[1] = array($polygon1[$p-1][0], $polygon1[$p-1][1]);


            //폴리곤을 꼭지점 단위로 선으로 만든다.
            for($q=$polygon2_cnt; $q>=0; $q--){
                if($q-1 >= 0){

                    //데이터형 변환
                    if(strpos($polygon2[$q][0], '.') !== false){
                        $polygon2[$q][0] = floatval($polygon2[$q][0]);
                    }else{
                        $polygon2[$q][0] = intval($polygon2[$q][0]);
                    }
                    if(strpos($polygon2[$p][1], '.') !== false){
                        $polygon2[$q][1] = floatval($polygon2[$q][1]);
                    }else{
                        $polygon2[$q][1] = intval($polygon2[$q][1]);
                    }
                    if(strpos($polygon2[$q-1][0], '.') !== false){
                        $polygon2[$q-1][0] = floatval($polygon2[$q-1][0]);
                    }else{
                        $polygon2[$q-1][0] = intval($polygon2[$q-1][0]);
                    }
                    if(strpos($polygon2[$q-1][1], '.') !== false){
                        $polygon2[$q-1][1] = floatval($polygon2[$q-1][1]);
                    }else{
                        $polygon2[$q-1][1] = intval($polygon2[$q-1][1]);
                    }

                    //꼭지점을 이어서 선형으로 변경한다.
                    $polyline2 = array();
                    $polyline2[0] = array($polygon2[$q][0], $polygon2[$q][1]);
                    $polyline2[1] = array($polygon2[$q-1][0], $polygon2[$q-1][1]);

                    //선과 선이 동일할때 가차없이 겹쳐짐으로 처리
                    if($polyline1 === $polyline2){
                        return true;
                    }

                    //선과 선의 교차점 계산하기

                    $under = ($polyline2[1][1] - $polyline2[0][1]) * ($polyline1[1][0] - $polyline1[0][0]) - ($polyline2[1][0] - $polyline2[0][0]) * ($polyline1[1][1] - $polyline1[0][1]);
                    if($under == 0){
                        //동일한 선상일 때는 겹쳐짐으로 처리
                        return true;
                    }

                    $t = ($polyline2[1][0] - $polyline2[0][0]) * ($polyline1[0][1] - $polyline2[0][1]) - ($polyline2[1][1] - $polyline2[0][1]) * ($polyline1[0][0] - $polyline2[0][0]);
                    $s = ($polyline1[1][0] - $polyline1[0][0]) * ($polyline1[0][1] - $polyline2[0][1]) - ($polyline1[1][1] - $polyline1[0][1]) * ($polyline1[0][0] - $polyline2[0][0]);
                    if($t == 0){
                        //근사치가 무조건 0으로 나옴
                        continue;
                    }
                    if($s == 0){
                        //근사치가 무조건 0으로 나옴
                        continue;
                    }

                    //근사치 계산
                    $t_under = $t / $under;
                    $s_under = $s / $under;

                    if($t_under <= 0 || $t_under > 1 || $s_under <= 0 || $s_under > 1){
                        //under를 나눈값이 0~0.99999999... 의 근사치라면 겹쳐져 있지 않다.
                        continue;
                    }

                    //겹쳐짐
                    return true;

                }
            }


        }
    }

    //그외 2개의 폴리곤은 서로 겹쳐지지 않는다.
    return false;

}

내용추가)

PHP의 서버사이드 로직뿐만 아니라 프론트엔드에서도 한번 걸러야되서 Javascript로 동일한 기능을 포팅했다.

아래는 Javascript버전의 함수 및 테스트코드이다.

(PHP에서는 array_unique 라고하는 내장함수 있어서 좀 쉬웠는데 JS에는 그와 동일한 함수를 만들어야되서 애 좀 먹었음)

var polygon_basic = new Array();
polygon_basic[0] = new Array("37.535003862601", "126.96876525879");
polygon_basic[1] = new Array("37.527925065235", "126.95966720581");
polygon_basic[2] = new Array("37.526382161255", "126.97317123413");
polygon_basic[3] = new Array("37.535003862601", "126.96876525879");
document.write('검색대상폴리곤 : '+polygon_basic+'<br /><br />');

var polygon_target = new Array();
polygon_target[0] = new Array("37.535003862601", "126.96876525879");
polygon_target[1] = new Array("37.527925065235", "126.95966720581");
polygon_target[2] = new Array("37.526382161255", "126.97317123413");
polygon_target[3] = new Array("37.535003862601", "126.96876525879");
document.write('완전히동일한폴리곤 : '+polygon_target+'<br />');
if(polygon_polygon_check(polygon_basic, polygon_target)){
    document.write('겹쳐짐<br /><br />');
}else{
    document.write('겹쳐지지 않음<br /><br />');
}

var polygon_target = new Array();
polygon_target[0] = new Array("37.530375494199", "126.9843006134");
polygon_target[1] = new Array(37.527834307061, 126.96839332581);
polygon_target[2] = new Array("37.515626326429", "126.9711971283");
polygon_target[3] = new Array("37.519892539273", "126.98927879334");
polygon_target[4] = new Array("37.519892539273", "126.98927879334");
polygon_target[5] = new Array("37.530375494199", "126.9843006134");
document.write('겹쳐진폴리곤 : '+polygon_target+'<br />');
if(polygon_polygon_check(polygon_basic, polygon_target)){
    document.write('겹쳐짐<br /><br />');
}else{
    document.write('겹쳐지지 않음<br /><br />');
}

var polygon_target = new Array();
polygon_target[0] = new Array("37.530375494199", "126.9843006134");
polygon_target[1] = new Array("37.517834307061", "126.97839332581");
polygon_target[2] = new Array("37.515626326429", "126.9711971283");
polygon_target[3] = new Array("37.519892539273", "126.98927879334");
polygon_target[4] = new Array("37.530375494199", "126.9843006134");
document.write('겹쳐지지않는폴리곤 : '+polygon_target+'<br />');
if(polygon_polygon_check(polygon_basic, polygon_target)){
    document.write('겹쳐짐<br /><br />');
}else{
    document.write('겹쳐지지 않음<br /><br />');
}



function polygon_polygon_check(polygon1, polygon2){

    //다차원배열에서의 중복된 데이터삭제하는 내장함수
    function array_unique(input_array){
        input_array = JSON.parse(JSON.stringify(input_array)); //json stringify는 빈배열을 null로 바꿔준다.
        input_array = input_array.filter((element, i) => element !== null && element !== undefined && element !== '' ); //빈키 삭제
        return [...new Set(input_array.join("|").split("|"))].map((v) => v.split(",")).map((v) => v.map((a) => +a)); //중복된 배열을 삭제한다.
    };

    //함수 입력데이터 검사
    if(!Array.isArray(polygon1) || !Array.isArray(polygon2)){
        return false;
    }

    //중복배열 삭제 및 데이터형변환
    polygon1 = array_unique(polygon1);
    polygon1.push(polygon1[0]);

    polygon2 = array_unique(polygon2);
    polygon2.push(polygon2[0]);

    let polygon1_cnt = polygon1.length - 1;
    if(polygon1_cnt < 3){
        //삼각형이상이 되어야함
        return false;
    }

    let polygon2_cnt = polygon2.length - 1;
    if(polygon2_cnt < 3){
        //삼각형이상이 되어야함
        return false;
    }

    for(let p=polygon1_cnt; p>=0; p--){
        if(p-1 >= 0){
            //꼭지점을 이어서 선형으로 변경한다.
            let polyline1 = new Array();
            polyline1[0] = new Array(polygon1[p][0], polygon1[p][1]);
            polyline1[1] = new Array(polygon1[p-1][0], polygon1[p-1][1]);

            for(let q=polygon2_cnt; q>=0; q--){
                if(q-1 >= 0){
                    //꼭지점을 이어서 선형으로 변경한다.
                    let polyline2 = new Array();
                    polyline2[0] = new Array(polygon2[q][0], polygon2[q][1]);
                    polyline2[1] = new Array(polygon2[q-1][0], polygon2[q-1][1]);


                    //선과 선이 동일할때 가차없이 겹쳐짐으로 처리
                    if(polyline1.toString() === polyline2.toString()){
                        return true;
                    }

                    //선과 선의 교차점 계산하기

                    let under = (polyline2[1][1] - polyline2[0][1]) * (polyline1[1][0] - polyline1[0][0]) - (polyline2[1][0] - polyline2[0][0]) * (polyline1[1][1] - polyline1[0][1]);
                    if(under == 0){
                        //동일한 선상일 때는 겹쳐짐으로 처리
                        return true;
                    }

                    let t = (polyline2[1][0] - polyline2[0][0]) * (polyline1[0][1] - polyline2[0][1]) - (polyline2[1][1] - polyline2[0][1]) * (polyline1[0][0] - polyline2[0][0]);
                    let s = (polyline1[1][0] - polyline1[0][0]) * (polyline1[0][1] - polyline2[0][1]) - (polyline1[1][1] - polyline1[0][1]) * (polyline1[0][0] - polyline2[0][0]);
                    if(t == 0){
                        //근사치가 무조건 0으로 나옴
                        continue;
                    }
                    if(s == 0){
                        //근사치가 무조건 0으로 나옴
                        continue;
                    }

                    //근사치 계산
                    let t_under = t / under;
                    let s_under = s / under;

                    if(t_under <= 0 || t_under > 1 || s_under <= 0 || s_under > 1){
                        //under를 나눈값이 0~0.99999999... 의 근사치라면 겹쳐져 있지 않다.
                        continue;
                    }

                    //겹쳐짐
                    return true;

                }
            }
        }
    }

    //그외 2개의 폴리곤은 서로 겹쳐지지 않는다.
    return false;

};

폴리곤 좌표와 검색할 좌표를 비교하여 해당 좌표가 폴리곤안에 들어와있는지 확인하는 PHP & Javascript함수 (point-in-polygon 알고리즘)

번개애비 — Mon, 26 Dec 2022 19:35:47 +0900

다각형의 폴리곤에서 좌표가 폴리곤안에 들어가 있는지 아닌지 판단한다.

섹터를 나누는 기능을 개발하기 위해서는 섹터의 영역인 폴리곤과 좌표계를 비교하는 개발소요가 있었다.

예를 들면 이것 처럼....

기본적으로 Tmap이나 Naver Map에서는 설정한 폴리곤영역에서 사전에 맵에 띄워둔 마커가 폴리곤에 포함되어있는지 확인하는 API가 존재했지만,이 과정은 언제까지나 매번 API를 통해 호출해야되는 부담이 있었고,

마커가 수천개가 되는 상황에서는 조금더 섹시한 방법을 찾기로 했다.

방법은 크게 두가지가 있었다.

1. 데이터베이스를 활용하는 방법

MySQL에 Polygon형태의 데이터를 저장해두고

MBRContains 연산자를 이용하여 SELECT를 쿼리하는 방법이다.

2. 데이터베이스를 활용하지 않는 방법

데이터베이스의 좌표계를 불러온뒤, 자료구조로 만들어두고 애플리케이션(PHP따위등)에서 처리하는 방법이다.

우리 서비스의 경우, 수천대의 차량에 대한 위도/경도 데이터가 매 Second마다 Insert되고,

다른 연계서비스에서도 데이터베이스를 참조하느라 데이터베이스 부하가 상당했다.

무엇보다 회사내에서 사용하고 있는 SELECT 쿼리를 처리하는 DBMS ORM에 대해

MBRContains 연산자 기능이 추가되었어야 했다.

결국 후자의 방법으로 데이터베이스의 부하를 최소화하면서 문제를 해결하게 되었다.

대충 이런식으로 사용할 수 있다.

이렇게 구현하는 이유는 서비스 규모가 커지면서 가급적 SQL으로 모든것을 처리하기 보다는

참조할 데이터의 특정영역만 가져온상태에서 프로그램 로직단에서

처리하는게 경험상 더 빠르게 처리되고 부하량도 상대적으로 적었다.

(데이터베이스에게 어떤 연산을 시키면 안된다.... ㅠㅠ)

무엇보다 단순 로직만으로 개발하면 JS를 사용하는 Front-end에서도 처리할 수 있음!

폴리곤에 대한 좌표계 검증에 대한 로직은 앞으로도 많이 사용되어야 함으로

별도의 함수로 만들어두었고, 사용방법은 아래와 같다.

(기본적인 배열에 대한 검증과 데이터형 검사도 함수기능내 포함시켜두었음.)

//폴리곤 좌표계
$polygon_array =  array();
$polygon_array[0] = array('37.53552567043231', 126.95672035217325);
$polygon_array[1] = array('37.52790237570185', 126.9499397277836);
$polygon_array[2] = array(37.51714676004277, 126.96959495544473);
$polygon_array[4] = array(37.52980827243268, 126.99191093444864); //key 건너뜀
$polygon_array[5] = array(37.52980827243268, 126.99191093444864); //동일한 좌표
$polygon_array[6] = array(37.537295252413486, 126.96993827819864);
$polygon_array[7] = array(37.53552567043231, '126.95672035217325');

//검색할 대상의 좌표들
$points_array = array();
$points_array['가락시장역'] = array(37.493515041951, 127.118736639621);
$points_array['래미안용산'] = array(37.529489434399, 126.967329235710);
$points_array['겹침'] = array('37.51714676004277', 126.96959495544473);

//함수실행
$array = polygon_point_check($polygon_array, $points_array);
if(is_array($array)){
	//성공하면 무조건 배열이 나온다.
    print_r($array['inside']);
    echo '<br />';
    print_r($array['outside']);
}else{
	//실패하면 무조건 String이 반환된다.
    echo 'error : '.$array;
}

위 코드대로라면, 결과는 다음과 같이 나온다.

inside, outside 배열로 구분할 수 있음.

$polygon_array = array();
$polygon_array[] = array("37.530676119986", "126.96689128876");
$polygon_array[] = array("37.529961422735", "126.96521759033");
$polygon_array[] = array("37.528225700899", "126.96783542633");
$polygon_array[] = array("37.529518987671", "126.96946620941");
$polygon_array[] = array("37.530676119986", "126.96689128876");

$points_array = array();
$points_array['래미안용산더센트럴'] = array('37.529489434399','126.967329235710'); //래미안용산더센트럴 inside
$points_array['가락시장역'] = array(37.493515041951,127.118736639621); //가락시장역
$points_array['강동역1번출구'] = array(37.536967683151, 127.034701082600); //강동역1번출구
$points_array['경기대수원캠퍼스'] = array(37.303044086800,127.034701082600); //경기대수원캠퍼스

또다른 예시데이터.....

함수의 코드는 다음과 같다.

다른 사람들이 작성한 코드들도 많이 서칭해봤는데 객체로 구현되어 있었지만, 이정도 기능에 굳이(?) 객체로 해야할까라는 의구심이 들어 그냥 심플하게 함수로 작성했음. 복잡한 연산자나 PHP에서만 활용되는 내장함수를 사용하지 않았기 때문에 필요에 따라 JS, Go등과 같은 코드로 손쉽게 마이그레이션이 가능할것으로 보인다.

//입력값
//폴리곤 배열 : 폴리곤 영역에 대한 다차원 배열
//검색할 포인트 배열 : 검색할 좌표에 대한 다차원 리스트 배열
//겹침처리 여부 : true > 겹치면 포함 , false > 겹치면 비포함
function polygon_point_check($polygon_array, $points_array, $is_vertex = true){

    //예외처리
    if(!is_array($polygon_array) || !is_array($points_array)){
        return '폴리곤 혹은 좌표계 입력데이터가 배열이 아닙니다.';
    }

    //반환값을 사전에 정의한다.
    $output['inside'] = array();
    $output['outside'] = array();

    $polygon_array = array_unique($polygon_array, SORT_REGULAR); //중복 좌표 제거
    $polygon_array = array_values($polygon_array); //빈 키 삭제
    $polygon_array[] = $polygon_array[0]; //폴리곤이 닫혀야 됨으로 첫번째키가 마지막키로 강제 지정한다.

    //루프 바깥에 count를 달면 더 빠르다.
    $polygon_cnt = count($polygon_array);

    //겹침 계산
    foreach($points_array as $points_key => $points_xy){

        $points_key = (String)$points_key;

        //데이터검사
        if(!is_array($points_xy)){
            return $points_key.' 의 좌표가 배열이 아닙니다.';
        }
        if(count($points_xy) !== 2){
            return $points_key.' 의 좌표의 위도, 경도 배열이 잘못되었습니다.';
        }

        if(strpos($points_xy[0], '.') !== false){
            $points_xy[0] = floatval($points_xy[0]);
        }else{
            $points_xy[0] = intval($points_xy[0]);
        }
        if(strpos($points_xy[1], '.') !== false){
            $points_xy[1] = floatval($points_xy[1]);
        }else{
            $points_xy[1] = intval($points_xy[1]);
        }


        $intersections = 0; 
        for($p=0; $p<$polygon_cnt; $p++){

            //데이터 검사
            if(!is_array($polygon_array[$p])){
                return $p.' 번째 폴리곤 좌표가 배열이 아닙니다.';
            }
            if(count($polygon_array[$p]) !== 2){
                return $p.' 번째 폴리곤 좌표의 위도, 경도 배열이 잘못되었습니다.';
            }

            if(strpos($polygon_array[$p][0], '.') !== false){
                $polygon_array[$p][0] = floatval($polygon_array[$p][0]);
            }else{
                $polygon_array[$p][0] = intval($polygon_array[$p][0]);
            }
            if(strpos($polygon_array[$p][1], '.') !== false){
                $polygon_array[$p][1] = floatval($polygon_array[$p][1]);
            }else{
                $polygon_array[$p][1] = intval($polygon_array[$p][1]);
            }


            if($polygon_array[$p] === $points_xy){
                if($is_vertex){
                    //겹침허용일때
                    $output['inside'][$points_key] = $points_xy;
                }else{
                    //겹침비허용일때
                    $output['outside'][$points_key] = $points_xy;
                }
                continue;
            }

            if($p === 0){
                //첫번째 폴리곤배열은 이전과 비교할 데이터가 없음으로 넘어간다.
                continue;
            }

            if($polygon_array[$p-1][1] === $polygon_array[$p][1] &&
              $polygon_array[$p-1][1] === $points_xy[1] &&
               $points_xy[0] > min($polygon_array[$p-1][0], $polygon_array[$p][0]) &&
               $points_xy[0] < max($polygon_array[$p-1][0], $polygon_array[$p][0])
              ){
                if($is_vertex){
                    //겹침허용일때
                    $output['inside'][$points_key] = $points_xy;
                }else{
                    //겹침비허용일때
                    $output['outside'][$points_key] = $points_xy;
                }
                continue;
            }

            if($points_xy[1] > min($polygon_array[$p-1][1], $polygon_array[$p][1]) &&
              $points_xy[1] <= max($polygon_array[$p-1][1], $polygon_array[$p][1]) &&
               $points_xy[0] <= max($polygon_array[$p-1][0], $polygon_array[$p][0]) &&
               $polygon_array[$p-1][1] !== $polygon_array[$p][1]
              ){

                $xinters = ($points_xy[1] - $polygon_array[$p-1][1]) * 
                    ($polygon_array[$p][0] - $polygon_array[$p-1][0]) / 
                    ($polygon_array[$p][1] - $polygon_array[$p-1][1]) + $polygon_array[$p-1][0]; 

                if($xinters === $points_xy[0]){
                    if($is_vertex){
                        //겹침허용일때
                        $output['inside'][$points_key] = $points_xy;
                    }else{
                        //겹침비허용일때
                        $output['outside'][$points_key] = $points_xy;
                    }
                    continue;
                }

                if($polygon_array[$p-1][0] === $polygon_array[$p][0] || $points_xy[0] <= $xinters){
                    $intersections++; 
                }

            }


        }
        if($intersections % 2 !== 0){
            $output['inside'][$points_key] = $points_xy;
            continue;
        }else{
            $output['outside'][$points_key] = $points_xy;
            continue;
        }
    }

    //출력
    return $output;

}

Javascript 소스코드는 다음과 같다.

var polygon_array = new Array();
polygon_array[0] = new Array('37.53552567043231', 126.95672035217325);
polygon_array[1] = new Array('37.52790237570185', 126.9499397277836);
polygon_array[2] = new Array(37.51714676004277, 126.96959495544473);
polygon_array[4] = new Array(37.52980827243268, 126.99191093444864); //key 건너뜀
polygon_array[5] = new Array(37.52980827243268, 126.99191093444864); //동일한 좌표
polygon_array[6] = new Array(37.537295252413486, 126.96993827819864);
polygon_array[7] = new Array(37.53552567043231, '126.95672035217325');
console.log('검색대상폴리곤',polygon_array);

var points_array = new Array();
points_array['가락시장역'] = new Array(37.493515041951, 127.118736639621);
points_array['래미안용산'] = new Array(37.529489434399, 126.967329235710);
points_array['겹침'] = new Array('37.51714676004277', 126.96959495544473);
console.log('좌표배열',points_array);

console.log(polygon_point_check(polygon_array, points_array));



function polygon_point_check(polygon_array, points_array, is_vertex = true){

    //다차원배열에서의 중복된 데이터삭제하는 내장함수
    function array_unique(input_array){
        input_array = JSON.parse(JSON.stringify(input_array)); //json stringify는 빈배열을 null로 바꿔준다.
        input_array = input_array.filter((element, i) => element !== null && element !== undefined && element !== '' ); //빈키 삭제
        return [...new Set(input_array.join("|").split("|"))].map((v) => v.split(",")).map((v) => v.map((a) => +a)); //중복된 배열을 삭제한다.
    };

    //예외처리
    if(!Array.isArray(polygon_array) || !Array.isArray(points_array)){
        return '폴리곤 혹은 좌표계 입력데이터가 배열이 아닙니다.';
    }

    //반환값을 사전에 정의한다.
    let output = new Array();
    output['inside'] = new Array();
    output['outside'] = new Array();

    //중복배열 삭제 및 데이터형변환
    polygon_array = array_unique(polygon_array);
    polygon_array.push(polygon_array[0]);


    //루프 바깥에 count를 달면 더 빠르다.
    let polygon_cnt = polygon_array.length;

    for(let points_key in points_array){

        points_key = String(points_key);
        let points_xy = points_array[points_key];

        //데이터검사
        if(!Array.isArray(points_xy)){
            return points_key+' 의 좌표가 배열이 아닙니다.';
        }

        if(points_xy.length !== 2){
            return points_key+' 의 좌표의 위도, 경도 배열이 잘못되었습니다.';
        }


        if(String(points_xy[0]).indexOf('.') !== -1){
            points_xy[0] = parseFloat(points_xy[0]);
        }else{
            points_xy[0] = parseInt(points_xy[0]);
        }
        if(String(points_xy[1]).indexOf('.') !== -1){
            points_xy[1] = parseFloat(points_xy[1]);
        }else{
            points_xy[1] = parseInt(points_xy[1]);
        }

        let intersections = 0;
        for(let p=0; p<polygon_cnt; p++){

            //데이터검사
            if(!Array.isArray(polygon_array[p])){
                return p+' 번째 폴리곤 좌표가 배열이 아닙니다.';
            }
            if(polygon_array[p].length !== 2){
                return p+' 번째 폴리곤 좌표의 위도, 경도 배열이 잘못되었습니다.';
            }

            if(String(polygon_array[p][0]).indexOf('.') !== -1){
                polygon_array[p][0] = parseFloat(polygon_array[p][0]);
            }else{
                polygon_array[p][0] = parseInt(polygon_array[p][0]);
            }
            if(String(polygon_array[p][1]).indexOf('.') !== -1){
                polygon_array[p][1] = parseFloat(polygon_array[p][1]);
            }else{
                polygon_array[p][1] = parseInt(polygon_array[p][1]);
            }

            if(polygon_array[p].toString() === points_xy.toString()){
                if(is_vertex){
                    //겹침허용일때
                    output['inside'][points_key] = points_xy;
                }else{
                    //겹침비허용일때
                    output['outside'][points_key] = points_xy;
                }
                continue;
            }

            if(p === 0){
                //첫번째 폴리곤배열은 이전과 비교할 데이터가 없음으로 넘어간다.
                continue;
            }

            if(polygon_array[p-1][1] === polygon_array[p][1] &&
              polygon_array[p-1][1] === points_xy[1] &&
               points_xy[0] > Math.min(polygon_array[p-1][0], polygon_array[p][0]) &&
               points_xy[0] < Math.max(polygon_array[p-1][0], polygon_array[p][0])
              ){
                if(is_vertex){
                    //겹침허용일때
                    output['inside'][points_key] = points_xy;
                }else{
                    //겹침비허용일때
                    output['outside'][points_key] = points_xy;
                }
                continue;
            }


            if(points_xy[1] > Math.min(polygon_array[p-1][1], polygon_array[p][1]) &&
              points_xy[1] <= Math.max(polygon_array[p-1][1], polygon_array[p][1]) &&
               points_xy[0] <= Math.max(polygon_array[p-1][0], polygon_array[p][0]) &&
               polygon_array[p-1][1] !== polygon_array[p][1]
              ){

                let xinters = (points_xy[1] - polygon_array[p-1][1]) * 
                    (polygon_array[p][0] - polygon_array[p-1][0]) / 
                    (polygon_array[p][1] - polygon_array[p-1][1]) + polygon_array[p-1][0]; 

                if(xinters === points_xy[0]){
                    if(is_vertex){
                        //겹침허용일때
                        output['inside'][points_key] = points_xy;
                    }else{
                        //겹침비허용일때
                        output['outside'][points_key] = points_xy;
                    }
                    continue;
                }

                if(polygon_array[p-1][0] === polygon_array[p][0] || points_xy[0] <= xinters){
                    intersections++; 
                }

            }


        }

        if(intersections % 2 !== 0){
            output['inside'][points_key] = points_xy;
            continue;
        }else{
            output['outside'][points_key] = points_xy;
            continue;
        }

    }

    return output;

};

CentOS 7.x Minimal에서 intel I219 랜카드 인식 불가 시 설치방법

번개애비 — Tue, 15 Nov 2022 19:13:28 +0900

CentOS 7.x 를 설치하고 ping 8.8.8.8을 실행하니 ping이 안찍힌다.

ifconfig를 해보면 Loop back IP가 나오는것을 봐선 네트워크 연결이 잘못됬거나 이더넷 어댑터가 로드되지 않은것이 분명함.

sudo lshw -C network

이 명령어를 입력하여 현재 시스템의 이더넷 랜카드의 칩셋정보를 확인한다.

확인한결과 intel I219-V 칩셋이었다.

아래 압축파일을 다운로드 받아 별도로 USB에 담아서 설치했음.

e1000e-3.8.4.tar.gz

0.30MB

cd /tmp
mkdir /tmp/usb

//USB장치정보를 확인하고 마운트한다.
fdisk -l

//마운트
mount -t vfat /dev/sdb1 /tmp/usb

이 명령어는 USB를 시스템에 연결하고 USB를 마운트하는 명령어이다.

cd /tmp/usb
tar xvfz e1000e-3.8.4.tar.gz
cd e1000e-3.8.4/src
sudo make install
sudo modprobe e1000e

압축을 풀고 드라이버를 설치한다.

ping 8.8.8.8 을 찍어보고 핑이 안찍히면 reboot 한번 해주면 된다.

끝!!!!

ERP, 관리자 화면등에서 사용하면 좋은 웹 라이브러리

번개애비 — Thu, 7 Jul 2022 16:21:42 +0900

웹서비스를 통해 제공되는 ERP화면이나 관리자패널등에서는

하나의 화면에 굉장히 다양한 정보를 제공해야되고, 다양한 데이터수정이 이뤄진다.

다음과 같은 예시....

ERP는 하나의 화면에서 다양한 정보가 보여지고 컨트롤된다.

(출처 : [팔피엠 웹ERP/MES] https://blog.8pmbiz.com/33)

하나의 화면에서 다양한 정보를 수정하기 도울수 있는 웹 라이브러리를 소개한다.

검색이 가능한 multiple Select 라이브러리

단일선택을 위한 Select뿐만 아니라 다중선택이 지원되는 Multiple을 지원하고,

대량의 데이터를 Select를 통해 지원하기 위해 페이징방식의 Select를 지원해주는 라이브러리이다.

주요특징으로는

<input/> 태그만으로 이용
검색기능 지원
무한스크롤방식의 페이징 지원
호출-응답 커스텀 가능
사용자 선택에 따른 콜백 작성가능
사전선택 값 설정가능
키보드입력 지연시간 설정가능
키보드입력 정규식조건 설정가능

검색과 관련된 UI를 구성하거나, 테이블내의 Select를 구성해야하는 곳에서 사용할 수 있다.

버튼을 통해 수정사항을 반영 VS 화면에서 즉시 수정사항을 반영

Select 자체에서 Callback을 통해 선택 즉시 비동기로 데이터를 수정할 수 있음으로,

간단한 데이터의 경우 불필요한 페이지이동을 최소화할 수 있는 장점이 있다.

장점에 따른 효과로는....

추가화면에 따른 UI구성소요 줄어듬, 페이지요청에 따른 서버의 불필요한 부담감소등이 있다.

데모 : https://git.coco.sqs.kr/cocoAjaxMultiSelect/example/example-fetch-multi.html

깃허브 : https://github.com/burndogfather/cocoAjaxMultiSelect

GitHub - burndogfather/cocoAjaxMultiSelect: Ajax, xhr, fetch등을 이용하여 다중선택창을 만들수 있는 라이브러

Ajax, xhr, fetch등을 이용하여 다중선택창을 만들수 있는 라이브러리입니다. It is a library where you can make multiple selection windows using Ajax, xhr, fetch, etc. - GitHub - burndogfather/cocoAjaxMultiSelect: Ajax, xhr, f...

github.com

모달처럼 사용할 수 있는 바텀시트 라이브러리

앱화면에서 종종볼수 있는 하단에서 올라오는 모달창이다.

하나의 화면에서 추가적인 다른정보를 보여주기위한 화면으로 구성할때 요긴하게 사용할 수 있다.

출처 : https://yozm.wishket.com/magazine/detail/1272/

이 라이브러리는 반응형UI를 지원하기 때문에

모바일뿐만 아니라 PC화면에서도 손쉽게 모달화면을 구성할 수 있는 라이브러리이다.

주요특징으로는

바닐라 JS로 작성되어 있어 빠르고 jQuery따위가 불필요하다.
라이브러리 자체에서 반응형 UI를 제공한다.
바텀시트의 애니메이션이 CSS based이기 때문에 Javascript방식의 애니메이션보다 빠르게 처리된다.
show(), showmax(), hide(), sethtml(), setcss(), setjs(), gethtml() 등과 같은 여러가지 요긴한 내장함수를 지원한다.
Ajax등을 활용하여 화면을 비동기적으로 서빙할 수 있다.

이 라이브러리는 위의 MultiSelect 보다 조금더 많은 정보를 수정하기 위한

추가적인 페이지로 활용할 수 있다.

자식창의 이벤트제어 VS 부모창에서 모든 이벤트제어

데모 : https://git.coco.sqs.kr/cocoBottomSheetJS/example/

깃허브 : https://github.com/burndogfather/cocoBottomSheetJS

GitHub - burndogfather/cocoBottomSheetJS: iOS의 바텀시트를 웹에서 구현할 수 있습니다. Similar to the bottom she

iOS의 바텀시트를 웹에서 구현할 수 있습니다. Similar to the bottom sheet of iOS, it can be implemented with JavaScript - GitHub - burndogfather/cocoBottomSheetJS: iOS의 바텀시트를 웹에서 구현할 수 있습니다. Similar to t

github.com

개발서버에서 파일저장 시 git으로 자동 커밋하기

번개애비 — Thu, 23 Jun 2022 20:35:21 +0900

로컬에서 git을 사용하고 있는데 굉장히 귀찮은 일이 많아서

개발서버에서 파일저장 시 github으로 자동 커밋하는 기능을 만들었고, 이 기능을 공유한다.

컴포넌트화된 라이브러리들을 중간중간 Public git으로 커밋해주고,

CDN을 통해 메인프레임웤에 연동하는 개발위주로 진행하고 있다.

AS-IS

단위기능수정 -> 컴포넌트 수정사항발생 -> 로컬에서 개발 및 테스트 -> git커밋 -> CDN으로 실서버에 배포

컴포넌트 수정사항은 사실 잦은 일은 아니였지만, 매번 로컬에서 개발하고 테스트하고 git에 배포하고 CDN으로 실서버에 배포하는 과정자체가 굉장히 수고스러웠다. 무엇보다 로컬환경에서 개발과 테스트했을때와 실서버에서 배포되었을때와의 환경차이(?)로 인해 어려움이 많았고, 이러한 환경차이를 최소화하고 git커밋하는 행위를 최소화하기 위해 다음과 같은 환경으로 변경했다.

TO-BE

단위기능수정 -> 컴포넌트 수정사항발생 -> 개발서버에서 개발/테스트/git커밋 -> CDN으로 실서버에 배포

참고로 이러한 우리회사의 경우 실서비스환경에서 신규기능을 지속적으로 개발하는 환경이기 때문에 git 커밋을 자동화해도 큰 무리가 없었다. 하지만, 정말 미션크리티컬한 서비스에서는 git을 자동으로 커밋하는 행위는 좀 생각할 필요가 있지 않을까 싶음. ㅎㅎㅎ

먼저 실서버와 유사한 환경을 조성할 수 있는 개발서버가 필요로 함.

개발서버를 구축해두니 좋은점은 개인적으로 호작질할 코드들도 서비스할 수 있고,

무엇보다 항상 맥북을 들고 다녀도 항시 코드가 저장되어 있으니, 어디서든 / 아이패드와 같은 기기에서도 즉시 개발이 가능했음.

[개발서버 사양]

OCPU : 1개

RAM : 1GB

Volume : 100GB

OS : CentOS 7

개발서버는 돈주고 써도 되는데,

마침 오라클 클라우드 프리티어라는것을 발견하여 평생 무료 서버를 구축할 수 있었다.

무료로 제공되는 서버가 총 2대까지 가능하기 때문에 한대는 nginx, php, python, go등을 설치했고, 나머지 한대는 mariaDB를 설치했다.

https://www.oracle.com/kr/cloud/free/

먼저 git을 설치하고 설정한다.

yum install git

git config --global user.name "아이디"
git config --global user.email "이메일"
git config --global color.ui auto
git config --global alias.st status
git config -l

매번 git personal access token을 묻는게 귀찮기도하고,

crontab으로 쉘을 주기적으로 돌릴예정이기 때문에 이 옵션을 넣어준다.

(첫번째 git push에서만 token로그인을 해주면 된다.)

git config --global credential.helper store

적절한 위치에 저장소공간을 만들어주고 처음 clone 해준다.

(디렉토리와 깃저장소 URL은 적절히 변경해야함)

(디렉토리 경로를 보면 유추할수 있지만, 깃 저장소에 nginx 가상호스트를 연결해두었다. 바로 개발하면서 코드저장 시 자동으로 커밋을 올릴수 있음)

mkdir /www/git.coco.sqs.kr
cd /www/git.coco.sqs.kr
git remote add origin https://github.com/burndogfather/cocoAjaxMultiSelect.git
git clone https://github.com/burndogfather/cocoAjaxMultiSelect.git

아래 스크립트를 작성하여 저장한다.

(경로는 mkdir 했던 경로로 변경해야 한다.)

vi git_update.sh

#!/bin/bash
cd /www/git.coco.sqs.kr/cocoAjaxMultiSelect
sleep 1
git add *
git add -u .
sleep 2
git commit -m "$(date "+%Y-%m-%d %H:%M:%S") 업데이트"\!\!\!
git push
sleep 5

:wq

여러개의 프로젝트가 있다면 이런식으로 작성한다.

순서대로 나열해야 제대로 push가 가능하다.

vi git_update.sh

#!/bin/bash
cd /www/git.coco.sqs.kr/cocoAjaxMultiSelect
sleep 1
git add *
git add -u .
sleep 2
git commit -m "$(date "+%Y-%m-%d %H:%M:%S") 업데이트"\!\!\!
git push
sleep 5

cd /www/git.coco.sqs.kr/test
sleep 1
git add *
git add -u .
sleep 2
git commit -m "$(date "+%Y-%m-%d %H:%M:%S") 업데이트"\!\!\!
git push
sleep 5

:wq

생성한 git_update.sh의 권한을 수정하고 한번은 실행한다.

(username과 personal access token을 한번 입력해줘야함.)

chmod 755 /www/git.coco.sqs.kr/git_updater.sh
./git_updater.sh

Username for : 아이디입력

Password for : personal access token을 입력한다.

(personal access token 발급받기 : https://github.com/settings/tokens )

credential.helper store 옵션을 주었음으로 처음 한번만 묻는다.

크론탭에 매 1분마다 실행되게끔 지정한 뒤,

크론탭을 실행시켜준다.

crontab -e

* * * * * /www/git.coco.sqs.kr/git_updater.sh

:wq
service crond restart

이제 sftp등을 이용하여 개발서버에 코드를 변경하면, 이렇게 자동으로 커밋된다!

git push할때 커밋의 내용이 중요하다면, 별도 커밋을 시켜줘야하는 단점이 있지만, 개발환경에서 개발내용을 즉시에 커밋됨으로

저장소에 항상최신화된 데이터만 서빙이 가능한 장점이 있다.

단순무식하게 무의미한 깃허브 잔디심기보다 효율적인 코드관리가 가능하다.

최종적인 개발 ~ 배포과정

자동 커밋을 썼을때 장단점

- 라이브러리나 컴포넌트단위의 개발업무를 진행할 경우 최적으로 사용이 가능함.

- 개발서버에서 원격코드를 작성함으로 개발환경이 변경되어도 어디든 작업가능함.

- Git저장소와 개발서버의 도메인이 연결되어 즉시 테스트가 가능하고 테스트와 동시에 자동으로 커밋됨.

- Github에 일시적으로 잘못된 코드가 올라가도 git을 통해 무료로 사용할 수 있는 jsdelivr CDN은 캐싱시간이 존재하기 때문에 잘못된 코드로 인한 실서비스에서의 오류발생가능성은 실제로 거의 존재하지 않음. (빠르게 고친다면....)

- git 명령어를 점점 까먹게 됨.

PHP Fiber를 이용하여 병렬연산하기 (예제포함)

번개애비 — Wed, 15 Jun 2022 22:07:23 +0900

PHP8 이 새롭게 나오면서 JIT이라는 개념으로

기존 PHP 7 대비 성능이 크게 향상되었다고 주장했었으나,

사실, 큰 성능 향상을 기대하기 힘들었다.

(슬그머니 올려두었던 나머지 발 마저도 떼야되나...)

프레임워크에 동일한 성능의 클라우드에 PHP 8.1 과 PHP 8 을 올려두고 여러번 테스트했지만,

사실 상 유의미한 성능변화폭이 없는것도 사실이다. (기대말라... )

22%의 성능향상이 있다고 하는데, 솔직히 PHP의 자체성능보다 TTFB와 같은 네트워크 반응속도가 더 크게 차이가 나는게 현실....

그리고, JIT을 Opcache와 활성화해두면 컴파일 캐싱을 위해

가끔 엄청나게 속도가 느려지는 현상이 발생되는 문제점도 존재함.

(참고로 서버셋팅이 잘못될리 없음 ㅋㅋ)

(PHP JIT이 드디어 나왔다고 환호했던 예전의 나를 반성하게 만들어버림....)

작년에 PHP 8.1 이 새롭게 나오면서 새로운 기능을 이것 저것 맛보고 있는데,

그러던중, PHP 8.1 에서부터 Fiber(광섬유??) 라는 새로운 비동기연산? 을 지원하는 기능이 추가된 것을 발견했다.

참고로 PHP에서 비동기 혹은 병렬방식의 연산을 위해서는....

1. CURL을 이용한다. (완벽한 비동기 구현안됨)

2. pthead를 이용한다. (업데이트 중단 / FPM, FastCGI와 같은 NTS모드에서 작동불가능)

3. parallel를 이용한다. (FPM, FastCGI와 같은 NTS모드에서 작동불가능)

.....

와 같은 야매스러운 방법들이 있었는데,

이번에 새롭게 선보인 Fiber는 그나마 비동기를 제대로 활용할 수 있는 기능이었다.

PHP Fiber를 간단하게 테스트를 해보고 결과를 공유한다.

다른사람들은 블록킹 I/O를 테스트하기 위한 HTTP파싱이나 MySQL 쿼리 같은걸 주로 사용하는것 같은데,

나는 시간관계상 무식하게 2천만번의 거듭제곱 연산으로 대체한다.

기존의 1천만번을 2번 순차적으로 거듭제곱을 연산하는 코드

function get_time(){
	$t = explode(' ',microtime()); 
	return (float)$t[0]+(float)$t[1]; 
}
	
$start = get_time(); // 속도 측정 시작
	
for($i=0;$i<10000000;$i++) {
	$a = pow($i, 20);
}
for($i=0;$i<10000000;$i++) {
	$a = pow($i, 20);
}
	
$end = get_time(); // 속도 측정 끝
$time = $end - $start;
echo number_format($time,6);

Fiber를 활용하여 1천만번을 2번 비동기로 거듭제곱을 연산하는 코드

function get_time(){
	$t = explode(' ',microtime()); 
	return (float)$t[0]+(float)$t[1]; 
}

$start = get_time(); // 속도 측정 시작
	
$fiber = new Fiber(function (){
	for($i=0;$i<10000000;$i++) {
		$a = pow($i, 20);
	}
	Fiber::suspend($a);

	$anotherFiber = new Fiber(function(){
		for($i=0;$i<10000000;$i++) {
			$a = pow($i, 20);
		}
		Fiber::suspend($a);
	});
		
	$anotherFiber->start();
});
	
$fiber->start();
	
$end = get_time(); // 속도 측정 끝
$time = $end - $start;
echo number_format($time,6);

결과는 어땠을까?

왼쪽 : Fiber / 오른쪽 : 기존의 순차방식

재미있는 결과가 나왔다.

다수의 테이블에서 비동기로 데이터를 가져오거나,

여러 사이트를 함께 파싱하거나 할때 유용하게 사용할 듯한데,

보통 그런경우는 PHP를 사용하지 않는것이 함정.. ㅋㅋㅋㅋ

간단한 예제로 Fiber를 활용하는 방법을 정리해봤다.

$fiber = new Fiber(function(): void {
	/***********
	연산코드 블라블라
	************/
	//Fiber 내부에서 생성한 데이터를 Fiber 외부로 전송
	Fiber::suspend($연산결과변수);
});

//Fiber 동작시작, $연산결과변수가 $output으로 복사됨
$output = $fiber->start();

//Fiber상태가 완료될때까지 반복문
while(!$fiber->isTerminated()){
	//Fiber 실행을 재개
	$fiber->resume();
}

Fiber 내부에 변수를 전달하는 방법들은 다음과 같다.

본인이 각자 편한 방식으로 쓰면 될듯...

$fiber = new Fiber(function($변수명): void {

});

$fiber = new Fiber(function (){
	global $변수명
});

$fiber = new Fiber(function() use ($변수명){

});

또다른 예제....

CURL http code를 병렬로 반환하기

<?php
	declare(ticks=1);
	class Async{
		protected static $names = [];
		protected static $fibers = [];
		protected static $params = [];
		public static function register(string|int $name, callable $callback, array $params){
			self::$names[] = $name;
			self::$fibers[] = new Fiber($callback);
			self::$params[] = $params;
		}
		public static function run(){
			$output = [];
			while(self::$fibers){
				foreach (self::$fibers as $i => $fiber) {
					try{
						if(!$fiber->isStarted()){
							register_tick_function('Async::scheduler');
							$fiber->start(...self::$params[$i]);
						}elseif($fiber->isTerminated()){
							$output[self::$names[$i]] = $fiber->getReturn();
							unset(self::$fibers[$i]);
						}elseif($fiber->isSuspended()){
							$fiber->resume();
						}
					}catch(Throwable $e){
						$output[self::$names[$i]] = $e;
					}
				}
			}
			return $output;
		}
		public static function scheduler (){
			if(Fiber::getCurrent() === null){
				return;
			}
			if(count(self::$fibers) > 1){
				try {
					Fiber::suspend();
				}
				catch (Exception $ex) {
					echo '[Asyc ERROR!]'.$ex->getMessage();
				}
			}
		}
	}
	
	//CURL HTTP CODE반환 함수
	function curltest($url){
		$ch = curl_init();
		curl_setopt($ch, CURLOPT_URL, $url);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
		curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
		curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
		
		$response = curl_exec($ch);
		$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
		curl_close($ch);
		return $httpcode;
	}
	
	//속도측정용
	function get_time(){
		$t = explode(' ',microtime()); 
		return (float)$t[0]+(float)$t[1]; 
	}
	
	unset($target);
	$target['naver'] = 'https://www.naver.com';
	$target['google'] = 'https://www.google.com';
	$target['kakao'] = 'https://www.kakao.com';
	$target['burndogfather'] = 'https://www.burndogfather.com';
	$target['zum'] = 'https://zum.com/';
	$target['daum'] = 'https://www.daum.net/';
	$target['uptimerobot'] = 'https://uptimerobot.com/';
	$target['accessibility'] = 'https://accessibility.kr/';
	$target['php'] = 'https://www.php.net';
	print_r($target);
	echo '<br /><br />';
	
	
	$start = get_time(); // 속도 측정 시작
	
	$outputs = [];
	foreach($target as $key => $value) {
		$outputs[$key] = curltest($value);
	}
	print_r($outputs);
	
	$end = get_time(); // 속도 측정 끝
	$time = $end - $start;
	echo '<br />Loop: '. number_format($time,6);
	
	echo '<br /><br />';
	
	$start = get_time(); // 속도 측정 시작
	
	foreach($target as $key => $value) {
		Async::register($key, 'curltest', [$value]);
	}
	$outputs = Async::run();
	print_r($outputs);
	
	$end = get_time(); // 속도 측정 끝
	$time = $end - $start;
	echo '<br />Aysnc: '. number_format($time,6);
?>

실행결과 : Fiber가 일반 Loop에 비해 미세하게 빠르다...

결론 :)

상대적으로 시간이 필요로 하는 A로직과

그 사이 사이에 짧게 연산하는 다른 로직들이 함께 처리하는 목적에서는 Fiber가 약간의 성능향상을 가져다 줄수 있다.

다만, 서로 로직이 비슷한 처리시간이라면 그냥 Loop랑 성능면에서 큰 차이가 없음.

Hack lang에서는 aync를 지원해주는데,

왜 아직도 지원하지 않는것이냐! ㅠㅠ

왜 우리는 코딩테스트를 보게 되었는가, 그리고 신입개발자 대상 코딩테스트 문제(배경지식, 데이터베이스, CS코딩, 알고리즘 등)

번개애비 — Tue, 10 May 2022 09:20:23 +0900

이번에 회사에서 신입개발자(1년미만)를 채용하게 되었다.

내가 경험한 것처럼 다른 회사의 파트장이나 팀을 이끄는 리더에게 조금이나마 도움이 됬으면 하는 바램에 경험내용과 코딩테스트 문제를 공유하게 되었다.

이전까지는 면접과 배경지식과 관련된 간단한 문제만으로 개발자를 뽑았었는데, 그 결과 조금만 로직이 복잡해지면 굉장히 힘들게 일을 하는 경우가 많았고 그 빈도가 점차 증가하면서 주니어개발자 그 자신에 대한 자존감이 크게 하락하는 경우를 경험하게 되었다.

그 친구만의 문제라고 단정짓지 않고 Recruit 프로세스부터 OJT, Todo 관리, Capa 측정등 회사 내 개발조직의 모든 프로세스를 점검하면서 되돌아본 계기가 되었다.

선을 넘는 학원 광고문구. 데이터 사이언스가 몸 값이 이렇게 비싼데 이걸 90일만에 배울수 있다고? 취준생입장에서는 정말 혹 할만하다.

최근 개발자 몸 값이 크게 뛰면서 많은 사람들이 직업학교등을 통해 개발에 입문하는 경우가 많은데, 짧은 기한내 빠르게 개발언어를 습득하고 어디든 빠르게 취업을 시켜야하는 학원 특성상, 논리적인 사고나 알고리즘적인 접근에 취약할 수 밖에 없었던것 같다. (이건 데이터사이언티스트든 일반 CS개발이든 IT관련 직종에 최근 거품이 잔뜩 낀 트랜드인것 같다.)

이것은 마치,

의사면허 90일 완성, 야, 너두 할 수 있어!

이런 이야기인 셈이다.

⚠️ 이 글은 직업학교나 학원 출신 개발자를 폄하하는 글은 아니니 오해하지 않았으면 한다.
필자는 대학이전부터 실무를 했었고 일과 관련된 학과를 나왔지만, 어느 출신이고를 떠나서 IT분야에 새로운 사람들이 계속 유입되는것에 대해 시장의 성장에 있어서 긍정적으로 생각한다.
다만, 당부하고 싶은 말은 앞으로 IT업계에서 학원출신(?) 개발자는 미래에도 계속 "출신"에 대한 제약과 선입견이 따름으로 남들보다 몇배는 더 많은 스터디와 자기개발을 통해 이를 극복해야 할 것이다.

주니어개발자의 자존감이 크게 하락된 상태에서 시니어 입장에서 어떻게든 이끌고 나가는 것에 큰 한계를 맛보게 되었고,

무엇보다 코드를 단순히 짤수 있는 수준에서 무작정 개발에 투입하여 새로운 스파게티코드를 양산하는것을 그저 두고 볼 수 없게 되었다.

당장은 급박한 개발을 처리할 수 있을지 몰라도, 짧게는 1개월, 길게는 1년뒤의 서비스를 확장하거나 유지하는 관점에서는 엄청난 기술채무가 발생되는게 뻔했다. (아마 이런 문제 때문에 적어도 한국에서는 프레임워크에 크게 의존받는 JAVA Spring기반이 지속적인 주력언어가 되지 않을까 싶다.)

OJT를 조금더 효율적으로 하기위해 회사내부에서 사용하는 프레임워크부터 세부적인 모든 기능들에 대한 구체적인 기술문서와 각각의 코멘트등을 작성하였고, 윗선의 양해를 구하고 소스코드의 각종 스파게티들을 당장 리팩토링하여 바로잡았다.

(리팩토링보다는 정확히는 서비스를 아예 갈아엎은 경우가 많았다... ㅜ)

Capa를 좀더 명확하고 공정하게 측정하기 위해 Notion을 활용하여 개인별 Todo를 공유하게끔 변경하였다.

프레임워크의 구조에서부터 말단 Functional 코드까지 최대한 알아보기 편하게 개발자관점에서 최적화를 했고, 복잡한 인덱싱에 따른 쿼리최적화에 머리싸매지 않도록 모든 형태의 쿼리를 단순한 함수로 쿼리가 실행할 수 있도록 변경했다.

이외에 업무상의 어려움을 가감없이 피드백 받기위해 개발자들에게 지속적으로 접근(?)하거나 공통된 공감대를 형성하기 위해 꾸준히 행동하거나 대화를 시도하였다.

Recruit 과정에서 조금 번거롭더라도 간단한 배경지식부터 CS능력검증을 위한 테스트, 기본적인 알고리즘과 관련된 코딩테스트를 보완하게 되었고 다음과 같은 결과가 나왔다. (참고로 난이도나 변별력등은 회사마다 요구하는 조건이 달라 장담할 수 없으나 단순 노가다 코더가 아니라 적어도! 최소한! 개발자라고 한다면 이정도의 문제풀이는 가능해야 한다고 생각한다.)

개발 배경지식 관련 문제

1. 변수와 상수의 차이점을 설명해주세요 Explain the difference between a variable and a constant

//모범답안
변수 : 값이 변경되는 어떠한 값
상수 : 값이 변경되지 않는 어떠한 값

변수와 상수는 메모리상에 값을 저장한다. 메모리(RAM)상에 어떤 값을 저장하게 되면 
해당 공간에 우리가 선언한 변수나 상수의 이름을 메모리의 특정공간에 주소값을 부여하게 됩니다.
서버에서 실행 되는 언어(Java, Go등)들은 서버의 메모리를 사용하며, 
클라이언트에서 실행되는 언어(Javascript, C#등)들은 클라이언트의 메모리를 사용합니다.
변수와 상수를 구별하여 사용하는 이유는 개발자 관점에서 코드의 가독성과 편리성 때문에 사용하는 것이며,
상수로 선언한 값은 주석을 달거나 누가 설명하지 않더라도 코드 내부에서 갑자기 값이 변하지 않는다는 것을 알게 해줍니다.
변수로 선언한 값은 코드 내부에서 갑자기 값이 변화함으로 
어떠한 값을 임시로 저장하기 위한 메모리(RAM) 그 자체의 기능을 위해 사용합니다.

변수는 코드가 실행되면서 잠깐씩 저장되는 내용.
예를들면(루프의 카운터, 출력직전의 값, 사용자의 입력데이터등)과 같은 값을 "임시"저장하는곳에 사용됩니다.
개발언어마다 상이하나 연산이 모두 종료되면 자동으로 메모리에 할당된 변수 값이 자동으로 초기화되지만,
부족한 메모리 혹은 메모리의 누수가 발생되는 코드에서는 코드 중간중간에 변수 초기화를 통해 메모리를 그때마다 반환하는게 유리합니다.

상수는 미래, 환경, 사용자등에 따라 개발자의 코드수정이 있지 않는 한 바뀌지 않는 절대적인 내용.
예를들면(DB정보, 관리자계정정보, 환경설정)과 같은 값을 저장하는곳에서 사용하며, 이렇게 사용함으로써 발생되는 이득은
DB정보를 상수로 선언하고 Dev환경에서 상수값만 불러와 개발을 진행하다가 
개발이 모두 완료되어 Production환경으로 전환할때 
상수가 선언된 DB정보 하나만 변경하면 모두 바뀌기 때문에 손쉽게 모든 코드의 정보를 일괄적으로 수정이 가능합니다.

2. Javascript에서 var, let, const의 차이점을 설명해주세요 Explain the difference between var, let and const in Javascript

//모범답안
var, let, const 모두 메모리에 변수나 상수등을 저장하기 위한 선언문입니다.
var : 변수를 재선언, 재할당이 가능합니다.
let : 변수를 재할당할 수 있지만, 재선언이 불가능합니다. (즉, 호이스팅이 불가능)
const : 변수를 재선언, 재할당 모두 불가능하기 때문에 상수값으로써 활용합니다. (호이스팅도 당연히 불가능)

ES6이전까지는 Javascript에서는 변수를 선언할때 반드시 var를 이용해서만 선언이 가능했습니다.
하지만 코드중간에 개발자의 착오등의 이유로 재선언되지 말아야할 변수를 재선언으로 인한 버그가 발생되기도 하고,
무엇보다 var의 경우 초기값이 없으면 자동으로 undefined를 초기값으로 메모리를 할당해버립니다.
이러한 과정속에 메모리누수가 발생될 수 있기 때문에
 상황에 따라 적절하게 var, let, const를 활용하여 변수나 상수를 선언해야 합니다.

3. 변수를 선언할때 변수명에 한글이나 특수문자를 사용하지 않는 이유를 설명해주세요 Please explain why you do not use Korean characters or special characters for variable names when declaring variables

//모범답안
개발자관점 : 코드 가독성이 떨어짐, 매번 한/영키로 전환하는 어려움 발생
프로그램관점 : 변수할당시 할당되는 메모리의 용량이 조금더 필요로 함

변수명을 정하는 것은 영문이든 한글이든 특수문자든 무방하다고 생각합니다.
하지만, 많은 개발자들이 변수를 선언할 때 한글이든 특수문자든 사용하지 않는 이유는 다음과 같습니다.
통상적으로 변수명을 선언하기 위해 camelCase 라는 대문자 작성법을 사용하거나 
간단하게는 '_' 와 같은 문자로 복잡한 변수명을 구분하여 사용합니다.
개발자들이 통상적으로 이러한 작성법을 두루 사용한다는 이야기는 코드를 읽기 편하기 위함도 있고,
특히 한글이 아닌 다른 언어를 사용하는 개발자도 코드를 쉽게 볼 수 있기 때문입니다.
+, =, / ! 등과 같은 일부특수문자들은 언어에서 연산자로 처리되기 때문에 사용하지 못합니다.
변수를 선언할때 변수값을 메모리(RAM)에 저장하게 되는데 일반 영문으로 변수명을 선언할 때 대비
한글로 변수명을 선언할때 메모리의 사용량이 더 높을 수 밖에 없습니다.
다수의 접속자에 대해 지속적인 인터프리티 작업을 하는 서버쪽 언어에서는 접속자수에 따라 메모리 사용량이 비례합니다.
무엇보다 개발언어는 영어로 구성되어 있는데 만약 변수명을 한글로 써야한다면
매번 변수를 선언할때 마다 한/영 키를 눌러야하는 번거로움이 생길 것 같습니다.

4. Javascript 관점에서 function 혹은 class는 변수로 선언되어 사용할 수 있는지 선택해주세요 From a Javascript point of view, select whether a function or class is declared as a variable and can be used.

//모범답안
function 혹은 class는 변수다

Javascript 관점에서 function 혹은 class 는 변수가 맞습니다.
function test(){}; 은 var test = function(){}; 과 같습니다.
임의의 함수를 생성한 뒤 Chrome console에 함수명만 타이핑해보면 함수의 객체를 확인할 수 있습니다.

5. Client browser의 Request 방식중 post, get, put의 차이점을 설명해주세요 Please explain the difference between post, get, and put among client browser request methods

//모범답안
post : 생성할때 사용하는 method, body를 통해 피라메터가 전송
put : 전체수정할때 사용하는 method, body를 통해 피라메터가 전송
get : 읽을때 사용하는 method, url을 통해 피라메터가 전송

post, get, put은 HTTP 에서 RESTful API에서 사용하는 method입니다.
post는 CRUD에서 Create(생성)에 해당되는 기능과 매칭되는데 이처럼 어떠한 값을 생성할 사용됩니다.
get은 CRUD에서 Read(읽기)에 해당되는 기능과 매칭되고 게시판의 게시물을 읽거나 할때 사용됩니다.
put은 CRUD에서 Update(수정)에 해당되는 기능과 매칭되고 patch와 동일한 수정기능을 담당하지만, 
부분적으로 수정하는 patch와 달리 모든정보를 수정하기 위해 사용됩니다.
게시판을 예시로 들어 설명하자면,
게시판에 글을 작성하는 행위는 post, 게시물을 보는 행위는 get, 게시물을 수정하는 행위는 put이라고 설명할 수 있다.
다만, post와 put, 그리고 get과의 또 다른 차이점이 있는데
get은 URL자체로 데이터를 전송할 수 있는 반면, post와 put은 HTTP 패킷내 body를 통해 전송된다.
eg) https://www.naver.com/?test=1
전송되는 데이터의 특징으로 인해 로그인 기능과 같이 회원의 패스워드가 유출되지 않아야 되는 기능이나
첨부파일과 같이 데이터의 길이 긴 내용을 전송할때 get이 아닌 post방식을 사용한다.

6. Web의 비동기 통신에서 XMLHttpRequest과 fetch의 차이점에 대해 설명해주세요 Please explain the difference between XMLHttpRequest and fetch in asynchronous communication on the web

//모범답안
XMLHttpRequest : 전통적인 이벤트 통신기반, 브라우저간 기능불일치, 코드가 긴편
fetch : promise 기반, 브라우저에 내장되어 기능일치, 코드가 간편함, ES6 미지원 브라우저는 사용불가

비동기통신 이전에는 form 태그를 통해서 웹서버로 submit을 해야만 데이터전송이 가능했습니다.
기존의 form 태그로 데이터를 주고받을 경우 매번 새로운 페이지를 보내줬어야 함으로
불필요하게 많은 데이터가 올뿐만 아니라 페이지를 새로 받는 불편함이 있었습니다.
XHLHttpRequest와 fetch와 같은 비기통신은 서버에 요청하고 해당하는 내용만 받는 것임으로
대역폭의 낭비를 줄일 수 있고 필요한 부분만 요청할 수 있음으로 새로고침의 과정없이
서버와 클라이언트간 상호통신이 가능해졌습니다.
fetch 이전에는 XHLHttpRequest를 이용한 비동기 통신을 위해서는 그 과정이 매우복잡했으며,
이 때문에 jQuery에서 ajax() 라는 것을 만들어 손쉽게 사용할 수 있게 되었습니다.
안타깝게도 외부라이브러리를 사용하는 XMLHttpRequest는 브라우저마다 기능이 작동되는게 조금씩 불일치되었습니다.
ES6에서부터는 fetch가 나오면서 브라우저에 그 기능이 내장되게 되었으며, XHLHttpRequest보다
코드를 사용하는 과정자체가 손쉬웠다. 특히 fetch에서는 promise를 사용할 수 있음으로
페이지의 응답만 체크하는 종전의 XHLHttpRequest보다 비동기연산이 손쉽게 가능해졌습니다.
표준화된 규격을 브라우저에 내장했음으로 ES6이상을 지원하는 브라우저에서는 모두 동일한 기능으로 작동되는 장점이 있습니다.

7. 통상적인 반복문 (while, for, foreach, do while) 중에서 제일 빠른것을 선택해주세요 Choose the fastest one out of the usual (while, for, foreach, do while)

//모범답안
while >= for >>>> do while >>>> foreach
//for와 while 모두 정답으로 처리된 문제입니다.
//참고로 "통상적인" 단순 반복문에서의 속도를 묻는 문제입니다.

for : 반복횟수를 정확하게 명시하고 동작하는 반복문이며 OOP가 나오기전까지 가장 많이 사용한 반복문입니다.
while : 조건을 부여하여 조건이 만족될때까지 반복합니다. 제일 빠른 반복문이지만, 잘못된 코드로 인해 무한루프에 빠질 수 있습니다.
do while : for문과 while문이 병합된 형태이며, 손쉽게 사용할 수 있지만, for문과 while문에 비해 속도가 느린 반복문입니다.
foreach : OOP환경에서 굉장히 사용하기 좋은 반복문이며, while문과 같이 무한루프에 빠질염려가 없지만 제일 느린 반복문입니다.

8. 대부분의 프로그램 혹은 서비스에서 String형태의 문자열을 서버에서 Static 파일이 아닌 Database를 이용하여 서비스하는 이유를 설명해주세요 Please explain why most programs or services use Database instead of Static file for string type string

//모범답안
DB제어와 파일제어역시 실제로 서버에서 동일하게 파일로 저장되어 파일을 제어하지만,
DB제어의 경우 인덱싱이나 제어할 데이터가 메모리에 올라가 있는 상태임으로 더 빠르게 제어가 가능합니다.
특히 동시다발적인 데이터를 가공하는 과정에서 트랜잭션의 지원여부가 큰 차이를 보입니다.
이외에 Replcation등과 같은 부하분산을 고려할때 데이터간 동기화가 DB제어방식이 더 용이합니다.

9. 서비스가 대규모로 확장될수록 기업들이 Cloud Service를 사용하는 이유를 설명해주세요 Explain why companies use Cloud Services as services scale to a larger scale

//모범답안
보통의 환경에서 Cloud Service는 일반적인 호스팅비용 대비 높은 비용을 지불해야 하지만,
AutoScaling을 지원하기 때문에 비용을 효율적으로 사용할 수 있는 장점으로 인해 사용합니다.

예를 들면 평소에 100명 안밖의 방문자가 방문하는 웹서비스가 매일 특정시간대만 1억명 안밖의 방문자가 방문할 경우,
일반적인 호스팅에서는 1억명 안밖의 방문자가 방문할 것을 대비하여 그만큼의 비용을 지속적으로 지불해야하지만,
Cloud 환경에서는 시간대별, 방문자별로 VM을 자유자재로 늘리거나 줄일수 있기 때문에
방문자가 몰리는 환경에 처했을때만 그에 상응하는 비용을 지불할 수 있기 때문에 대규모서비스로 확장될수록 Cloud를 도입합니다.

데이터베이스 관련 문제

1. RDBMS에서 하나의 column의 String데이터를 조회할 때 가장 빠른 결과가 나오는 SQL방식을 선택해주세요 단, RDBMS는 MySQL과 MariaDB에 한정하며, 검색 대상이 되는 column의 String데이터는 "검색어 검색어 검색어"와 같이 띄어쓰기가 포함되어 있다. 해당 column은 fulltext 인덱싱이 걸려있지 않는다고 가정한다. Select the SQL method that produces the fastest result when querying string data for one column in RDBMS

However, RDBMS is limited to MySQL and MariaDB, and String data in the column to be searched includes spaces such as "search word search word search word". It is assumed that the column does not have fulltext indexing.

//모범답안
SELECT field FROM A_table WHERE field LIKE '%검색어%’ <- 실행 가능
SELECT field FROM A_table WHERE field in ('검색어') <- 검색결과 없음
SELECT field FROM A_table WHERE MATCH(field) AGAINST('검색어') <- #1191에러 (Can't find FULLTEXT index matching the column list)
SELECT field FROM A_table WHERE field LIKE '검색어’ <- 검색결과 없음
ELECT field FROM A_table WHERE field LIKE '검색어’ <- 검색결과 없음

2. 아래와 같은 DB테이블 user, session 에서 left join을 활용하여 department(분류)의 column값이 Partner 인 사용자의 token(토큰정보) column을 출력하는 SQL문을 완성해주세요 Using the left join in the DB table user and session as below, complete the SQL statement that outputs the token column of the user whose department value is a Partner. The first table name on the image is user and the second table name is session.

//모범답안
SELECT * 
FROM user 
LEFT JOIN session 
ON user.sid = session.sid 
WHERE user.department = 'Partner';

3. RDBMS에서 외래키(Foreign key) 설정을 CASCADE로 설정할 경우 부모테이블(Parent table)의 데이터가 삭제될 때, 자식테이블(Sub table)의 데이터는 어떻게 되는지 설명해주세요 If foreign key setting is set to CASCADE in RDBMS, please explain what happens to the data in the child table when the data in the parent table is deleted

//모범답안
자식테이블의 데이터가 삭제된다.

CASCADE(부모테이블에 종속) :	부모테이블의 데이터가 수정/삭제 시 자식테이블의 데이터도 함께 수정/삭제된다.	
RESTRICT(자식테이블에 종속) :	자식테이블의 데이터가 존재하면, 부모테이블을 수정/삭제할 수 없다.
NO ACTION(종속강제 X) :	부모테이블의 데이터가 수정/삭제해도 자식테이블은 별다른 Action을 하지 않는다.

4. 아래와 같은 DB테이블 station 에서 lat(위도), lon(경도) column을 활용하여 나의 위치와 가장 가까운 순으로 출력하는 SQL문을 완성해주세요 현재 나의 위치는 위도 : 37.51490471, 경도 : 126.98274432 라고 가정하고 SQL문을 완성해야 합니다 In the DB table station as below, please use lat (latitude) and lon (longitude) columns to complete the SQL sentences that are printed in the order closest to your location Assume that the current latitude: 37.51490471, longitude: 126.98274432 and complete the SQL statement

//모범답안
SELECT * 
FROM station 
ORDER BY POW(lat - 37.51490471, 2) + POW(lon - 126.98274432, 2);

5. RDBMS에서 1억개의 row를 갖고 있는 DB테이블과 10개 미만의 row를 갖고 있는 DB테이블을 병합하여 Web Client에게 가장 빠르게 서비스하는 방법을 선택해주세요 단, 2개의 DB테이블은 RDBMS를 통해 외래키로 설정되어있지 않으며, 별도의 인덱싱이 설정되지 않은 조건이다. 2개의 DB테이블은 논리적인 방법으로만 연결되어 있으며, 10개 미만의 row를 갖는 DB테이블의 특정값에 해당되는 데이터만 보여주면 된다. Please select the fastest way to serve the Web Client by merging the DB table with 100 million rows and the DB table with less than 10 rows in RDBMS However, the two DB tables are not set as foreign keys through RDBMS, and separate indexing is not set. The two DB tables are connected only in a logical way, and only data corresponding to a specific value of the DB table with less than 10 rows need to be displayed.

- JOIN을 통해 한 번의 쿼리 후, 프로그램 코드의 반복문을 통해 쿼리결과를 서비스한다. After one query through JOIN, the query result is serviced through a repetitive statement of the program code.

- 1억개의 row를 갖는 DB테이블을 쿼리한 뒤, 프로그램 코드의 반복문을 통해 10개미만의 row를 갖는 DB테이블을 서브쿼리하여 서비스한다. After querying the DB table with 100 million rows, the DB table with less than 10 rows is subquerated and serviced through the repetition statement of the program code.

- 10개 미만의 row를 갖는 DB테이블을 쿼리한 뒤, 프로그램 코드의 반복문을 통해 1억개의 row를 갖는 DB테이블을 서브쿼리하여 서비스한다. After querying the DB table with less than 10 rows, the DB table with 100 million rows is subquerated and serviced through an iterative statement of the program code.

- 1억개의 row를 갖는 DB테이블과 10개 미만의 row를 갖는 DB테이블을 쿼리한 뒤, 프로그램 코드의 반복문을 통해 두 쿼리결과를 서비스한다. After querying a DB table with 100 million rows and a DB table with less than 10 rows, the two query results are serviced through repetitive statements of the program code.

//모범답안
1억개의 row를 갖는 DB테이블과 10개 미만의 row를 갖는 DB테이블을 쿼리한 뒤, 프로그램 코드의 반복문을 통해 두 쿼리결과를 서비스한다. 

JOIN을 통해 한 번의 쿼리 후, 프로그램 코드의 반복문을 통해 쿼리결과를 서비스한다. 
-> 1억개 * 10개의 데이터를 JOIN하여 10개의 데이터중 특정 값만 출력되는 상황에서는 DB에 모든 연산을 넘겨주는 것은 1번의 반복문을 사용하지만 실제로는 느린 구현방법입니다.
1억개의 row를 갖는 DB테이블을 쿼리한 뒤, 프로그램 코드의 반복문을 통해 10개미만의 row를 갖는 DB테이블을 서브쿼리하여 서비스한다. 
-> 가장 느리게 구현하는 과정입니다. 1차 반복문에서 10억개가 반복되며 2차 반복문에서 10개씩 추가로 쿼리를 질의해야합니다.
10개 미만의 row를 갖는 DB테이블을 쿼리한 뒤, 프로그램 코드의 반복문을 통해 1억개의 row를 갖는 DB테이블을 서브쿼리하여 서비스한다. 
-> 1차 반복문에서 10개가 반복되며, 2차 반복문에서 1억개씩 추가로 쿼리를 질의해야 합니다.
1억개의 row를 갖는 DB테이블과 10개 미만의 row를 갖는 DB테이블을 쿼리한 뒤, 프로그램 코드의 반복문을 통해 두 쿼리결과를 서비스한다.
-> 10개 DB테이블중에서 특정값에 해당되는 값만 찾은뒤 1억개의 DB테이블에 쿼리만 하기 때문에 1번의 반복문만으로 가장 빠른 결과를 가져옵니다.

CS코딩 및 알고리즘 관련 문제

1. whatisme 함수가 하는 역할을 설명해주세요 Describe the role of the whatisme function

n 이라는 숫자값을 주어졌을때 x의 길이만큼 숫자값 앞에 0을 붙이는 기능을 하는 함수입니다.
이런 함수를 통해 시간정보를 손쉽게 변환할 수 있습니다.
eg) 5월 -> 05월, 7시 -> 07시 등

let test = 5;
let output;
output = whatisme(test, 2);
console.log(output);

위와 같은 예시의 경우 출력값이 05가 됩니다.

2. 다음의 코드를 확인하여 결과가 제대로 출력되도록 완성하여 제출해주세요 결과가 0.6이 되어야 합니다 Please check the following code and submit it completely so that the results are printed properly The result should be 0.6

//모범답안
const a = 0.1;
const b = 0.2;
const c = 0.3;
var output = Math.round( ( a + b + c ) * 1e12 ) / 1e12;
console.log(output);

//또다른 방법
const a = 0.1;
const b = 0.2;
const c = 0.3;
var output = +( a + b + c).toFixed(12);
console.log(output);

3. 반복문과 "#" 문자열을 활용하여 아래 아스키아트를 생성하는 function(함수)를 코딩하여 제출해주세요 Javascript, JAVA, PHP, go, Python, Swift 언어 중 택일하여 작성해야 하며, #문자이외의 공백은 " " 공백문자열을 활용해야합니다 Please code and submit the function that generates the ASCII art below using the repetitive sentence and the string "#" Javascript, JAVA, PHP, go, Python, Swift languages must be selected, and spaces other than # character must be used with " "

//모범답안 (Javascript)
var ascii_art = function(bitData){
	var output = '<pre>';
	let loopArr = new Array();
	let blankArr = new Array();
	for(let l=0; l<bitData.length; l++){
		let lastx = bitData[l][bitData[l].length - 1];
		for(let i=0; i<lastx; i++){
			loopArr.push(i);
		}
		blankArr = loopArr.filter(x => !bitData[l].includes(x));
		for(let x=0; x<lastx; x++){
			if(blankArr.includes(x)){
				output += ' ';
			}
			if(bitData[l].includes(x)){
				output += '#';
			}
		}
		output += '<br />';
	}
	output += '</pre>';
	return output;
};
var dataset = new Array();
dataset[0] = new Array(0,6,8,9,10,11,12,13,14,16,24,32,33,34,35,36,37,38,39);
dataset[1] = new Array(0,6,8,16,24,32,38,39);
dataset[2] = new Array(0,6,8,16,24,32,38,39);
dataset[3] = new Array(0,1,2,3,4,5,6,8,9,10,11,12,16,24,32,38,39);
dataset[4] = new Array(0,6,8,16,24,32,38,39);
dataset[5] = new Array(0,6,8,16,24,32,38,39);
dataset[6] = new Array(0,6,8,9,10,11,12,13,14,16,17,18,19,20,21,22,24,25,26,27,28,29,30,32,33,34,35,36,37,38,39);
document.write(ascii_art(dataset));

4. copytoclipboard 함수의 진행프로세스를 단계적으로 설명하기 위해 javascript 주석을 달아 제출해주세요 Please submit a javascript annotation to explain the progress process of the copytoclipboard function step by step

//모범답안
//함수에 입력값을 넣으면 입력값을 자동으로 클립보드로 복사됩니다.
const copytoclipboard = function(val){ 
	var t = document.createElement("textarea"); //임시로 textarea를 생성한다.
	document.body.appendChild(t); //임시로 생성한 textarea를 본문의 body에 삽입한다.
	t.value = val; //함수에 입력한 값을 textarea에 넣는다.
	t.select(); //textarea를 선택한다.
	document.execCommand('copy'); //브라우저 커멘드를 활용하여 복사를 수행한다.
	document.body.removeChild(t); //임시로 생성한 textarea를 삭제한다.
}

5. email_check 함수에서 이메일이 맞으면 true, 이메일이 아니면 false를 반환하는 정규식을 완성하여 제출해주세요 If the email is correct in the email_check function, complete and submit a regular expression that returns true or false if it is not an email

//모범답안
//이와 유사하게 이메일을 검증할 수 있는 정규식은 모두 정답처리하였습니다.
let email_check = function(email) {
	var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2}\.[a-z]{3})?)$/i;
	return re.test(email);
};

6. whatisme 함수가 하는 역할을 설명해주세요 Describe the role of the whatisme function

//모범답안
배열의 순서를 랜덤하게 뒤섞는 함수입니다.

함수의 사용예로,
0~9까지 숫자값을 입력할 수 있는 보안키패드를 구현하기 위해, 
숫자값을 배열에 선언하고 해당 함수를 통해 배열을 뒤섞어 
매번 다른 숫자키패드의 배열이 나오게 할 수 있습니다.

7. 아래와 같은 HTML, Javascript, jQuery 로 작성된 코드에서 <input> tag에 오직 숫자만 입력할 수 있도록 하는 기능을 완성하여 제출해주세요 <input> tag에 키보드입력, 붙여놓기 시에도 숫자만 입력되어야 합니다 Please submit a function that allows only numbers to be entered in <input> tag from the code written in HTML and Javascript, jQuery as below

When typing or pasting a keyboard into <input> tag, only numbers must be entered

//모범답안
$(document).on(
'keyup keypress keydown input paste',
"input[type='number'], input[type='tel']",
function(){
	var key = event.keyCode;
	if(!(key==8||key==9||key==13||key==46||key==144||(key>=48&&key<=57)||key==110||(key>=96&&key<=105))){
		event.returnValue = false;
	}
	if($(this).attr('type')=='tel'){
		$(this).val( $(this).val().replace(/[^0-9]/g, '').replace(/(^02|^0505|^050|^0502|^0507|^1[0-9]{3}|^0[0-9]{2})([0-9]+)?([0-9]{4})$/,"$1-$2-$3").replace("--", "-") );
		if(this.value.length > 13){
			this.value = this.value.slice(0, 13);
		}
	}else{
		this.value = this.value.replace(/[^0-9]/, '');
	}
});

8. temp 함수의 역할을 설명하고, 다음의 코드의 문제점을 제시하고 최적화된 리팩토링 코드를 제출해주세요 리팩토링된 최적화 코드는 속도, 보안, 재활용성, 코드의 저용량화가 되어야 합니다 Explain the role of the temp function, suggest the problem of the following code, and submit the optimized refactoring code Refactored optimization code must be speed, security, recyclability, and code low capacity

//모범답안
특정 값을 사용자의 localStorage에 저장할 수 있도록 하는 함수입니다.

사용예시는 다음과 같습니다.
temp('APPLE',{'iphonex', 'iphone8'});
이런식으로 APPLE이라는 값을 할당하고 {'iphonex', 'iphone8'}를 localStorage에 저장할 수 있습니다.

temp('APPLE')[1];
APPLE에 저장한 2번째 값을 가져올 수 있습니다. (iphone8 이 출력됩니다)

temp('APPLE','null');
APPLE에 저장한 값을 초기화할 수 있습니다.

사용자 브라우저에 쿠키와 같이 저장되는 데이터임으로 Client단의 임시저장값들을 저장하는용도로 사용할 수 있을것 같습니다.
다크모드 브라우징이나 과거에 검색한 데이터값등을 임시저장할때 사용할 수 있습니다.

코드상의 문제점으로는 
1. 로그인세션을 저장하기엔 localStorage가 취약함으로 sessionStorage를 활용하면 
단순히 사용자 브라우저에 임시저장값을 저장하는것에 그치지 않고 세션정보까지 안전하게 저장할 수 있습니다.
2. 웹 스토리지는 String데이터만 지원합니다. 따라서 inputdata에 JOSN형태로 변환하여 사용하는것이 더 좋습니다.

리팩토리코드는 다음과 같습니다.

let temp = function(flag,inputdata){
    if(flag !== undefined){
        if(inputdata !== undefined){
            if(inputdata === 'null'){
                sessionStorage.removeItem(flag);
                return true;
            }else{
                sessionStorage.setItem(flag, JSON.stringify(inputdata));
            }
        }else{
            let temp_array = new Array();
            for(var i=0; i<sessionStorage.length; i++){
                temp_array[sessionStorage.key(i)] = JSON.parse(sessionStorage.getItem(sessionStorage.key(i)));
            }
            if(temp_array.hasOwnProperty(flag)){
                return temp_array[flag];
            }else{
                return null;
            }
        }
    }else{
        var temp_array = new Array();
        for(var i=0; i<sessionStorage.length; i++){
            temp_array[sessionStorage.key(i)] = JSON.parse(sessionStorage.getItem(sessionStorage.key(i)));
        }
        return temp_array;
    }
};

9. arr_test 와 arr_car 2개의 배열을 서로 비교하여 platecode가 서로 같은 값을 갖는 배열을 출력하는 함수를 작성하여 제출해주세요 Please write and submit a function that compares the two arrays of arr_test and arr_car and outputs an array with the same platecode

//모범답안
let arr_test = [['Favorite', 'apple'], ['Usually', 'banana'], ['Reluctant', 'watermeleon'],[0, ['platecode','116하6198']],[1,['platecode','101테1234']],[2,['platecode','57구9038']]];
let arr_car = new Array();
arr_car.push(new Array(['platecode','101테1234']));
arr_car.push(new Array(['platecode','57구9037']));
arr_car.push(new Array(['platecode','116하6198']));
arr_car.push(new Array(['platecode','07호6616']));
arr_car.push(new Array(['platecode','106호3084']));

var tranSimpleArray = function(arr){
	let output = '';
	for(let i=0; i<arr.length; i++){
		if(typeof arr[i] == 'object'){
			output += tranSimpleArray(arr[i]);
			output += ',';
		}else{
			output += arr[i];
			output += ',';
		}
	}
	output = output.toString();
	output = output.split(',');
	return output;
};
var compare_multi_array = function(array_x, array_y){
	let trans_x = tranSimpleArray(array_x);
	let trans_y = tranSimpleArray(array_y);
	let diff = trans_x.filter(x => trans_y.includes(x));
	let output = new Array();
	for(let i=0; i<diff.length; i++){
		if(diff[i] != '' && diff[i] != 'platecode'){
			output.push(diff[i]);
		}
	}
	return output;
};
console.log(compare_multi_array(arr_test, arr_car));

10. string 배열의 세로 순서대로 출력하는 함수를 작성하여 제출해주세요 작성되는 함수는 "이문제는정보올림피아드초등부문제입니다"으로 출력되어야 합니다 Write down a function that outputs in the vertical order of the string array and submit it The function being written is "이문제는정보올림피아드초등부문제입니다" should be printed

//모범답안
let string = new Array();
string[0] = "이 피 입";
string[1] = "문보아등니";
string[2] = "제올 부다";
string[3] = "는 드문";
string[4] = "정림초제";
		
let test = function(input){
	let output = '';
	for(var j=0; j<8; j++ ){	
		for(var i=0; i<input.length; i++){
			if(input.length != null){
				output += input[i].charAt(j).replace(' ', '');
			}	
		}
	}
	return output;
};

console.log(test(string));

11. today 함수는 현재 사용자의 시간정보를 출력하는 함수이다. 이 함수에서 출력되는 String 형태의 시간정보가 30분단위로 가장 가까운 시간정보가 출력되도록 하는 코드를 작성한 뒤 제출해주세요 20220506182254 일때 20220506183054 으로 결과가 나와야하며, 20220506235521 일때 20220507000021 으로 결과가 나와야 합니다. The today function is a function that outputs time information of the current user. Please write a code to print the closest time information in the form of a string output from this function in 30 minutes and submit it The result should be 20220506183054 when 20220506182254 and 20220507000021 when 20220506235521.

//모범답안
//비트연산을 위한 함수
let bitchange = function(n, digits) {
	var zero = '';
	n = n.toString();
	if(n.length < digits){
		for (var i = 0; i < digits - n.length; i++)
			zero += '0';
	}
	return zero + n;
};
let today = function () {
	let d = new Date();
	let diff = 0;
	if(30 > 60 - d.getMinutes()){
	//00분으로 나와야됨
		diff = 60 - d.getMinutes();
	}else{
	//30분으로 나와야함
		diff = 30 - d.getMinutes();
	}
	//증감되는만큼 현재시간에 반영
	d.setMinutes(d.getMinutes() + diff);
	//최적화 코드로 변경
	let output = bitchange(d.getFullYear(),4);
	output += bitchange(d.getMonth()+1,2);
	output += bitchange(d.getDate(),2);
	output += bitchange(d.getHours(),2);
	output += bitchange(d.getMinutes(),2);
	output += bitchange(d.getSeconds(),2);
	return bitchange(output.substring(0,14),14);
};
console.log(today());

12. zip 함수와 unzip 함수는 문자열을 압축하고 압축된 문자열을 원본으로 복원해주는 함수이다. 속도성능과 관계없이 가장 압축률이 높도록 아래의 함수를 완성하여 제출해주세요 극단적인 압축률을 적용하고 압축된 문자열이 정상적으로 복원되어야 합니다. 아래에 주어진 함수내부의 코드는 변경할 수 없습니다. 압축된 데이터는 문자비트 용량을 계산하지 않고 오직 문자길이만을 갖고 판단합니다. The zip function and the unzip function are functions that compress a string and restore the compressed string to its original state. Regardless of speed performance, please complete and submit the following function for the highest compression rate Extreme compression rates must be applied and compressed strings restored normally. You cannot change the code inside the function given below. Compressed data is judged only by character length, not by character bit capacity.

//모범답안
//압축함수
let zip = function(input){
	let output = '';
	let cnt = 1;
	for(let i=0; i<input.length; i++){
		if(input[i] === input[i+1]){
			cnt++;
		}else{
			output += input[i];
			if(cnt>1){
				output += ':' + cnt.toString();
			}
	  	  cnt = 1;
		}
	}
	return output.toString();
};
//압축복원
let unzip = function(input){
	let output = '';
	let cache = '';
	let trans = input.split('.');
	let zipstring = trans[0];
	for(let i=0; i<zipstring.length; i++){
		if(zipstring[i] == ':'){
			for(let x=1; x<parseInt(zipstring[i+1]); x++){
				output += cache;
			}
			i++;
		}else{
			cache = zipstring[i];
			output += zipstring[i];
		}
	}
	return output.toString();
};

const test = "zz92kkaaaaaakkk00222221aaaaaakkkk2000000";
console.log(test);
console.log(zip(test)); //z:292k:2a:6k:30:22:51a:6k:420:6
console.log(unzip(zip(test)));
if(test === unzip(zip(test))){
	console.log('압축이 정상입니다');
}

직군성향 적합도 부문

1. 왜 개발자가 되고자 했는지 자유롭게 기술해주세요 Feel free to describe why you wanted to be a developer

//모범답안
어릴적 우연히 C++을 접하고 다른사람들의 코드를 참조하면서 간단한 프로그래밍을 시작하게 되었습니다.
몇 줄 되지 않는 코드를 통해 선생님들께 반복적인 노가다성 행정업무를 한순간에 처리할 수 있는 매크로 프로그램등을 개발하여 드렸고,
덕분에 선생님들께 많은 부탁을 받고 코드를 짰던 기억이 납니다.

주변 사람이 나의 코드로 인해 말도 안되는 업무가 손쉽게 해결되고 
무엇보다 나의 코드로 인해 주변인에게 긍정적인 에너지를 줄 수 있다는것에 이 직업을 선택하게 된 가장 큰 동기가 되었습니다.

우리가 중세시대를 기반으로 하는 영화등에서 마법을 부리는 마법사를 볼 수 있는데,
개발자야말로 현재시대의 진정한 마법사라고 생각합니다.

우리가 개발하는 코드는 실존하지 않아 만질수도 직접 눈으로 볼 수 없지만,
이 코드는 가상세계에서 마법을 부릴 수 있고, 우리의 생활을 더욱 윤택하고 편리하게 만들어줄 수 있는 기술임에 틀림이 없습니다.

2. 단기적인 목표로 5년 뒤 어떤 개발자가 될 것인지와 그 단기적인 목표를 달성하기 위해 본인에게 어떤 미션들이 현재 있는지를 자유롭게 기술해주세요 Please feel free to describe what kind of developer you will be in five years with short-term goals and what missions you have in order to achieve that short-term goal

//모범답안
저는 IT분야에도 관심이 많지만, 자동차산업에도 관심이 많습니다.
일을 하다가 중간에 번아웃이 왔을때 잠시동안 1년간 자동차정비소에서 정비사로 일을 하면서 
관심있는 자동차에 대해서도 구체적으로 잘 알게 되었습니다.
현재 잘하고 있는 IT분야와 자동차분야, 2가지 분야를 잘 융합하여 사용할 수 있는 
모빌리티서비스와 관련된 일을 하는것이 목표입니다.

모빌리티서비스를 개발하기 위해서는 IT도 잘 알아야하지만, 자동차도 이에 못지 않게 잘 알아야한다고 생각합니다.
이 목표를 실현시키기 위한 구체적인 방법으로 IT이외에 현재 갖고 있는 차량정비 자격증을 좀더 공부하여 정비산업기사를 취득할 계획을 갖고 있으며,
과거와 마찬가지로 설령 이직을 하게되는 상황에 놓여있을때도 모빌리티 산업과 관련된 회사로의 전직을 지속적으로 할 예정입니다.
과거에는 1가지에 대해서도 특출나면 기술자로써 대우받으며 살수 있다고 했지만,
미래에는 여러가지 일들을 융합하는 복합적인 기술에 대한 수요가 필요하다고 생각합니다.

3. A라는 개발 프로젝트가 있다고 가정했을 때, A라는 개발 프로젝트를 통해서 10명의 개발자가 고용이 창출된다. 하지만 A라는 개발 프로젝트를 통해서 100명의 실업자가 발생하게 된다면, 이 문제를 어떻게 해결할 것인지 자유롭게 기술해주세요 Assuming that there is a development project called A, 10 developers are hired through the development project called A. However, if there are 100 unemployed people through the development project called A, please feel free to describe how to solve this problem

//모범답안
버스안내원과 같이 없어지는 직업이 생기는 만큼 새로운 직업이 생겨날것으로 보입니다.
버스카드로 손쉽게 환승도 가능하면서 더이상 버스안내원이 필요가 없어져
단기적으로 봤을때 실업자를 만들어주지만,
장기적으로 봤을때 질 좋은 직업을 더 만들어주는 효과가 있기 때문에
이것은 문제가 되지 않는다고 생각합니다.
해당 프로젝트에 의해 당장의 실업에 내몰리는 사람들은 해당 프로젝트를 위한 또다른 새로운 직업이 창출될 것으로 보입니다.
특히 기존 100명의 실업자들은 해당 분야에 오랜기간 노하우를 갖고 있음으로
이러한 노하우를 활용할 수 있는 프로젝트와 직접적인 관련 업무를 재할당하여
더 가치가 높고 질 좋은 일자리를 창출할 수 있다고 생각합니다.

4. 인공지능 딥러닝기술이 발전하여 인공지능이 자신의 코드를 지속적으로 보완하고 또 다른 인공지능 코드를 작성할 수 있다고 가정한다. 이 인공지능으로 인한 장점과 단점을 기술하고 개발자로써 이 상황을 어떻게 대처할 것인지 자유롭게 기술해주세요 It is assumed that artificial intelligence deep learning technology develops so that artificial intelligence can continuously supplement its own code and write another artificial intelligence code. Please describe the advantages and disadvantages of this artificial intelligence and feel free to describe how you will deal with this situation as a developer

//모범답안
완벽하고 인간능력과 비등한 인공지능이 나와 인공지능이 대신 코드를 작성할 수 있다면,

장점으로는
더이상 개발자가 머리아픈일이 없습니다.
기업들은 인건비를 크게 절감하면서 빠르게 서비스를 개발할 수 있습니다.

단점으로는
인공지능의 높은 개발생산성으로 인해 중국게임앱들과 같이 수 많은 정크 서비스들이 출시할 것입니다.
현재 개발직에 종사하고 있는 수 많은 개발자들이 당장의 실업자로 내몰릴 수 있습니다.

개발자로써 이를 대처하는 자세로는
이러한 인공지능을 개발하는 인공지능 개발자로 발전해야합니다.
더이상 개발과 관련된 일을 하지 못하는것을 스스로 수렴하고 위의 단점에서 지적한 바와 같이
정크 서비스 중 고객에게 가장 적합한 서비스를 추천하는 카운슬러와 같은
또다른 창의적인 부가가치를 창출할 수 있는 일을 찾아야 합니다.
강력한 인공지능으로 인해 사람을 헤치는 일이 없도록 
인공지능에 대한 윤리규정과 발생할 수 있는 버그를 최소화 할 수 있도록 개발자로써 노력해야 합니다.

채용프로세스에 대한 면접관 역평가

1. 우리회사의 채용프로세스에 대해 본인의 의견을 자유롭게 작성해주세요 Please feel free to write your opinion on the recruitment process of our company

2. 우리회사의 채용 과정에 학연, 출신, 인종, 나이, 성차별등의 부당한 대우를 경험 하셨습니까? Have you experienced unfair treatment of academic background, origin, race, age, gender discrimination, etc. in our hiring process?

3. 부당한 대우를 경험하셨다면, 육하원칙에 따라 구체적으로 설명해주시길 바랍니다. If you have experienced unfair treatment, please explain it in detail according to the principle of land and land.

SPA(Single Page Application)를 개발할때 고려하면 좋은 애니메이션 라이브러리 모음

번개애비 — Wed, 30 Mar 2022 11:23:40 +0900

SPA란?

Single Page Application의 약자로써 쉽게 이야기하자면 페이지이동이 이뤄지지 않는 웹서비스를 말한다.

단순히 1페이지로 구성되는 서비스가 아니라 실제 메뉴/페이지 이동도 가능하도록 구현시킬 수 있다.

SPA 서비스들은 최초 브라우저에서 페이지 로드이후 새로고침이 이뤄지지 않기 때문에

사용자로 하여금 페이지 전환이 빠른것처럼(?) 느끼게 해줄 수 있다.

위 사진에서는 Ajax로 구현되어 있지만 최근에는 React로 손쉽게 구현할 수 있으며,

조금더 낮은 단계로 내려가면 Fetch, axios로 구현할 수도 있다.

(심지어 Websocket으로 구현한 경우도 있음)

최근에는 Android, iOS등 멀티플랫폼에 대응하기 어려운 환경에서

SPA기반으로 웹뷰로 서비스하는 목적으로도 사용한다.

그리고, 실제로 우리가 자주 사용하는 많은 앱들이 놀랍게도

네이티브앱보다 SPA로 구현된 웹뷰 앱들이 많다.

그럼, 지금부터 SPA가 어느정도 구현되어 있다는 가정하에,

사용자에게 조금더 매끄럽게 앱인척(?) 속일 수 있는 좋은 라이브러리들을 소개한다.

Lottie - GIF를 대체할 최고의 대체제

GIF보다 더 가볍고 부드럽게 사용할 수 있는 애니메이션 라이브러리

주로 사용자가 대기해야하는 단계나 어떤 Action이 종료되는 시점에 적절하게 사용하면 좋다. (하지만, 너무 남발하면 과유불급)

https://lottiefiles.com/

Free Lottie Animation Files, Tools & Plugins - LottieFiles

The world’s largest online platform for the world’s smallest animation format for designers, developers, and more. Access Lottie animation tools and plugins for Android, iOS, and Web.

lottiefiles.com

Animate CSS - 10분이내 적용가능한 애니메이션

Class 적용만으로 손쉽게 특정개체에 애니메이션을 적용해줄 수 있는 라이브러리이다.

주로 페이지전환이나 햄버거 버튼에 따른 메뉴바 애니메이션등 적절하게 사용할 수 있다.

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

animate.style

GSAP - 10분이내 적용가능한 애니메이션

Lottie를 사용하기엔 부담스럽고 단순 Animate를 사용하기엔 부족할때 사용하는 애니메이션 라이브러리이다.

https://greensock.com/

GreenSock

GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.

greensock.com

AOS - 스크롤에 따른 애니메이션

스크롤에 따라 객체들을 차근차근 보여주는 라이브러리

주로 세로가 긴 페이지의 내용을 보여줄때 사용한다. (특히 랜딩페이지등에서)

https://michalsnik.github.io/aos/

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

Lightslider - 가벼운 슬라이드 라이브러리

정말 정말 심플한 슬라이더를 구현하기 좋은 라이브러리이다.

가볍게 구현하기 원한다면 강력추천

http://sachinchoolur.github.io/lightslider/

JQuery lightSlider

JQuery lightSlider JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation

sachinchoolur.github.io

Slick - breakpoint가 사용가능한 슬라이드 라이브러리

Lightslider에 비해 기능이 조금더 많다.

breakpoint를 이용하여 Lazyloading등을 적용할 수 있는 라이브러리이다.

http://kenwheeler.github.io/slick/

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

Fakeloader - 애니메이션을 이용하여 SPA로 감쪽같이 속일 수 있는 라이브러리

매 페이지전환시 마다 애니메이션을 적용하여 마치 SPA로 구동되는것처럼 처리할 수 있다.

https://github.com/joaopereirawd/fakeLoader.js/

GitHub - joaopereirawd/fakeLoader.js: fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner wit

fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect. - GitHub - joaopereirawd/fakeLoader.js:...

github.com

mobiscroll - 웹뷰 서비스에서 대체불가능한 라이브러리

사용자 기기에서 제공하는 Datepicker, Calendar, Select 등을 마치 앱에서 구동되는것처럼 웹서비스에서 제공하는 라이브러리

https://mobiscroll.com/

Advanced calendaring and scheduling solutions | Mobiscroll

Date & time pickers, event calendars, schedulers for plain JS, jQuery, jQuery Mobile, Angular, AngularJS, Ionic and React.

mobiscroll.com

Tmap 혹은 Naver 맵에서 화면에 따라 마커를 실시간으로 감추기 (강려크한 대용량 마커 처리)

번개애비 — Thu, 24 Mar 2022 23:20:57 +0900

요즘 차량관제와 관련된 백오피스를 개발하면서 지도와 열심히 씨름중임.

매일 수십개의 스팟과 함께 지도에는 언제나 수백개의 차량을 표현하는 마커가 떠 있어야 하는 미션이 주어짐.

300개의 마커를 표현하는 방법(좌측)과 클러스터러를 이용해 표현하는 방법(우측)

이렇게 대용량 마커를 Static map 에 출력하는 방법은

위 이미지처럼 무식하게(?) marker를 때려박거나 클러스터러를 활용하는 방법이 있다.

개발하는 관점에서는 당연히 클러스터러가 편하고 쉽고 섹시한 방법처럼 생각할지 모르겠지만,

지도에서 어떤 객체를 바로 검색하거나 찾아야되는 요구사항에서는 마커를 때려박는 경우도 있다.

네이버맵이든, 티맵, 카카오맵등 대부분의 맵의 JS작동방식이 비슷해서인지 몰라도

동일하게 300개이상의 대량 마커가 지도에 한꺼번에 출력되면 엄청난 렉이 동반된다.

웃긴건 업체들마다 API로 제공하는 Namespace조차도 90%정도 비슷함.. ㅎㅎ

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

겨우 300개 밖에 안띄웠는데 i9 맥북이 갑자기 이륙과 동시에 엄청난 렉이 걸린다.

(개발자도 함께 이륙이 마렵다.)

Naver 맵에서 지도이동에 따른 마커의 활성화처리

네이버맵의 경우 그나마 좀 친절하다.

https://navermaps.github.io/maps.js.ncp/docs/tutorial-marker-viewport.example.html 를 통해서 대량마커처리에 대한 예제를 제공해준다. 아래는 예제와 다르게 300개의 마커를 출력하여 테스트해볼 수 있는 소스코드이다. (클라이언트 ID는 변경필요)

<script type='text/javascript' src='https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=클라이언트아이디' ></script>

<div id='map' style='width:100%;height:100%;'></div>

<script type='text/javascript'>
	'use strict'; //엄격한 스크립트모드
	var init_lat = 37.51490471; //위도
	var init_lon = 126.98274432; //경도
	var map = []; //지도객체
	var markers = []; //마커객체
	//마커 업데이트함수
	var markerUpdate = function(){
		var mapBounds = map.getBounds();
		var marker, position;
		for(var i=0; i<markers.length; i++){
			marker = markers[i]
			position = marker.getPosition();
			if(mapBounds.hasLatLng(position)){
				markers[i].setMap(map); //지도에 마커보이게
			}else{
				markers[i].setMap(null); //지도에 마커가리기
			}
		}
	};
	//마커 삽입함수
	var addMarkers = function(){
		for(var i=0; i<300; i++){
			var lat = Math.random() / 10;
			var lon = Math.random() / 10;
			var marker = new naver.maps.Marker({
				position: new naver.maps.LatLng(init_lat + lat, init_lon + lon),
				title: 'mylatlon'
			});
			markers.push(marker);
			markerUpdate();
		}
	};
	
	window.onload = function(){
		//맵로드
		map = new naver.maps.Map('map', {
			center: new naver.maps.LatLng(init_lat, init_lon),
			zoom: 14
		});
		
		//줌을 땡기면 마커업데이트
		naver.maps.Event.addListener(map, 'zoom_changed', function() {
			markerUpdate();
		});
		
		//드래그를 하면 마커업데이트
		naver.maps.Event.addListener(map, 'dragend', function() {
			markerUpdate();
		});
		
		//마커불러오기
		addMarkers();
	};
	
</script>

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

Tmap 맵에서 지도이동에 따른 마커의 활성화처리

티맵은 개발 문서가 네이버보다 조금은(?) 더 편하게 되어있지만, 대량마커에 대한 처리예시가 없다.

무엇보다, 이벤트핸들러가 네이버보다 굉장히 불친절하기 때문에 네이버는 dragend를 제공하지만, 티맵은 drag만 제공함.

(아래소스코드에서 앱키는 변경필요)

<script type='text/javascript' src='https://apis.openapi.sk.com/tmap/jsv2?version=1&appKey=앱키변경필요'  charset='utf-8'></script>

<div id='map' style='width:100%;height:100%;'></div>

<script type='text/javascript'>
	'use strict'; //엄격한 스크립트모드
	var init_lat = 37.51490471; //위도
	var init_lon = 126.98274432; //경도
	var map = []; //지도객체
	var markers = []; //마커객체
	//마커 업데이트함수
	var markerUpdate = function(){
		var mapBounds = map.getBounds();
		var marker, position;
		for(var i=0; i<markers.length; i++){
			marker = markers[i]
			position = marker.getPosition();
			if(mapBounds.contains(position)){
				markers[i].setMap(map); //지도에 마커보이게
			}else{
				markers[i].setMap(null); //지도에 마커가리기
			}
		}
	};
	//마커 삽입함수
	var addMarkers = function(){
		for(var i=0; i<300; i++){
			var lat = Math.random() / 10;
			var lon = Math.random() / 10;
			var marker = new Tmapv2.Marker({
				position: new Tmapv2.LatLng(init_lat + lat, init_lon + lon),
				title: 'mylatlon'
			});
			markers.push(marker);
			markerUpdate();
		}
	};
	
	window.onload = function(){
		//맵로드
		map = new Tmapv2.Map('map', {
			center: new Tmapv2.LatLng(init_lat, init_lon),
			zoom: 14,
			httpsMode: true //사용환경이 https일때는 true설정필요
		});
		
		//줌을 땡기면 마커업데이트
		map.addListener('zoom_changed', function() {
			markerUpdate();
		});
		
		//지도 이동하면 마커업데이트 (PC용)
		map.addListener('center_changed', function() {
			markerUpdate();
		});
		
		//드래그를 하면 마커업데이트 (모바일용)
		map.addListener('drag', function() {
			markerUpdate();
		},{once:true});
		
		//마커불러오기
		addMarkers();
	};
	
</script>

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

결론 및 성능테스트

대용량마커에서는 무조건 마커제어가 필요하다.

개인적으로 DOM상에 마커객체들이 깜빡이는게 싫다면, SK Tmap을 추천하고

그냥 간단한 웹서비스를 원한다면 NAVER map을 추천함.

	NAVER map	SK Tmap
드래그시 마커방식	Dragend (드래그가 끝날때 1회)	Drag (드래그하는 도중 계속 수행)
줌 인/아웃시 마커방식	마커가 사라졌다가 다시 출력	마커 계속 출력 가능
특징	우리에게 익숙한 지도, 300개 이상 마커 현실적 불가능	1000개 이상 마커도 서비스가능, 지도가 번잡하다
Map 호출 객체명	naver.maps.Map	Tmapv2.Map
Marker 호출 객체명	naver.maps.Marker	Tmapv2.Marker
좌표계 호출 객체명	naver.maps.LatLng	Tmapv2.LatLng
bound확인 return함수명	hasLatLng()	contains()

정리하면서 느낀건데 호출되는 객체가 굉장히 유사하다..... ㅎㅎ

이번엔 1000개의 마커를 띄워서 비교해보았다.

좌측 Tmap, 우측 Naver map

2가지 Map API를 활용하여 테스트를 해보니

생각외로, Tmap 이 대용량 마커처리에 최적화되어 있는것을 확인할 수 있다.

	NAVER map	SK Tmap
1000개 마커 Load속도	34150ms	725ms

1000개 마커를 하나의 지도에 띄울일은 없겠지?

무엇보다, 마커를 띄운상태에서 줌인/줌아웃을 하는 동안 다음과 같은 이슈가 있었다.

서비스에 맵을 도입할때 참고하면 좋을듯 하다.

	NAVER map	KAKAO map	SK Tmap
줌인/줌아웃 하는 동안	일시적으로 마커 안보임	일시적으로 마커 안보임	마커가 계속 보임

NAVER map 마커 샘플 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-1-marker-simple.example.html

KAKAO map 마커 샘플 : https://apis.map.kakao.com/web/sample/multipleMarkerImage/

SK Tmap 마커 샘플 : https://tmapapi.sktelecom.com/main.html#webv2/sample/webSample15

KAKAO map의 경우 카카오에서 직접운영하는 map.kakao.com 에서는 제공되는 API와 동일하게 줌인/줌아웃을 하는 동안 마커가 일시적으로 사라지는 방식이 동일하지만,

NAVER map의 경우 네이버에서 직접운영하는 map.naver.com 에서는 제공되는 API와 다르게 줌인/줌아웃을 하는 동안 마커가 일시적으로 사라지지는 않았다. 아마 구현하는 방식의 차이가 존재하는 듯하다.

Linux에서 crontab을 이용하여 MySQL 데이터베이스 정기 백업하기

번개애비 — Thu, 24 Mar 2022 03:24:19 +0900

Windows 환경에서 MySQL 데이터베이스를 데이터베이스별로 자동으로 백업하기

필자의 회사의 개발서버는 Windows 기반이고 다수의 웹서비스를 개발하고 있는 상황이라 데이터베이스를 보다 효과적으로 백업하기 위해 별도의 배치파일을 만들어 스케줄러로 동작시키고 있다.

www.burndogfather.com

이전에 windows 환경에서의 mysql 스케줄링 백업에 대해 소개했었는데,

이번에는 리눅스에서 데이터베이스 스케줄링 백업에 대해서 소개한다.

(window 보다 훨~씬 쉬움!)

적당한 경로에 "블라블라.sh"와 같이 Bashshell 파일을 만들어준다.

아래 코드를 참고하여 사용하면 된다.

//샘플코드

#!/bin/bash
DATE=$(date +%Y%m%d)
BACKUP_DIR=/home/sql_backup/
mysqldump -uroot -p'패스워드를입력' --all-databases  > $BACKUP_DIR"backup_"$DATE.sql
find $BACKUP_DIR -ctime +7 -exec rm -f {} \;



//예시코드

#!/bin/bash
DATE=$(date +%Y%m%d)
BACKUP_DIR=/home/sql_backup/
mysqldump -uroot -p'1234' --all-databases  > $BACKUP_DIR"backup_"$DATE.sql
find $BACKUP_DIR -ctime +7 -exec rm -f {} \;


//데이터베이스명별로 백업 예시

#!/bin/bash
DBUSER="root"
DBPASS="1234"
DATE=$(date +%Y%m%d)
BACKUP_DIR=/home/sql_backup
DBLIST=`mysql --user=$DBUSER --password=$DBPASS -e "SHOW DATABASES;" | tail -n+2`

for THISDB in $DBLIST
   do
   if [ $THISDB != "information_schema" ] && [ $THISDB != "performance_schema" ] && [ $THISDB != "accounts" ] ; then
      mysqldump -u$DBUSER -p$DBPASS $THISDB > $BACKUP_DIR"/"$DATE"_"$THISDB.sql
   fi
done
find $BACKUP_DIR -ctime +7 -exec rm -f {} \;

-ctime +7 이라고 되어 있는 곳에 7은 일주일치를 남기고 지우겠다는 것을 의미함으로

실제로 저장하고자 하는 날짜만큼으로 수정하면 된다.

생성한 sh 파일에 적당한 권한을 설정한다.

> chmod 777 ./sql_backup.sh

crontab에 스케줄을 적절한 시간에 설정한뒤, 저장한다.

저장한뒤에는 crond 서비스를 재시작하여 정상작동되도록 하면끝난다.

> crontab -e #스케줄수정

00 06 * * * /home/sql_backup.sh #매일 아침 6시에 실행한다.

> :wq #저장
> service crond restart #크론탭 서비스 재시작

그러면 요로코롬 백업이 된다!

RDBMS에서의 Foreign key(외래키)에 대한 고찰 (어쩌다가 우리는 FK를 쓰지 않는가?)

번개애비 — Tue, 22 Mar 2022 00:08:40 +0900

최근 RDBMS환경에서 일일 1,000만개 이상의 데이터가 지속적으로

insert, delete되며 데이터최신화를 위한 개발환경을 겪으면서 외래키에 대한 생각을 끄적여봄.

결론부터 이야기하자면

"아무리 작은 프로젝트라도 FK를 강제하는것이 좋다"

실무자들은 다 알겠지만,

Foreign key는 간략하게 FK라고 칭하겠음...

솔직히 대부분의 프로젝트에서 SI든 자체플젝이든 FK를 사용하지 않는것이 현실임.
그리고 많은 개발자들이 분명 배울때는 FK를 걸어야된다는 걸 알고 있지만

개발의 용이성(?)과 원활한 DB설계변경을 위해 FK를 걸지 않는 것 또한 현실임.

개발자들이 FK를 설정하지 않는 이유는 대체적으로 다음과 같다.

1. DBA의 부재

프로젝트에서 실질적인 DBA가 없어서 개발자들이 사실상 DBA역할까지 해야하는 경우가 많고 그런 개발자들이 DBA가 해야되는 모든 역할을 기대하기 어려움.

2. FK에 따른 데이터 소실우려

Sub table을 구성하다보면 여기저기 FK를 연결하는 경우가 많은데 복잡구리하게 구성된 Parent table 중에서 단 하나의 데이터만이라도 수정/변경되면 의도치 못한 Sub table의 데이터가 변경되는 경우를 두려워함.(우리의 데이터는 소중하니깐)

3. 임의의 데이터 삽입의 번거로움

Sub table에서 임의 데이터를 삽입코자 할때 CASCADE 설정시 반드시 Parent table도 추가해줘야되는 그지같은 상황 때문에.(우린 자유로운 영혼이라규!!!)

4. Insert Query의 속도 저하

FK가 설정된 table에서 Insert Query시 약간의 속도저하가 있다고 함.(사실 별 차이 못느끼겠음)

5. FK 설정법을 모름

생각보다 최근 신입개발자들한테 물어보면 FK설정법을 아예 모르는 경우가 왕왕있음.
RDBMS의 물리적인 FK설정을 하지 않음에도 프로그램 로직단에서 충분히 FK처럼(?)구현도 가능하고 Join역시 가능한 것도 사실임.

지금부터 예제를 통해 왜 우리가 FK를 써야되는지를 설명하도록 한다.

다음은 아주아주 심플한 예제용 ERD diagram 이다.

모든 테이블마다 sid 테이블을 부모로 두고 구성된다.

일반적인 환경일수도 아닐수도 있지만, 이 ERD를 보면 모든 테이블들이 sid라는 테이블을 FK로 연결되어있다.

각 테이블의 sid 데이터들은 절대적으로 유일무이한 값이 되는 일종의 Super key로 구성되어 있다.

왼쪽이 super key를 관리하는 부모테이블, 오른쪽이 휴무일을 저장하는 자식테이블이다.

이렇게 설계하는 이유는 데이터정합성과 super key 하나만으로 CRUD추적성을 제공하기 위함이다.

insert시 insert를 진행하고자 하는 테이블 이외에 추가적으로 동일의 키를 sid 테이블에 넣어줘야하는 불편함이 있지만,

sid 테이블에서 해당 key가 저장된 테이블을 저장하고 있음으로 key값 하나만으로 select, update, delete가 굉장히 쉬워진다.

이런 설계 방식은 외부서비스와의 API 연동 시 더욱 빛을 발한다.

예제에서는 숫자로만 구성된 19자리의 시간정보로만 사용하지만 UUID나 Hashing 값을 이용하는 방법도 있다.

범용 고유 식별자 - 위키백과, 우리 모두의 백과사전

범용 고유 식별자(汎用固有識別子, 영어: universally unique identifier, UUID)는 소프트웨어 구축에 쓰이는 식별자 표준으로, 개방 소프트웨어 재단(OSF)이 분산 컴퓨팅 환경(DCE)의 일부로 표준화하였다. U

ko.wikipedia.org

FK를 사용하지 않을때 대용량 insert 과정에서의 문제점.

논리적인(?)방법으로 프로그램코드상으로 FK를 운영할 경우, 해당 key가 자신테이블, 그리고 부모테이블에 존재하는지를 확인하고,

중복되는 데이터를 늘 checking 해야한다.

ERD상으로는 부모테이블이 sid임으로 super key를 생성한뒤, sid에 고유값인지 select후 insert를 한다.

이후 insert하고자하는 자신테이블에도 동일한 super key를 insert하게 된다.

아무 문제없이 잘된다.

문제는 대용량 insert가 발생되는 상황은 우리가 상상하는것과 다르게 동작할 수 있다.

분명, super key를 생성해서 부모테이블에 해당 key가 없다고 해서 자신테이블에 동일한 super key를 insert 하면 자신테이블에 중복된 key가 존재하는 경우가 발생할 수 있다. 각각의 테이블마다 Primery key를 설정하여 중복을 방지하는것도 방법이지만, PK를 설정할 경우 중복된 key는 사라지겠지만, 중복된 key를 갖는 insert 데이터를 소실할 수도 있다.

엉뚱한 부모테이블과 자식테이블 데이터가 연결되어버리는 사태가 발생한다.

이런 원인이 발생되는 이유는 부모테이블과 자식테이블간 key가 매칭이 안되어있기 때문이다.

super key를 생성해서 부모테이블에 해당 key가 없다고 하는것은 언제나 애플리케이션의 판단일 뿐이고, 실제로 DB에 insert되기 전까지는 중복될 수 있다는 이야기이다.

이러한 현상은 단순 insert로직뿐만 아니라 insert, delete, update등 데이터가 입력,수정,삭제등 데이터최신화가 반복되어야하는 대부분의 로직에서 문제를 엄청나게 큰 발생시킨다.

다중쿼리 및 트랜잭션을 통해 이러한 문제를 해결할 수 있는 하나의 방편이 될 수 있지만,

다중쿼리에 따른 추가적인 injection처리는 논외로 한다고 해도,

단일 쿼리별 예외처리의 문제를 해결할 솔루션을 고민해봐야하며,

트랜잭션에 따른 동시성 제어 또한 생각해볼 문제이다.

(겨우 일일 1000만개 데이터에서 벌써부터 트랜잭션제어를 하기엔 아까운것은 사실)

트랜잭션의 동시성을 증가시키면서 일관성있는 데이터를 기대하기는 어렵다.

아무리 순차처리가 가능한 애플리케이션과 순차처리가 가능하게끔 프로그램을 짜도, 문제는 애플리케이션의 하위계층인 OS는 순차처리를 보장하지 않으며, 특히 Multi-connection을 제공해야하는 서버프로그램일수록 connection마다의 정확한 순차처리를 기대할 수 없다.

클라이언트의 요청 순서대로 처리한다는것은 단순히 우리들의 바램일뿐....

FK를 설정하는 방법

다음은 FK를 설정하는 방법이다.

//단순 FK설정
ALTER TABLE `자식테이블` 
ADD CONSTRAINT `별명` 
FOREIGN KEY (`자식칼럼명`) 
REFERENCES `부모테이블`(`부모칼럼명`);

//예시
ALTER TABLE `holiday` 
ADD CONSTRAINT `FK_holiday` 
FOREIGN KEY (`sid`) 
REFERENCES `sid`(`sid`);

제약조건을 통해 수정/삭제에 대한 부모테이블과 자식테이블간 데이터의 관계성을 유지시킬 수 있다.

//CASCADE예시
ALTER TABLE `holiday` 
ADD CONSTRAINT `FK_holiday` 
FOREIGN KEY (`sid`) 
REFERENCES `sid`(`sid`) 
ON DELETE CASCADE 
ON UPDATE CASCADE;

FK설정시 제약조건 옵션	설명	종속성
CASCADE	부모테이블의 데이터가 수정/삭제 시 자식테이블의 데이터도 함께 수정/삭제된다.	부모테이블에 종속
RESTRICT	자식테이블의 데이터가 존재하면, 부모테이블을 수정/삭제할 수 없다.	자식테이블에 종속
NO ACTION	부모테이블의 데이터가 수정/삭제해도 자식테이블은 별다른 Action을 하지 않는다.	종속강제 X

iOS15 업데이트와 함께 찾아온 인앱브라우저 지옥과 최선

번개애비 — Tue, 15 Mar 2022 05:55:44 +0900

카카오, 네이버 인앱에서 외부 브라우저 띄우는 방법 정리 [Android/iOS]

더 쾌적하게? 웹 서비스를 개발하는 입장에서 클라이언트가 위와 같은 브라우저를 사용할때 정말 피곤합니다. 휴대폰 본인인증이나 PG결제등 여러가지 제약사항들이 생기기 마련입니다. 그렇다

www.burndogfather.com

2019년도에 인앱브라우저를 강제로 벗어나는 방법을 포스팅했었다.
이전부터 개발자 커뮤니티 등지에서 인앱브라우저를 강제하는 것과
인앱브라우저의 말도안되는 비호환성등... 많은 개발자들이 지쳐있었고,

과거 2016년도부터 내부적으로 사용하던 코드를 공개하기로 결정하고
공유하여 많은 개발자분들과 함께 솨리질러를 외치고 있던 중,
우리는 새로운 시련과 마주하게 되었다.

해당 페이지를 열 수 없습니다아아아아아아아아아아아

과거 공유했던 방법의 원리는
인앱브라우저에서 FTP주소를 호출할 경우
iOS가 강제로 Safari를 실행시키는 일종의 버그?를
활용한 방법이었고,

갑자기 찾아온 시련

이러한 방법은 iOS15 업데이트에서
애플에 의해 Deprecated 되었다.

애플이 애플한 셈이다.
결국 우리는 다시 망할 인앱지옥에서 살고 있다.

그나마 다행인것은,
단순 개발자 커뮤니티를 벗어나
일반 대중들에게도 점차 알려지고 있는것 같아
향후 어떤 행보가 보일지 기대되는 대목이지만,
https://biz.newdaily.co.kr/site/data/html/2021/10/21/2021102100001.html

사실관계를 따져야겠지만 놀라운 점은 카카오톡이
망할 인앱브라우저를 통해
수조원의 매출을 올린다는것에 충격적이었다.

그리고
무엇보다 개발자인 우리들은 지금 당장 해결해야한다.ㅠㅠ

필자의 경우 SPA서비스 위에 결제등, 복잡구리한 서비스를 운영하는데 있어서
제약사항등이 너무나 많아 아래와 같은 방법을
그나마 차선책으로 활용하고 있다.

<script type='text/javascript'>
	var copytoclipboard = function(val){
		var t = document.createElement("textarea");
		document.body.appendChild(t);
		t.value = val;
		t.select();
		document.execCommand('copy');
		document.body.removeChild(t);
	};
	var inappbrowserout = function(){
		copytoclipboard(window.location.href);
		alert('URL주소가 복사되었습니다.\n\nSafari가 열리면 주소창을 길게 터치한 뒤, "붙여놓기 및 이동"를 누르면 정상적으로 이용하실 수 있습니다.');
		location.href='x-web-search://?';
	}
	window.onload = function(){
		if(navigator.userAgent.match(/inapp|NAVER|KAKAOTALK|Snapchat|Line|WirtschaftsWoche|Thunderbird|Instagram|everytimeApp|WhatsApp|Electron|wadiz|AliApp|zumapp|iPhone(.*)Whale|Android(.*)Whale|kakaostory|band|twitter|DaumApps|DaumDevice\/mobile|FB_IAB|FB4A|FBAN|FBIOS|FBSS|SamsungBrowser\/[^1]/i)){
			if(navigator.userAgent.match(/iPhone|iPad/i)){
				//모바일대응뷰포트강제설정
				var mobile = document.createElement('meta');
				mobile.name = 'viewport';
				mobile.content = "width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui";
				document.getElementsByTagName('head')[0].appendChild(mobile);
				//노토산스폰트강제설정
				var fonts = document.createElement('link');
				fonts.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap';
				document.getElementsByTagName('head')[0].appendChild(fonts);
				document.body.innerHTML = "<style>body{margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif;overflow: hidden;height: 100%;}</style><h2 style='padding-top:50px; text-align:center;font-family: 'Noto Sans KR', sans-serif;'>인앱브라우저 호환문제로 인해<br />Safari로 접속해야합니다.</h2><article style='text-align:center; font-size:17px; word-break:keep-all;color:#999;'>아래 버튼을 눌러 Safari를 실행해주세요<br />Safari가 열리면, 주소창을 길게 터치한 뒤,<br />'붙여놓기 및 이동'을 누르면<br />정상적으로 이용할 수 있습니다.<br /><br /><button onclick='inappbrowserout();' style='min-width:180px;margin-top:10px;height:54px;font-weight: 700;background-color:#31408E;color:#fff;border-radius: 4px;font-size:17px;border:0;'>Safari로 열기</button></article><img style='width:70%;margin:50px 15% 0 15%' src='https://tistory3.daumcdn.net/tistory/1893869/skin/images/inappbrowserout.jpeg' />";
			}else{
				location.href='intent://'+location.href.replace(/https?:\/\//i,'')+'#Intent;scheme=http;package=com.android.chrome;end';
			}
		}
	}
</script>

클립보드와 사파리브라우저 호출을 적절하게 활용하여 대처했다.

친절하게 알려줬지만, 사용성과 유저이탈은 어쩔수 없었다.

안드로이드의 경우 intent://를 활용해서 기존과 동일하게 처리가 가능했고,
iOS의 경우 화면자체를 다른 대체화면으로 출력시킨뒤,
버튼을 누르면 현재 URL을 클립보드에 복사해줌과 동시에 사파리 브라우저를 강제 호출시켰다.
(사파리 브라우저가 강제 호출되면서 자사 URL이 나오면 더욱 Sexy하겠지만, 현재는 이게 차선책일뿐 ㅠㅠ)

계속 찾다보면 뭔가 새로운 방법이 나오겠지....ㅜㅠ

도어락 작동 비활성화 버튼 달기

번개애비 — Thu, 27 Jan 2022 15:00:12 +0900

회사 부설연구소에 도어락이 설치되어 있는데

매번 비밀번호를 입력하기 너무 귀찮아서 평소에는 도어락 배터리를 분리시켜 놓음.

근데...

시간이 흘러 흘러 출근후 배터리를 분리하는것 조차도 귀찮아지기 시작함.

해야지 해야지 하고 있다가 결국 2개월이 지나서야 건드리게 됨.

(사실, 오늘 너무 일하기 싫어서 건든거임. ㅋㅋ)

출입구 문에 도어락을 분리한다.

다행히 피스 4개만 분리하면 손쉽게 탈착이 가능한 모델이라 손쉽게 작업이 가능했음.

(바깥쪽 비밀번호 입력하는 쪽이 아니라 실내쪽 도어락만 분리하면 됨.)

배터리 홀더쪽 배터리스프링을 잘라서 납땜해서 와이어링한다.

(납땜이 잘되어야함. 문 열고 닫다가 저 전선이 끊어지는 날엔 문을 부수는 경우가 생길 수 있음.)

배터리쪽에서 기판쪽으로 선을 빼준뒤,

도어락 상단부에 구멍을 뚤어서 스위치를 고정하고 납땜한다.

너무 간단해서 사실 설명할 필요조차 없음 ㅋㅋ

요로코롬 하면 됨.

최대한 깔끔하게 작업할려고 했는데 칼질하면서 기스 다남 ㅋㅋ

분해는 조립의 역순

아주 잘 작동한다. 끝.

PLE-52 (Nordic nRF528xx 시리즈) 개발보드 거버파일

번개애비 — Thu, 4 Nov 2021 07:27:26 +0900

블루투스 관련 HW개발을 하다가 nRF52810 칩을 알게되었다.

이 칩은 Arduino nano 33 Ble or Sense에 탑재되기도 한 칩이다.

신속하게 개발하기 위한 Nordic SDK를 지원하고 정말 간단한 프로젝트라면 아두이노 Bootloader만 올리면 그만이니

라이트한 환경에서는 나름 괜춘한 칩인것 같다.

프로차일드의 PLE-52

국내 업체에서 공급하고 디바이스마트등 국내재고로써 유통되기 때문에 지금처럼 망할 코로나로 인한 반도체 수급에서 비교적(?) 자유롭다.

그리고 국내유통마진을 생각해도 상식선의 가격대를 형성하고 있는것이 장점이다.

https://www.devicemart.co.kr/goods/search?search_text=ple-52

대한민국 전자부품 1등 쇼핑몰 디바이스마트

디바이스마트

www.devicemart.co.kr

아두이노 RP2040 Connect 와 비교한 사진 정말 컴팩트하다.

정말 안타깝게도 이 모듈은 정말 흔하고 많이들 사용하는 Espressif의 ESP32 시리즈대비 PAD size가 굉장히 작다.

그리고 간단하게 테스팅할 수 있는 별도의 개발보드 또한 존재하지 않아 PCB를 떠본 뒤 테스트를 해야하는 불편함이 존재했다.

Datasheet에서도 PAD사이즈를 실제 PAD보다 작게 설계하도록 권장할정도로 작다.

DATASHEET_PLE-52R_ver.1.4.pdf

1.55MB

결국 간단하게 브레드에서 테스트할 수 있는 Header pin 연결이 가능한 개발보드를 만들게 되었다.

증말증말 심플한 테스트를 위한 보드

기존 Footprint의 PAD에서 2.54mm Header핀으로 연결하여

점퍼선 따위등을 이용하여 브레드보드환경에서도 개발이나 테스트가 가능한 수준이다.

전원부 구성을 한다든가등등은 크리스탈을 따로 붙인다든가 LDO모드등 상황에 따라 다름으로 이번 보드에는 전부다 빼버렸다.

보드사이즈는 가로 50mm X 세로 52mm 이다.

거버파일 다운로드 :

Gerber_PCB_PLE-52R DEV_2021-11-04.zip

0.05MB

몇분만에 금방 만든 아트웍이라 큰 영양가는 없지만,

이 모듈을 이용하여 개발하고자하는 개발자분들에게 조금이나마 시간을 세이브했으면 한다.

참고로 PCB주문은 국내에선 아이씨뱅큐나 해외에선 JLCPCB등을 통해 발주가 가능하다.

Go, JS, PHP 공통으로 사용되는 Millisecond (밀리세컨트초) 소스

번개애비 — Fri, 1 Oct 2021 18:22:42 +0900

2021100118171685 와 같이 16자리 현재시간을 출력하는 공통소스이다.

yyyymmddhhiissmm 의 형태를 지니고 있음으로 초단위 이하의 MicroSecond까지 출력된다.

Go Lang

package main
import (
	"log"
	"time"
	"strconv"
	
)
func main(){
	log.Println(millisecond())
}
func millisecond()(string) {
	ymdhis := time.Now().Format("20060102150405")
	microtimeInt64 := time.Now().UnixNano() / int64(time.Millisecond)
	microtimeUnix := strconv.FormatInt(microtimeInt64, 10)
	return ymdhis + microtimeUnix[10:12]
}

JavaScript

var leadingZeros = function(n, digits) {
	var zero = '';
	n = n.toString();
	if (n.length < digits) {
		for (i = 0; i < digits - n.length; i++)
			zero += '0';
	}
	return zero + n;
};
var millisecond = function(){
	var d = new Date();
	var output = leadingZeros(d.getFullYear(),4);
	output += leadingZeros(d.getMonth()+1,2);
	output += leadingZeros(d.getDate(),2);
	output += leadingZeros(d.getHours(),2);
	output += leadingZeros(d.getMinutes(),2);
	output += leadingZeros(d.getSeconds(),2);
	output += d.getMilliseconds();
	return leadingZeros(output.substring(0,16),16);
};
alert(millisecond());

PHP

echo millisecond();
function millisecond(){
	$microtime = explode(' ',microtime());
	$millitime = explode('.',$microtime[0]);
	return date('YmdHis') . substr($millitime[1], 0, 2);
}

Go Lang 으로 HTML 을 PDF로 변환하기 (wkhtmltopdf 를 사용하지 않고)

번개애비 — Fri, 1 Oct 2021 15:33:47 +0900

프로젝트에서 HTML을 PDF로 변환하여 고객에게 제공하는 기능구현을 하기 위해 서칭을 했고, 여러가지 솔루션을 찾게 되었다.

수 많은 시행착오들...

커멘트에서 동작하는 wkhtmltopdf 는 커멘트라인에서 실행됨으로 웹서비스에서는 보안상이유로 사용하지 않았다. (exec등)

Javascript에서 Canvas를 이용하여 PDF를 생성해주는 html2pdf 는 속도문제와 아이폰에서 Canvas 생성사이즈의 제한 (4K이하)의 문제가 있었다.

PHP에서는 TCPPDF라는것이 존재하지면 HTML문서를 정확하게 파싱이 불가능했다.

결국 구글신이 해결해주심

결국 chromedp 를 사용하기에 이르렀고 그나마 안정적이면서 정확하게 PDF생성이 가능해서 서비스에 적용했다.

PDF를 출력하는 기능자체가 메인서비스가 아닌 부가적인 서비스임으로 마이크로서비스를 위해 GO로 작성했다.

(도커나 클라우드에 독립된 기능으로 손쉽게 분리가 가능하고 버전관리가 용이해서 마이크로서비스는 Go가 대세인듯하다.)

서버 환경은 CentOS LTS버전이다.

GUI가 아닌 LTS 버전에서 테스트했음으로 우분투나 도커등등도 동일하게 동작이 가능할것(?)이다.

Lets Go

1. 크롬설치

chromedp를 사용하기 위해 크롬브라우저를 설치한다.

repo로 굉장히 손쉽게 설치가 가능하다.

wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm

sudo yum localinstall google-chrome-stable_current_x86_64.rpm

2. 폰트설치 (LTS환경만)

여기서 살짝 삽질을 했다.

chromedp에서 PDF출력을 했을때 이미지나 표는 잘 출력이 가능했지만 text가 출력되지 않았다.

알고보니 브라우저에서 지원되는 폰트가 존재하지 않았기 때문이었다. 한글 PDF를 출력하기 위해서는 한글을 지원하는 나눔고딕이나 애플산들고딕등을 폰트설치를 해줘야 한다.

애플산들고딕 저용량버전 : https://www.burndogfather.com/242

애플 산들 고딕체 저용량 경량 웹폰트 (Apple SD Gothic)

www.burndogfather.com

아래 경로가 리눅스에서 폰트를 저장하는 공간이다.

아래 경로에 폰트파일을 넣어두고,

cd /usr/share/fonts/

아래명령어를 실행하면 폰트를 설치할 수 있다.

fc-cache -r

3. Go Code

(Go lang 설치는 넘나 쉬우니 생략...)

chromedp를 설치해해주고,

go get -u github.com/chromedp/chromedp

아래코드를 작성하고 go run main.go 를 실행한다.

package main
import (
	"context"
	"fmt"
	"io/ioutil"
	"log"
	"time"
	"github.com/chromedp/cdproto/emulation"
	"github.com/chromedp/cdproto/page"
	"github.com/chromedp/chromedp"
)

func main() {
	taskCtx, cancel := chromedp.NewContext(
		context.Background(),
		chromedp.WithLogf(log.Printf),
	)
	defer cancel()
	taskCtx, cancel = context.WithTimeout(taskCtx, 15*time.Second)
	defer cancel()
	var pdfBuffer []byte
	if err := chromedp.Run(taskCtx, pdfGrabber("https://www.naver.com", "body", &pdfBuffer)); err != nil {
		log.Fatal(err)
	}
	if err := ioutil.WriteFile("naver.pdf", pdfBuffer, 0644); err != nil {
		log.Fatal(err)
	}
}

func pdfGrabber(url string, sel string, res *[]byte) chromedp.Tasks {

	start := time.Now()
	return chromedp.Tasks{
		emulation.SetUserAgentOverride("WebScraper 1.0"),
		chromedp.Navigate(url),
		chromedp.WaitVisible(`body`, chromedp.ByQuery),
		chromedp.ActionFunc(func(ctx context.Context) error {
			buf, _, err := page.PrintToPDF().WithPrintBackground(true).Do(ctx)
			if err != nil {
				return err
			}
			*res = buf
			fmt.Printf("\nDuration: %f secs\n", time.Since(start).Seconds())
			return nil
		}),
	}
}

요로코롬 PDF를 생성하기 위한 시간이 출력되면서 naver.pdf 파일이 생성된다.

네이버 광고영역은 여기선 나타나지 않지만 visible 설정을 통해 출력이 가능할것으로 보인다.

chromedp.WaitVisible(`body`, chromedp.ByQuery)

유튜브를 예시로 들면...

왼쪽은 WaitVisible 를 body로 설정한 반면 오른쪽은 .video-stream 에 설정한 화면이다.

HTML DOM이 생성된이후 추가적인 Display 처리하는 동적요소까지 반영하여 PDF를 만들수 있다.

대표적인 chromedp의 명령셋은 다음과 같다.

보다 자세한 설명은 https://github.com/chromedp/examples 참조

//URL이동
chromedp.Navigate(`https://www.google.com`)

//2초 동안 쉬기
chromedp.Sleep(2 * time.Second)

//로드가 될때까지 기다리기
chromedp.WaitVisible(`#hplogo`, cdp.ByID)

//키보드입력
chromedp.SendKeys(`#lst-ib`, q+"\n", cdp.ByID)

//클릭하기
chromedp.Click(`#hplogo`)

GoLang 과 Javascript 를 이용해서 데이터베이스를 실시간 트리거(감시?) 하기

번개애비 — Wed, 29 Sep 2021 22:29:59 +0900

보통 MySQL 트리거의 경우, SQL문으로 어떤 쿼리를 실행할 수 있지만,

실제 애플리케이션단에서 최신화 데이터를 감지하여 따로 조치하는 경우에서는 MySQL에서 제공하는 트리거를 활용하기 난감하다.

결국 Javascript Websocket을 통해 Go 프로그램과 통신을 하고, Go 가 실시간으로 데이터베이스의 변화를 감지하여 반환하는 형태로 구현하였다. (참고로 가이드코드임으로 실서비스 적용시 코드튜닝이 필요함.)

간혹, SetTimeOut을 이용하여 Ajax로 구현된 경우가 있는데 서버 부하나 속도측면에서 상당히 불리함으로 이러한 실시간 대응에서는 가급적 WebSocket을 사용하는것을 권장한다.

아래는 실행화면 :=

대략 5초단위로 최신화 데이터 여부를 반환해준다.

통신은 다음과 같이 이뤄진다.

1. 클라이언트가 소켓을 연결함과 동시에 테이블명을 서버로 전달한다.

2. 서버는 해당 클라이언트와 연결된 이후 테이블명을 전달받아 소켓연결 시점을 기준으로 최신화 데이터를 해당 테이블에서 검색한다.

3. 최신화 데이터일경우 1 을 반환하고 오류 혹은 SQL 구문오류시 0을 반환한다.

먼저 Javascript 소스코드이다.

함수형태로 되어 있고, 최신화데이터를 수신받으면 다른 행동을 할 수 있도록 콜백도 선언이 가능하다.

소스내 __WSS_SERVER__ 는 소켓서버의 주소로 넣어줘야하며, tablenm에는 기본값을 넣어두었다.

(사용전 데이터베이스에 맞춰 수정필요)

var dbtrigger = function(tablenm = null, success_callback = null){
	var autoreboot = true;
	if(tablenm == null){
		tablenm = 'sid';
	}
	let websocket = new WebSocket(__WSS_SERVER__+'/dbtrigger');
	websocket.onopen = function(evt) {
		websocket.send(tablenm);
	};
	websocket.onmessage = function(evt) {
		if(evt.data){
			if(evt.data == 1){
				autoreboot = false;
				websocket.close();
				if(success_callback != null){
					success_callback();
				}
			}
			if(evt.data == 0){
				autoreboot = false;
				console.log('DB Trigger ERROR');
				websocket.close();
			}
		}
	};
	websocket.onclose = function(evt) {
		if(autoreboot){
			console.log('reconnect dbtrigger');
			dbtrigger(tablenm, success_callback);
		}
	};
	websocket.onerror = function(evt) {
		websocket.close();
	};
};

Javascript 함수 사용예)

//order테이블을 감시하고 최신화데이터가 존재시 order_search()함수를 실행한다.
dbtrigger('orders',function(){
	order_search();
});

데이터베이스의 테이블명에 클라이언트단에서 노출되는 치명적인 단점이 존재하지만, 약간의 암/복호화만 한다면 실서비스에서도 충분히 적용이 가능할것으로 보인다.

다음 GoLang 소스이다 :=

중간중간에 log를 주석을 달아두었음으로 주석을 제거하여 진행을 확인할 수 있다.

소스내부의 쿼리문의 경우 데이터베이스 구성에 따라 수정해서 사용해야한다.

package main

import (
	"fmt"
	"log"
	"time"
	"net/http"
	"github.com/gorilla/websocket"
	"database/sql"
	_ "github.com/go-sql-driver/mysql"
)

//데이터베이스 설정
var DB, err = sql.Open("mysql", "서버정보")

func main() {
	
	//소켓 핸들링함수 선언
	http.Handle("/", http.FileServer(http.Dir("static")))
	http.HandleFunc("/dbtrigger", socketHandler)
	
	//서버포트설정 (실제로는 proxy를 통해 443 포트를 사용함)
	port := "5000"
	if err := http.ListenAndServe(":"+port, nil); err != nil {
		log.Fatal(err)
	}
}

//버퍼
var upgrader = websocket.Upgrader{
	ReadBufferSize:  1024,
	WriteBufferSize: 1024,
	CheckOrigin: func(r *http.Request) bool {
		return  true
	},
}

// /dbtrigger 연결시
func socketHandler(w http.ResponseWriter, r *http.Request) {
	
	//커넥션정보
	conn, err := upgrader.Upgrade(w, r, nil)
	defer conn.Close()
	if err != nil {
		//log.Printf("[ERROR]upgrader: %v", err)
		return
	}
	
	

	for {
		
		//메시지 읽기
		messageType, p, err := conn.ReadMessage()
		if err != nil {
			//log.Printf("[ERROR]ReadMessage: %v", err)
			return
		}
		if p != nil{
			//메시지가 도착할경우 테이블이름 받아오기
			tablenm := string(p)
			//log.Printf("Trigging tablenm : %s", tablenm)
			
			//현재시간 측정
			now := time.Now().Format("2006010215040599999")
			//log.Printf("This data : %s", now)
			
			//현재시간 이후로 발생된 최신 데이터 찾기
			for{
				//5초마다 DB조회
				time.Sleep(5 * time.Second)
				
				//sid 테이블에서 요청한 테이블명중에 현재시간 이후 최신 데이터 찾기
				var sid int
				sqlRaw := fmt.Sprintf("SELECT sid FROM sid WHERE sid > %s AND TABLES = '%s' AND LOCKCOLUMN = 0 ORDER BY sid DESC LIMIT 1", now, tablenm)
				rows, err := DB.Query(sqlRaw)
				if err != nil {
					//실패
					var str string = "0"
					var bytes []byte
					bytes = []byte(str)
					if err := conn.WriteMessage(messageType, bytes); err != nil {
						//log.Printf("conn.WriteMessage: %v", err)
						return
					}
				}
				defer rows.Close()
				for rows.Next() {
					err := rows.Scan(&sid)
					if err != nil {
						//실패
						var str string = "0"
						var bytes []byte
						bytes = []byte(str)
						if err := conn.WriteMessage(messageType, bytes); err != nil {
							//log.Printf("conn.WriteMessage: %v", err)
							return
						}
					}
					//데이터가 존재할 경우
					if sid != 0 {
						//log.Println("find new data :",sid)
						
						//성공
						var str string = "1"
						var bytes []byte
						bytes = []byte(str)
						if err := conn.WriteMessage(messageType, bytes); err != nil {
							//log.Printf("conn.WriteMessage: %v", err)
							return
						}
						
					}
					
				}
				
			}
			
			
		}
		
	}
}

Go 소스에서는 포트번호가 5000번 포트를 사용하고 있는데, 필자의 경우 앞단 Nginx 서버에서 SSL과 Proxy로 처리하여 443포트를 사용하여 불필요한 포트낭비를 최소화하고 차후 부하분산에 쉽게 대응할 수 있도록 조치해두었다.

아래는 Nginx 가상호스트 셋팅의 예이다. (SSL은 서버환경에 맞게 다시 설정필요함)

upstream ws {
    server 127.0.0.1:5000;
}

server {
    server_name  도메인;
    location / {
      proxy_pass http://ws;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host $host;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/도메인/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/도메인/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    add_header Strict-Transport-Security "max-age=31536000" always;

}

근래에 들어서, 특히 대규모서비스로 갈수록 Vanilla JS로 리팩토링하는 프로젝트가 많아지고 있기도 하고, 점차 XHR 통신보다는 Socket으로 변화되고 있는 추세이다.

뭔가 하드코어하면서 프레임웍 없이 바닥부터 짜는 느낌이라 원시인이 된 것 같은 느낌인데, 돌이켜보면 결국 쉬운길은 없었다.

개발자들이 편의를 위해 만들어진 프레임워크를 사용하는것도 좋지만 결국엔 본질을 잘 이해하고 활용할 수 있어야만 살아남는것 같다.

(물론 단기간 내 빠르게 처내야하는 프로젝트는 논외)

Swift에서 멀티스레드로 함수를 실행하고 완료시 다른함수 호출하기

번개애비 — Thu, 16 Sep 2021 10:15:55 +0900

Function(Function()) 과 같은 아주 괴랄한 형태의 함수를 만들어보았다.

Swift에서는 싱글톤이나 자주 사용하는 클래스나 함수를 만들때 유용하게 사용할 수 있다.

Escaping을 통해 부모함수에 자식함수를 입력할 수 있도록 조치하고,

DispatchGroup을 통해 부모함수를 실행하되, Semaphore를 통해 쓰레드 제어를 한다.

부모함수가 실행이 완료되면, Dispatch된 함수의 Notify를 이용하여 자식함수를 실행한다.

자식함수는 Void형태의 변수로 담아두고 부모함수를 선언할때 해당 변수를 매개변수로써 실행해주면 된다.

아래는 소스코드

//자식함수(나중에 실행될 함수)
let input_func = {
    print("WooooooooooOW")
}

//부모함수(먼저 실행되는 함수)
func test(_ functions: @escaping () -> Void){
    let group = DispatchGroup() //Dispatch생성
    let semaphore = DispatchSemaphore(value: 4) //Semaphore를 통해 총 4개의 동시작업
    
    //테스트를 위한 반복문
    for i in 1...5  {
        //비동기로 실행
        DispatchQueue.global().async(group: group) {
            //쓰레드 시~~~작
            semaphore.wait()
            //쓰레드 종료!
            defer { semaphore.signal() }
            print("진행중: \(i)" )
            //테스트를 위해 3초간 쓰레드 휴식
            Thread.sleep(forTimeInterval: 3)
            print("진행중(3초뒤): \(i)" )
        }
    }

    //부모함수가 모두다 실행되었을때
    group.notify(queue: DispatchQueue.main) {
        //매개변수로 입력한 자식함수를 실행
        functions()
    }
}

//위의 괴랄한 함수를 실행!
test(input_func)

Semaphore의 간단하고 손쉬운 그림설명이다.

세마포어가 4개로 선언된다면 아래와 같이 4개의 테스크가 동시에 실행된다.

Wait -> 실행 -> Signal

Swift에서는 세마포어를 아래와 같이 선언하여 사용할 수 있다.

세마포어를 사용하는 이유는 parallel 한 동시적인 연산이나 작업을 실행하는것에 있어서 다른 작업과 공유자원을 활용하지 않도록 하기위함도 있다.

DispatchQueue.main도 있고 DispatchQueue.global등이 있지만, 앱을 개발하다보면 DispatchQueue가 무쟈게 많아진다 ㅠ

아래 예시코드터럼 총 4개의 세마포어를 선언하면 4개의 테스크를 동시실행할 수 있다. (실제로는 동시실행은 아니지만 동시실행처럼 실행된다.)

let semaphore = DispatchSemaphore(value: 4)

세마포어를 시작을 알리는 코드이다.

이 코드 아래부터는 임계구역안에서 실행되며, 동시작업할 코드들의 내용이 시작된다.

(이것을 실행하기 전에는 세마포어의 값이 감소되면서 세마포어가 시작된다.)

semaphore.wait()

아래 코드는 세마포어를 종료하는 코드이다.

defer는 해당 함수의 가장 마지막에 실행할 수 있도록 한다.

단, defer는 중간에 throw나 guard가 사용되어 함수가 종료될경우 defer는 실행되지 않음으로 유의해야한다.

defer { semaphore.signal() }

Swift 5.x UIAlertController를 이용하여 앱 설정 화면으로 전환시키기

번개애비 — Wed, 15 Sep 2021 20:25:12 +0900

Swift 로 iOS 개발을 하다보면, 알림권한을 받아와 푸시메시지를 보내거나 내부적인 처리를 위해서 사용하는 경우가 많다.

알림 권한을 피치못한 사정으로 인해 반드시 사용해야하는 경우 UIAlert을 통해 앱 설정화면으로 이동시켜 사용자에게 보다 친화적인 서비스개발이 가능하다.

아래 스크린샷은 앱 초기 실행 혹은 포그라운드로 되돌아올때 나타나는 화면예시다.

알림권한 뿐만 아니라 블루투스, 위치권한등도 응용이 충분히 가능하다.

알림권한을 묻는 화면

알림권한을 허용하지 않을 경우 나타나는 Alert 메시지창

아래는 알림설정을 할 수 있도록 유도하는 UIAlert 소스코드이다.

참고로 싱글톤으로 사용되거나, 부득이하게 ViewController가 아닌 Delegate에 넣어서 사용할 수 있도록, Alert 메시지의 present 처리를 조금 다르게 작성되어 있다.

(원래는 present(alert, animated: false, completion: nil) 이런식으로 아주 간단하게 쓸수 있는데 말이다.)

let NOTIalert: UIAlertController = UIAlertController(title: "알림설정이 필요합니다", message: "알림을 '허용'해야 서비스이용이 가능합니다.", preferredStyle: .alert)
let NOTIaction: UIAlertAction = UIAlertAction(title: "설정 변경", style: .default, handler: { (ACTION) in
    //앱 강제 종료
    DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(1), execute: {exit(0)})
    //앱 설정 이동
    let NOTIurl = NSURL(string:"App-prefs:root=NOTIFICATIONS_ID")! as URL
    UIApplication.shared.open(NOTIurl)
})
NOTIalert.addAction(NOTIaction)
DispatchQueue.main.async{
    if #available(iOS 13, *) {
        UIApplication.shared.windows.first { $0.isKeyWindow }?.rootViewController?.present(NOTIalert, animated: true, completion: nil)
    } else {
        UIApplication.shared.keyWindow?.rootViewController?.present(NOTIalert, animated: true, completion: nil)
    }
}

사용자가 Alert 메시지를 보고 설정 변경을 누르면, 자동으로 앱 설정화면으로 이동된다.

코드 중간에 아주아주 괴랄한 방법으로 앱 강제종료 기능이 존재한다. 이러한 조치는 반드시 알림권한이 설정되어야 하는것이기도 하며, 사용자가 설정화면으로 전환되었다가 다시 앱의 포그라운드로 돌아올때 중간에 시작되는 로직의 구분을 하기 귀찮(?)기 때문에 강제종료를 예약해둔것이다.

앱 설정화면에 대한 URL 정보들은 아래와 같다.

설정 화면 종류	오래된 Swift 혹은 Obj-C	Swift 3
About	prefs:root=General&path=About	App-prefs:root=General&path=About
Accessibility	prefs:root=General&path=ACCESSIBILITY	App-prefs:root=General&path=ACCESSIBILITY
Account Settings	prefs:root=ACCOUNT_SETTINGS	App-prefs:root=ACCOUNT_SETTINGS
Airplane Mode	prefs:root=AIRPLANE_MODE	App-prefs:root=AIRPLANE_MODE
Autolock iOS < 10	prefs:root=General&path=AUTOLOCK	App-prefs:root=General&path=AUTOLOCK
Auto-Lock iOS > 10	prefs:root=DISPLAY&path=AUTOLOCK	App-prefs:root=DISPLAY&path=AUTOLOCK
Apple Pay / Wallet	shoebox://url-scheme	shoebox://url-scheme
Battery	prefs:root=BATTERY_USAGE	App-prefs:root=BATTERY_USAGE
Brightness	prefs:root=Brightness	App-prefs:root=Brightness
Bluetooth iOS < 9	prefs:root=General&path=Bluetooth	App-prefs:root=General&path=Bluetooth
Bluetooth iOS > 9	prefs:root=Bluetooth	App-prefs:root=Bluetooth
Castle	prefs:root=CASTLE	App-prefs:root=CASTLE
Cellular Usage	prefs:root=General&path=USAGE/CELLULAR_USAGE	App-prefs:root=General&path=USAGE/CELLULAR_USAGE
Configuration List	prefs:root=General&path=ManagedConfigurationList	App-prefs:root=General&path=ManagedConfigurationList
Date and Time	prefs:root=General&path=DATE_AND_TIME	App-prefs:root=General&path=DATE_AND_TIME
Do not disturb	prefs:root=General&path=DO_NOT_DISTURB	App-prefs:root=General&path=DO_NOT_DISTURB
Facetime	prefs:root=FACETIME	App-prefs:root=FACETIME
General	prefs:root=General	App-prefs:root=General
Internet Tethering	prefs:root=INTERNET_TETHERING	App-prefs:root=INTERNET_TETHERING
iTunes	prefs:root=MUSIC	App-prefs:root=MUSIC
iTunes Equalizer	prefs:root=MUSIC&path=EQ	App-prefs:root=MUSIC&path=EQ
iTunes Volume	prefs:root=MUSIC&path=VolumeLimit	App-prefs:root=MUSIC&path=VolumeLimit
Keyboard	prefs:root=General&path=Keyboard	App-prefs:root=General&path=Keyboard
Deeper in Keyboard	prefs:root=General&path=Keyboard/KEYBOARDS	App-prefs:root=General&path=Keyboard/KEYBOARDS
Lang International	prefs:root=General&path=INTERNATIONAL	App-prefs:root=General&path=INTERNATIONAL
Location Services	prefs:root=Privacy&path=LOCATION	App-Prefs:root=Privacy&path=LOCATION
Mobile Data		prefs:root=MOBILE_DATA_SETTINGS_ID
Network	prefs:root=General&path=Network	App-prefs:root=General&path=Network
Nike iPod	prefs:root=NIKE_PLUS_IPOD	App-prefs:root=NIKE_PLUS_IPOD
Notes	prefs:root=NOTES	App-prefs:root=NOTES
Notifications ID	prefs:root=NOTIFICATIONS_ID	App-prefs:root=NOTIFICATIONS_ID
Passcode / Touch ID	prefs:root=TOUCHID_PASSCODE	App-prefs:root=TOUCHID_PASSCODE
Passbook	prefs:root=PASSBOOK	App-prefs:root=PASSBOOK
Phone	prefs:root=Phone	App-prefs:root=Phone
Photo Camera Roll	prefs:root=Photos	App-prefs:root=Photos
Privacy	Prefs:root=Privacy	App-prefs:root=Privacy
Profiles & Device Management	Prefs:root=General&path=ManagedConfigurationList	App-prefs:root=General&path=ManagedConfigurationList
Reset	prefs:root=General&path=Reset	App-prefs:root=General&path=Reset
Ringtone	prefs:root=Sounds&path=Ringtone	App-prefs:root=Sounds&path=Ringtone
Siri	prefs:root=SIRI	App-prefs:root=SIRI
Safari	prefs:root=Safari	App-prefs:root=Safari
Siri iOS < 10?	prefs:root=General&path=Assistant	App-prefs:root=General&path=Assistant
Siri iOS > 10?	prefs:root=SIRI	App-prefs:root=SIRI
Sounds	prefs:root=Sounds	App-prefs:root=Sounds
Software Update	prefs:root=General&path=SOFTWARE_UPDATE_LINK	App-prefs:root=General&path=SOFTWARE_UPDATE_LINK
Storage & Backup	prefs:root=CASTLE&path=STORAGE_AND_BACKUP	App-prefs:root=CASTLE&path=STORAGE_AND_BACKUP
Store	prefs:root=STORE	App-pref:root=STORE
Twitter	prefs:root=TWITTER	App-prefs:root=TWITTER
Usage	prefs:root=General&path=USAGE	App-prefs:root=General&path=USAGE
Video	prefs:root=VIDEO	App-prefs:root=VIDEO
VPN	prefs:root=General&path=Network/VPN	App-prefs:root=General&path=Network/VPN
Wallpaper	prefs:root=Wallpaper	App-prefs:root=Wallpaper
WIFI	prefs:root=WIFI	App-prefs:root=WIFI

위 방식으로 아주 다양한 전환이 가능한데, 조금만 더 응용하자면, 자신의 앱이외에 다른앱의 설정화면으로도 이동이 가능하다.

다른앱의 Bundle Identifier를 이용하면 된다. 아래 예시는 인스타그램의 앱 설정화면으로 이동하는 예시이다.

// For iOS 13.* 
UIApplication.shared.openURL(NSURL(string:"App-prefs:root=NOTIFICATIONS_ID&path=com.burbn.instagram")! as URL)

애플에서 권한설정을 묻는 이유는 당연히 사용자가 결정할 수 있는 권리를 제공한것이기 때문에,

부득이한 상황이 아니라면 이런 괴랄한 방법은 지양하는것이 좋다.

ArduinoBLE ibeacon의 uuid 와 major, minor, RSSI 스캔하기

번개애비 — Thu, 9 Sep 2021 09:55:43 +0900

기본적으로 ArduinoBLE 라이브러리에는 iBeacon을 수집하기 위한 클래스가 존재하지 않아,

별도로 개발하거나 다른 Bluetooth 모듈의 AT 통신을 통해 iBeacon을 수집했어야 했다.

환경구성

아이폰 12 mini -----> Arduino nano 33 BLE

아이폰이 iBeacon을 통해 Advertising을 진행하면 아두이노가 신호를 받아와 UUID, Major, Minor, RSSI의 값을 스캔할 수 있는 환경이다. 아이폰과 아두이노간의 신호세기를 측정할 수 있음으로 NearBy나 간략하게나마 접근측정이 가능하여 도어제어등으로 활용할 수 있다.

아이폰에 BeaconSimulator 앱을 설치하여 간편하게 테스트할 수 있다.

아래 라이브러리를 다운로드받아 IDE에 라이브러리를 ZIP파일 그대로 추가한다.

ArduinoBLE.zip

0.30MB

아이폰에서 BeaconSimulator앱을 구동한 화면

아두이노에서 스캔한 시리얼모니터 화면

iBeacon 스캔하는 소스코드

#include <ArduinoBLE.h>

void setup() {
  Serial.begin(9600);

  digitalWrite(LEDR, LOW);
  if (!BLE.begin()) {
    Serial.println("ERROR : BLE Can't Start!");
    while (1);
  }
}

void loop() {
  BLE.scan();
  // check if a peripheral has been discovered
  BLEDevice peripheral = BLE.available();

  if (!peripheral) {
    return;
  }
  if (!peripheral.hasManufacturerData()) {
    return;
  }

  String manufacturerData = peripheral.manufacturerData();
  if (manufacturerData.length() < 25 * 2) {
    return;
  }
  if (manufacturerData.substring(0, 8) != "4c000215") {
    return;
  }

  // Discovered an iBeacon
  Serial.println("Discovered an iBeacon");
  Serial.println("-----------------------");

  // UUID
  String id = manufacturerData.substring(8, 16) + "-";
  id += manufacturerData.substring(16, 20) + "-";
  id += manufacturerData.substring(20, 24) + "-";
  id += manufacturerData.substring(24, 28) + "-";
  id += manufacturerData.substring(28, 40);
  Serial.print("UUID: ");
  Serial.println(id);

  // Major ID
  char buf[5];
  manufacturerData.substring(40, 44).toCharArray(buf, 5);
  int major = (int)strtol(buf, NULL, 16);
  Serial.print("Major ID: ");
  Serial.println(major);

  // Minor ID
  manufacturerData.substring(44, 48).toCharArray(buf, 5);
  int minor = (int)strtol(buf, NULL, 16);
  Serial.print("Minor ID: ");
  Serial.println(minor);

  // RSSI
  Serial.print("RSSI: ");
  Serial.println(peripheral.rssi());
  Serial.println();
}

iBeacon Data설명

0~8 : Factory ID - 제조사 고유의 아이디값 8자리 iBeacon은 4c000215을 사용한다.)
8~40 : UUID - 고유식별번호 {8-4-4-4-12}와 같은 32자리

40~44 : Major ID - 16비트 4자리를 10진수전환하여 3자리

44~48 : Minor ID - 16비트 4자리를 10진수전환하여 3자리

iBeacon 데이터예시

자전거로 제주도 일주 당일치기 후기

번개애비 — Wed, 25 Aug 2021 21:16:35 +0900

이번여름에 휴가로 제주도를 다녀오면서 제주도일주를 했음.

이전에 군산 당일치기를 했었는데 이번엔 제주도 당일치기임.

근데 하필 출발당일 아침에 비가 어마무시하게 쏟아지는 바람에 새벽 5시가 아닌 9시에 출발했고,

덕분에 밤늦게까지 라이딩하게됨.

만일, 제주일주를 당일치기할 예정이라면 반드시 날씨와 출발시간을 최대한 이른시간에 하는것을 추천함.

서귀포 남원에서 출발하는 일정이었고,

쉬고, 밥먹고, 싸는 시간을 제외하고 자전거 위에서 총 8시간 동안 페달을 비벼야 가능함. ㅋㅋㅋ

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

남원에서 표선해수욕장까지는 일주로옆 자전거길을 이용하면됨.

서귀포 인근에는 다행히 바람이 없어서 남원에서 표선해수욕장까지는 약 1시간정도 걸림.

표선해수욕장에서부터는 해안도로를 이용함으로 해안도로 진입시 차량통행에 각별히 유의하는게 좋음.

표선을 지나 성산일출봉에 도착. 비가 오는 날씨였지만, 아직까지는 괜춘함.

성산일출봉안으로 진입하는 도로가 있고, 성산일출봉으로 진입하지 않는 방법이 있는데,

개인적으로 성산일출봉으로 진입하는 방향을 추천함.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

성산일출봉 일대에 먹거리가 많기 때문에 보급과 식사가 용이함.

원래는 제주 시내에서 점심을 해결하려고 했으나,

아침공복상태 + 비바람으로 부득이하게 구좌에서 점심을 해결함.

여기는 제주바보라면이라는 곳임.

제주도까지가서 겨우라면을 먹었냐고 하겠다만,

여기라면은 전복, 문어등 일반라면과 차원이 다름. (강추)

http://naver.me/GbEcw9vz

바보라면 : 네이버

방문자리뷰 391 · ★4.54 · 해물라면 바다가 보이는 라면집 넘나 맛있는 곳

m.place.naver.com

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

제주 시내에 진입하기 시작하면 이제 차도가 아닌 인도위로 라이딩해야함.

MTB나 일반자전거가 아닌 로드자전거의 경우 제주시내구간에서 엄청난 안장통을 겪을수 있음.

위 영상은 제주항임.

참고로 제주항으로 진입하기 직전에 엄청난 언덕이 있음 ㅋㅋㅋㅋㅋ

제주항을 지나면 엄청난 내리막 계단이 있는데,

비에 클릿조합이라 부득이하게 좀 돌아서 내려감.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

용두암.

용두암을 지나면 중간에 자전거도로가 끊기고 데크길이 있음으로 보행자 유의하여 주행해야함.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

용두암을 지나면 여기서부터는 해안도로를 달릴수 있음.

쉬다가 비행기가 지나가길래 찍음.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

해거름휴게소.

여기서부터 본격 바람 헬게이트가 열림.

참고로 이 휴게소에서 볼일도 보고 보급도 해야됨.

(앞으로 산방산인근까지 보급장소가 존재하지 않음)

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

상모리 인근을 지나다가 엄청난 비폭탄을 맞음 ㅋㅋ

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

산방산인지 송악산인지 잘 모르지만, 근처라서 걍 찍음.

(사실, 쉬고 싶어서 찍은거임)

맥도날드가 보이면 서귀포 중문에 도착한것임.

여기서 중문단지 안으로 들어가면 해안도로를 타야되고, 그대로 직진하면 도로는 넓지만 엄청난 높낮이의 고바위들을 지나야함.

시간이 늦어서 그냥 일주도로로 달리고 헬게이트를 경험함 ㅋㅋㅋ

아침 9시에 출발

저녁 11시 도착

당일치기를 하려면 미리 장거리 라이딩을 경험하고 도전하는것을 추천함.

1박이나 2박은 환상의 자전거길이지만,

무박은 환장의 자전거길임.

개인적으로 금강당일치기 왕복보다 주행거리는 짧지만,

뷰가 좋아서인지 덜 힘들었었음.

아이폰 in-app browser(인앱브라우저)별 user agent

번개애비 — Mon, 5 Jul 2021 20:16:58 +0900

아이폰의 별의별 앱들의 인앱브라우저 user agent를 모아봤다.
전부 다 테스트해서 user agent를 찾기엔 앱이 너무나 많기 때문에 개발하고자하는 서비스의 유입트래픽에 맞춰 user agent를 수집해서 예외처리하면 좋을듯

(iOS에서 인앱브라우저 무시하고 강제로 사파리 열기 - https://www.burndogfather.com/201)

user agent 찾는방법

<body>
	<script>
		window.onload = function(){ 
			alert(navigator.userAgent); 
			document.write(navigator.userAgent); 
		}
	</script>
</body>

티스토리

카카오톡

인스타그램

트위터

네이버

블라인드

와디즈

알리익스프레스

줌앱

네이버 웨일

MariaDB의 디렉토리를 수정하여 설치 (CentOS 7.x 기준)

번개애비 — Thu, 24 Jun 2021 23:16:05 +0900

리포지토리를 등록하는 스크립트를 실행한다.

curl -sS https://downloads.mariadb.com/MariaDB/mariadb_repo_setup | sudo bash

설치

yum install MariaDB

서비스시작

service mysql start

서비스시작확인되면, 종료한다.

service mysql stop

백업디렉토리를 생성한다.

cd /root

mkdir mysql_bak

원래 데이터를 백업디렉토리로 잠시 복사한다. (혹시모르니)

cp -R /var/lib/mysql /root/mysql_bak

원래 데이터를 /home의 위치로 이동한다.

rsync -av /var/lib/mysql /home/

소유자 권한을 수정한다.

chown -R mysql:mysql /home/mysql

접근권한을 수정한다.

chmod 755 -R /home/mysql

시스템엑세스권한을 잠시 풀어놓는다.

vi /etc/selinux/config

SELINUX=disabled

MariaDB 설정파일에서 디렉토리 경로를 바꾼다.

vi /etc/my.cnf

[mysqld]
datadir=/home/mysql
socket=/home/mysql/mysql.sock

[client]
socket=/home/mysql/mysql.sock

서비스관리파일에서 디렉토리 제한을 풀어놓는다.

vi /usr/lib/systemd/system/mariadb.service

ProtectHome=true
ProtectHome=false

LimitNOFILE=163840
LimitNPROC=163840

시스템데몬을 다시 로드

systemctl daemon-reload

서비스시작

service mysql start

디렉토리가 변경된 MariaDB 서비스시작이 확인되면, 종료한다.

service mysql stop

서버환경에 따라 다르게 튜닝해야한다. (16코어, 32BG RAM 셋팅임으로, 사양에 맞추고 IO성능에 맞춰야한다.)

vi /etc/my.cnf

[client-server]
# custom setting
[mysqld]
datadir=/home/mysql
socket=/home/mysql/mysql.sock
port=3306
collation-server = utf8_general_ci
init-connect='SET NAMES utf8'
character-set-server=utf8
innodb_log_file_size=256M
innodb_buffer_pool_size=4G
innodb_buffer_pool_instances = 10
innodb_write_io_threads = 16
innodb_read_io_threads = 16
max_heap_table_size=24m
tmp_table_size=100m
innodb_sort_buffer_size=64m
#innodb_force_recovery = 4
sql-mode="NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION"
slave-skip-errors=all
skip-name-resolve
read_only=0
key_buffer_size = 768M
max_allowed_packet = 1M
table_open_cache = 512
sort_buffer_size = 64M
read_buffer_size = 24M
read_rnd_buffer_size = 8M
myisam_sort_buffer_size = 128M
thread_cache_size = 20

# Try number of CPU's*2 for thread_concurrency
thread_concurrency = 64
max_connections = 4096
table_cache = 10240

# Query Cache
query_cache_limit=16M
query_cache_size=1024M
query_cache_type=1
default_storage_engine=InnoDB
[client]
socket=/home/mysql/mysql.sock
port=3306
default-character-set=utf8
#
# include *.cnf from the config directory
#
!includedir /etc/my.cnf.d

MariaDB 서비스를 활성화한다.

systemctl enable mariadb

MariaDB를 시작한다.

service mysql start

MariaDB의 root 패스워드를 설정한다.

/usr/bin/mysqladmin -u root password ‘설정할패스워드입력’

부팅시 자동실행될 수 있도록 설정한다.

chkconfig --level 2345 mysql on

(선택사항)

root계정을 외부에서도 접근할 수 있도록 설정할 수 있다.

mysql의 root로 접속한다.

mysql -uroot -p

> 패스워드 입력

mysql 데이터베이스로 이동

use mysql;

root 계정의 권한정보 수정

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '패스워드';

입력한 설정정보 반영

flush privileges;

M1 맥북 프로에서 듀얼/멀티 모니터 사용하는 방법 (트리플모니터)

번개애비 — Wed, 23 Jun 2021 00:56:59 +0900

회사의 디자이너에게 USB-C 타입으로 연결할 수 있는 모니터와 요즘 핫한 애플 실리콘의 M1 맥북프로 보급이 하달되었다.

사실 나는 인텔맥 유저라 듀얼모니터도 안되지만, 긴배터리타임과 빠른앱속도의 M1에 대해 별루 관심이 없었지만,

이번 기회에 인텔맥에서 M1맥으로 이주를 고민하게 되는 아주 아주 결정적인 계기가 되었다.

그리고 수개월이 아닌 몇시간(?) 동안 고민 끝에 M1 맥북 프로에서 듀얼모니터를 사용하는 방법을 알게되어 공유하게 되었다.

(더불어 장바구니에 M1 맥북프로가 들어감)

[컨셉]
USB-C 나 썬더볼트 선 하나로 듀얼모니터를 출력함과 동시에 M1 맥북 충전이 가능해야함.

이 방식은 USB type C 포트가 내장된 디스플레이 말고도 USB type C 혹은 썬더볼트3를 지원하는 독(Dock)을 사용중일 때도 동일하게 적용이 가능함. (예를 들면 Caldigit TS3+ 나 벨킨 독과 같이...)

먼저 M1 으로 멀티모니터 연결된 인증사진을 자랑스럽게 보여줌.

연결방식은 심플하다.

이렇게 생긴 USB-A to HDMI 컨버터로 연결하면 됨.

한쪽이 USB-A 숫놈 (네모난 USB), 반대쪽이 HDMI 암놈으로 구성되어 있다.

구성은 아래와 같음.

M1 맥북 -------usb-c------ 모니터 혹은 독 -----HDMI컨버터------ 또다른 모니터

모니터 하나는 모니터자체 혹은 독에 직접 연결하고 다른 모니터 하나는 HDMI컨버터를 통해 연결하면 된다.

구글링을 통해 수많은 외계국어 자료들을 살펴보면서 하나도 도움이 안되었고,

결국 이 제품이 가능하다는것을 복권 긁듯이 컨버터를 사면서 알게되었음.

(참고로 협찬아님 내돈내산임)

NX-U3TH1

~~(NM-CEH02도 된다고하는데 실제로 안써봐서 잘모름...)~~

(댓글에 NM-CEH02 도 된다고 합니다.)

조언하자면, HDMI 컨버터가 4K가 지원되네, 포트가 2개 달려있네 하는 제품들은 거르는것이 좋음.

이 방식자체가 소프트웨어방식으로 외장그래픽카드의 모니터를 지원하는 방식임으로 소프트웨어에서 일단 외장그래픽카드(?)의 칩셋이 지원되어야함. 아직까진 4K가 정말 깔끔하면서 끊김없는 30.00001 프레임이상이라도 지원되는 제품을 찾아볼 수 없었고 포트가 2개씩 달려있는 제품의 칩셋은 적어도 아직까진 호환되지 않음. (내돈 버리면서 알게됨)

역시 악세사리는 애플이지 하면서, 애플정품 케이블도 써봤지만 안됨.

그냥 말그대로 젠더가 아니라 컨버터제품을 써야됨.

일단 이렇게 됨으로써 USB-C 단자 하나로 듀얼모니터와 M1 맥북 충전이 가능해짐.

아주 깔쌈한 구성이라고 보면 됨.

여기까지가 HW셋팅이 끝난것임.

이제 Display Link 에서 최신버전의 프로그램을 설치한다.

비록 우리는 Display Link 인증 칩을 사용하는 컨버터를 사용하지 않지만 괜찮다.

https://www.displaylink.com/downloads/macos

macOS

DisplayLink macOS Software DisplayLink Manager is a new way to enable your DisplayLink dock, adapter or monitor on macOS platforms. It's an application that combines our latest driver with features that streamline the setup of mutliple displays up to 4K. L

www.displaylink.com

참고로 설치과정에서 설치가 되지 않는다면,

사과 -> 시스템환경설정 -> 보안및개인정보보호 -> 일반탭에서 허용함을 눌러주면 된다.

(물론 아래 자물쇠 먼저 해제하는게 맥북유저의 기본 상식임)

설치가 다 되면 Display Link Manager 앱을 실행하면 상단 테스크에 박스 2개가 교집합된 아이콘을 볼수 있다.

아이콘을 클릭한다.

뿅!

말풍선안에 Automatic startup 에 체크하고 download 버튼을 눌러 또 뭔가를 더 다운로드 받아 설치한다.

(아주 괴랄한 앱인앱형태인듯함.)

설치가 완료되면, 사과 -> 시스템환경설정 -> 보안및개인정보보호 -> 개인정보보호탭으로 이동하고,

화면기록(Screen Recording)을 누른뒤 + 를 눌러 DisplayLink Manager 앱을 추가한다.

마지막으로 재부팅한다.

될때 까지 재부팅한다.

안되면 썬더볼트나 C타입케이블도 뺏다꼇다하고 모니터도 껏다 켯다해보고

그럼에도 안되면 Display Link를 다시 지웠다가 재설치하면 된다.

애플 산들 고딕체 저용량 경량 웹폰트 (Apple SD Gothic)

번개애비 — Fri, 30 Apr 2021 01:08:53 +0900

저작권관련사항 :

"애플산돌네오고딕과 관련해서는 산돌에 어떠한 권리도 없고 단순 제작 의뢰를 받아 만들어줬을 뿐이다.

라이선스 정책은 애플에 문의하고 그에 따르면된다. 마이크로소프트의 맑은 고딕도 자신들이 제작만 했을 뿐이다."

애플은 기본 번들 폰트에 대한 상업적 제한을 하지 않는다고 했으므로 인쇄, 출판, 영상 제한없이 사용 가능합니다.

본 폰트는 Subsetting 처리된 경량화된 폰트입니다.

지원되는 글자 리스트

가각간갇갈갉갊감갑값갓갔강갖갗같갚갛개객갠갤갬갭갯갰갱갸갹갼걀걋걍걔걘걜거걱건걷걸걺검겁것겄겅겆겉겊겋게겐겔겜겝겟겠겡겨격겪견겯결겸겹겻겼경곁계곈곌곕곗고곡곤곧골곪곬곯곰곱곳공곶과곽관괄괆괌괍괏광괘괜괠괩괬괭괴괵괸괼굄굅굇굉교굔굘굡굣구국군굳굴굵굶굻굼굽굿궁궂궈궉권궐궜궝궤궷귀귁귄귈귐귑귓규균귤그극근귿글긁금급긋긍긔기긱긴긷길긺김깁깃깅깆깊까깍깎깐깔깖깜깝깟깠깡깥깨깩깬깰깸깹깻깼깽꺄꺅꺌꺼꺽꺾껀껄껌껍껏껐껑께껙껜껨껫껭껴껸껼꼇꼈꼍꼐꼬꼭꼰꼲꼴꼼꼽꼿꽁꽂꽃꽈꽉꽐꽜꽝꽤꽥꽹꾀꾄꾈꾐꾑꾕꾜꾸꾹꾼꿀꿇꿈꿉꿋꿍꿎꿔꿜꿨꿩꿰꿱꿴꿸뀀뀁뀄뀌뀐뀔뀜뀝뀨끄끅끈끊끌끎끓끔끕끗끙끝끼끽낀낄낌낍낏낑나낙낚난낟날낡낢남납낫났낭낮낯낱낳내낵낸낼냄냅냇냈냉냐냑냔냘냠냥너넉넋넌널넒넓넘넙넛넜넝넣네넥넨넬넴넵넷넸넹녀녁년녈념녑녔녕녘녜녠노녹논놀놂놈놉놋농높놓놔놘놜놨뇌뇐뇔뇜뇝뇟뇨뇩뇬뇰뇹뇻뇽누눅눈눋눌눔눕눗눙눠눴눼뉘뉜뉠뉨뉩뉴뉵뉼늄늅늉느늑는늘늙늚늠늡늣능늦늪늬늰늴니닉닌닐닒님닙닛닝닢다닥닦단닫달닭닮닯닳담답닷닸당닺닻닿대댁댄댈댐댑댓댔댕댜더덕덖던덛덜덞덟덤덥덧덩덫덮데덱덴델뎀뎁뎃뎄뎅뎌뎐뎔뎠뎡뎨뎬도독돈돋돌돎돐돔돕돗동돛돝돠돤돨돼됐되된될됨됩됫됴두둑둔둘둠둡둣둥둬뒀뒈뒝뒤뒨뒬뒵뒷뒹듀듄듈듐듕드득든듣들듦듬듭듯등듸디딕딘딛딜딤딥딧딨딩딪따딱딴딸땀땁땃땄땅땋때땍땐땔땜땝땟땠땡떠떡떤떨떪떫떰떱떳떴떵떻떼떽뗀뗄뗌뗍뗏뗐뗑뗘뗬또똑똔똘똥똬똴뙈뙤뙨뚜뚝뚠뚤뚫뚬뚱뛔뛰뛴뛸뜀뜁뜅뜨뜩뜬뜯뜰뜸뜹뜻띄띈띌띔띕띠띤띨띰띱띳띵라락란랄람랍랏랐랑랒랖랗래랙랜랠램랩랫랬랭랴략랸럇량러럭런럴럼럽럿렀렁렇레렉렌렐렘렙렛렝려력련렬렴렵렷렸령례롄롑롓로록론롤롬롭롯롱롸롼뢍뢨뢰뢴뢸룀룁룃룅료룐룔룝룟룡루룩룬룰룸룹룻룽뤄뤘뤠뤼뤽륀륄륌륏륑류륙륜률륨륩륫륭르륵른를름릅릇릉릊릍릎리릭린릴림립릿링마막만많맏말맑맒맘맙맛망맞맡맣매맥맨맬맴맵맷맸맹맺먀먁먈먕머먹먼멀멂멈멉멋멍멎멓메멕멘멜멤멥멧멨멩며멱면멸몃몄명몇몌모목몫몬몰몲몸몹못몽뫄뫈뫘뫙뫼묀묄묍묏묑묘묜묠묩묫무묵묶문묻물묽묾뭄뭅뭇뭉뭍뭏뭐뭔뭘뭡뭣뭬뮈뮌뮐뮤뮨뮬뮴뮷므믄믈믐믓미믹민믿밀밂밈밉밋밌밍및밑바박밖밗반받발밝밞밟밤밥밧방밭배백밴밸뱀뱁뱃뱄뱅뱉뱌뱍뱐뱝버벅번벋벌벎범법벗벙벚베벡벤벧벨벰벱벳벴벵벼벽변별볍볏볐병볕볘볜보복볶본볼봄봅봇봉봐봔봤봬뵀뵈뵉뵌뵐뵘뵙뵤뵨부북분붇불붉붊붐붑붓붕붙붚붜붤붰붸뷔뷕뷘뷜뷩뷰뷴뷸븀븃븅브븍븐블븜븝븟비빅빈빌빎빔빕빗빙빚빛빠빡빤빨빪빰빱빳빴빵빻빼빽뺀뺄뺌뺍뺏뺐뺑뺘뺙뺨뻐뻑뻔뻗뻘뻠뻣뻤뻥뻬뼁뼈뼉뼘뼙뼛뼜뼝뽀뽁뽄뽈뽐뽑뽕뾔뾰뿅뿌뿍뿐뿔뿜뿟뿡쀼쁑쁘쁜쁠쁨쁩삐삑삔삘삠삡삣삥사삭삯산삳살삵삶삼삽삿샀상샅새색샌샐샘샙샛샜생샤샥샨샬샴샵샷샹섀섄섈섐섕서석섞섟선섣설섦섧섬섭섯섰성섶세섹센셀셈셉셋셌셍셔셕션셜셤셥셧셨셩셰셴셸솅소속솎손솔솖솜솝솟송솥솨솩솬솰솽쇄쇈쇌쇔쇗쇘쇠쇤쇨쇰쇱쇳쇼쇽숀숄숌숍숏숑수숙순숟술숨숩숫숭숯숱숲숴쉈쉐쉑쉔쉘쉠쉥쉬쉭쉰쉴쉼쉽쉿슁슈슉슐슘슛슝스슥슨슬슭슴습슷승시식신싣실싫심십싯싱싶싸싹싻싼쌀쌈쌉쌌쌍쌓쌔쌕쌘쌜쌤쌥쌨쌩썅써썩썬썰썲썸썹썼썽쎄쎈쎌쏀쏘쏙쏜쏟쏠쏢쏨쏩쏭쏴쏵쏸쐈쐐쐤쐬쐰쐴쐼쐽쑈쑤쑥쑨쑬쑴쑵쑹쒀쒔쒜쒸쒼쓩쓰쓱쓴쓸쓺쓿씀씁씌씐씔씜씨씩씬씰씸씹씻씽아악안앉않알앍앎앓암압앗았앙앝앞애액앤앨앰앱앳앴앵야약얀얄얇얌얍얏양얕얗얘얜얠얩어억언얹얻얼얽얾엄업없엇었엉엊엌엎에엑엔엘엠엡엣엥여역엮연열엶엷염엽엾엿였영옅옆옇예옌옐옘옙옛옜오옥온올옭옮옰옳옴옵옷옹옻와왁완왈왐왑왓왔왕왜왝왠왬왯왱외왹왼욀욈욉욋욍요욕욘욜욤욥욧용우욱운울욹욺움웁웃웅워웍원월웜웝웠웡웨웩웬웰웸웹웽위윅윈윌윔윕윗윙유육윤율윰윱윳융윷으윽은을읊음읍읏응읒읓읔읕읖읗의읜읠읨읫이익인일읽읾잃임입잇있잉잊잎자작잔잖잗잘잚잠잡잣잤장잦재잭잰잴잼잽잿쟀쟁쟈쟉쟌쟎쟐쟘쟝쟤쟨쟬저적전절젊점접젓정젖제젝젠젤젬젭젯젱져젼졀졈졉졌졍졔조족존졸졺좀좁좃종좆좇좋좌좍좔좝좟좡좨좼좽죄죈죌죔죕죗죙죠죡죤죵주죽준줄줅줆줌줍줏중줘줬줴쥐쥑쥔쥘쥠쥡쥣쥬쥰쥴쥼즈즉즌즐즘즙즛증지직진짇질짊짐집짓징짖짙짚짜짝짠짢짤짧짬짭짯짰짱째짹짼쨀쨈쨉쨋쨌쨍쨔쨘쨩쩌쩍쩐쩔쩜쩝쩟쩠쩡쩨쩽쪄쪘쪼쪽쫀쫄쫌쫍쫏쫑쫓쫘쫙쫠쫬쫴쬈쬐쬔쬘쬠쬡쭁쭈쭉쭌쭐쭘쭙쭝쭤쭸쭹쮜쮸쯔쯤쯧쯩찌찍찐찔찜찝찡찢찧차착찬찮찰참찹찻찼창찾채책챈챌챔챕챗챘챙챠챤챦챨챰챵처척천철첨첩첫첬청체첵첸첼쳄쳅쳇쳉쳐쳔쳤쳬쳰촁초촉촌촐촘촙촛총촤촨촬촹최쵠쵤쵬쵭쵯쵱쵸춈추축춘출춤춥춧충춰췄췌췐취췬췰췸췹췻췽츄츈츌츔츙츠측츤츨츰츱츳층치칙친칟칠칡침칩칫칭카칵칸칼캄캅캇캉캐캑캔캘캠캡캣캤캥캬캭컁커컥컨컫컬컴컵컷컸컹케켁켄켈켐켑켓켕켜켠켤켬켭켯켰켱켸코콕콘콜콤콥콧콩콰콱콴콸쾀쾅쾌쾡쾨쾰쿄쿠쿡쿤쿨쿰쿱쿳쿵쿼퀀퀄퀑퀘퀭퀴퀵퀸퀼큄큅큇큉큐큔큘큠크큭큰클큼큽킁키킥킨킬킴킵킷킹타탁탄탈탉탐탑탓탔탕태택탠탤탬탭탯탰탱탸턍터턱턴털턺텀텁텃텄텅테텍텐텔템텝텟텡텨텬텼톄톈토톡톤톨톰톱톳통톺톼퇀퇘퇴퇸툇툉툐투툭툰툴툼툽툿퉁퉈퉜퉤튀튁튄튈튐튑튕튜튠튤튬튱트특튼튿틀틂틈틉틋틔틘틜틤틥티틱틴틸팀팁팃팅파팍팎판팔팖팜팝팟팠팡팥패팩팬팰팸팹팻팼팽퍄퍅퍼퍽펀펄펌펍펏펐펑페펙펜펠펨펩펫펭펴편펼폄폅폈평폐폘폡폣포폭폰폴폼폽폿퐁퐈퐝푀푄표푠푤푭푯푸푹푼푿풀풂품풉풋풍풔풩퓌퓐퓔퓜퓟퓨퓬퓰퓸퓻퓽프픈플픔픕픗피픽핀필핌핍핏핑하학한할핥함합핫항해핵핸핼햄햅햇했행햐향허헉헌헐헒험헙헛헝헤헥헨헬헴헵헷헹혀혁현혈혐협혓혔형혜혠혤혭호혹혼홀홅홈홉홋홍홑화확환활홧황홰홱홴횃횅회획횐횔횝횟횡효횬횰횹횻후훅훈훌훑훔훗훙훠훤훨훰훵훼훽휀휄휑휘휙휜휠휨휩휫휭휴휵휸휼흄흇흉흐흑흔흖흗흘흙흠흡흣흥흩희흰흴흼흽힁히힉힌힐힘힙힛힝ㄱㄲㄳㄴㄵㄶㄷㄸㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅃㅄㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅜㅝㅞㅟㅠㅡㅢㅣㅥㅦㅧㅨㅩㅪㅫㅬㅭㅮㅯㅰㅱㅲㅳㅴㅵㅶㅷㅸㅹㅺㅻㅼㅽㅾㅿㆀㆁㆂㆃㆄㆅㆆㆇㆈㆉㆊㆋㆌㆍㆎＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ！＇，．／：；？＾＿｀｜￣、。·‥…¨〃―∥＼∼´～ˇ˘˝˚˙¸˛¡¿ː‽⁂©＂（）［］｛｝‘’“”〔〕〈〉《》「」『』【】＋－＜＝＞±×÷≠≤≥∞∴♂♀∠⌒∂∇≡≒≪≫√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∮∑∏＄％￦°′″℃Å￠￡￥¤℉‰€㎕㎖㎗ℓ㎘㏄㎣㎤㎥㎦㎙㎚㎛㎜㎝㎞㎟㎠㎡㎢㏊㎍㎎㎏㏏㎈㎉㏈㎧㎨㎰㎱㎲㎳㎴㎵㎶㎷㎸㎹㎀㎁㎂㎃㎄㎺㎻㎼㎽㎾㎿㎐㎑㎒㎓㎔Ω㏀㏁㎊㎋㎌㏖㏅㎭㎮㎯㏛㎩㎪㎫㎬㏝㏐㏓㏃㏉㏜㏆＃＆＊＠§※☆★○●◎◇◆□■△▲▽▼→←↑↓↔〓◁◀▷▶♤♠♡♥♧♣⊙◈▣◐◑▒▤▥▨▧▦▩♨☏☎☜☞¶†‡↕↗↙↖↘♭♩♪♬㉿㈜№㏇™㏂㏘℡®ªº─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂┒┑┚┙┖┕┎┍┞┟┡┢┦┧┩┪┭┮┱┲┵┶┹┺┽┾╀╁╃╄╅╆╇╈╉╊㉠㉡㉢㉣㉤㉥㉦㉧㉨㉩㉪㉫㉬㉭㉮㉯㉰㉱㉲㉳㉴㉵㉶㉷㉸㉹㉺㉻㈀㈁㈂㈃㈄㈅㈆㈇㈈㈉㈊㈋㈌㈍㈎㈏㈐㈑㈒㈓㈔㈕㈖㈗㈘㈙㈚㈛㉮㉯㉰㉱㉲㉳㉴㉵㉷㉸㉹㉺㉹㉻ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⒜⒝⒞⒟⒠⒡⒢⒣⒤⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂０１２３４５６７８９ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅠⅡⅢⅣⅤⅥⅦⅧⅨX½⅓⅔¼¾⅛⅜⅝⅞¹²³⁴ⁿ₁₂₃₄

경량화된 웹폰트 다운로드 (다해봤자 7.42MB)

산들고딕.zip

7.42MB

맥에서 한글 자음 모음 분리 될때 윈도우에서 수정하는 방법

번개애비 — Thu, 25 Mar 2021 01:59:22 +0900

맥북에서 한글명으로 된 파일을 생성하고

NAS나 웹하드, 이메일등을 통해 공유한 상태에서 윈도우에서 그 파일을 내려받으면

가끔 자음과 모음이 분리되는 경우가 있다.

이는 윈도우와 맥이 한글의 처리방식에 있어서 차이가 존재하기 때문에 생기는 문제임.

윈도우에서 이런 현상을 해결하기 위해 별도의 수정작업이 필요로 하다.

이 프로그램은 윈도우에서 여러파일을 일괄적으로 수정해줄 수 있음.

아래 맥용프로그램도 있다.

MySQL INDEX(인덱스)를 이용한 성능 최적화 팁

번개애비 — Wed, 10 Feb 2021 19:40:09 +0900

MySQL 혹은 MariaDB 환경에서 1억개의 Row가 저장되어 있다고 가정하자.
인덱싱이 지정되어 있지 않은 칼럼에서 검색을 수행했을때 데이터베이스는 1억개를 Full Scan을 하게 되어 SELECT 쿼리결과가 나오기까지 오랜시간이 필요로 한다.

이렇게 비교적(?) 대용량의 데이터를 처리하기 위해서는 여러가지 튜닝방법이 존재하는데, 튜닝의 우선순위는 아래와 같다.

1. 가급적 로직을 DB상에서 처리하지 않고 WEB Applicaition 상에서 구현한다.

WEB Application 부하는 DB Server에서 발생하는 부하보다 비교적 쉽게 해결이 가능하다.
Web 서버는 라운드로빈이든 L4를 활용하든 너무나 쉽게 확장이 가능한 반면, DB Server는 Master-Slave Replication 부터 생각해야되고 데이터의 실시간 동기화가 되지 않는 경우의 수가 너무나도 많은게 사실이다.
그리고 SQL상의 JOIN보다는 단순 SELECT로 웹단에서 로직을 구현하면 더 쉽고 추후 유지보수나 NoSQL으로의 전환이 쉽다.
대규모 서비스일수록 RDBMS보다 NoSQL을 사용하고 있고 많은 서비스들이 하둡을 도입하면서 NoSQL로 갈아타고 있는 이유를 생각보면 이해가 될 것이다.

2. 칼럼의 데이터길이를 최대한 작게 보수적으로 설정한다.

Bigint 보다는 int가 더 작고 Autoincrement 로 설정되어 있어도 int를 대부분 다 활용 못한다.
성명을 저장하는 칼럼이 길어봤자 8자리미만인데 varchar(255)로 설정하고 있는것은 아닌지확인한다.

3. Insert 보다는 Select 횟수가 많기 때문에 Select에 보수적인 로직을 구성한다.

DB의 처리과정에서 가장 느린로직이 INSERT와 UPDATE이다. 하지만 실제 서비스에서는 로그를 실시간으로 무지막지하게 쌓지 않는 이상 보통의 서비스에서는 INSERT 횟수보다 SELECT횟수가 훨씬 많다.
따라서 우리는 SELECT에 초첨을 맞춰 로직을 구성해야한다.
아예 처음부터 Mysql Connection을 선언할때 SELECT 로직용, INSERT로직용으로 나눠두면 추후 DB서버 분산화할때도 유리하다.
그리고 대부분 SELECT * FROM 을 사용하지만 실제로 Output 될 칼럼을 지정하여 보수적으로 작성하는것이 좋다.

//이거보다 SELECT * FROM test; //이게 더 빠르다. SELECT id FROM test;

4. 파티션 테이블

테이블하나의 모든 데이터를 저장하지 않고 테이블1, 테이블2, 테이블3 와 같이 테이블을 쪼개어 저장하는 방식을 말한다.
관리하기 참 그지같으면서 다중테이블 조회도 감안해야되는 문제점이 있으며, 어떤 기준으로 테이블을 쪼갤것인지 심도있게 생각해야한다.
하지만 파티션 테이블은 테이블자체가 분리되기 때문에 데이터 훼손 가능성을 감소시켜주며 I/O성능 향상을 가져다 줄수 있다. 각 테이블별로 독립적인 복구도 가능하다.
지역단위 / 월단위 / 요일단위 / 5000개씩 끊기 등등이 있지만, 파티셔닝의 단점은 테이블마다 제대로 분배가 힘든것이 있다.
무엇보다 파티셔닝이 많은 상태에서 급격한 DB사용이 발생될경우 I/O성능의 한계로 오히려 부하가 발생되기도 한다.

5. 물리적인 HW나 Instant 증설

최후의 수단이다.
이것도 답이 안나오면 다른 RDBMS를 생각하거나 NoSQL을 생각한다.
(하지만 그걸 생각하는 상황이 되면 마이그레이션을 어떻게 진행할 것인지 마이그레이션에 최적화된 친구가 어떤것인지를 우선적으로 살펴보게 될 것이다.)

위 내용들은 사실 기본적인 내용이다.
부하감소와 속도향상을 위해서는 데이터베이스내 적절한 인덱스를 생성하여 인덱스를 최대한 활용한 SQL활용이 필요하다.
인덱스를 사용하지 않는다면 RDBMS 성능의 천만분의 1도 사용하지 않은 것이다.

사실, 튜닝의 끝은 순정이라고...
MySQL Basic Document 문서대로 한다면 최적화할 필요도 없는게 함정. ㅋ
(Document대로 정석으로 설계하고 로직을 구현해도 답이 안나오는 상황이라면 그 시스템은 다른 데이터베이스를 고려해야한다.)

인덱스의 설정방법

인덱스 설정시에는 따로 따로 인덱스를 선언해줘야 제대로 설정이 가능하다.

//이러면 안됨 INDEX(id, age)

//이래야됨 INDEX(id), INDEX(age)

Full Scan을 최소화하여 검색을 빠르게 하는 INDEX

인덱스를 적용한 칼럼과 적용되지 않은 칼럼의 차이는 Full Scan이냐 이다.
1억개의 Row를 하나 하나 찾아가는것보다 목차를 보고 한번에 찾는것이 훨씬 빠르다.
우리가 백과사전을 본다고 생각하면 이해가 더욱 쉬울것이다.

WHERE 절에서 검색 대상 칼럼이 인덱스여야 한다.

당연한 소리이다. 우리가 검색할 대상이 책 목차에 나와있어야 책의 페이지를 알고 해당 페이지에서 내용을 볼 수 있다.

SELECT * FROM test WHERE id = '1';

AND절 검색시 하나의 칼럼에만 인덱스 조회가 된다.

인덱스가 지정된 여러개의 칼럼을 검색할때는 다수의 인덱싱 조회가 불가능하기 때문에 내부적인 로직에 의해 알아서 최적화된 인덱스만 검색한다. 하지만, 우리는 보수적인 AND 조건을 위해 다수 인덱싱 조회가 필요할때가 있다.
아래 예시처럼 FORCE INDEX(칼럼) 을 지정하면 해당 칼럼도 인덱스 조회가 한번 더 진행된다.

//id 기준으로만 인덱싱 조회 SELECT * FROM test WHERE id = '15' and age = '24'; //id와 age 모두 인덱싱을 조회하기 때문에 2번 조회한다. SELECT * FROM test FORCE INDEX(age) WHERE id = '15' and age = '24';

OR절 검색은 무조건 Full SCAN 된다.

AND와 달리 OR을 사용하는 SELECT는 무조건 Full Scan을 하는 노답상황이 발생한다.
따라서 OR 절은 UNION을 사용하거나 Web Application 단에서 처리하는게 답이다.

//인덱싱을 걸어도 걍 무조건 Full Scan SELECT * FROM test WHERE id = '1' OR age = '20'; //UNION을 이용한 인덱싱 조회 SELECT * FROM test WHERE id = '1'; UNION SELECT * FROM test WHERE age = '20'; //Web Application단에서 SELECT 두번 사용 $sql_id = "SELECT * FROM test WHERE id = '1'"; mysqli_query($sql_id); $sql_age = "SELECT * FROM test WHERE age = '20'"; mysqli_query($sql_age);

LIMIT를 사용할때는 무조건 LIMIT가 되는 기준을 정해준다.

보통 페이징을 구현할때 빠르게 Access를 제공하기 위해서 페이징을 구현하는데, 사실 LIMIT를 잘못 사용하게 되면 Full SCAN하게 되어 페이징을 하는 의미가 사라진다.
LIMIT를 사용할때는 LIMIT가 되는 기준을 무조건 정해주는것이 원칙이며, 사실 LIMIT를 정해주는 기준을 정해줘도 페이지가 백번째, 천번째... 등으로 넘어가게되면 조회 횟수가 증가하게 된다. 후반부 페이지로 넘어가도 빠르게 조회하기 위해서는 PK값을 사용하는 WHERE 절과 함께 사용하면 최대한 적게 조회하여 빠르게 엑세스가 가능하다.

//Full SCAN SELECT * FROM test LIMIT 10, 5; //기준을 정해서 검색해서 조금 더 빨라짐 SELECT * FROM test ORDER BY id LIMIT 10; //기준을 정했으나 실제로는 10x100 = 1000번을 조회해야함. SELECT * FROM test ORDER BY id LIMIT 10, 100; //기준 + WHERE절 사용으로 조회횟수 최소화 (권장하는 방법) SELECT * FROM test WHERE id > '100' ORDER BY id LIMIT 10;

중간에 데이터 하나를 삭제하게 된다면 삭제된 횟수를 카운트해야 권장하는 방법으로 페이징이 제대로 작동하는것을 유념해야한다.
id가 1부터 1000까지 있다고 가정한 상황에서 1~10의 id를 삭제한 상태에서는 아래와 같이 검색되어야 한다.
여기서부터 머리가 아파온다. ㅋㅋㅋ

//삭제전 SELECT * FROM test WHERE id > '100' ORDER BY id LIMIT 10; //1~10까지 삭제후 SELECT * FROM test WHERE id > '90' ORDER BY id LIMIT 10; //100~110가 삭제되었을때는 상관없음 SELECT * FROM test WHERE id > '100' ORDER BY id LIMIT 10;

LIKE % 보다는 FULLTEXT를 활용한다.

제목이나 내용등을 검색하기 위해 LIKE 절을 많이들 사용하는데 LIKE절은 칼럼안에 데이터를 확인해야하기 때문에 무조건 Full SCAN이 이뤄진다. 따라서 자연어 검색처리를 위한 FULLTEXT를 사용해야한다. MySQL문서를 보면 이 FULLTEXT는 단어별로 트리를 미리 구성해놓아 검색엔진처럼 빠른 검색을 제공합니다.

//Full SCAN SELECT * FROM test WHERE name LIKE '%홍길동%'; //FULLTEXT를 활용한 검색 SELECT * FROM test WHERE MATCH(name) AGAINST('홍길동');

다중 LIKE 조회에서 포함되는 내용들을 검색할 때

SELECT * FROM test WHERE MATCH(name) AGAINST("+'홍길동'+'강감찬'+'박명수'" IN BOOLEAN MODE)

다중 LIKE 조회에서 누구는 포함되고 누구는 포함되지 않는 내용들을 검색할 때

SELECT * FROM test WHERE MATCH(name) AGAINST("+'홍길동'-'넌빼고'-'난빼고'" IN BOOLEAN MODE)

Centos7.x Minimal 에서 Nginx 1.18 + PHP 8.x 설치하기

번개애비 — Wed, 10 Feb 2021 15:33:05 +0900

이전까지 Go lang으로 DB 인터페이스 서버를 구성하고 php7.x 계열로 Front를 구성했었다.

사실 Front를 php로 사용했다기 보다는 Middle 성향으로 중간에서 Minify나 js 난독화, 통신암호화, 업/다운로드, Front JS만으로 보안해결이 안될때 등등등 수준으로만 사용하고 있다. 변태적인 셋팅이지만 나름 잘 운용중.. ㅎㅎ

이것도 규모가 중간이상이 되는 프로젝트에서나 굉장히 보수적인 트래픽 제어와 최단기 Response를 위해 극단적으로 셋업된 환경에서나 사용했고 요즘 주력은 Go 와 Primitive한 JS를 위주인듯하다.

근래에 php8 이 출시되었다고 해서 실서비스에 적용하기 위해 여러가지 테스트를 해본결과,

다행히도 큰 호환성이슈가 없어서 실서비스에 반영하고 있다. (DAU 10,000 급)

php8 부터는 JIT이 도입되면서 인터프리티도 아닌 컴파일도 아닌 살짝 애매한 상황이 되는것을 보면,

php도 이제 마지막 발악(?)을 하는듯... ㅎㅎㅎ

처음 CentOS 7.x Minimal 을 설치한 직후부터 진행하면 된다.

패키지 설치를 하기전 업데이트 먼저 진행해준다.

yum update

Minimal 설치버전에서는 ifconfig 명령어를 사용할 수 없으니, net-tools를 설치해준다.

yum install net-tools

웹서버의 시간정보는 중요한 기준정보가 되기도 하기 때문에 시간정보를 동기화를 한번 진행해준다.

yum install rdate
rdate -s time.bora.net

Nginx RPM을 다운로드받고 적용한다.

이는 nginx를 패키지로 설치하기 위함이다.

wget https://nginx.org/packages/rhel/7/x86_64/RPMS/nginx-1.18.0-1.el7.ngx.x86_64.rpm
rpm -Uvh nginx-1.18.0-1.el7.ngx.x86_64.rpm

Repository정보를 수정한다.

vi /etc/yum.repos.d/nginx.repo

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1

:wq

Nginx 작동을 위한 관련 라이브러리를 설치한다.

yum -y install pcre-devel libxml2-devel zlib zlib-devel openssl openssl-devel gcc g++ cpp gcc-c++ libxslt libxslt-devel php-gd libgd-dev gd gd-devel perl perl-ExtUtils-Embed geoip-devel

Nginx를 설치한다.

yum install nginx

방화벽을 열어준다. (80, 443포트)

sudo firewall-cmd --permanent --zone=public --add-service=http
sudo firewall-cmd --permanent --zone=public --add-service=https
sudo firewall-cmd --reload

Nginx 서비스를 실행하고 부팅시 자동실행될 수 있도록 설정한다.

service nginx start
sudo systemctl enable nginx

서버아이피로 접속하여 아래화면이 나오는지 확인하보고, 아래화면이 나타나면 Nginx설치가 완료된 것이다.

Nginx 버전은 아래 명령어로 확인할 수 있다.

nginx -v

이제 PHP8을 설치하기 위해 yum 저장소를 추가한다.

epel 저장소를 활용하기 위해 다음의 명령어를 실행한다.

sudo yum -y install yum-utils
yum -y install epel-release
yum -y install http://rpms.remirepo.net/enterprise/remi-release-7.rpm

현재 yum 저장소에 지정된 php 버전을 알아낸뒤, 해당 버전을 비활성화 한다.

yum info php-fpm | grep Version
Version     : 5.4.45

yum-config-manager --disable remi-php54

다른 글들에서는 php-80 이나 php-8.0 이런식으로 설치하고 운용하는데 이전 php버전대들과 마찬가지로 사용하기 위해 yum 설치정보를 수정해야줘야 한다.

(나중에 service php80-fpm restart 이런거 안할려면 미리 셋팅하는게 좋다.)

sudo yum-config-manager --enable remi-php80
or
sudo yum-config-manager --enable remi-php81

php와 기초적인 운영에 필요한 라이브러리들을 설치한다.

yum install php php-cli php-fpm php-mysqlnd php-mysql php-mysqli php-devel php-zip php-gd php-curl php-xml php-json php-intl php-mbstring php-mcrypt php-posix php-shmop php-soap php-sysvmsg php-sysvsem php-sysvshm php-xmlrpc php-opcache

부팅시 자동으로 php-fpm이 실행되도록 등록한다.

service php-fpm start
sudo systemctl enable php-fpm

Nginx와 php간 연동을 위해 셋팅을 진행한다.

vi /etc/php-fpm.d/www.conf

;user = apache //변경전
user = nginx

;group = apache//변경전
group = nginx

;listen.owner = nobody //변경전
listen.owner = nginx
 
;listen.group = nobody //변경전
listen.owner = nginx

;listen.mode = 0660 //변경전
listen.mode = 0660

;listen = 127.0.0.1:9000 //변경전
listen = /var/run/php-fpm/php-fpm.sock

;pm.max_children = 50 //변경전
pm.max_children = 130

;pm.start_servers = 5 //변경전
pm.start_servers = 30

;pm.min_spare_servers = 5 //변경전
pm.min_spare_servers = 30

pm.max_spare_servers = 35 //변경전
pm.max_spare_servers = 100

;pm.max_requests = 500 //변경전
pm.max_requests = 500

:wq

Nginx 서버 설정을 진행한다.

(이 설정은 주로 내가 자주 사용하는 Nginx 기본 셋팅이다.)

vi /etc/nginx/nginx.conf

user  nginx;
worker_processes  32;

error_log  /var/log/nginx/error.log crit;
pid        /var/run/nginx.pid;

events {
    worker_connections  256;
    use epoll;
    multi_accept on;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    server_tokens off;
    client_body_buffer_size 128k;
    client_header_buffer_size 1m;
    client_max_body_size 2000m;
    large_client_header_buffers 8 8k;
    output_buffers 1 32k;
    postpone_output 1460;
    client_header_timeout 3m;
    client_body_timeout   3m;
    send_timeout          3m;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log off;
    #access_log  /var/log/nginx/access.log  main;
    #open_file_cache max=1000 inactive=20s;
    #open_file_cache_valid 30s;
    #open_file_cache_min_uses 5;
    #open_file_cache_errors off;
    server_names_hash_bucket_size 64;
    server_names_hash_max_size 2048;
    keepalive_timeout 10;
    #keepalive_requests 10000;
    sendfile        off;
    tcp_nopush     off;
    tcp_nodelay    off;
    types_hash_max_size 2048;

    proxy_cache_path /home/nginx_cache/cache_file keys_zone=cache:10m levels=1:2 inactive=600s max_size=1g;

    gzip  on;
    gzip_buffers 16 8k;
    gzip_comp_level 6;
    gzip_http_version 1.0;
    gzip_min_length 1;
    gzip_types application/x-javascript text/css application/javascript text/javascript text/plain application/json application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype application/x-font-ttf application/xml font/eot font/opentype font/otf image/svg+xml image/vnd.microsoft.icon;

    include /etc/nginx/conf.d/*.conf;
}


:wq

홈 디렉토리를 변경하기위해 기존 Nginx localhost 경로를 수정하고 권한을 부여한다.

cp -r /usr/share/nginx/html /home/localhost
chmod -R 755 /home/localhost
chown -R nginx:nginx /home/localhost
chcon -R -t httpd_sys_content_t /home/localhost/

Nginx localhost 경로를 서버설정에 반영하고 php-fpm 을 연동한다.

vi /etc/nginx/conf.d/default.conf

server {
    listen       80 default;
    server_name  _;
    add_header X-Frame-Options "SAMEORIGIN";
    charset utf-8;
    location / {
        root   /home/localhost;
        index  index.html index.htm index.php;
    }
    #error_page  404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    location ~ \.php$ {
        fastcgi_pass   unix:/var/run/php-fpm/php-fpm.sock;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  /home/localhost$fastcgi_script_name;
        include        fastcgi_params;
    }
    location ~ /\.ht {
        deny  all;
    }
}

:wq

php8에 신규로 도입된 JIT을 활성화한다.

vi /etc/php-zts.d/10-opcache.ini

opcache.enable=1
opcache.jit_buffer_size=100M
opcache.jit=tracing

:wq

마지막으로 Nginx와 php-fpm 을 재시작해준다.

service nginx restart
service php-fpm restart

끄읏~

꿀잠 보장 ASMR 이어폰 및 재생머신 셋팅

번개애비 — Mon, 4 Jan 2021 23:35:46 +0900

잠이 들지 않을때 가끔 ASMR이라는걸 듣기 시작했다.

첨엔 이거 왜 듣지? 이랬는데 요즘은 일주일에 주말정도는 거의 ASMR을 들으면서 자는것 같음 ㅋ

참고로 기존에 아이폰 XR + 에어팟프로 조합으로 들었는데 음질도 좋고 공간감도 좋지만 심각한 문제가 하나 있었음.

다음날 아침에 에어팟을 찾느라 침대를 뒤집고 난리남 + 충전 스트레스

결국 개발용폰으로 사용하던 녀석과 창고에 고이 잠들고 있는 이어폰을 찾아서 최상의 조합을 찾았다.

이어폰 : Shure SE215

휴대폰 : iPhone SE

사실 저 이어폰은 2011년도 처음 출시되었는데 그때 구매해서 여지껏 창고에 썩고 있었음.

라떼시절엔 스마트폰에 전부 이어폰단자가 있어서 자주 사용했던 이어폰이었는데 요즘은 폰에 이어폰 단자가 사라짐 ㅋㅋㅋ

애플이 3.5mm 이어폰단자를 삭제하는 혁신을 하더니

삼성도 따라함 ㅋㅋ

이젠 애플이 충전기도 안주는데 이것도 삼성이 따라할듯.. 좋은건 안배끼고 안좋은것만 배끼는것도 능력임.

다행히도 아이폰개발때문에 여러 아이폰을 수집(?)하고 있던터라 남아있던 아이폰 SE 1세대를 발견함.

라떼시절 폰이라 3.5mm 오디오단자도 있고 요즘 아이폰들도 사용하고 있는 라이트닝이 지원됨.

간지나는 디자인은 그 당시에도 혁신같았는데 지금도 질리도 않음.

Shure 이어폰 계열들은 굉장히 특이하게 생김.

원래 Shure 브랜드 자체가 공연용 마이크분야로 일가견있는 회사고 이런 이어폰이 나오는 이유는 공연장같은 시끄러운 곳에서 음향엔지니어나 가수들이 본인의 목소리를 들을 수 있도록 하는 모니터링에 특화되어 있다.

덕분에 요즘 나오는 노이즈캔슬링을 다 씹어버릴 수 있는 엄청난 차폐를 제공함.

이런 특성으로 인해 사실 음질이 좋은것보다 공간감과 저음이 굉장히 강조되어 있는 이어폰임.

(고음은 걍 한계가 뚜렷한듯함. 에어팟프로와 직접적으로 비교하면 음질은 에어팟프로가 더 좋은듯.)

공간감과 저음이 강조되어 있어 다른 플랫한 음색의 이어폰보다 ASMR에 더 특화되어 있는것 같다.

착용은 이딴식으로 해야한다.

차폐도 노캔수준에 선을 귀 뒤로 넘겨서 잠자면서 뒤척여도 이어폰에 벗겨지지 않는다. ㅎ

마지막으로 ASMR 유튜브 추천 ㄱㄱㄱ

www.youtube.com/channel/UCjypzyxU_p0_0ElbWSi8QQw

asmr yeonchu 연츄

다양한 컨텐츠를 ASMR로 기록하는 연츄 (yeonchu)입니다. Business Contact Mail : duswnk1002@naver.com 비즈니스 메일 (광고,협업문의) : duswnk1002@naver.com

www.youtube.com

근데 구글이나 아마존같은곳 뒤져보면 한국만 유독 ASMR특화 이어폰 이런게 많은듯.

결론. 이어폰은 개취.