티스토리

끄적이는 개발노트

검색하기

블로그 홈

끄적이는 개발노트

hbc3869.tistory.com/m

크런키스틱 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[프로그래머스 / Javascript] 2024 KAKAO WINTER INTERNSHIP > 가장 많이 받은 선물 문제 링크https://school.programmers.co.kr/learn/courses/30/lessons/258712 프로그래머스SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 문제 설명 제한사항 입출력 예 내 문제 풀이function solution(friends, gifts) { const giftCountList = {}; // 선물 지수 Object const giftList = {}; // 선물 리스트 Object const result = {}; // 다음 달 받을 선물 Object // friends 배열을 활용하여 초기값 세팅 for (const frie.. 공감수 1 댓글수 0 2025. 4. 28.
Next.js 15 - Modal 구현 (with. Parallel Routes & Intercepting Routes) 웹 개발에서 모달창 구현을 직접 하거나 편리한 라이브러리는 대부분 상태관리와 함께 이루어진다.(본인 역시 react-modal을 그동안 사용해왔다.)const [isOpen, setIsOpen] = useState(false);const toggleModal = () => setIsOpen(!isOpen);const openModal = () => setIsOpen(true);const closeModal = () => setIsOpen(false);아마 대부분이 이런 기본 형태의 state를 활용했을 것이다. 이를 개발하다보면 필연적으로 마주치는 상황들이 몇가지 있는데 대표적으로 아래와 같이 있다.모달창이 열린 상황에서 새로고침을 하면 state로 관리하기 때문에 모달창이 닫힘뒤로가기 버튼을 누르면 이.. 공감수 2 댓글수 1 2025. 4. 26.
Next.js 15 - 전역 상태 Context API React에서 전역 상태 관리를 하는 방법에는 Redux, Recoil, Zustand 등과 같이 다양하고 편리한 라이브러리가 많다. 이 중에서 본인은 Redux와 Recoil만 사용해봤는데 정작 React에서 제공하는 내장 도구 Context API를 사용해본 적이 없었다. 이번에 사용법을 익힐 기회가 생겨서 정리한다. 1. Context APIContext API는 React에서 전역 상태를 관리하기 위한 내장 도구이다. 컴포넌트 트리 전체에 데이터를 전달할 수 있으며, props drilling을 피하기 위해 사용된다.다만, 공유하는 context가 변경되면 사용하는 모든 컴포넌트는 리렌더링되기 때문에, 상태의 목적과 용도에 따라 context를 잘나눠서 provider를 통해 필요한 컴포넌트에만.. 공감수 0 댓글수 0 2025. 4. 24.
Next.js - Font 적용 기본적으로 Next.js에서는 next/font를 통해 기본 글꼴들을 제공해준다. 하지만 React-Native에서도 다뤘듯이 custom font를 적용하는 경우가 많기 때문에 방법을 정리한다. 1. font 파일 추가public/assets/fonts에 다운로드한 폰트를 추가한다. 2. layout 수정localfont를 사용하면 custom 폰트를 지정할 수 있다.// layout.tsximport type { Metadata } from "next";import localFont from "next/font/local";import "./globals.css";const gmarket = localFont({ src: [ { path: "../../public/assets/fo.. 공감수 0 댓글수 0 2025. 4. 23.
Next.js 15 - Styled-Components Next.js 에서 css를 다루는 방법에는 기본적인 built-in 방식과 Styled Component, TailwindCSS 방식이 대표적일 것이다.물론, Next.js에서는 기본적으로 create app을 할 때부터 TailwindCSS 적용 옵션을 설정하면 기본 세팅을 해줄 정도로 가장 편리하고 공식적으로 추천하는 방법이다. (본인 역시 TailwindCSS를 선호한다.) 하지만, Styled-Components 역시 아직까지 꽤나 사용되는 방법이기에 적용 방법을 정리해둔다. 1. 작동 방식Styled-Components는 css-in-js 방식으로 작동한다.CSS-in-JS?Javascript 코드 내에 css를 생성하는 로직이 담기는 방식이다.그렇기 때문에 변수에 접근이 가능하여 props와.. 공감수 1 댓글수 1 2025. 4. 23.
React Native - 무한스크롤 (with. React-Query & FlatList) SQLite를 다룬 포스트에서 본인의 React Native 어플에서 SQLite를 통해 데이터를 저장하는 것을 말한 적이 있다. 그리고 예시 코드에서 심플하게 SQL문을 통해 데이터를 CRUD 해봤었는데 실제 어플에서는 데이터를 가져오는데 있어 react-query를 함께 사용했다. 사용 이유와 기본 useQuery 및 useMutation과 같은 사용법은 이전 Next.js에 React-Query를 적용하면서 정리했던 포스트들을 살펴보면 좋다.https://hbc3869.tistory.com/65 react-query (1) - 설치 및 설정이번 포스트에서는 데이터를 가져오고 캐싱할 수 있는 react-query라는 개념에 대해 알아본다. 1. 사용 이유 본인의 경우, 플랫폼 초기 개발 과정에서는 s.. 공감수 1 댓글수 0 2025. 4. 16.
React Native - Firebase (storage) 이번 글에서는 Firebase에서 이미지, 동영상같은 컨텐츠를 저장하는 저장소인 Storage에 대해 정리한다. 1. Storage 설정storage를 사용하기 위해서는 요금제를 Spark 에서 Blaze 로 업그레이드 해야 한다.이 때, 구글 Cloud Billing 계정을 생성하고 연결지어야 한다. 이는 설정에서 안내하는대로 따라서 신청하고 심사를 거치면 된다. 이전과 마찬가지로 rule은 테스트용으로는 true, 이후에는 본인의 요구사항에 따라 설정하면 된다. 2. 설치npm install @react-native-firebase/storage#oryarn add @react-native-firebase/storage 3. 코드기본 사용 코드는 아래와 같다.import {getStorage} f.. 공감수 0 댓글수 0 2025. 4. 2.
React Native - Firebase (Realtime Database & Firestore) 이전 글에서 SQLite의 선택과정을 가볍게 설명하면서 Firebase 데이터베이스를 언급했었다. 이는 분명 트래픽이 적고 데이터 타입이 복잡하지 않다면 굉장히 탁월한 선택이다. 본인 역시 사용을 했었고 여전히 어플에 Authentication 기능과 함께 데이터 저장이 필요하다면 1순위로 떠올리는 것이 Firebase이다. 그 중 Cloud Storage는 말 그대로 저장소 storage로 이미지, 동영상과 같은 컨텐츠를 저장하는데 활용된다. DB로 사용되는 것은 크게 Realtime Database 와 Firestore가 있는데 이 둘의 특징은 다음과 같다. 공통점NoSQL 데이터베이스쿼리 사용 (정렬 및 필터링)차이점Realtime Database데이터를 하나의 JSON 형태로 저장하나의 쿼리에 정.. 공감수 0 댓글수 0 2025. 3. 25.
React Native - 어플 버전 체크 어플을 출시하고 나면 유지보수를 통한 업데이트 및 버전 관리는 굉장히 중요하다. 이 때 RN에서는 react-native-version-check 라는 라이브러리를 통해 어플의 버전을 확인하고 관리할 수 있다. 버전을 관리할 때의 기본 플로우는 아래와 같다.현재 실행 어플의 버전 확인앱 스토어의 버전 확인둘 차이가 있을 경우, 앱 스토어 강제 연결 혹은 권장 메세지 노출https://www.npmjs.com/package/react-native-version-check react-native-version-checkA version checker for react-native applications. Latest version: 3.4.7, last published: 2 years ago. Start .. 공감수 1 댓글수 0 2025. 3. 21.
React Native - 스플래시 화면 설정(splash screen) 다양한 어플을 실행해보면 의식하지 못할 뿐 로딩 화면이 존재하는 것을 확인할 수 있다. 이렇게 어플이 구동될 때 보여주는 시작화면을 splash screen 혹은 launch screen 이라고 부른다. 필요이유는 어플이 작동하기 위해서 필요 데이터를 로딩하거나 버전체크를 하거나 하는 사전작업이 필요한 경우 자연스럽게 딜레이가 걸리게 되는데 그동안에 사용자에게 매끄러운 사용경험을 제공하기 위함이다. 본인 역시 출시한 어플에서 데이터 로딩 및 버전체크 등과 같은 몇몇 사전작업이 필요하여 splash screen을 추가했고 이와 더불어 root screen을 splash screen과 비슷한 디자인으로 제작하여 상태 관리까지 병행하는 이중 구조의 splash screen을 구축했다. RN에서 가장 대표적인 .. 공감수 1 댓글수 0 2025. 3. 18.
React Native - SQLite 어플을 개발하면 필연적으로 따라오는 고민 중 하나로 DB가 있다.정말 간단한 데이터와 같은 경우 async-storage와 같이 간단한 storage를 활용해도 용량과 속도에 있어 문제될 부분은 없다. 하지만, 저장해야 될 데이터가 많아질 경우 Cloud platform이나 Local Storage 서비스를 이용해야만 한다. 이를 결정짓는 요소로는 본인이 제작하는 어플의 요소들을 고려해야 한다. 본인 역시 이 부분에서 매번 고민이 많았고 다양한 DB의 특징이나 사용법들을 조회하고 사용했었다. 그 중, 본인이 가장 많이 고민했었던 선택 사항을 정리해보자면 아래와 같다. 1. Firebase (cloud firestore, real-time database)소규모 어플을 이용할 때 용이함.(트래픽이 적을 때.. 공감수 0 댓글수 0 2025. 3. 16.
React Native - 파일 시스템 RN 개발을 하다보면, 파일 시스템(filesystem)을 이용하여 파일을 읽고 쓰는 경우가 생긴다. 본인은 최근에는 java와 kotlin 파일에 설정 적용차이에서 에러가 발생해 react-native-file-access 라는 라이브러리를 활용했지만, 이번 글에서는 본인도 사용했었고 파일시스템 라이브러리 중에서 가장 기본적이고 유명한 react-native-fs 사용법을 정리한다. https://www.npmjs.com/package/react-native-fs react-native-fsNative filesystem access for react-native. Latest version: 2.20.0, last published: 3 years ago. Start using react-native.. 공감수 2 댓글수 1 2025. 3. 11.
React Native - 흐린 화면 처리 (blur 효과) 어플로 다양한 기능을 구현하다보면 특정 이미지를 확대한다던가 모달을 띄우거나 할 때 뒷 배경을 흐리게 처리하고 싶을 때가 있다. 정말 단순하게는 opacity를 통해 특정 색에 투명도를 적용하는 방법도 있지만 ui적으로 blur 처리가 더 어울리거나 요구되는 화면들이 있을 것이다. 이럴 때 @react-native-community/blur 라이브러리를 활용하면 된다.https://www.npmjs.com/package/@react-native-community/blur @react-native-community/blurReact Native Blur component. Latest version: 4.4.1, last published: 6 months ago. Start using @react-nat.. 공감수 0 댓글수 0 2025. 3. 2.
React Native - 이메일 전송 / 스토어 연결 React Native에서 이메일을 발송하기 위해서는 react-native-mail 이라는 npm 혹은 기본으로 제공되는 기능을 사용하면 된다. 본인은 RN에서 제공하는 Linking 기능이 너무 간단하고 충분했기 때문에 별도의 라이브러리를 사용하지 않았다. Linking 기능을 통해 이메일을 발송하는 방법과 어플 스토어 링크를 연결하는 방법을 정리한다. 1. 코드// test2.tsximport CustomText from '@/components/text';import {Test2Props} from '@/types/stack';import {Button, Linking, Pressable, View} from 'react-native';import {SafeAreaView} from 'react-.. 공감수 1 댓글수 0 2025. 3. 2.
React Native - 디바이스 정보 어플을 사용하는 휴대폰 디바이스 정보가 필요한 경우가 있다. 이럴 때 사용하면 편리한 라이브러리가 있다.https://www.npmjs.com/package/react-native-device-info react-native-device-infoGet device information using react-native. Latest version: 14.0.4, last published: 20 days ago. Start using react-native-device-info in your project by running `npm i react-native-device-info`. There are 650 other projects in the npm registry using react-nwww.n.. 공감수 0 댓글수 0 2025. 2. 23.
React Native - 헤더 버튼 추가 React Native의 Navigation 헤더 버튼을 추가하는 방법은 두 가지가 있다.그 동안 개발에서는 아래에 소개할 첫 번째 방법으로만 버튼을 생성해도 충분했다. 이번 프로덕션용 어플을 개발하는 도중에 screen 내 state와 상호작용이 필요한 event가 발생하여 props, recoil 등 방법을 구상해도 하나같이 만족스럽지 않아 찾아보니 간단한 기본 방법이 존재하여 정리한다. 1. Navigation options 활용아래와 같이 Stack.Screen을 통해 원하는 화면에 커스텀 헤더 버튼을 좌우에 추가할 수 있다.// navigation.tsx... ({ headerShown: true, headerBackVisible: false, headerTitleAlign: '.. 공감수 0 댓글수 0 2025. 2. 23.
React Native - 스크린샷 활용 (3) 갤러리 저장(@react-native-camera-roll/camera-roll) 이전 글에 이어서 스크린샷을 갤러리에 저장하는 방법을 살펴본다.이는 나중에 살펴볼 fs나 file-access 등과 같이 파일 시스템에 접근하여 파일과 디렉토리에 저장하는 것이 아닌 카메라 앨범에 저장하는 방법이다. https://www.npmjs.com/package/@react-native-camera-roll/camera-roll @react-native-camera-roll/camera-rollReact Native Camera Roll for iOS & Android. Latest version: 7.9.0, last published: 3 months ago. Start using @react-native-camera-roll/camera-roll in your project by runnin.. 공감수 0 댓글수 0 2025. 2. 17.
React Native - 스크린샷 활용 (2) 이미지 공유 (react-native-share) 이번 글에서는 저번 스크린샷을 공유하는 기능을 알아본다. react native에서는 자체적인 share 기능을 제공한다. 굉장히 간단하기 때문에 해당 기능을 처음에는 사용했었다. 하지만, 파일을 공유하기 위해서는 url을 넣어주어야 하는데 이는 ios에서만 지원하는 기능이다. 따라서, 별도의 라이브러리인 react-native-share를 활용한다. https://www.npmjs.com/package/react-native-share react-native-shareSocial share, sending simple data to other apps.. Latest version: 12.0.9, last published: a day ago. Start using react-native-share i.. 공감수 0 댓글수 0 2025. 2. 17.
React Native - 스크린샷 활용 (1) 화면 캡처 (react-native-view-shot) 어플에서 스크린샷을 공유하거나 갤러리에 저장하는 기능이 굉장히 많이 이용된다. 이 때 선행되는 작업이 화면 혹은 컴포넌트를 캡처하여 이미지화하는 스크린샷 기능으로, react native cli에서 가장 많이 사용되는 라이브러리가 react-native-view-shot이다. https://www.npmjs.com/package/react-native-view-shot react-native-view-shotCapture a React Native view to an image. Latest version: 4.0.3, last published: 2 months ago. Start using react-native-view-shot in your project by running `npm i react.. 공감수 0 댓글수 3 2025. 2. 17.
React Native - 이미지 선택 (react-native-image-crop-picker) 저번 글에 이어서 react-native-image-crop-picker 사용법을 알아본다. 1. 설치npm install react-native-image-crop-picker#oryarn add react-native-image-crop-picker 2. 설정android/build.gradlebuildscript { ext { buildToolsVersion = "31.0.0" minSdkVersion = 21 compileSdkVersion = 33 targetSdkVersion = 33 ... }}allprojects { repositories { mavenLocal() jcenter() .. 공감수 0 댓글수 0 2025. 2. 14.
React Native - 이미지 선택 (react-native-image-picker) React Native Cli 로 어플을 개발하면 사진 앱, 카메라 앱을 실행하는 기능을 제공하지 않는다고 한다.따라서 라이브러리를 활용해야 하는데 react-native-image-picker 와 react-native-image-crop-picker가 많이 사용된다. react-native-image-picker는 본인이 느끼기에 가장 베이직한 라이브러리로 카메라와 사진 기능을 제공한다.https://www.npmjs.com/package/react-native-image-picker/v/4.8.5 react-native-image-pickerA React Native module that allows you to use native UI to select media from the device li.. 공감수 0 댓글수 0 2025. 2. 14.
React Native - Bottom Sheet 어플을 이용하다보면 하단에서 올라오는 UI를 본 경험이 있을 것이다. 이는 일종의 보조 페이지 역할로 Bottom Sheet 라고 한다. 이를 구현하기 위해 사용한 라이브러리는 아래와 같다. https://www.npmjs.com/package/@gorhom/bottom-sheet @gorhom/bottom-sheetA performant interactive bottom sheet with fully configurable options 🚀. Latest version: 5.1.1, last published: 3 days ago. Start using @gorhom/bottom-sheet in your project by running `npm i @gorhom/bottom-sheet`. There.. 공감수 0 댓글수 0 2025. 2. 12.
React Native - Hardware 뒤로 가기 버튼으로 어플 종료 react-native로 개발을 하다보면 물리적인(Hardware) 버튼으로 뒤로가기나 앱이 종료될 수 있기 때문에 이에 따른 처리가 필요하다. 뒤로가기는 각 페이지의 navigation 형태나 원하지 않는 페이지에서 block을 해주는 등 다양한 방법이 있다.어플 종료의 경우, 대다수의 어플이 1∽2초 안에 뒤로가기 버튼을 두번 누를 경우 Toast Message와 함께 어플실행이 종료된다. 이번 글에서는 해당 기능을 구현한 방법을 정리해본다. 1. Custom Hook을 통한 기능 구현// useExitApp.tsimport {showBottomToast} from '@/utils/toastMessage';import {useNavigation} from '@react-navigation/native.. 공감수 0 댓글수 0 2025. 2. 11.
React Native - Toast Message 앱 개발의 UI 요소 중 자주 이용되는 것으로 Toast Message가 있다. 어플에서 어떤 버튼을 클릭하거나 기능을 실행하면 완료 메세지가 화면 상단이나 하단에 뜨는 것을 본 적이 있을 것이다. 이 Toast Message는 사용자의 반응에 즉각적으로 피드백하여 사용자경험을 향상시켜주는 효과가 있다. https://www.npmjs.com/package/react-native-toast-message react-native-toast-messageToast message component for React Native. Latest version: 2.2.1, last published: 5 months ago. Start using react-native-toast-message in your pr.. 공감수 0 댓글수 0 2025. 2. 11.
React Native - 전역 상태 관리 (Recoil) state를 사용할 때, 간단한 modal 혹은 하위 컴포넌트를 구성한다면 props가 오히려 깔끔하고 간단한 코드가 된다. 하지만 다양한 기능 혹은 컴포넌트들을 구현하다보면 넘겨주고자하는 state가 하위 컴포넌트에 단지 값을 전달하기 위해 중간 컴포넌트에 props로 넘겨주는 경우를 마주치기도 했었다. 이게 너무 지저분해보였고, 에러발생 혹은 유지보수를 하기 위해 며칠이 지난 뒤 코드를 살펴보면 내가 짠 코드임에도 props를 추적하기가 어지러운 경우도 발생했었다.이런 경험을 몇번 한 뒤로, 본인은 개발을 할 때 주로 state(상태)를 나누어 관리하는 것을 선호하고, prop drilling을 피하려고 노력하는 편이다.아직 많이 부족한 개발자다보니 아래 방식이 최선의 방식인지는 늘 고민하고 있으며,.. 공감수 1 댓글수 0 2025. 2. 6.
React Native - 명령어 정리 개발을 하면서 사용한 터미널 명령어를 정리해둔다. 1. 실행npx react-native run-android#ornpx react-native run-ios 2. 캐시 초기화 옵션 사용npx react-native start --reset-cache 정리를 하다가 run-android 와 start 의 차이가 궁금하여 검색해보니start : 어플 실행 시 필요한 metro bundler를 시작run-android : start 실행 후, debug apk 빌드하여 설치link가 필요하지 않은 새 라이브러리를 추가할 경우 start로 어플을 다시 로드하면 되지만, link가 필요한 새 라이브러리가 추가되는 경우, run-android를 통해 다시 컴파일 해야 한다고 한다. 3. release 모드 실행 .. 공감수 2 댓글수 0 2025. 2. 4.
React Native - Release Keystore 생성 어플을 출시하기 위해서는 release key를 생성하는 방법을 알아야 한다. Keystore- Android 앱을 배포하기 위한 서명 파일이다.Keytool- Java Development Kit (JDK)에 포함된 keystore를 생성하고 관리하는 도구이다. 1. 생성keytool -genkey -v -keystore -alias -keyalg RSA -keysize 2048 -validity 10000 : 키스토어 이름 : 키 약어-keyalg RSA -keysize 2048 : RSA 알고리즘을 2048 사이즈로 지정하여 키 쌍을 생성-validity : 키의 유효기간을 일 단위로 지정 2. 설정이 때, 설정한 비밀번호는 기억해둬야 한다. 3. gradle.properties 설정pro.. 공감수 0 댓글수 0 2025. 2. 4.
React Native - 구글 로그인 (3) 로그인 상태 확인 onAuthStateChanged 어플에서 로그인 기능을 구현했다면 추가적으로 필요한 기능은 로그인 상태를 확인하는 기능이 필요하다. 일반적으로 AsyncStorage에 인증 정보를 저장하는 방법을 사용하는데, Firebase로 인증을 구현했다면 Firebase에서 인증은 자동으로 인증상태를 유지해주기 때문에 onAuthStateChanged를 통해 굉장히 쉽게 구현할 수 있다. onAuthStateChanged는 event listener와 같이 event를 감지하기 위해 계속 대기하고 있고, 유저 상태에 변화가 생기면 그 변화를 감지하고 해당 로직을 수행한다. 1. 코드// App.tsximport './global.css';import {SafeAreaProvider} from 'react-native-safe-area-conte.. 공감수 0 댓글수 0 2025. 2. 1.
React Native - .env 환경변수 개발을 하다보면 외부에 공개되면 안되는 키나 중요 정보들처럼 보안이 필요한 값들이 있다. 이런 값들을 숨기고 유지보수를 쉽게 하기 위해 .env 파일에 환경변수로 만들어 사용하게 된다.react native에서는 이를 위해 react-native-dotenv 라이브러리 활용이 필요하다.https://www.npmjs.com/package/react-native-dotenv react-native-dotenvLoad environment variables using import statements.. Latest version: 3.4.11, last published: a year ago. Start using react-native-dotenv in your project by running `npm .. 공감수 0 댓글수 0 2025. 2. 1.
React Native - 구글 로그인 (2) @react-native-google-signin/google-signin 이전 글에 이어서 구글 로그인을 구현하는 방법을 알아본다. 1. 설치npm install @react-native-firebase/auth @react-native-google-signin/google-signin#oryarn add @react-native-firebase/auth @react-native-google-signin/google-signin 2. webClientIdSign-in method에서 활성화시킨 구글 버튼을 클릭하면 위와 같은 창을 볼 수 있다.거기서 웹 클라이언트 ID를 복사하고 아래와 같이 구글 로그인을 구현할 코드를 추가한다.// home.tsxuseEffect(() => { const webClientId = '복사한 webClientId' GoogleSig.. 공감수 0 댓글수 0 2025. 2. 1.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.