Sign in

a Developer, Student, Learner.

setInterval is nothing better than setTimeout and will crack your application eventually. But the evil is JS itself ๐Ÿค”

Did you ever develop a time related feature in your react native application like timer or do something intervally? As the name suggest, the best option for that seems to using setInterval in Javascript.

But you are wrong ๐Ÿ˜ต. there are couple of reason and have to know thoroughly why it is.

1. Javascript is a single thread language

Yes, it is a famous fact. The asynchronization API in JS is not actually in JS itself. โ€ฆ

์ฝ”ํ‹€๋ฆฐ์˜ ์ธ๋ผ์ธ ํด๋ž˜์Šค์˜ ํ•„์š”์„ฑ๊ณผ ์‚ฌ์šฉ๋ฒ•

An inn in a fantasy world

์ธ๋ผ์ธ ํด๋ž˜์Šค๋Š” ์ฝ”ํ‹€๋ฆฐ 1.3๋ถ€ํ„ฐ ์•ŒํŒŒ๋ฒ„์ „์œผ๋กœ ๋„์ž…๋œ ์ƒˆ๋กœ์šด ํƒ€์ž…์„ ์•ˆ์ „ํ•˜๊ณ  ์ตœ์ ํ™”๋œ ํ˜•์‹์œผ๋กœ ์ •์˜ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค. ์ธ๋ผ์ธ ํด๋ž˜์Šค๋ฅผ ์•Œ์•„๋ณด๊ธฐ ์ „์—, ์ธ๋ผ์ธ๊ณผ ์ฝ”ํ‹€๋ฆฐ์˜ ์›์‹œํ˜• ์ปดํŒŒ์ผ๋Ÿฌ ์ตœ์ ํ™”์— ๋Œ€ํ•ด ์ž ๊น ์‚ดํŽด๋ณด๊ณ  ์ธ๋ผ์ธ ํด๋ž˜์Šค์˜ ํ•„์š”์„ฑ๊ณผ ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.


์ฝ”ํ‹€๋ฆฐ ๊ณต์‹๋ฌธ์„œ

์ธ๋ผ์ธ, ์ธ๋ผ์ธ ํ•จ์ˆ˜

์ธ๋ผ์ธ์ด๋ž€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์—์„œ ์ฃผ๋กœ ํ•จ์ˆ˜์— ์‚ฌ์šฉ๋˜๋ฉฐ ์ปดํŒŒ์ผ ๊ณผ์ •์—์„œ ์›๋ž˜ ํ•จ์ˆ˜๋กœ ๋”ฐ๋กœ ๋ถ„๋ฆฌ๋˜์–ด ์žˆ๋˜ ๊ฒƒ์ด ์ตœ์ข… ์ปดํŒŒ์ผ๋œ ์ฝ”๋“œ์—์„œ๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์œ„์น˜์— ํ•จ์ˆ˜์˜ ๋ณธ๋ฌธ์ด ์‚ฝ์ž…๋˜์–ด ํ”„๋กœ๊ทธ๋žจ์„ ์ตœ์ ํ™”ํ•ด์ฃผ๋Š” ํ…Œํฌ๋‹‰์ž…๋‹ˆ๋‹ค.

ํ•œ๋ฒˆ ์ฝ”ํ‹€๋ฆฐ์—์„œ ์‹ค์ œ๋กœ ์ธ๋ผ์ธ ํ•จ์ˆ˜๋ฅผ ๋งŒ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค

fun fn(n1: Int, n2: Int): Int {
return n1 + โ€ฆ

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ 4.1 ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ๋“ค๊ณผ ๋ณ€๊ฒฝ ์‚ฌํ•ญ๋“ค

์–ด๋Š๋‚  ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๊ฐ€ ์—…๋ฐ์ดํŠธ ๋˜์—ˆ๋‚˜ ๋ณด๋‹ˆ ์ œ๊ฐ€ ์“ฐ๊ณ ์žˆ๋˜ 4.0.5 ์—์„œ 4.1.3 ๋กœ ๊ธ‰๊ฒฉํ•œ ์—…๋ฐ์ดํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Œ์„ ์•Œ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค(์‚ฌ์‹ค ์ œ๊ฐ€ ๋ณ„ ๊ด€์‹ฌ ์—†์—ˆ์Šต๋‹ˆ๋‹ค). ์ด์™€ ๊ด€๋ จํ•ด์„œ 4.1 ๋ฒ„์ „์˜ ์ƒˆ๋กœ์šด ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์–ธ์–ด ๊ธฐ๋Šฅ๋“ค๊ณผ ๋ณ€๊ฒฝ์ ๋“ค์„ ์‚ดํŽด๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ง€๋ ค ํ•ฉ๋‹ˆ๋‹ค.

4.0 ๋ฒ„์ „์˜ ๋ณ€๊ฒฝ์‚ฌํ•ญ์ด ๊ถ๊ธˆํ•˜์‹  ๋ถ„๋“ค์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ œ ์˜ˆ์ „ ๊ธ€์„ ์ฐธ๊ณ ํ•ด์ฃผ์„ธ์š”.

์ด ๊ธ€์€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋„ํ๋จผํŠธ์™€ ๊ธ€์„ ์ ๊ทน ์ฐธ๊ณ ํ•˜์—ฌ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด ํƒ€์ž…(Template Literal Types)

ํ”ํžˆ ๋ฆฌํ„ฐ๋Ÿด์ด๋ผ๋ฉด ํŠน์ • ์ž๋ฃŒํ˜•์„ raw ํ•˜๊ฒŒ ํ‘œํ˜„ํ•  ์ˆ˜์žˆ๋Š” ์–ธ์–ด์˜ ๊ธฐ๋Šฅ์„ ์˜๋ฏธํ•˜๋Š”๋ฐ, ์ด๊ฒŒ ์ด์ œ ํƒ€์ž…์—๋„ ์ ์šฉ์ด ๋ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด ES6์˜ ๋ฌธ์ž์—ด ๋ฆฌํ„ฐ๋Ÿด ๋ฌธ๋ฒ•๊ณผ ๋™์ผํ•ฉ๋‹ˆ๋‹ค.

type Height = '17 โ€ฆ

Android Bound Service์˜ ๊ฐœ๋…๊ณผ IBinder, Messenger, AIDL์„ ์ด์šฉํ•œ ๊ตฌํ˜„

์•ˆ๋“œ๋กœ์ด๋“œ, ์–ด๋””๊นŒ์ง€ ์•„์„ธ์š” ์‹œ๋ฆฌ์ฆˆ์˜ ์„ธ ๋ฒˆ์งธ ๊ธ€์ž…๋‹ˆ๋‹ค. ์ด์ „์— ๋‹ค๋ฃจ์—ˆ๋˜ ์„œ๋น„์Šค ์ปดํฌ๋„ŒํŠธ๋ฅผ ์—ฐ์ด์–ด ์ž‘์„ฑํ•˜๋ฉฐ Bound Service์™€ IPC ๋ฐ AIDL์— ๋Œ€ํ•ด์„œ ์‚ดํŽด๋ณผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Bound Service

๋ฐ”์ธ๋”ฉ๋œ ์„œ๋น„์Šค๋Š” ์‹œ์ž‘๋œ(Started)์„œ๋น„์Šค์™€ ๋‹ค๋ฅด๊ฒŒ startService์™€ stopSelf, stopService๋ฅผ ์ด์šฉํ•ด ์ƒ๋ช…์ฃผ๊ธฐ๋ฅผ ๊ด€๋ฆฌํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. Java API์ธ bindService๋ฅผ ์ด์šฉํ•ด์„œ ๋ฐ”์ธ๋”ฉ์„ ์—ฐ๊ฒฐํ•˜๊ฑฐ๋‚˜ C/C++, HAL ์ชฝ์—์„œ ๋ฐ”์ธ๋”ฉ์„ ์—ฐ๊ฒฐํ•˜๋ฉด ์„œ๋น„์Šค๊ฐ€ ์ƒ์„ฑ๋˜๊ณ (onCreate), ๋ฐ”์ธ๋”ฉ๋œ ํด๋ผ์ด์–ธํŠธ๊ฐ€ ๋ชจ๋‘ โ€ฆ

์•ˆ๋“œ๋กœ์ด๋“œ์˜ ๋ฐฑ๊ทธ๋ผ์šด๋“œ ์ž‘์—… ์ฒ˜๋ฆฌ ์ข…๋ฅ˜์™€ Service์˜ ์ดํ•ด๋ฐ ๊ตฌํ˜„

์•ˆ๋“œ๋กœ์ด๋“œ, ์–ด๋””๊นŒ์ง€ ์•„์„ธ์š” ์‹œ๋ฆฌ์ฆˆ์˜ ๋‘ ๋ฒˆ์งธ ๊ธ€์ž…๋‹ˆ๋‹ค. ์ด ํฌ์ŠคํŒ…์€ ์•ˆ๋“œ๋กœ์ด๋“œ์˜ 4๋Œ€ ์ปดํฌ๋„ŒํŠธ ์ค‘ ํ•˜๋‚˜์ธ Service์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ๋ชฉ์ ์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ์œผ๋ฉฐ Service์— ๋Œ€ํ•ด ์•Œ์•„ ๋ณผ๊ฒƒ์ด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— 2๋ผ๋Š” ๋Œ€๋‹จ์› ์•ˆ์— ์ชผ๊ฐœ์„œ ํฌ์ŠคํŒ…์„ ์ž‘์„ฑํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ด ํฌ์ŠคํŒ…์—์„œ๋Š” Android์˜ Background task๋ฅผ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•๋“ค์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ณ  Service์˜ ํ•„์š”์„ฑ๊ณผ API๋ฅผ ์‚ดํŽด ๋ณธ ํ›„์— Service, Foreground Service๋ฅผ ์ง์ ‘ ๊ตฌํ˜„ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ์€ ์ƒ˜ํ”Œ ์ €์žฅ์†Œ์ž…๋‹ˆ๋‹ค.

Android Background task

์šฐ๋ฆฌ๊ฐ€ ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ์„ ํ•˜๋ฉฐ ์–ด๋– ํ•œ ์ž‘์—…์„ ๋ฐฑ๊ทธ๋ผ์šด๋“œ์—์„œ ์ง„ํ–‰ํ•ด์ฃผ๊ฑฐ๋‚˜ ๋น„๋™๊ธฐ์ ์œผ๋กœ ์‹คํ–‰์‹œ์ผœ์ฃผ๊ณ  ์‹ถ์„ ๋•Œ โ€ฆ

APK bundling, Proguard, R8, D8, Desugaring โ€ฆ

์•ˆ๋“œ๋กœ์ด๋“œ, ์–ด๋””๊นŒ์ง€ ์•„์„ธ์š” ์‹œ๋ฆฌ์ฆˆ๋Š” ์•ˆ๋“œ๋กœ์ด๋“œ ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ํŠน์ˆ˜ํ•œ ์š”๊ตฌ ์‚ฌํ•ญ, ๊ณ ๊ธ‰ ๊ธฐ์ˆ ์ด ํ•„์š”ํ•œ ์ƒํ™ฉ์ผ ๋•Œ๋ฅผ ๋Œ€๋น„ํ•˜๊ฑฐ๋‚˜ ์•ˆ๋“œ๋กœ์ด๋“œ๋ž€ ๊ธฐ์ˆ ์— ๋Œ€ํ•œ ์ „๋ฐ˜์ ์ธ ์ดํ•ด๋ฅผ ๋ชฉ์ ์œผ๋กœ ์ž‘์„ฑ๋˜๋Š” ํฌ์ŠคํŒ…๋“ค์ž…๋‹ˆ๋‹ค.

์•ˆ๋“œ๋กœ์ด๋“œ ์•ฑ ๊ฐœ๋ฐœ์ž๋ผ๋ฉด Android Studio๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์•ˆ๋“œ๋กœ์ด๋“œ ์•ฑ์„ ๋นŒ๋“œํ•˜๊ณ  ๋””๋ฐ”์ด์Šค์— ์„ค์น˜๋ฅผ ํ•˜์—ฌ ์‹คํ–‰ํ•˜๊ฑฐ๋‚˜ ์Šคํ† ์–ด์— ์ถœ์‹œ๋ฅผ ํ•ด ๋ณธ ๊ฒฝํ—˜์ด ์žˆ์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

Android Studio๊ฐ€ ์ฑ„ํƒํ•œ Gradle์ด๋ผ๋Š” ํˆด์ฒด์ธ ํ”„๋ ˆ์ž„์›Œํฌ๋Š” ๋น ๋ฅด๊ฒŒ ์ง„ํ™”ํ•˜๋Š” Android Gradle Plugin(AGP)๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋นŒ๋“œ ๊ณผ์ •์„ ๋‚ด๋ถ€์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ฃผ๊ณ  ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ๊นŠ์€ ์ˆ˜์ค€์˜ ๋นŒ๋“œ ๊ณผ์ • ์ดํ•ด๋ฅผ ๊ฐ•์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

// And โ€ฆ

New react-native-reanimated v2 API and concept

Animation in React Native

Had you ever implement animation in the React Native development process? The only way to create animation with React Native core is Animated API.

The Animated API of React Native provides an easy API for animation and it can cover over 90% of use cases. It has duration-based animation or spring or decay animation and APIs for canceling animation or repeat and interpolation. The Animated.Value instance is a reactive observable value and we can generate our appropriate values from it with interpolation. โ€ฆ

JVM ๊ธฐ๋ฐ˜ ์–ธ์–ด์ธ Java์™€ Kotlin์˜ ์™€์ผ๋“œ์นด๋“œ์™€ ๋ถˆ๋ณ€(invariance), ๊ณต๋ณ€(covariance), ๋ฐ˜๋ณ€(contravariance)์— ๋Œ€ํ•ด

์ด ๊ธ€์€ ์ฒจ๋ถ€ํ•œ ๊ณต์‹ ๋ฌธ์„œ์˜ ์˜ˆ์‹œ์™€ ์„ค๋ช…์„ ์ฐธ๊ณ ํ–ˆ์œผ๋ฉฐ ๋ฒˆ์—ญ๊ณผ ๋”๋ถˆ์–ด ์•ฝ๊ฐ„์˜ ์„ค๋ช…์„ ๋ง๋ถ™์—ฌ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ œ๋„ค๋ฆญ

ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋“ค์—์„œ ์ œ๊ณตํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜์ธ ์ œ๋„ค๋ฆญ์€ ํด๋ž˜์Šค๋‚˜ ์ธํ„ฐํŽ˜์ด์Šค ํ˜น์€ ํ•จ์ˆ˜ ๋“ฑ์—์„œ ๋™์ผํ•œ ์ฝ”๋“œ๋กœ ์—ฌ๋Ÿฌ ํƒ€์ž…์„ ์ง€์›ํ•ด์ฃผ๊ธฐ ์œ„ํ•ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค. ํ•œ๊ฐ€์ง€ ํƒ€์ž…์— ๋Œ€ํ•œ ํ…œํ”Œ๋ฆฟ์ด ์•„๋‹ˆ๋ผ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ํƒ€์ž…์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ํด๋ž˜์Šค๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•œ ์˜ˆ์‹œ๋“ค์„ ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

class Wrapper<T>(var value: T)

fun ma โ€ฆ

์•ˆ๋“œ๋กœ์ด๋“œ Jetpack์˜ Security ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ๊ตฌํ˜„์›๋ฆฌ์™€ EncryptedFile, EncryptedSharedPreferences ์˜ ์‚ฌ์šฉ๋ฒ•


์ƒ˜ํ”Œ ํ”„๋กœ์ ํŠธ์˜ ํŒจํ‚ค์ง€ ๋ฃจํŠธ/authentication ์—์„œ Security๋ฅผ ์‚ฌ์šฉํ•œ ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Jetpack Security

Jetpack์˜ ์ƒˆ๋กœ์šด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜์ธ Security๋Š” ํŒŒ์ผ์ด๋‚˜ ๋ฐ์ดํ„ฐ๋ฅผ ์ฝ๊ณ  ์“ฐ๋Š” ๊ณผ์ •์— ์•”ํ˜ธํ™”/๋ณตํ˜ธํ™”๋ฅผ ๊ฐ„๋‹จํ•œ API๋ฅผ ํ†ตํ•ด ์ œ๊ณตํ•ด์ค๋‹ˆ๋‹ค.

ํ”ํžˆ ์‚ฌ์šฉ๋˜๋Š” Java์˜ File ์ด๋‚˜ ์•ˆ๋“œ๋กœ์ด๋“œ์˜ SharedPreferences ๋ฅผ ์ด๋ฆ„ ์•ž์— Encrypted ๊ฐ€ ๋ถ™์€ ํ˜•ํƒœ๋กœ EncryptedFile, EncryptedSharedPreferences ๊ฐ€ โ€ฆ

Explorer new Material design library motion features


You can see how to implement material motion in my sample project.

MDC rescues us from confusing transition effects

Navigation in mobile development is not an easy one. We must consider how screens are pushed into the stack and pop with an appropriate order. Also, transition animation in the navigation process is an important thing. Within good transition animation, follows many guidelines of Google or Apple helps our users feel smooth UI/UX better.

In Android, there are some navigation technics. This is because of the distinction of screen types like Activity or Fragment. โ€ฆ

MJ Studio

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store