반응형

코딩 200

[React] hook과 util의 구분 기준.

글쓴이는 이런걸 배우고 싶었는데, 딱히 알려주는 사람이 없어 해당 코드를 작성하는데 뭘 넣어야 하는지 항상 고민했다.해당 내용을 읽어보는 것이 중요하다. 이전 회사 진짜... 배운 게 1도없네 -_-;;;내 최악의 회사인듯... 리액트에서 유틸 함수와 훅의 차이를 이해하는 기준점은 다음과 같아. 📌 유틸 함수 vs 훅의 기준 구분 유틸 함수 (Utility Function) 훅 (Hook)사용 목적 비즈니스 로직과 무관한 재사용 가능한 일반 함수 리액트의 상태(state)나 생명주기(lifecycle)과 관련된 로직입출력 인풋을 받아 바로 결과 반환 (순수 함수) 내부에서 상태 관리 및 부작용 처리 가능리액트 종속성 리액트와 무관 (어디서든 사용 가능) 리액트 내부에서만 사용 가능 (useState, ..

[Justand] 전역상태관리

완전 쓸데없이 복잡한 redux같은 것에 비해서 완전 쉬운 상태관리 기술.recoil이랑 같은데? import {LatLng} from 'react-native-maps';import {create} from 'zustand';interface LocationState { moveLocation: LatLng | null; setMoveLocation: (location: string) => void;}const useLoactionStroe = create(set => ({ moveLocation: null, setMoveLocation: (moveLocation: LatLng) => { set({moveLocation}); },}));export default useLoactionStr..

[RN] 네비게이션 라우팅 drawer에서 stack 네비게이터로 이동하는 방법.

const navigation = useNavigation(); const handlePressModal = () => { navigation.navigate([드로워에 있는 stack네비게이터 카테고리 페이지], { screen: [드로워, 스택 네비게이터에 있는 공통페이지], params: { screen: [스택 네비게이터에 있는 특정페이지] params: {id: post.id}, // 넘길 데이터 initial: false, // 뒤로가기시 stack 내부에서 이동하는 것 설정. // 이걸 이용하면, 뒤로가기시 접속 페이지가 아닌 카테고리 첫번째 페이지로 이동함. } }); };  이동할때..

코딩/React Native 2025.02.06

[RN] 환경변수 설정하기 .env 설정하기.

.env에 접근하는 방법은 process.env.REACT_APP_DOMAIN은 리액트의 경우였다. RN의 경우 좀 까다롭다.ios, android 둘다 설정해줘야하기때문에..https://www.npmjs.com/package/react-native-config react-native-configExpose config variables to React Native apps. Latest version: 1.5.3, last published: 6 months ago. Start using react-native-config in your project by running `npm i react-native-config`. There are 221 other projects in the npm regi..

코딩/React Native 2025.02.06

[RN] FLIPPER의 서비스중단 네트워크 통신을 보려면?

Infinite Red의 Reactotron을 사용하세요! 타임라인에서 네트워크 요청과 응답을 살펴볼 수 있습니다. 이 기능은 매우 유용하기 때문에 향후 릴리스에서 전용 네트워크 탭을 만드는 것을 논의 중입니다.오랜만에 RN을 개발하는 도중에, FLIPPER가 버려졌다는 것을 알게되었다.뭐 어쩌겠어 그냥 개발해야지...그런데, 네트워크 통신을 감청(엿보는 것)이 필요한데, 해당 작업이 안되더라...찾아보니 해당 내용에 대한 글이 있어 읽어보았다. 난 써보니 리액트론을 추천한다.인피니트의 경우 업체가 컨택해서 쓰는 방식인듯 싶은데, 인피니트를 기반으로 리액트로인 만들어진 것 같기도 하고.. 설치방법https://docs.infinite.red/reactotron/quick-start/react-native..

코딩/React Native 2025.02.04

[RN] react-native-maps AppDelegate.swift 설치문제

본 내용은 RN 0.77.0 버전에서 진행되어 작성되었습니다. 공식문서에는 0.73까지만 적용되는(?) AppDelegate.m으로(오브젝트 c) 적혀있어서  라이브러리 적용이 어려웠습니다. 이거때문에 하루 날림...짜증 -_-;; 위치 전문을 공개합니다.// AppDelegate.swiftimport UIKitimport Reactimport React_RCTAppDelegateimport ReactAppDependencyProviderimport GoogleMaps // 해당 내용 추가@mainclass AppDelegate: RCTAppDelegate { override func application(_ application: UIApplication, didFinishLaunchingWithOp..

코딩/React Native 2025.01.31

[깃허브] 슬랙 알림 연동

별로 어렵지 않습니다. 일단 채널을 생성합니다. 채널내에서 채널 이름을 클릭하면 팝업 모달이 출력됩니다.  앱 추가를 클릭합니다. 깃 허브를 설치합니다.엔터프라이즈는 아니니까 깃허브만 찾아 검색합니다.  자 설치가 되면 connect 버튼을 클릭합니다.인증 작업을 진행 후 코드버튼이 보입니다.해당 버튼을 복붙하여 붙여넣읍시다. 이제 여기서 입력창에서 /github subscribe 유저의 레포를 넣어주세요. 해당 내용이 완료되면, 아래와 같은 문구를 출력합니다. 여기서 알림은 모두 main(master) branch의 내용만 나옵니다.# main(or master) 브랜치 뿐아니라 모든 브랜치의 알림을 수신합니다./github subscribe owner/repository branches commits..

코딩/slack 2025.01.23

시놀로지 ssl 와일드카드 인증서 발급.

내용은 해당 내용을 바탕으로 적었습니다.https://velog.io/@atmost1815/Synology%EC%97%90%EC%84%9C-Wildcard-SSL-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EC%9E%90%EB%8F%99-%EA%B0%B1%EC%8B%A0%ED%95%98%EA%B8%B0 Synology에서 Wildcard SSL 인증서 자동 갱신하기certbot과 cloudflare를 이용한 Synology Wildcard SSL 인증서를 발급 받고 자동으로 갱신하는 방법velog.io해당 링크내용에 모든 내용이 다 적혀있으나 없는 부분이 있어 작성함.  #!/bin/bashCONTAINER_NAME=certbotdocker run -it --rm \ --pull=always ..

코딩/시놀로지 2025.01.19
728x90