IT★개발자

안드로이드 앱/어플 개발 세번째 출시 후기_메모리얼 카메라(MemorialCamera)

IT-개발자 — Tue, 12 Nov 2024 00:35:02 +0900

24년도 10월 16일에 구글 play스토어를 통해 내 인생의 세번째로 "메모리얼 카메라(MemorialCamera)" 앱을 출시했습니다. 독학으로 안드로이드 스튜디오를 공부를 하고 기획/개발/디자인 등 1인 개발을 진행하였고 매년 어플 1개를 출시를 목표로 하고있습니다. 23년도를 시작으로 24년도에는 2개를 출시하게 되었습니다.

매년 1개 출시를 목표였는데, 2개를 출시하게되어 엄청 뿌듯합니다. 이번 출시는 기다림의 시간이 길었습니다. 10월에 개발 완료하였으나 구글의 정책을 모두 처리하는데 많은 시간을 소요하였습니다ㅠㅠ 그래도 또 한번 출시에 성공하였습니다.

혹시, 어플에 버그나 개선사항이 있다면 언제든지 블로그 댓글 및 구글 play스토어의 댓글을 부탁드립니다.

많은 다운 부탁드립니다!!!

그러면 개발 후기를 시작하기전 어플 소개부터 간단히 표로 정리했습니다.

앱 이름	메모리얼 카메라(MemorialCamera)
앱 소개	갤러리에서 사진을 불러와서 투명도 조절을 통해 현재 Carame Preview의 배경으로 두고 비슷한 사진을 찍어보세요. (과거의 구도와 동일하게 찍을 수 있습니다.)
앱 기능	[기능 설명] 1. "사진 가져오기" - 갤러리에서 사진을 불러와 카메라의 미리보기 화면에 뒷 배경으로 사용할 수 있습니다. 2. "사진 찍기" - 카메라를 찍어 갤러리에 보관합니다. 3. "카메라 전환" - 카메라 전/후면 전환합니다. 4. "사진 회전" - 사진 가져오기를 통해 불러온 사진을 90도 회전합니다. 5. "투명도 조절" - 사진 가져오기를 통해 불러온 사진을 불투명도 조절합니다. 6. "licenseNotice" - 현재 사용된 기술의 라이선스를 표시합니다. 7. "3:4", "9:16", "1:1" - 불러온 사진의 비율을 조절합니다.
다운 받는 곳	<URL 검색> https://play.google.com/store/apps/details?id=com.memorialCamera.memorialCamera <구글 플레이 검색> 메모리얼 카메라(MemorialCamera)
관련 이미지
메인 화면
비율선택 화면

기획:

오늘날 스마트폰 카메라는 우리가 일상에서 쉽게 사진을 찍고, 소중한 순간을 기록할 수 있는 강력한 도구입니다. 그런데 때때로, 우리는 과거의 특정 순간을 다시 떠올리고 싶을 때가 있습니다. 예를 들어, 어린 시절의 사진이나 여행 중 찍었던 사진을 그대로 재현해보고 싶을 때, 어떻게 하면 좋을까요? 그런 생각에서 시작된 프로젝트가 바로 이 앱입니다.

이 앱은 사용자가 과거에 찍었던 사진을 불러와, 그 사진의 구도와 배경을 그대로 재현할 수 있는 기능을 제공합니다. 즉, 사용자는 과거의 사진을 참조한 후, 그 사진과 똑같은 위치에서 현재 카메라를 사용해 촬영할 수 있습니다. 하지만 이 앱의 가장 큰 차별점은 단순히 사진을 찍는 것을 넘어, 실제로 카메라 화면에 과거의 배경을 반영해 실시간으로 보여준다는 점입니다. 더욱이, 이 배경은 흑백으로 처리되어 과거의 느낌을 더욱 선명하게 전달할 수 있습니다.

기획과 기술적 도전

이 아이디어는 처음에는 가능할까?라는 의문에서 시작되었습니다. 안드로이드 카메라에 접근하여, 실시간으로 카메라 미리보기 화면에 배경을 그려야 했고, 그 배경을 흑백으로 처리해야 했기 때문에 기술적으로 상당한 도전이 있었습니다. 또한, 다양한 안드로이드 기기에서 사용될 수 있도록 화면 비율과 해상도 차이를 모두 고려해야 했습니다.

세 가지 기술적 과제를 해결하기 위해, 앱의 전반적인 구조와 흐름을 면밀히 분석하였고, 그 결과 이 아이디어는 실현 가능하다는 결론을 내렸습니다. 특히 중요한 점은, 화면 비율이 다른 기기에서도 동일한 경험을 제공할 수 있도록 유연하게 대응해야 한다는 것이었습니다. 이를 해결하기 위해 다양한 화면 비율을 자동으로 감지하고, 사용자에게 최적화된 화면을 제공하는 로직을 구현했습니다.

개발과 구현

앱 개발 과정에서 다양한 안드로이드 기술을 활용했습니다. 특히 화면 전환, 다중 화면 처리, 커스텀 다이얼로그(Custom Dialog), 그리고 광고 시스템인 AdMob을 적절히 결합하여 매우 효율적이고 빠른 개발을 진행할 수 있었습니다.

하지만 개발 과정에서 가장 큰 어려움은 흑백 처리와 관련된 문제였습니다. 처음에는 외부 모듈을 활용하려 했으나, 그 모듈을 적용한 후에는 예상대로 동작하지 않는 문제가 발생했습니다. 이에 따라 OpenCV를 사용하기로 결정을 내렸고, 이 과정에서 시간이 조금 소요되었지만, 결국 문제가 해결되었고, 앱의 핵심 기능인 실시간 흑백 배경 처리 기능을 성공적으로 구현할 수 있었습니다.

앱의 사용자 인터페이스(UI)는 직관적으로 디자인하여, 사용자가 과거의 사진을 손쉽게 불러올 수 있고, 그 사진을 바탕으로 현재의 사진을 찍을 수 있는 흐름을 간편하게 만들었습니다. 또한, 다양한 기능을 제공하여 사진 촬영 후에는 쉽게 비교할 수 있도록 하여, 과거와 현재를 비교하며 추억을 떠올릴 수 있는 소중한 경험을 제공합니다.

마치며

이 앱은 단순히 과거의 사진을 불러와 찍는 것 이상의 의미를 담고 있습니다. 우리가 잃어버린 시간, 지나간 순간들을 되돌아보며 그때의 느낌을 현재의 순간에 재현하는 과정에서, 사용자는 더 많은 감동과 추억을 느낄 수 있을 것입니다. 앞으로도 이 앱은 끊임없이 발전하며, 사용자들에게 더욱 많은 즐거움과 편리함을 제공할 것입니다.

첫 출시 이후 시간이 많이 지나서 출시 과정을 잊어버리는 등 시간은 소비되었지만 재활용 요소가 많아서 나름 빠르게 진행했습니다. 혹시, 저와 같이 앱을 출시하고 싶고 시작 단계에 있는 개발자분들 정말 포기하지 마시고 좋은 결과있으시길 바랍니다! 앱 개발하시는 분, 시작하시는 분 꼭 기획하신 앱이 있다면 출시하시기 바라며 응원합니다.

다음 출시 때 또 글로 찾아뵐게요. 글 읽어 주셔서 감사합니다!
많이 다운 부탁드립니다!!

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

안드로이드 앱/어플 개발 두번째 출시 후기_Math Puzzle(수학 퍼즐)

IT-개발자 — Fri, 5 Jan 2024 00:31:16 +0900

24년도 1월 3일에 구글 play스토어를 통해 내 인생의 두번째로 "Math Puzzle(수학 퍼즐)" 어플을 출시했습니다. 독학으로 안드로이드 스튜디오를 공부를 하고 기획/개발/디자인 등 1인 개발을 진행하였고 매년 어플 1개를 출시를 목표로 하고있습니다. 또 이렇게 목표를 이루니 기분이 좋네요!! 개인적으로 일정을 수립하여 개발을 진행했는데 계속 일정이 뒤쳐졌지만, 결국 또 한번 출시에 성공하였습니다. 혹시, 어플에 버그나 개선사항이 있다면 언제든지 블로그 댓글 및 구글 play스토어의 댓글을 부탁드립니다.

많은 다운 부탁드립니다!!!

그러면 개발 후기를 시작하기전 어플 소개부터 간단히 표로 정리했습니다.

앱 이름	Math Puzzle(수학 퍼즐)
앱 소개	수학 연산으로 결과값에 맞게 퍼즐을 조합하여 맞춤 - 퍼즐의 가로 세로의 연산을 맞추어 정답을 맞추면 점수를 획득하는데, 이를 위해 타일을 연산에 맞게 움직여야합니다.
앱 기능	정답을 맞출 경우 1점을 획득하고 10점이 되면 level이 증가하고 총 level1~level3까지 존재합니다.
다운 받는 곳	<URL 검색> https://play.google.com/store/apps/details?id=myapp.mathpuzzle <구글 플레이 검색> Math Puzzle(수학 퍼즐)
관련 이미지
레이아웃1 (메인화면)	메인화면: 게임을 start하는 메인 페이지
레이아웃2 (게임화면)	게임화면: 터치하여 타일을 움직이는 게임 페이지 (보라색의 타일의 연산을 맞춰 분홍색 답을 맞추는 게임입니다.)

기획:

일정 관리는 엑셀로 하루 단위로 세분화하여 수립하였고 기획은 많이 걸리지 않았습니다. 예전부터 퍼즐 게임을 만들고 싶었는데 너무 단순해서 아무도 사용하지 않을 것 같아서 아이디어로 연산 기능을 넣게 되었습니다. 교육용으로 좋을 것 같아요. 퍼플 타일을 움직여서 1+2=3 처럼 순서를 맞춰야하는 기획을 진행했습니다. 설명이 부족하여 게임 진행에 힘들이 있을 수도 있으나 사용자께서 개발자의 의도를 잘 파악해주셨으면 합니다 ㅎㅎ

개발:

첫 어플( "칭찬 전화" ) 출시 때 안드로이드 화면전환, 다중화면, custom dialog, admob 등을 많이 활용하여 정말 빠르게 앱 개발을 진행했습니다. 처음이 정말 어려웠지 두번째는 그래도 속도가 조금 향상된 느낌이네요. 첫 출시 이후 시간이 많이 지나서 출시 과정을 잊어버리는 등 시간은 소비되었지만 재활용 요소가 많아서 나름 빠르게 진행했습니다.
혹시, 저와 같이 앱을 출시하고 싶고 시작 단계에 있는 개발자분들 정말 포기하지 마시고 좋은 결과있으시길 바랍니다!

디자인:

피그마를 기본적으로 사용하였습니다. 먼저, 개발을 프로토타입으로 진행했어요. 개발자분들은 아실거에요....디자인은 미적 감각을 타고 나지않으면...망....... 아닙니다. 할수있어요! 피그마와 함께라면요. 피그마로 디자인을 먼저하고 안드로이드 스튜디오의 xml을 하나씩 수정하여 디자인을 많이 수정했어요. 지금도 디자인을 보면 눈물나네요ㅠㅠ 이뿌게 만들고 싶었는데 흑.. 다음에는 더욱 더 노력해야겠어요 ㅎㅎ

앱 개발하시는 분, 시작하시는 분 꼭 기획하신 앱이 있다면 출시하시기 바라며 응원합니다.

다음 출시 때 또 글로 찾아뵐게요. 글 읽어 주셔서 감사합니다!
많이 다운 부탁드립니다!!

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

01. yfinance를 이용한 주식 차트 불러오기

IT-개발자 — Sun, 24 Dec 2023 13:23:05 +0900

yfinance는 파이썬에서 사용할 수 있는 금융 데이터 수집 라이브러리 중 하나입니다. 이 라이브러리를 사용하면 주식, 지수, 환율 등 다양한 금융 데이터를 쉽게 가져올 수 있습니다. yfinance는 Yahoo Finance에서 제공하는 데이터에 액세스할 수 있는 간단하고 편리한 방법을 제공합니다. 일반적으로 yfinance를 사용하여 특정 주식의 가격, 거래량, 주가지수 등을 가져오거나, 특정 기간 동안의 주식 차트를 생성하는 데 사용됩니다.

아래 코드는 애플(AAPL) 주식의 2022년 데이터를 가져와 출력합니다. yfinance를 사용하면 여러 가지 옵션을 통해 데이터를 원하는 형식으로 가져올 수 있습니다. yfinance는 주로 금융 분석 및 데이터 시각화를 위해 사용되며, 데이터 분석, 머신러닝 등 다양한 응용 분야에서 활용될 수 있습니다.

<소스코드>

AAPL이라는 애플의 주식 코드를 가지고 와서 시작일 2023.10-01 부터 끝나는 지점 2023-11-27 까지 데이터를 가져오는 코드입니다.

import mplfinance as mpf

import yfinance as yf

from pandas_datareader import data as pdr

import yfinance as yf

yf.pdr_override()

data = pdr.get_data_yahoo("AAPL", start="2023-10-01", end="2023-12-31")

print(data)

# mpf.plot(data, type= "candle") # mpf.plot(data, type= [line, candle])

mc = mpf.make_marketcolors(up="r", down="b")

s = mpf.make_mpf_style(base_mpf_style='starsandstripes', marketcolors=mc)

mpf.plot(data, type='candle', style=s, volume=True, mav=(5,10,60))

<결과값>

그렇다면 국내 주식의 코드를 살펴보도록 하겠습니다. 구글 금융이나 네이버 증권을 들어가서 국내 주식의 코드를 가져오겠습니다. 예를 들어 삼성전자의 경우 코드는 " 005930" 가 되고 위의 파이썬 코드에 국내이므로 "AAPL" 대신에 "005930.KS" 을 입력합니다.

https://www.google.com/finance/quote/005930:KRX?sa=X&ved=2ahUKEwiJw7OKk7uDAxVec_UHHU-nCTwQ3ecFegQIVhAX

<소스코드>
코드만 변경하였습니다. 005930.KS

import mplfinance as mpf

import yfinance as yf

from pandas_datareader import data as pdr

import yfinance as yf

yf.pdr_override()

data = pdr.get_data_yahoo("005930.KS", start="2023-10-01", end="2023-12-31")

print(data)

# mpf.plot(data, type= "candle") # mpf.plot(data, type= [line, candle])

mc = mpf.make_marketcolors(up="r", down="b")

s = mpf.make_mpf_style(base_mpf_style='starsandstripes', marketcolors=mc)

mpf.plot(data, type='candle', style=s, volume=True, mav=(5,10,60))

<결과값>

그러면 이제 국내 주식의 코드를 알기 위해 상장법인목록 파일에서 종목을 찾아서 코드+KS를 입력하여 주식차트를 그릴 수 있습니다. 종목코드를 확인하고 코드를 이용해 주식 차트를 그려보시기 바랍니다.

상장법인목록.xls

0.31MB

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

안드로이드 앱/어플 개발 첫 출시 후기_칭찬 전화(Compliment Call)

IT-개발자 — Fri, 24 Mar 2023 23:21:22 +0900

23년도 3월 구글 play스토어를 통해 내 인생의 처음으로 "칭찬 전화(Compliment Call)" 어플을 출시했습니다. 독학으로 안드로이드 스튜디오를 공부를 하고 기획/개발/디자인 등 1인개발을 진행하였고 올해 목표 중 하나인 어플 출시를 이루게 되어 정말 기쁘네요. 개인적으로 일정을 수립하여 개발을 진행했는데 계속 일정이 뒤쳐졌지만, 결국 출시하였습니다. 혹시, 어플에 버그나 개선사항이 있다면 언제든지 블로그 댓글 및 구글 play스토어의 댓글을 부탁드립니다.

많은 다운 부탁드립니다!

그러면 개발 후기를 시작하기전 어플 소개부터 간단히 표로 정리했습니다.

앱 이름	칭찬 전화(Compliment Call)
앱 소개	칭찬 전화는 가짜 전화를 통해 기본 설정된 영상, 내 갤러리의 동영상, 유튜브 url을 통한 영상을 영상전화 처럼 보여주는 앱입니다.
앱 기능	- 가짜 전화 ui로 기본영상, 갤러리 영상, 유튜브 영상을 표시 - 설정 창을 통해 전화목록을 개인이 설정 가능 - 기본 영상 4개 지원하여 가짜 전화로 지정 가능 - 본인 갤러리 내 영상을 가짜 전화로 지정 가능 - 유튜브 링크를 통해 가짜 전화로 지정 가능
다운 받는 곳	<URL 검색> https://play.google.com/store/apps/details?id=project.complimentcall.complimentcall&pli=1 <구글 플레이 검색>
관련 이미지
레이아웃1 (메인화면)	메인화면: 세팅한 전화목록을 선택하면 전화 창으로 이동/ 전화목록 세팅창 이동/ 추가/ 삭제
레이아웃2 (설정화면)	세팅화면: 원하는 미디어를 선택하여 전화목록을 세팅하는 화면으로 기본으로 제공하는 영상/ 내가 소장한 영상 / 유튜브 영상으로 3가지 버전으로 설정 가능
레이아웃3 (전화대기)	전화대기화면으로 전화 연결/ 전화 종료 가능
레이아웃4 (전화 중 화면)	기본영상/ 내 갤러리의 영상/ 유튜브 영상에 따라 화면이 다르게 출력되고 기본적으로 카메라뷰를 보여줌 (권한은 허용해야 카메라에 접근이 가능합니다.)

기획:

우선 아이디어가 먼저 세우고 어떤 기능이 있으면 좋을지 리스트화 하였습니다. 그게 22년도 9월 처음 시작했고 목표는 3개월 후인 22년도 12월 31일. 역시.. 처음 기획과는 다르게 기획부터 출시까지 모든 단계가 처음이여서 많이 지연되고 3개월 후인 23년 3월에 출시가 되었네요.

일정 관리는 엑셀로 하루 단위로 세분화하여 수립하였고 기획은 많이 걸리지 않았습니다. 기획은 개발 중간중간 지속적으로 수정하는 방안으로 진행했어요. 다음에는 일정을 더 잘지킬 수 있도록 다짐하겠습니다.

개발:

정말 구글에는 없는게 없네요. 여러분 모르는 기술은 모두 구글에 있습니다. 개발은 "구" 선생과 같이 하는거에요 ^^

안드로이드 화면전환, 다중화면, custom dialog, videoview, youtubevideoview, admob 등 정말 많이 배웠습니다. 다음 앱 개발은 조금 더 빨리 진행할 수 있을거에요. 혹시, 저와 같이 앱을 출시하고 싶고 시작 단계에 있는 개발자분들 정말 포기하지 마시고 좋은 결과있으시길 바랍니다!

디자인:

앱 개발하시는 분, 시작하시는 분 꼭 기획하신 앱이 있다면 출시하시기 바라며 응원합니다.

다음 출시 때 또 글로 찾아뵐게요. 글 읽어 주셔서 감사합니다!

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

javascript setTimeout, setInterval

IT-개발자 — Wed, 15 Feb 2023 00:44:41 +0900

자바스크립트에서 일정 시간을 두고 실행하는 메서드가 있습니다. 바로 setTimeout, setInterval 2개입니다.

setTimeout 은 지연 메소드로 ms(millisecond) 단위 뒤에 한번만 콜백 실행
setInterval 은 반복 메소드로 ms(millisecond) 단위로 반복해서 실행

실습(setTimeout ):

setTimeout 에 대해 실습해보도록 하겠습니다. 처음 script를 실행하면서 00:22:34 에서 3초 뒤 실행되어 00:22:37에 시작되었습니다.

실습(setTimeout ):

setTimeout 에 대해 실습해보도록 하겠습니다. 처음 script를 실행하고 3,5 초뒤 setTimeout 지연함수를 실행되고 init 에서 00:29:36 실행 후 00:29:39, 00:29:41 에 실행되었습니다.

<!DOCTYPE html>

<head>

</head>

<body>

console.log("init: "+new Date())

setTimeout(() => console.log("3초 후 실행"+new Date()), 3000)

</script>

</body></html>

<!DOCTYPE html>

<head>

</head>

<body>

console.log("init: "+new Date())

timerafter3 = () => (setTimeout(() => console.log("3초 후 실행"+new Date()), 3000))

timerafter5 = () => (setTimeout(() => console.log("5초 후 실행"+new Date()), 5000))

timer3and5 = () => (timerafter3(), timerafter5())

timer3and5(); //시작 후 3, 5초 후 실행

</script>

</body></html>

실습(clearTimeout):

그렇다면 이 지연 함수를 어떻게 제거할까요? 실행 중에 중지해야하는 일이 생긴다면 변수에 setTimeout을 매핑하고 clearTimeout을 하여 중지합니다.

<!DOCTYPE html>

<head>

</head>

<body>

console.log("init: "+new Date())

timerafter3 = (setTimeout(() => console.log("3초 후 실 행"+new Date()), 3000))

timerafter5 = (setTimeout(() => console.log("5초 후 실 행"+new Date()), 5000))

timerstop4 = (clearTimeout(timerafter5))

</script>

</body></html>

실습(setInterval):

setInterval에 대해 실습해보도록 하겠습니다. 처음 script를 실행하면서 00:37:13 에서 3초 마다 계속 반복 실행됩니다.

<!DOCTYPE html>

<head>

</head>

<body>

console.log("init: "+new Date())

timerafter3 = (setInterval(() => console.log("3초 후 반복실행"+new Date()), 3000))

</script>

</body></html>

실습(clearInterval):

그렇다면 어떻게 setInterval을 중지할까요? 위의 코드에서 7초 뒤 한번만 실행하는 setTimeout을 실행하면 3초마다 실행되는 setInterval은 2번만 실행되고 중지되겠죠. 아래의 콘솔을 확인하면 init 이후 2번만 실행되고 clearInterval 된 것을 확인 할 수 있습니다.

<!DOCTYPE html>

<head>

</head>

<body>

console.log("init: "+new Date())

timerafter3 = (setInterval(() => console.log("3초 후 반복실행"+new Date()), 3000))

timerstop3 = (setTimeout(() => clearInterval(timerafter3),7000))

</script>

</body></html>

여기서 중요한 것은 시간함수는 남발해서 사용하면 메모리 누수 현상이 일어날 수 있습니다. 그러므로 꼭 미사용시에는 clearTimeout, clearInterval 등을 통해 타이머를 삭제하도록 합니다. 만약, setInterval 1초마다 실행되는 함수가 있다면 성능 저하는 피할 수 없습니다.

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

javascript Promise Async/Await

IT-개발자 — Tue, 14 Feb 2023 02:35:57 +0900

자바스크립트에서 비동기 처리를 위한 콜백함수 사용 시 콜백 지옥을 해결할 수 있는 것이 Promise입니다. Async/Await 는 비동기 처리 문법으로 가장 최근에 나온 문법으로 ES8에 해당하며 Promise를 쉽게 사용할 수 있도록 합니다.

Async는 함수 앞에 선언되며 Async의 결과는 Promise 객체로 return 됩니다.
Await는 Async와 쌍을 이루어 사용하여 Await를 사용하면 함수앞에 Async를 작성해야 한다.
Promise와 차이점은 기존 함수에 Async를 작성하는 것처럼 구성되어 간결하다.
가장 큰 차이점은 비동기 처리에 사용되는 문법이지만 코드 실행을 동기적으로 코딩을 할 수 있는것 입니다.

실무에서 많이 사용되니 실습을 통해 살펴보도록 하겠습니다.

실습:

async 를 함수 test앞에 작성하고 console.log("result_promise "+result_promise); 를 확인하면 Object 는 Promise 임을 알 수 있습니다. 그리고 then 함수는 Promise에서 사용하는 것으로 async 는 Promise 객체를 반환하는 것을 확인할 수 있습니다.

<!DOCTYPE html>

<head>

</head>

<body>

async function test(value) {

return (value+1);

}

let result_promise = test();

console.log("result_promise "+result_promise);

test(1).then((value) => console.log("value:"+value));

</script>

</body></html>

<!DOCTYPE html>

<head>

</head>

<body>

const f = async (value) => {

return value+1;

}

f(3).then((value) => console.log(value))

</script>

</body></html>

실습:

await 는 비동기 처리에서 동기 형태의 로직을 사용할 수 있게 하는 것으로 해당 로직을 기다리게 합니다.

<!DOCTYPE html>

<head>

</head>

<body>

const timer = () => {

return new Promise(resolve => setTimeout(resolve, 1000));

};

async function wait(){

await timer();

return "wait";

};

async function test(){

const waitstr = awaitwait();

return waitstr;

}

test().then(console.log)

</script>

</body></html>

<!DOCTYPE html>

<head>

</head>

<body>

const timer = () => {

return new Promise(resolve => setTimeout(resolve, 1000));

};

async function wait(){

timer();

return "wait";

};

async function test(){

const waitstr = wait();

return waitstr;

}

test().then(console.log)

</script>

</body></html>

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

javascript Promise

IT-개발자 — Mon, 13 Feb 2023 01:11:01 +0900

자바스크립트에서 비동기 처리를 위한 콜백함수 사용 시 콜백 지옥을 해결할 수 있는 것이 Promise입니다.

먼저, 동기(Synchronous)와 비동기(Asynchronous)에 차이에 대해 확인하도록 하겠습니다.

동기(Synchronous):

1. 동시에 일어난다는 의미로 직렬적으로 로직을 처리함

2. 직렬적으로 일을 처리하므로 앞의 결과가 처리될 때 까지 뒤에 로직은 대기 후 순차적으로 진행

3. 설계가 직관적임

비동기(Asynchronous):

1. 동시에 일어나지 않은다는 의미로 병렬적으로 로직을 처리함

2. 병렬적으로 로직을 처리하므로 앞의 로직이 끝나지 않더라도 진행

3. 설계가 복잡함

자바스크립트에서 비동기처리를 위해 Promise를 많이 사용하는데, 콜백 함수를 사전에 살펴보고 Promise의 내용을 확인하도록 하겠습니다.

callback 함수:

어떤 함수의 실행이 끝난 뒤 호출되어 사용되는 함수를 의미합니다. 아래의 표를 확인하면 call("test", callback) 함수를 호출하고 call 함수를 처리 후 callback 함수를 처리하는 형태입니다. 주로 자바스크립트에서는 ajax에 success값에 많이 사용됩니다. 이 callback함수가 많아지고 남발되면 코드 관리가 어렵고 콜백지옥에 빠지기 쉽습니다. 이를 해결하기 위해 Promise가 나온 이유입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>

function callback(){
console.log("콜백1");
}

function call(name, callback){
console.log("name: "+name)
callback();
}

call("test", callback);

    </script>
</body></html>

Promise

아래 그림을 보면 Promise는 pending, fulfilled,reject의 상태를 가지고 있습니다.

참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Pending(대기중)
Promise 객체의 기본상태를 의미하며 비동기 결과가 나오지 않는 초기 상태를 의미합니다.
Fullfilled(이행 완료됨)
비동기 처리가 완료된 상태를 의미합니다.
Reject(거부됨)
비동기 처리가 완료는 되었지만 연산에 실패함을 의미합니다.

실습:

minusTest 함수를 호출하며 num 3을 입력합니다. 그 이후 setTimeout 1초(1000millisecond) 후 실행하라는 지연함수를 싱행하고 then 함수를 순서대로 호출하고 있습니다.

then은 primise 작업이 성공했을때,

<!DOCTYPE html>

<head>

</head>

<body>

function minusTest(num){

return new Promise((resolve, reject) => {

setTimeout(function(){

num-=1;

if(num>=0)resolve(num);

else reject(num);

}, 1000);

});

}

minusTest(3).then((num)=>{

console.log("then2: "+num);

return minusTest(num)

}).then((num)=>{

console.log("then1: "+num);

return minusTest(num)

}).then((num)=>{

console.log("then0: "+num);

return minusTest(num)

}).catch((err) => console.log("err:"+err));

</script>

</body></html>

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

javascript 연산자 기초

IT-개발자 — Sun, 12 Feb 2023 01:44:03 +0900

이번 시간에는 javascript의 기본 연산자에 대해서 알아보도록 하겠습니다.

기본 연산자에는 산술, 비교, 논리, 삼항, 비트 연산자가 있으며 실무에서 많이 사용하는 산술 연산자, 비교 연산자, 삼항 연산자를 중점으로 알아보도록 하겠습니다.

1. 산술연산자

사칙연산을 위해 필요한 연산자로 아래 표와 같습니다.

표 참고: https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Math

+	더하기	두 개의 숫자를 더합니다.	6 + 9
-	빼기	왼쪽에 있는 수를 오른쪽 수로 뺍니다.	20 - 15
*	곱하기	두 개의 숫자를 곱합니다.	3 * 7
/	나누기	왼쪽의 숫자를 오른쪽 숫자로 나눠서 몫을 구합니다.	10 / 5
%	나머지 (또는 모듈로)	왼쪽의 숫자를 오른쪽 숫자로 나눠서 나머지를 구합니다.	8 % 3 ( 2를 반환합니다, 8을 3으로 나눴을 때 몫이 2이기 때문입니다.)
**	지수	왼쪽의 숫자를 오른쪽 숫자만큼 제곱합니다.	5 ** 2 ( 5의 제곱이기 때문에 25를 반환합니다.)

실습:

위의 표를 실습해보도록 하겠습니다. 우선 왼쪽 표와 같이 html 파일을 하나 생성하도록 하겠습니다.

그리고 html 파일을 열어 개발자 도구를 이용하여 콘솔을 확인하게 되면 연산자를 이용한 값이 매핑되어있습니다.

왼쪽 표의 코드를 보면 console.log에 6+9에 괄호를 추가하여 (6+9) 형태로 되어있습니다. 만약 console.log("6+9: "+6+9); 를 하게된다면 제일 아래의 결과값으로 69인 string 형태로 나오게 되니 type과 관계가 있으니 참고하시기 바랍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        console.log("6+9: "+(6+9));
console.log("20-15: "+(20-15));
console.log("3*7: "+(3*7));
console.log("10/5: "+(10/5));
console.log("8%3: "+(8%3));
console.log("5**2: "+(5**2));
    </script>
</body></html>

2. 비교 연산자

비교 연산자는 두개의 값을 비교하여 if문에 비교문으로 많이 사용합니다.

표 참고: https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Math


===	일치 연산자	왼쪽과 오른쪽의 값이 완전히 동일한지 테스트합니다.(타입, 값 포함)	5 === 2 + 4
!==	불일치 연산자	왼쪽과 오른쪽 값이 서로 동일하지 않은지 테스트합니다.(타입, 값 포함) -> 값과 타입이 하나라도 같지 않으면 false 반환합니다.	5 !== 2 + 3
==	일치 연산자	왼쪽과 오른쪽의 값이 완전히 동일한지 테스트합니다.	-
!=	불일치 연산자	왼쪽과 오른쪽 값이 서로 동일하지 않은지 테스트합니다.	-
<	~보다 작음	왼쪽 값이 오른쪽 값보다 작은지 테스트합니다.	10 < 6
>	~보다 큼	왼쪽 값이 오른쪽 값보다 큰지 테스트합니다.	10 > 20
<=	~보다 작거나 같음	왼쪽 값이 오른쪽 값보다 작거나 같은지 여부를 테스트합니다.	3 <= 2
>=	~보다 크거나 같음	왼쪽 값이 오른쪽 값보다 크거나 같은지 여부를 테스트합니다.	5 >= 4

실습:

위의 표를 실습해보도록 하겠습니다. 우선 왼쪽 표와 같이 html 파일을 하나 생성하도록 하겠습니다.

그리고 html 파일을 열어 개발자 도구를 이용하여 콘솔을 확인하게 되면 연산자를 이용한 값이 매핑되어있습니다.

5 === 2 + 4 : 5===6이므로 타입은 숫자 형태로 같지만 값이 다르므로 false

5 !== 2 + 3 : 5와 5는 서로 동일하여 조건에 부합하므로 false

10<6 : 10은 6보다 작은값이 아니므로 false

10>20: 10은 20보다 크지 않아 false

3<=2 : 3은 2초과이므로 false

5>=4: 5는 4보다 크므로 true

비교 연산자는 실무에서 정말 많이 사용하니 참고하시기 바랍니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
        console.log("5 === 2 + 4: "+(5 === 2 + 4));
console.log("5 !== 2 + 3: "+(5 !== 2 + 3));
console.log("10 < 6: "+(10 < 6));
console.log("10 > 20: "+(10 > 20));
console.log("3 <= 2: "+(3 <= 2));
console.log("5 >= 4: "+(5 >= 4));
    </script>
</body></html>

3. 삼항연산자

조건문 if를 대신하여 쉽게 비교하여 사용하는 연산자입니다.

아래와 같이 삼항연산자의 값을 조건식을 작성하여 조건이 true이면 true에 해당하는 함수의 결과가 값이 되고, 조건이 false이면 false에 해당하는 함수의 결과가 값이 됩니다. 실습을 통해 확인하도록 하겠습니다.

상항연산자 값 = 조건식 ? f(true) : f(false)

실습:

a값은 2는 1보다 크므로 참인 결과값이 2:1 중 2가 됩니다.

d값은 b는 c보다 작으므로 거짓 값인 ffalse 값인 5가 됩니다.

e값은 c는 b보다 크기 때문에 참인 값인 ftrue 값인 4가 됩니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <script>
var a = (2>1)? 2:1
console.log("a: "+a)

var b = 2;
var c = 3;
function ftrue(){
//함수
return 4;
}
function ffalse(){
//함수
return 5;
}

var d = (b>c)? ftrue():ffalse()
var e = (b<c)? ftrue():ffalse()
console.log("d: "+d)
console.log("e: "+e)

    </script>
</body></html>

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

01. openCV 이미지 출력 및 색상 변경

IT-개발자 — Sun, 15 Jan 2023 15:45:15 +0900

이번 시간에는 openCV에서 가자 기본인 이미지를 출력해보도록 하겠습니다.

openCV를 이용하여 기존 이미지를 출력함과 동시에 아래 이미지를 흑백으로 보여주도록 하겠습니다.

https://pixabay.com/illustrations/dog-sitting-mascot-tamed-brown-5188108/

<이미지 및 흑백 보여주기>

import sys

import cv2

img = cv2.imread('dog.png', cv2.IMREAD_COLOR)

gray_img = cv2.imread('dog.png', cv2.IMREAD_GRAYSCALE)

cv2.imwrite('dog_gray.png',img)

if img is None:

print('Image load failed!')

sys.exit() #이미지가 없는 경우 프로그램을 종료

cv2.namedWindow('basic_dog', cv2.WINDOW_NORMAL)

cv2.namedWindow('gray_dog', cv2.WINDOW_NORMAL)

cv2.resizeWindow('basic_dog', 500, 500)

cv2.resizeWindow('gray_dog', 500, 500)

cv2.imshow('basic_dog',img) # basic_dog 라는 제목으로 이미지 화면에 보여주기

cv2.imshow('gray_dog',gray_img) # gray_dog 라는 제목으로 이미지 화면에 보여주기

cv2.waitKey(0) #어떤 키가 입력될때까지 대기

cv2.destroyAllWindows() #모든 창 닫기

<이미지 색상 변경>

import sys

import cv2

img = cv2.imread('dog.png')

gray_dog1 = cv2.imread('dog.png', cv2.IMREAD_GRAYSCALE)

gray_dog2 = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

if img is None:

print('Image load failed!')

sys.exit() #이미지가 없는 경우 프로그램을 종료

cv2.namedWindow('gray_dog1', cv2.WINDOW_NORMAL)

cv2.namedWindow('gray_dog2', cv2.WINDOW_NORMAL)

cv2.resizeWindow('gray_dog1', 500, 500)

cv2.resizeWindow('gray_dog2', 500, 500)

cv2.imshow('gray_dog1',gray_dog1)

cv2.imshow('gray_dog2',gray_dog2)

cv2.waitKey(0) #어떤 키가 입력될때까지 대기

cv2.destroyAllWindows() #모든 창 닫기

여기서 각 함수를 알아보도록 하겠습니다.

cv2.IMREAD_COLOR : 별도로 지정하지 않을 경우 사용되는 기본값이며 칼라 이미지로 읽어드림. 이미지의 투명도값은 무시된다.
cv2.IMREAD_GRAYSCALE : 이미지를 Grayscale로 읽는다
cv2.IMREAD_UNCHANGED : 투명도인 Alpha 채널을 포함하여 읽는다.

cvtColor 는 색상을 바꾸는 것으로

cv2.COLOR_BGR2GRAY는 색상 이미지를 회색조 이미지로 변환합니다.

다음은 실제 카메라를 연결하고 색상을 바꿔 보도록 하겠습니다.

<카메라 연결을 통한 색상 변경>

import numpy as np

import cv2

cap = cv2.VideoCapture(0) #video 연결된 디바이스 중 첫번째를 가지고 온다.

while(True):

ret, frame = cap.read() # 비디오 값이 정상적이면 ret은 True/ cap.read을 통해 frame을 연속적으로 읽는다.

gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

cv2.imshow('video', frame) # 연속적으로 frame을 출력하여 보여준다.

cv2.imshow('gray', gray) # 기본 영상을 gray로 변환.

if cv2.waitKey() == ord('q'): # 키보드 q가 나오면 종료.

break

cap.release() # 종료이므로 video 객체 cap을 없앤다.

cv2.destroyAllWindows() # 종료

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.

layout- LinearLayout(안드로이드)

IT-개발자 — Sun, 8 Jan 2023 17:12:05 +0900

레이아웃 종류는 다음과 같습니다.

ConstraintLayout, LinearLayout(horizontal), LinearLayout(vertical), FrameLayout, TableLayout, TableRow, Space

그중에서도 LinearLayout을 살펴보도록 하겠습니다.

LinearLayout은 여러 View(Button, imageView 등) 컴포넌트들을 수직적(Vertical), 수평적(Horizontal)으로 컴포넌트를 레이아웃 위에 정렬하여 배치할 수 있습니다. 그래서 수직, 수평적으로 사용하기 때문에 LinearLayout은 직관적이라는 장점이 있습니다.

그러면 LinearLayout에 대해 실습을 해보도록 하겠습니다.

1. 새로운 Project를 만들겠습니다.

2. 처음 생성한 프로젝트의 activity_main.xml 화면에서 Component Tree 는 앞의 시간에 확인하였듯이 ConstraintLaytou으로 지정되어 있으나 오른쪽 마우스를 클릭해서 Convert View를 통해 View를 LinearLayout으로 변경하도록 하겠습니다.

3. LinearLayout으로 변경하기 위해 해당 레이아웃을 클릭한 후 Apply를 클릭하도록 하겠습니다.

4. 레이아웃을 바꾸면 기본적으로 Horizontal 인 수평정렬이 기본으로 세팅되어 있습니다.

5. hello world인 TextView 컴포넌트의 오른쪽 속성인 layout_width를 변경하여 현재 warp_content인 내용물에 맞춰진 크기를 match_parent를 변경하여 부모창인 LinearLayout에 맞추도록 하겠습니다.

6. 위와 같이 hello World가 부모창인 LinearLayout에 맞춰진것을 확인할 수 있습니다.

7. TextView 컴포넌트를 드래그해서 추가하도록 하겠습니다.

8. TextView 두개의 컴포넌트가 Horizontal 인 수평정렬이 된것을 확인할 수 있습니다. 혹시, TextView가 겹치는 현상이 이으면 layout_weight 가중치를 모두 1로 설정하면 됩니다.

9. Horizontal 인 수평정렬에 대한 가중치 값

그러면 이어서 레이아웃을 Vertical인 수직으로 바꿔서 실습해도록 하겠습니다.

1. LinearLayout에서 오른쪽 마우스를 클릭해서 Conver orientation to vertical(수직)로 바꾸면 되고 만약 vertical인 경우에는 horizontal로 바꾸면 되겠습니다.

2. 레이아웃이 vertical 의 LinearLayout으로 바뀐것을 확인할 수 있으며 자동으로 textView들이 가중치인 weight 1에 의해 세팅된것을 확인할 수 있습니다.

최종적으로 Code형태로 이를 확인하면 LinearLayout의 vertical 형태인 orientation 속성을 확인할 수 있습니다. 그리고 TextView 2개의 가중치 또한 확인 할 수 있습니다. 위의 Code의 모든 xml 값을 복사해서 새로운 Project가 생성되었을때 복사하여 붙여넣으면 그 디자인을 바로 쓸수가 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="TextView" />

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="TextView" />
</LinearLayout>

자료가 마음에 드셨다면 자주 찾아주세요^^ 글 올리는데 힘이됩니다.