320x100 front-end53 [RN]메일보내기 라이브러리 (react-native-mail) 리액트 네이티브에서 메일을 편리하게 보낼 수 있는 라이브러리가 있다. 이 라이브러리를 사용하면 사용자의 메일어플(예: 지메일)을 통해 바로 메일을 보낼 수 있다. 설치방법 npm i --save react-native-mail 사용방법 import React from 'react'; import { Button } from 'react-native'; import Mailer from 'react-native-mail'; const SendMail = () => { const handleSendMail = () => { Mailer.mail({ subject: 'Test Email', recipients: ['recipient1@example.com', 'recipient2@example.com'], c.. 2023. 3. 28. [RN]react-native-push-notification 커스텀사운드 적용하기(안드로이드) [문제상황] react-native-push-notification라이브러리를 사용하면서 push알림의 커스텀사운드가 적용이 잘 안되어 애를 먹고 있었다. 분명 경로 설정도 잘 되었고 soundName에도 맞게 잘 설정을 했는데 안되는 이유가 답답했다. 이슈를 탐색하던중 위와 같은 답변을 보았고 드디어 궁금증이 해결되었다. 즉 채널을 한번 생성하게 되면 지정된 사운드는 수정이 불가능하다는 소리다. 나는 이제껏 PushNotification.localNotificationSchedule()안에서만 soundName을 설정하고 있었고 이미 채널을 생성할때는 default사운드가 설정되어있기 때문에 수정이 안되었던 것이다.. [해결방법] PushNotification.createChannel()에서 sound.. 2023. 3. 15. [RN]push알림 구현하기(react-native-push-notification) feat. Chat GPT 사이드프로젝트의 알람앱을 만들던중 이제는 가장 중요하고 핵심적인 기능인 알림기능을 구현해야할 때가 왔다. 알람이 울릴때 push 알림이 필요한데 이 push notification기능에는 크게 두가지 방식이 있다. 원격알림과 로컬알림. 원격알림은 서버에서 알림을 관리하지만 로컬알림은 서버가 필요하지 않다. 알람기능에 서버의 사용이 굳이 필요할까 싶어 로컬push 방법을 사용하기로 했다. 여러 라이브러리를 찾던 중 요즘 핫한 chat GPT를 이용해보았다. 역시 똑똑한 해결사.. 코드예시까지 알려주고, 마지막엔 주의사항도 잊지않고 알려준다. 어쨌든 가장 대중적으로 사용하는 라이브러리이기에 react-native-push-notification을 사용해보기로 했다. https://github.com/zo0r.. 2023. 3. 2. [RN] react-native에서 Refresh 하고 싶을때 (useIsFocused 사용하기) 작업을 하다보면 naviagation.goBack() 을 했을 때 리랜더링을 해줘야 할 때가 있다. 그럴 때 유용하게 사용할 수 있는 hook이 있는데 바로 useIsFocused이다. useEffect의 두번째 인자에 넣어주면 뒤로가기를 할 때 refresh를 할 수 있다. import { useIsFocused } from '@react-navigation/native'; const isFocused = useIsFocused(); useEffect(() => { if (isFocused) console.log('Focused!!'); }, [isFocused]); 공식문서 참고 https://reactnavigation.org/docs/use-is-focused/ 2023. 2. 21. [RN] react-native-sound 사용하기 현재 진행하고 있는 프로젝트에서 사운드를 재생해야하는 작업이 있는데 처음 시도해보는거라 이것저것 찾아보다 react-native-sound 라이브러리를 알게 되었다. 다른 사운드플레이어 라이브러리가 있었지만 react-native-sound 라이브러리가 제일 대중적으로 쓰이는것 같아 선택하게 되었다. https://www.npmjs.com/package/react-native-sound react-native-sound React Native module for playing sound clips on iOS, Android, and Windows. Latest version: 0.11.2, last published: a year ago. Start using react-native-sound in y.. 2023. 2. 21. [RN] Realm Studio로 realm file 열기 https://www.mongodb.com/docs/realm/studio/install/ Install Realm Studio — Realm If you want a file type that isn't listed here, such as a .zip file, view the release page for the version you want. You'll find a complete list of installers for each version. www.mongodb.com 위 사이트로 들어가 Realm Studio를 설치한다. 아래처럼 코드를 작성하면 (참고 https://www.mongodb.com/docs/realm/studio/open-realm-file/) // Get on-disk l.. 2023. 1. 18. [RN]휠 픽커 'react-native-wheel-pick' https://github.com/TronNatthakorn/react-native-wheel-pick GitHub - TronNatthakorn/react-native-wheel-pick Contribute to TronNatthakorn/react-native-wheel-pick development by creating an account on GitHub. github.com 아이템 및 날짜를 선택할때 유용한 라이브러리 설치 npm install react-native-wheel-pick --save --legacy-peer-deps npm install @react-native-picker/picker --save --legacy-peer-deps npm install @react-native-.. 2023. 1. 10. [RN]날짜, 시간 선택 라이브러리<react-native-date-picker> https://github.com/henninghall/react-native-date-picker GitHub - henninghall/react-native-date-picker: React Native Date Picker is datetime picker for Android and iOS. It includes date React Native Date Picker is datetime picker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It's wri... github.com 날짜&시간.. 2023. 1. 8. react-native-vector-icons 사용법 / 엑박문제 해결 react-native-vector-icons 은 리엑트네이티브에서 벡터아이콘을 사용할수 있도록 해주는 라이브러리이다. 설치 npm install --save react-native-vector-icons npm install --save @types/react-native-vector-icons 사용방법 (1) 파일 상단에 import 한다. (2) 아래 주소로 들어가 원하는 아이콘이름을 복사한다. react-native-vector-icons directory oblador.github.io import끝엔 빨간박스에 있는 이름 적기 name엔 아이콘 이름 적기 (3) name, size, color값을 입력한다. import Icon from 'react-native-vector-icons/AntD.. 2022. 12. 13. [react-native]리액트JS와의 차이점 (코어컴포넌트와 style) 리액트JS와의 차이점 컴포넌트 reactJs처럼 html 문법을 사용하지 못한다. 왜냐하면 브라우저가 아닌 네이티브기기를 사용하기 때문이다. 네이티브 기기는 DOM을 가지고 있지 않고 Html요소를 지원하지 않는다. 또한 컴포넌트를 쓸때마다 import를 해주어야 한다. import {Text, View, Button} from 'react-native' 코어 컴포넌트 Text 텍스트는 무조건 사이에 들어가야 된다. hello View div와 비슷한 용도로 쓰인다. 하지만 네이티브에선 유일한 컴포넌트를 담는 컨테이너 컴포넌트이다. hello Button 기존에는 요소 사이에 텍스트를 배치했지만 (BUTTON!) 네이티브에서는 하나의 닫힌 컴포넌트 안에서 타이틀 프로퍼티를 사용해 텍스트를 입력한다 () .. 2022. 12. 5. [React]Hook: useLayoutEffect useLayoutEffect란? useEffect와 비슷한 이름을 가진 useLayoutEffect는 사용방법은 같지만 실행원리는 다르다. useEffect(() => { // do side effects return () => /* cleanup */ }, [dependancy array]); useLayoutEffect(() => { // do side effects return () => /* cleanup */ }, [dependancy array]); useEffect는 렌더링된 요소가 화면에 그려진 후 비동기적 으로 실행된다. 그러나 useLayoutEffect는 렌더링 후 요소가 화면에 그려지기 전에 동기적으로 실행된다. 그래서 데이터를 가져오는 시간이 오래걸린다면 그 시간만큼 사용자는 빈 .. 2022. 12. 5. [android studio]애뮬레이터 분리하기 최근 업데이트 된 안드로이드 스튜디오에선 애뮬레이터가 고정되어 있다. 다른 IDE로 작업하려면 분리가 필수이다. 분리하는 방법은 어렵지 않다. 1. command + , 를 눌러 환경설정 창을 띄운다. 2. 왼쪽 상단 검색창에 emu(까지만 적어도 검색가능..ㅎㅎ) 적고 Tools - Emulator로 들어간다. 3. Launch in a tool window의 체크박스를 해제한다. 4. 안드로이드 스튜디오를 종료 후 다시 킨다. 5. 오른쪽에 점세개 아이콘을 눌러 Virtual Device Manager에 들어간다. 6. Device를 실행한다. 분리하기 성공🌝 2022. 12. 2. [react-native] 개발환경설정중 발생한 에러 모음 cocoapods 설치 에러 해결하기 [react-native]ERROR: Error installing cocoapods: 발생상황: react native 개발환경 셋업중, cocoapods설치 중.. sudo gem install cocoapods Ignoring ffi-1.15.5 because its extensions are not built. Try: gem pristine ffi --version 1.15.5 ERROR: Error installing cocoapods: ERROR: Failed to build g jaylee-log.tistory.com ruby 버전 에러 해결하기 (mac) ruby 버전 업데이트 하기 문제상황 react-native init을 했는데 error Your.. 2022. 12. 2. React Native CLI 설치하기(mac) React Native란? 자바스크립트 언어로 React의 방식을 이용하여 모바일 안드로이드와 iOS를 만들 수 있는 프레임워크이다. 리액트 네이티브를 개발할 수 있는 방법엔 두가지가 있다. React Native CLI와 Expo CLI. 이 둘을 간단하게 비교하자면 1. Expo CLI - 초기설정 간단 - 손쉬운 사용 - 네이티브파일과 라이브러리사용에 제한이 있다. - 용량이 크다. 2. React Native CLI - 초기설정 까다로움 - 원하는 기능이나 라이브러리 자유롭게 사용 가능 - Android Studio(Android용) 및 XCode(iOS용)를 설치해야 한다. 이런 특징들을 가지고 있다. 목적에 따라 설치를 선택하면 될것같다. React Native CLI를 사용할것이기 때문에 설.. 2022. 12. 1. [SCSS] SCSS 사용하기 SCSS란? SASS를 더 편리하게 수정한 버전. 확장자는 .scss 사용하며, 브라우저에서 SASS구문을 이해하지 못하기 때문에 컴파일하는 작업이 필요하다. 설치하기 npm install -g node-sass //에러나면 아래껄로 하기 sudo npm install --unsafe-perm -g node-sass 설치 후 파일확장자명을 .scss로 사용한다. 유용한 플러그인 Live Sass Compiler Sass와 SCSS를 컴파일 작업을 하지 않아도 실시간으로 확인이 가능, 문법오류 체크를 해줌 주요기능 중첩 //SCSS .section { width: 100%; .list { padding: 20px; li { float: left; } } } //컴파일 후 .section { width: 1.. 2022. 11. 29. [Redux]리덕스의 기본개념 리덕스란? 모든 상태를 하나의 저장소(store)에서 관리하는 상태관리 라이브러리다. 리액트로만 프로젝트를 진행하게 될 시 규모가 클 수록 local state와 global state를 관리하기 어렵다는 단점이 있다. 하지만 리덕스를 사용하게 되면 하나의 store를 통해 모든 state를 저장, 유지할 수 있게 되며, 원하는 컴포넌트로 데이터를 전달 할 수 있게된다. 리덕스는 html, js 내에서도 사용이 가능하지만 컴포넌트간에 상태관리를 하는 리액트와 함께 쓰면 높은 시너지를 낼수 있기 때문에 리액트에서 많이 사용한다. 주요 키워드 액션 (Action) 액션 생성함수 (Action Creator) 리듀서 (Reducer) 스토어 (Store) 디스패치 (dispatch) 구독 (subscribe).. 2022. 8. 24. [React]Hook: customHook Custom Hook이란? 사용자가 중복되는 로직을 하나로 묶어 언제든 재사용할 수 있게 만든 hook이다. 주로 자주 사용되는 input이나 fetch의 로직에 활용되기도 한다. - 사용 시 use를 앞에 적어준다. - return값으로는 배열 또는 오브젝트가 들어와야한다. (배열또는 객체의 수는 추가가 가능하다.) 예시 아래와 같은 input로직을 커스텀 훅으로 바꿔준다면.. App.js ... const [inputs, setInputs] = useState({ username:'', email: '', }) const {username, email} = inputs; const onChange = (e) => { const {name, value} = e.target; setInputs({ ..... 2022. 8. 24. [React]Hook: useContext useContext 란? context는 부모가 자식컴포넌트에게 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 전달할 수 있게 해준다. useContext는 context를 좀더 편하게 사용할 수 있도록 도와주는 hook이다. Context API 3가지 주요 개념 - createContext(initialValue) - Context.Provider - useContext(Context) createContext(initialValue) -> 부모컴포넌트에 작성 context객체를 생성한다. Provider와 Consumer 를 반환한다. Provider : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다. Consumer : context의 변화를 감시하는 컴포넌트이.. 2022. 8. 23. [React] Hook: useReducer useReducer란? 복잡한 상태 관리가 필요한 컴포넌트에 적합한 Hook이다. useReducer 함수 const [state, dispatch] = useReducer(reducer, initialState, init) 파라미터 설명 state: 컴포넌트에서 사용할 State(상태). dispatch: reducer 함수를 실행시키며, 컴포넌트 내에서 state의 업데이트를 일으키기 위해서 사용하는 함수. reducer: 컴포넌트 외부에서 state를 업데이트하는 로직을 담당하는 함수. 현재의 state와 action 객체를 인자로 받아서, 기존의 state를 대체(replace)할 새로운 State를 반환(return)하는 함수. initialState: 초기 값 init: 초기 함수 인자로 들어.. 2022. 8. 16. [React]Hook: useMemo()와 useCallback() / React.memo() useMemo 란? (Hook) 성능 최적화를 위하여 특정 결과값을 재사용 할 수 있다. (useMemo의 Memo는 Memoization을 뜻한다. 이것은 기존에 수행한 연산의 결괏값을 어딘가에 저장해 두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법이다.) useCallback 이란? (Hook) 성능 최적화를 위하여 특정 함수를 재사용 할 수 있다. React.memo 란? (고차 컴퍼넌트(Higher Order Component, HOC) 렌더링 결과를 메모이징(Memoizing)함으로써, 불필요한 리렌더링을 건너뛴다. 오직 props변화에만 의존하는 최적화 방법이다. useMemo(function, deps) const value = useMemo(() => { return fn(); },.. 2022. 8. 16. [React]Hook: useEffect() seEffect() 란? 컴포넌트가 렌더링 될 때 특정 작업을 한번만 실행하거나 의존성 배열이 있는경우 변경이 될때마다 실행을 도와주는 훅 입니다. useEffect(function, deps) import React, { useEffect } from "react"; //import하기 useEffect(() => { },[]); 파라미터 설명 function: 실행하고자 하는 함수(콜백함수) deps: 배열형태, function을 실행시킬 조건이다. 크게 세가지 경우로 나뉜다. deps에 특정값을 넣는경우: 컴포넌트가 mount 될 때 + deps 값이 업데이트될 때 useEffect를 실행한다. 빈 배열일 경우: useEffect 에 등록한 함수가 실행 될 때 최신 props / 상태를 가르키지 않.. 2022. 8. 15. [Next.js]사용하기(pages, Link, style jsx) 📁pages pages폴더 안에 파일을 만들면 파일이름이 경로가 된다. (매우 간편!) (리액트에서 react-router-DOM의 역할을 간단하게 수행할 수 있다. 즉 routes를 설계하고 component를 import하는 등의 복잡한 과정이 생략된다.) 다만 예외사항으로, index.js의 경우에는 앱이 시작하는 파일이라고 보면 된다. 즉 localhost:3000 그 자체다 뒤에 /index 로 붙이면 안된다. ( localhost:3000/index(X) ) 중요한점! 꼭 컴포넌트를 export default 를 해야한다. 지키지 않으면 에러가 나게된다. 함수의 이름은 url과 상관이 없으므로 자유롭게 적어도 된다.(오직 파일명만이 url경로의 이름이 된다.) 경로이름을 변수로 설정해야한다면?.. 2022. 7. 18. [Next.js] 설치하기 Next.JS란? React를 위한 프레임워크로 weback과 같은 번들러, Babel과 같은 컴파일러를 사용하여 코드를 변환해주거나 코드 분할과 같은 프로덕션 최적화 및 성능, SEO(검색 최적화), SSR(서버사이드 렌더링)등을 수행한다. 1. 설치방법 npx create-next-app 프로젝트명 2. 실행 npm run dev 브라우저에 http://localhost:3000에 들어가면 다음과 같은 화면이 표시된다. 2022. 7. 17. Json-server 사용하기 (REST API 구축 라이브러리) Json-server란? 목업 REST API 를 구축해주는 라이브러리이다. 프로토타입이나 토이프로젝트에 사용하기 좋다. 설치 (1) json-server설치 npm install json-server --save-dev (2) json서버 실행. 실행을 해주면 db.json파일이 생성이 된다. json-server --watch db.json (3) 포트변경 (기본포트는 3000이다) http://localhost:4000/posts 에 들어가면 db를 볼 수 있다. json-server --watch db.json --port 4000 axios 설치 axios란 REST API Client이다. 데이터를 주고받는데 필요하다. npm install axios 2022. 6. 15. [React]git hub배포하기 1. 프로젝트에 gh-pages 패키지를 설치 npm install gh-pages --save-dev 2. package.json 파일을 열기 (1) "homepage" 주소를 추가 "homepage": "http://{사용자 이름}.github.io/{저장소 이름}" (2) script 부분에 predeploy, deploy 를 추가 "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d build" } 3. 터미널창을 열어 npm run deploy를 실행 npm run deploy 4. github의 repository에서 settings -> pages에 들어가 source를 gh-pages로 변경. 2022. 5. 28. [React] 천단위마다 쉼표 넣는 방법 금액을 입력하기위해 1,000단위마다 ,(콤마)를 찍어주는 방법을 찾아보는데 아래 사이트에서 npm만 설치하면 자동으로 콤마가 찍히는 아주 기똥찬 패키지를 발견했다. 개꿀~~!! https://www.npmjs.com/package/react-currency-input-field react-currency-input-field React component for formatting currency and numbers.. Latest version: 3.6.4, last published: 4 months ago. Start using react-currency-input-field in your project by running `npm i react-currency-input-field`. Ther.. 2022. 5. 23. [React] Fragments 란? 기존 문제점: 를 로 감쌀 시 렌더링된 HTML은 유효하지 않는다. class Table extends React.Component { render() { return ( ); } } class Columns extends React.Component { render() { return ( // 자식요소인 를 div로 묶어 주게 된다면 Hello World ); } } // 의 출력 결과 // div로 자식들을 감싼다면 렌더링 된 HTML은 유효하지 않는다. Hello World Fragment 사용방법 // 첫번째 방법 // 두번째 방법(import하기) import React, { Fragment } from 'react' // 세번째 방법(단축키) :단점- key 사용을 못함. 장점 Fragment.. 2022. 5. 22. [React] nanoid 나노아이디 https://www.npmjs.com/package/nanoid nanoid A tiny (116 bytes), secure URL-friendly unique string ID generator. Latest version: 3.3.4, last published: 18 days ago. Start using nanoid in your project by running `npm i nanoid`. There are 4339 other projects in the npm registry using nanoid. www.npmjs.com 나노아이디란? 자바스크립트용 작고 안전한 랜덤문자열 생성기이다. import { nanoid } from 'nanoid' model.id = nanoid() //=> ".. 2022. 5. 21. 이전 1 2 다음 320x100
