[React Native] react-native-bottom-sheet, AndroidManifest.xml 내 android:windowSoftInputMode 설정 충돌 방지하기
2023. 6. 7. 20:39
Front-end/App
https://github.com/gorhom/react-native-bottom-sheet gorhom/react-native-bottom-sheet는 React Native로 bottom sheet를 구현할 때 필요한 거의 대체 할 수 없는 필수 라이브러리이다. GitHub - gorhom/react-native-bottom-sheet: A performant interactive bottom sheet with fully configurable options 🚀 A performant interactive bottom sheet with fully configurable options 🚀 - GitHub - gorhom/react-native-bottom-sheet: A performant inte..
[디자인패턴] MVC 패턴의 간단한 개념과 구현 예시
2023. 5. 30. 00:20
Basic/etc
MVC 패턴의 개념을 설명하는 document나 블로그는 많으니, 간단하게 정리하고 그 예시에 대해서 자세히 알아보자. MVC 패턴이란? "MVC(모델-뷰-컨트롤러)는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다. 소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다." (참고 문헌: https://developer.mozilla.org/ko/docs/Glossary/MVC ) MVC (Model-View-Controller) 패턴 Model: 데이터와 비즈니스 로직을 처리한다. View: 사용자에게 표시되는 인터페이스를 담당한다. Controller: 사용자의 입력을 처리하고 Model과 View를 관리한다. 결과적으로 이 패턴을 사용함..
[JavaScript] 세미콜론 자동 삽입(Automatic Semicolon Insertion, ASI) 주의하기 - 코드 컨벤션
2023. 5. 9. 20:00
Basic/JavaScript
세미콜론 자동 삽입(ASI, Automatic Semicolon Insertion)은 줄바꿈이 자동으로 세미콜론으로 대체되는 것을 의미한다. 때로 의도하지 않은 동작을 초래할 수 있기 때문에 코드를 작성할 때 주의해야 한다. 특히, 함수 이름과 중괄호를 다른 줄에 작성할 경우, JavaScript에서는 이를 한 줄로 인식하여 세미콜론이 삽입되어 함수가 올바르게 작동하지 않을 수 있다. 다음 예시 코드를 보자 function someFunction() { // 코드 블록 } 위 코드에서는 함수 이름과 중괄호가 다른 줄에 작성되어 있다. 이 경우, 세미콜론을 자동으로 삽입하여 다음과 같이 해석한다. function someFunction(); { // 코드 블록 } 이 경우, someFunction은 함수 ..
[React Native] 개발 모드, 배포 모드 설정하기 (RN, Native Android, Native iOS)
2023. 5. 9. 19:30
Front-end/App
깃 브랜치를 분리하여 개발(develop)과 배포(production) 버전의 코드를 나눌 수도 있겠지만, 제공하는 전처리기 변수를 활용하여 분기 처리하는 식으로 관리를 할 수 있다. React Native 코드단에서 뿐만 아니라, 네이티브 코드단에서도 해야하는 경우도 종종 있는데, 간단하니 익혀 활용하면 좋을 듯 하다. 1. React Native React Native에서는 "__DEV__" 전처리기 변수를 사용하여 개발 모드와 릴리즈 모드를 구분한다. "__DEV__" 변수는 React Native에서 내장되어 있는 전역 변수로, 개발 모드에서는 true로 정의되고, 릴리즈 모드에서는 false로 정의된다. if (__DEV__) { // 개발 모드에서 실행되는 코드 console.log('This..
[JavaScript] 객체 변환하기
2023. 5. 3. 14:57
Basic/JavaScript
obj라는 객체가 있다고 가정하자. const obj = { a: 1, b: 2, c: 3 }; 위의 객체의 key값을 소문자에서 대문자, value값을 2배로 변환하여 새로운 객체로 변환하는 방법을 알아보자. 1. 라이브러리없이 구현 function mapObject(obj, fn) { const newObj = {}; for (const [key, value] of Object.entries(obj)) { const [newKey, newValue] = fn(key, value); newObj[newKey] = newValue; } return newObj; } const obj = { a: 1, b: 2, c: 3 }; const newObj = mapObject(obj, (key, value) =..
DAMP 원칙을 고수하여 코드 직관성 높이기
2023. 4. 27. 19:07
Experience/Developer
DAMP 원칙은 DRY 원칙과는 반대로, 코드를 구체적으로 만들어 유지보수하기 쉽게 만드는 것이다. (DRY 원칙 참고 - https://cotist.tistory.com/33) DAMP 원칙은 코드를 더 직접적이고 구체적으로 작성하여, 코드의 의도를 더 잘 나타내도록 하는 것을 권장한다. 예를 들어, 코드의 함수나 변수 이름을 더 구체적으로 작성하고, 불필요한 추상화를 피하는 등의 방식으로 DAMP 원칙을 따르는 것이다. DAMP 원칙은 DRY 원칙과는 다르게, 중복 코드를 가능한 한 피하지 않고, 코드를 보다 직접적이고 구체적으로 작성하는 것을 강조한다. 이를 통해 코드를 더 쉽게 이해하여 유지보수를 할 수 있다. 그러나 DAMP 원칙도 과도하게 적용할 경우, 코드의 가독성을 저해하고 코드의 복잡도를..
DRY 원칙을 고수하여 코드 작성 효율성 높이기
2023. 4. 27. 12:02
Experience/Developer
DRY란 Don't Repeat Yourself의 약자로, 코드에서 중복되는 부분을 최소화하여 코드의 유지보수성을 향상시키고, 코드 작성의 효율성을 높이는 소프트웨어 개발의 원칙이다. 예를 들어, 같은 로직이 여러 번 반복되는 경우, 이를 하나의 함수로 추상화하여 함수를 호출함으로써 중복을 제거할 수 있다. 이렇게 하면 코드의 양을 줄이고, 유지보수성과 가독성을 향상시킬 수 있다. DRY 원칙을 따르면 코드 중복을 최소화할 수 있으며, 이를 통해 코드를 효율적으로 작성할 수 있다. 예를 들어, 다음과 같은 두 개의 함수가 있다고 가정해보자. function calculateSquareArea(side) { return side * side; } function calculateRectangleArea(w..
[JavaScript] 문자형(string) 실수(숫자) 데이터, 세자리마다 콤마 구현하기
2023. 3. 30. 00:16
Basic/JavaScript
let numberString = "1000000.000000"; let parts = numberString.split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); let result = parts.join("."); console.log(result); // "1,000,000.000000" split() 메소드를 사용하여 원래 문자열을 소수점 기준으로 두 부분으로 나눈다. 정규표현식를 사용하여 replace() 메소드를 호출하여 첫 번째 부분의 숫자 문자열을 변경한다. 이 정규표현식은 세 자리의 숫자 그룹 앞에 오는 자리를 찾는다. 찾은 후, replace()는 해당 경계 뒤에 있는 문자열을 ","로 대체한다. join() 메소..
[React Native] Native Module 연동(구현)하기 (1) - Android
2023. 3. 14. 00:04
Front-end/App
Native Module은 Native 코드를 javascript 코드로 연동하는 작업이다. 해당 작업을 하는 이유는 반드시 사용해야 할 SDK 및 라이브러리가 네이티브인 경우가 대다수이다. 다른 이유는 성능 때문일 수도 있겠다. 성능에 관해 무거운 작업일 경우 네이티브로 작업을 하는 경우 아무대로 번들링 되는 과정이 없다 보니 그럴 수도 있겠는데.. (이 경우로 직접 모듈화를 해보지는 않아 개인적인 지표는 없어, 혹시 경험하신 분 있으시면 공유주시면 감사하겠습니다. ㅎㅎ) 간단하게 모듈화하는 과정을 Android부터 해보자. // android/app/src/main/java/com // ModuleTest.java package com.reactnativenativemodulesample; // 앱..