Toast notification 이란?​

토스트 알림은 짧은 메시지를 표시하기위한 비모달(non-modal)적이고 눈에 거슬리지 않는 요소이며 이벤트가 발생할 때 화면에 나타나는 알림.

모달(modal)이란?​

사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창.

생각하지 못한 유저 경험​

(징징글 주의!)

바라봄의 유료화를 기획하며 많은 고민에 빠져 있다.

• 유저들이 이 결정을 과연 이해해줄까?

• 얼마 없는 유저들 마저 나가버리면 어쩌지?

• 이대로 바라봄이 망해버리는건 아닐까?

DAU 100 첫 돌파! 바라봄 개발 후기​

과거를 회상하며...​

처음으로 DAU 100을 넘어서니 많은 생각이 든다.

2020년 6월 바라봄을 오픈하고 무려 1년 하고도 9개월이 지나서야 DAU 100 이 넘었다.

서체를 변경하자!​

최근에 인상깊은 글을 하나 봤다.

토스 피드 - 서체

정말 똑똑한(?) 사람들은 다르구나, 많이 배웠고 공부를 더 해야겠다고 느꼈다.

바라봄은 이전까지 나눔 스퀘어 서체를 사용하고 있었다.

들어가기에 앞서...​

바라봄 4.x.x 이전의 버전은 단순히 디자인이 망가진다는 이유로 시스템 폰트 크기는 무시한 체 폰트 크기를 고정했었다.

바라봄을 완성하고 엄마에게 보여줬을 때, 시력이 나쁜 울 엄마는 내 앱을 제대로 사용할 수도 없었다.

반려동물을 키우는 인구는 젊은층 부터 노년층까지 다양하고 반려동물을 사랑하는 마음은 모두 같을 것이다.

그리고 가족 공유기능을 기획하고 있었던 시기였기에 폰트 접근성 개선을 먼저 하기로 마음먹었다.

HOC 이란?​

Higher-Order Component

HOC 패턴은 기존 컴포넌트를 감싸서 새로운 기능을 추가하는 방식.

HOC는 고차 컴포넌트를 반환하며, 이를 이용해 상태 관리, 인증, 라우팅 등 다양한 기능을 추가함.

예제​

Atomic 디자인 패턴 이란?​

• Atoms: UI의 가장 작은 부분을 나타내는 컴포넌트. 예: 버튼, 아이콘, 텍스트, 이미지

• Molecules: 두 개 이상의 Atom 컴포넌트를 조합하여 만든 작은 컴포넌트. 예: 로그인 폼, 메시지 박스

• Organisms: Molecule 컴포넌트와 Atom 컴포넌트를 조합하여 만든 큰 컴포넌트. 예: 헤더, 푸터, 사이드바

문제점?​

출처-휴몬랩 기술블로그

기존 MVC 패턴의 문제점​

기존의 MVC 패턴 state 변경 흐름

MVC 패턴에서 양방향 데이터 흐름이 발생하면 데이터 변환 작업과 유효성 검사를 위해 추가적인 코드 작업이 필요하며, 뷰와 컨트롤러 간의 데이터 전달 과정에서도 문제가 발생할 수 있습니다.

Pure Component / memo / shouldComponentUpdate​

부모 컴포넌트가 업데이트되었을 때 자식 컴포넌트의 불필요한 렌더링을 방지.

그렇다고 해서 모든 컴포넌트에 memo를 사용하게 되면 컴포넌트가 다시 렌더링되지 않도록 최적화를 하지만, 이를 위해서는 컴포넌트를 비교하는 작업이 추가적으로 필요.

이 작업은 일반적인 렌더링 작업보다 더 많은 리소스와 시간이 소모될 수 있기 때문에, 오버헤드가 발생할 가능성이 있음.

렌더링 속도가 느린경우, 자주 불필요하게 재렌더링이 예샹되는 경우에만 사용.

빌드 과정​

1. JavaScript 코드 번들링

   React Native 애플리케이션은 JavaScript로 작성되기 때문에, JavaScript 코드를 번들링해야 됨. Metro 번들러를 사용하여 JavaScript 코드를 번들링하고, 필요한 모든 의존성을 가져옴.

2. JavaScript 코드 실행

   번들링된 JavaScript 코드는 JavaScript 엔진에서 실행됨. Hermes 엔진을 사용하여 더 빠른 실행 속도를 제공.