blytog

푸시 알림은 모바일 앱을 운영할 때, 굉장히 중요한 기능 중 하나입니다. 오늘은 푸시 알림을 구현하는 방법에 대해 기록하고 공유해 보겠습니다. 푸시 알림 관련 설루션으로는 가장 유명한 것은 Firebase를 사용했습니다. 일단 무료인 점이 가장 크고, Firebase를 Flutter에서 잘 사용할 수 있도록 flutterfire라는 플러그인도 운영하고 있어 많은 Flutter 개발자들이 활용하고 있을 것이라고 생각됩니다. FCM을 이용하여 푸시 알림을 수신할 때에는 크게 3가지 로직이 필요합니다. Firebase로부터 메시지를 수신한다. 수신한 메시지를 notification으로 보여준다. 함께 오는 데이터인 link 정보를 활용해서 적절한 페이지로 이동시킨다. 3번에서 말씀드린 link 정보는 백엔드와..

안녕하세요. 오늘은 junit5의 ParameterizedTest에 대해 알아보겠습니다. 다음은 문자열로 입력받은 수식을 계산해서 출력해 주는 계산기에 대한 테스트입니다. @Test fun testCalculateAddExpression() { val outputStream = ByteArrayOutputStream() Calculator("10 + 2".byteInputStream(), outputStream).run() assertEquals(String(outputStream.toByteArray()), "12") } @Test fun testCalculateSubtractExpression() { val outputStream = ByteArrayOutputStream() Calculator("1..

Gradle Practice라는 비어있는 안드로이드 프로젝트를 하나 생성해서 Gradle의 구조와 하는 일에 대해 알아보겠습니다. gradle wrapper 가장 먼저 gradle wrapper를 살펴보겠습니다. gradle wrapper는 gradlew라고도 표기합니다. gradlew는 gradle을 다운로드하고 실행하는 하나의 애플리케이션입니다. 이것이 개발자들이 일관적으로 빌드를 할 수 있게끔 도와줍니다. graddle-wrapper.properties에는 사용할 버전의 gradle이 저장된 url을 가지고 있습니다. 이를 통해 다수의 개발자들이 빌드할 때 gradle 버전이 변경되지 않도록 보장합니다. #Sat Aug 12 05:28:21 KST 2023 distributionBase=GRADLE..

Problem 외부로 요청을 보내 비동기로 받아오는 데이터가 상태값으로 필요한 경우에는 가장 쉽게 접할 수 있는 키워드가 late 입니다. 대체로 데이터를 기다리는 동안 사용자에게 빈 화면을 보여줄 수 없기에 응답으로 받아온 데이터가 올바르게 할당되었는지의 할당 여부를 통해 사용자에게 다른 화면을 보여주고자 합니다. 이 때 late 키워드를 사용하여 변수를 선언하게 되면, 해당 변수가 null인지 검사할 때 에러가 발생합니다. 이는 아직 late 키워드를 활용하여 선언한 변수가 초기화되지 않기 때문입니다. 이에 대한 답을 찾기 위해 dart 공식 문서에서 제공해주는 권장사항을 살펴보았습니다. Solve late 변수가 초기화 되었는지 아닌지를 판단할 필요가 있다면 late 변수를 사용을 지양해야한다는 d..

사건의 발단.. react에서는 Array.prototype.map을 통해 동일하지만 값만 다른 컴포넌트를 쉽게 렌더링 할 수 있습니다. 보통 다음과 같은 형태로 많이 사용합니다. ['a', 'b', 'c'].map((item) => {item}) 리액트에서는 위와 같이 동일한 컴포넌트에 대해 각각의 컴포넌트를 구별할 수 있도록 key props를 입력해야합니다. Array.prototype.map 메서드를 간단하게 살펴보면 첫 번째 매개변수로 콜백 함수를 받습니다. 이 콜백 함수의 두 번째 인자는 index임을 알 수 있습니다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) 이 점을 활용하여 과거에 저는 종종 다음과 같이 사용하고는 했습니다..

this는 무엇일까! 보통 일반적인 객체지향 언어에서 this는 객체 자신을 의미합니다. 마찬가지로 JS에서도 자신을 의미하긴 하지만 JS는 객체와 함수의 구분이 모호하고, 어디서든 사용할 수 있기 때문에 상황에 따라 의미하는 바가 달라지기도 합니다. this는 실행 컨텍스트가 생성될 때 함께 결정되기 때문에 함수를 호출할 때 결정된다고 할 수 있습니다. (실행 컨텍스트는 함수를 호출할 때 생성되기 때문에!) 전역 공간 어쩌면 당연하게도 전역 공간에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서 전역 객체의 이름은 window이고, Node.js 환경에서는 global입니다. const a = 1; console.log(a); // 1 console.log(window.a); // 1 conso..

문제의 발견 회사에서 서비스의 사용자 리스트를 페이지당 100명씩 가져와서 보여주는 페이지를 작업 중이었습니다. 이 페이지는 사용자 데이터를 받아서 화면에 렌더링 되기까지 시간이 상당히 걸리는 문제가 있었는데, 그 이유에 대해 파헤쳐 보았습니다. 아래 이미지는 사용자 페이지의 간단한 구조입니다. 먼저 기존에 데이터를 처리하던 방식은 다음과 같습니다. (많은 부분을 생략했습니다..) function UserList() { const [userList, setUserList] = useState([]); const { loading } = useQuery(userList를 불러오는 gql, { variables: {}, onComplete: (res) => { setUserList(res에서 뽑아낸 user..