sonaki84

1월 21일 이제 막 공개된 React Native 0.77! 이번 버전은 예고했던 것보다 더 큰 변화를 담고 있습니다. 요즘은 모바일 앱 개발이 워낙 빠르게 돌아가다 보니 새 버전이 출시될 때마다, 새롭게 추가된 기능들을 놓치지 않고 챙기는 게 중요할 것 같습니다 React Native 공식 블로그의 내용을 토대로, 특히 이번에 추가되고 변경된 주요 기능들 중심으로 살펴볼께요. React Native 0.77 주요 변경점 1. 새로운 CSS 기능: 디자인·레이아웃 강화 React Native 0.77 버전은 더 풍부한 레이아웃 옵션을 제공하기 위해 다양한 CSS 속성들이 새로 도입되었거나 개선되었다고 합니다 아래 기능들은 최신 New Architecture(Fabric, TurboModules 기반)에서만 사용할 수 있다고 하니 참고하면 좋을 것 같습니다 (1) display: contents 설명: 요소를 레이아웃 트리에선 제거하되, 자식 요소들은 그대로 부모의 직계 자식처럼 렌더링되도록 하는 기능입니다 장점: 래퍼(Wrapper) 컴포넌트를 사용해야 하지만, 해당 래퍼가 레이아웃에 영향을 주지 않고 이벤트만 처리하고 싶을 때 유용할 것 같습니다 예를 들어, 아래처럼 기본 컨테이너와 적색 박스(Widget)가 있다고 해봅시다 여기에 파란색 배경을 가진 Alerting 래퍼를 씌우면, 별도의 파란 레이아웃 박스가 생기면서 우리가 의도한 범위와 다르게 이벤트가 발생할 수 있습니다 하지만 display: contents를 사용하면 파란색 박스는 레이아웃 트리에서 제거된 상태로 이벤트 핸들링만 수행하게 됩니다 결과적으로 아래 그림처럼, 자식(Widget)의 원래 크기와 위치가 그대로 유지되면서 래퍼가 이벤트만 감지할 수 있습니다 예시 코드 function Alerting({children}) { return ( <View style={{display: 'contents'}} onPointerDown={() => alert('Hello World!')}> {children} </View> ); } 이렇게 display: contents를 적용하면, Alerting 자체는 레이아웃 박스가 사라지고 이벤트만 감지합니다 (2) boxSizing 설명: 요소의 width, height 등을 계산할 때, 패딩이나 테두리를 어떻게 포함시킬지를 정하는 CSS 속성입니다 옵션 border-box: 기존 React Native 기본값으로, 테두리와 패딩을 너비·높이에 포함해 계산합니다 content-box: 웹과 동일하게 내용 영역만으로 사이즈를 잡습니다 주의: 웹의 기본값은 content-box지만, React Native에선 호환성을 위해 계속 border-box가 기본값으로 유지됩니다 아래는 border-box와 content-box의 차이를 시각적으로 확인할 수 있는 예시입니다 (3) mixBlendMode 설명: 요소의 배경색 또는 상·하위 요소 색과 어떻게 혼합(blend)해 렌더링할지 지정하는 속성입니다 대표 값: normal, multiply, screen, overlay 등 다양한 블렌딩 모드가 있습니다 isolation 속성: 특정 요소에 isolation: isolate를 설정해 별도의 스택 컨텍스트를 형성할 수 있습니다 이미지나 배경색을 겹쳐서 표현할 때 다양한 연출이 가능해 보입니다 아래 예시는 수박 이미지를 다양한 블렌딩 모드로 렌더링했을 때의 모습이라고 할 수 있습니다 (4) Outline 관련 props 설명: outlineWidth, outlineStyle, outlineSpread, outlineColor 등이 추가되어, 요소의 바깥쪽 테두리 선을 그릴 수 있습니다 장점: border와 달리 요소의 실제 레이아웃에 영향을 주지 않고 시각적인 강조만 줄 수 있습니다 아래처럼 다양한 형태와 색으로 아웃라인을 줄 수 있는 예시를 생각해볼 수 있습니다 2. 안드로이드 15 & 16KB 메모리 페이지 지원 Android 15 Edge-to-Edge Android 15는 targetSdkVersion 35 이상 빌드 시, 강제로 전체화면(Edge-to-Edge) 디스플레이가 적용되어 UI가 깨질 수 있습니다 react-native-safe-area-context 등을 사용해 대응할 수 있을 것 같습니다 16KB 페이지 사이즈 지원 기존 4KB 메모리 페이지에서 16KB 페이지로 전환이 가능해지며, 성능 개선을 기대할 수 있습니다 React Native 0.77에서 이미 이 변경을 지원하도록 준비해주었네요^^ 당분간 안드로이드 최신 기기 호환성에도 문제 없을 것 같습니다 3. iOS 커뮤니티 템플릿: Swift로 전환 기존 Objective-C++ 기반 템플릿 대신, Swift를 활용한 커뮤니티 템플릿이 기본으로 제공되기 시작했습니다 장점: 템플릿 파일이 단순해져서, 프로젝트 구조를 간결하게 유지할 수 있습니다 호환성: C++ 기반 로컬 모듈을 사용하는 경우에는 Swift와의 호환 이슈가 있으므로, 기존 Objective-C++ 방식을 유지해야 할 수도 있습니다 RCTAppDependencyProvider 추가 0.77 버전부터 iOS AppDelegate 내부에 RCTAppDependencyProvider 등록을 누락하면 런타임 문제가 발생할 수 있으니 주의해야 합니다 // Objective-C++ 예시 #import <ReactAppDependencyProvider/RCTAppDependencyProvider.h> // ... self.dependencyProvider = [RCTAppDependencyProvider new]; // Swift 예시 import ReactAppDependencyProvider // ... self.dependencyProvider = RCTAppDependencyProvider() 4. Community CLI와 Breaking Changes react-native init 명령어 완전 폐지 0.75 버전부터 예고되었던 사항이며, 이제 더는 사용 불가합니다 대신 npx @react-native-community/cli init 또는 Expo의 npx create-expo-app 등을 권장한다고 합니다 Metro에서 a, i 단축키 제거 Metro 터미널에서 a(run Android), i(run iOS)를 호출하던 단축키가 더는 지원되지 않습니다 앞으로는 직접 CLI 명령어를 입력하거나, 사용하는 프레임워크(예: Expo)에서 제공하는 명령어를 써야 합니다 console.log() 스트리밍 제거 Metro 콘솔에서 console.log() 출력이 실시간 스트리밍되던 기능이 제거되었습니다 디버깅 시에는 다른 로깅 툴이나 디버거를 사용하면 될 것 같습니다 결론 요즘은 모바일 앱 개발 영역에서도 웹 수준의 섬세한 스타일 및 레이아웃을 요구받는 추세인 것 같습니다 React Native 0.77은 이러한 트렌드를 반영해 새로운 CSS 속성을 강화하고, 안드로이드와 iOS 지원 범위를 확장한 점이 눈에 띕니다 한 단계 앞선 레이아웃과 플랫폼 대응성을 원하는 개발자라면, 이번 0.77 버전을 적극적으로 시도해보는 것도 좋을 것 같습니다.

GitHub은 2024년 12월 18일부로 GitHub Copilot을 무료로 제공한다고 발표했습니다. 이제 AI의 도움을 받아 더 효율적으로 코드를 작성할 수 있는 도구를 무료로 이용할 수 있습니다. GitHub Copilot이란 무엇인가요? GitHub Copilot은 AI 기반의 코드 자동 완성 도구로, 개발자가 코드를 작성할 때 실시간으로 다음에 올 코드를 제안해줍니다. 이를 통해 생산성을 높이고 반복적인 작업을 줄일 수 있습니다. 어떻게 무료로 이용할 수 있나요? GitHub Copilot은 GitHub 계정만 있으면 무료로 활성화할 수 있습니다. GitHub에 로그인하세요. 계정 설정(Settings)으로 이동한 후 Copilot 활성화를 클릭하세요. 간단한 설정 완료 후 바로 사용할 수 있습니다. 어떤 기능을 제공하나요? 코드 자동 완성: 함수나 메서드를 작성할 때, Copilot이 다음에 올 코드를 제안합니다. 자연어 처리: 주석이나 설명을 작성하면, 해당 내용에 맞는 코드를 자동 생성합니다. 다양한 언어 지원: Python, JavaScript, TypeScript, Ruby, Go 등 다양한 프로그래밍 언어를 지원합니다. 예시 코드 예를 들어, Python에서 두 수의 합을 구하는 함수를 작성하려고 할 때: def add_two_numbers(a, b): return a + b 위와 같이 함수 이름과 매개변수를 작성하면, Copilot이 자동으로 return a + b 부분을 제안해줍니다. 이런 식으로 간단한 작업부터 복잡한 알고리즘 작성까지 Copilot이 유용한 도움을 제공합니다. 개발자에게 좋은 점 효율성: 반복적인 작업을 줄이고 더 창의적인 부분에 집중할 수 있습니다. 학습 지원: 코드를 작성하면서 새로운 기술을 배울 수 있습니다. 생산성 향상: 더 빠르고 정확하게 코드를 작성할 수 있습니다. GitHub Copilot의 무료 제공은 개발자 커뮤니티에 큰 변화를 가져올 것 같아요. AI의 도움을 받아 더 창의적인 작업에 집중하며, 반복적인 작업은 Copilot에 맡기시길!

크롬 114 버전부터 popover API 라는걸 지원하게 되었습니다. Popover API는 웹 개발자가 웹 페이지에 popover 위젯을 추가할 수 있도록 하는 Web API입니다. popover는 사용자가 웹 요소에 마우스를 가져갈 때 나타나는 작은 텍스트 콘텐츠 블록입니다. Popover API를 사용하면 popover의 위치, 크기 및 콘텐츠를 제어할 수 있습니다. 그런데 문제는 기존 라이브러리 소스들 중에 popover라는 태그 속성을 쓰는 라이브러리들과 이름이 충돌하는 바람에 UI가 깨지는 현상들이 발생하고 있습니다. 아래 이슈들을 보면 해당 문제들을 보실 수 있습니다. https://support.google.com/chrome/thread/218644651/bug-after-updating-google-chrome-to-version-114-0-5735-90?hl=en https://github.com/flaming-cl/editorjs-text-color-plugin/issues/21 이 문제를 해결하려면, 사이트에서 공통으로 사용하는 css에 아래와 같은 코드를 추가해주어야 합니다. [popover] { display: initial; position: initial; margin: initial; border: initial; background: initial; padding: initial; width: initial; height: initial; overflow: initial; inset: initial; color: initial; }

focus.txt focustxt.github.io 캘린더나 TODO 리스트 같은 걸로 일정 관리를 하기는 하는데, 가끔은 딱 오늘 할 일만 간단하게 메모해 놓고 작업하고 싶을 때가 있다. focustxt는 딱 그런 용도로 만든 브라우저용 메모 페이지다. 마크다운 형식이라 개발자들이 작성하기도 심플하고, 리스트 bullet을 쉽게 만들 수 있다. 오늘 할 일만 메모(notes), 할 것(tasks), 완료(done) 이렇게 3가지로 나눠서 쓰면 된다. 로컬 스토리지에 저장되기 때문에 속도나 서버 문제 걱정없고, 간단하게 txt 파일로 내보내기 할 수도 있다. 딱, 오늘 할 일 목록만 간단히 정리해놓고 작업할 때 유용할 듯 싶다.

Progressive Web Apps(PWA)는 사용자에게 네이티브 앱과 유사한 경험을 제공하는 웹 애플리케이션의 일종입니다. 브라우저에 설치할 수 있으며 인터넷 연결 없이도 사용할 수 있습니다. PWA는 빠르고 반응성이 뛰어나며 오프라인에서 사용할 수 있습니다. iOS 16.4부터 PWA는 웹 푸시 알림을 받을 수 있습니다. 웹 푸시 알림은 웹 사이트에서 사용자에게 보낼 수 있는 알림입니다. 웹 푸시 알림을 사용하면 웹 사이트에 대한 새 콘텐츠나 업데이트에 대한 사용자에게 알릴 수 있습니다. 웹 푸시를 받을 수 있도록 PWA를 만들려면 몇 가지 작업을 수행해야 합니다. 웹 사이트에 서비스 워커를 추가해야 합니다. 서비스 워커는 백그라운드에서 실행되는 JavaScript 파일입니다. 웹 푸시 알림을 수신하고 처리하는 데 사용됩니다. 웹 사이트에 웹 푸시 알림 토큰을 추가해야 합니다. 웹 푸시 알림 토큰은 웹 사이트에 대한 고유 식별자입니다. 웹 푸시 알림을 보내는 데 사용됩니다. 웹 사이트에 웹 푸시 알림을 보내는 데 사용할 수 있는 API를 추가해야 합니다. 이러한 작업을 수행한 후에는 웹 사이트에 웹 푸시 알림을 보내기 시작할 수 있습니다. 웹 푸시 알림을 보낼 때는 다음을 지정해야 합니다: 알림 제목 알림 메시지 알림 아이콘 알림 배너 색상 알림 링크 웹 푸시 알림을 보낸 후에는 사용자가 잠금 화면, 알림 센터 또는 페어링된 Apple Watch에서 알림을 받게 됩니다. 다음은 웹 푸시를 받을 수 있도록 PWA를 만드는 방법에 대한 참고 샘플 코드입니다. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>My PWA</title> </head> <body> <h1>My PWA</h1> <p>푸시 테스트 앱입니다. 홈 화면에 추가하세요.</p> </body> </html> Javascript: // service-worker.js // 서비스 워크에 등록 navigator.serviceWorker.register('service-worker.js'); // push 이벤트 정의 self.addEventListener('push', function(event) { // 알림 데이터 받기 var notificationData = event.data; // 알림 생성 var notification = new Notification(notificationData.title, { body: notificationData.message, icon: notificationData.icon }); // 알림 열기 notification.onclick = function() { window.open(notificationData.url); }; });

Clock oimo.io 특이한 시계 소스네요. 모니터 시계 화면으로 켜놔도 좋을 듯ㅋ

'인앱결제' 저항한 카카오 결국…구글플레이서 카톡 업데이트 중단 [서울=뉴시스]심지혜 송종호 기자 = 구글이 '카카오톡' 앱 최신버전(v9 newsis.com 어떤 결론이 나게 될 지...🤔

아이폰, 이젠 마스크 써도 열린다고? 다음 주부터 마스크를 쓴 채로 아이폰을 잠금해제 할 수 있다. 애플 사용자들이 오랫동안 기다려온 기능이다. 단, 이 기능은 아이폰12 이상 기기에서만 지원된다. 애플은 지난 9일 온라인 스페셜 이벤트를 통해 &#3 www.etnews.com 오옷 아이폰 12부터 가능하네요! 아싸!!

구글 인앱결제 혹떼려다 혹붙였나…논란은 여전 [미디어펜=구태경 기자] 구글이 소위 구글갑질방지법으로 불리우는 ‘전기통신사업법 개정안’을 수용한다고 발표했으나 구체적인 내용을 들여다보면 시장경쟁을 촉진한다는 당초 법안 취지가 m.mediapen.com 아니나 다를까😕