Development

개발 일지

안다희 2020. 3. 5. 02:38
728x90

체크리스트

- endpoint 클라에서 숨겨야 함!

- 애플로그인 고유값 뭔지 iphone se로도 해보고 애플로그인 포스팅 업데이트하기

id랑 token 둘 다 저장!?

- 리덕스 타입 체킹

- dispatch, state type checking

 

8/18 (화)

- 앱 내 화면 공유 및 저장하기 

https://coding-dahee.tistory.com/210

 

- 커밋 메세지 하나로 만들기

https://coding-dahee.tistory.com/211

 

8/15 (토)

- 파이어베이스 테스트용 릴리즈용 앱 나누기

https://coding-dahee.tistory.com/209

 

8/10 (월)

- 진동/무음 시 소리 울리기

https://coding-dahee.tistory.com/206

 

 

7/30 (금)

- 앱 화면 만들 때 Margin 표시 이런식으로 하면 어느 부분에 Margin이 있는지 바로 알 수 있어서 좋다! 지원언니에게 배운 것!!

import React from 'react';
import styled from 'styled-components';
import { ViewStyle } from 'react-native';

import { nomalize } from '../../utils/constants';

const Container = styled.View`
  width: 100%;
  height: ${({ height }: ViewStyle) => height}px;
`;

export const marginWide = nomalize(20);
export const marginMiddle = nomalize(15);
export const marginNarrow = nomalize(10);
export const marginVeryNarrow = nomalize(5);

export const MarginWide = () => <Container height={marginWide} />;
export const MarginMiddle = () => <Container height={marginMiddle} />;
export const MarginNarrow = () => <Container height={marginNarrow} />;
export const MarginVeryNarrow = () => <Container height={marginVeryNarrow} />;

 

이렇게 만들어놓고 <MarginWide /> <MarginNarrow /> 로 활용해서 쓴다 짱!!!

 

7/23 (목)

- remote config 세팅. 엄청 간단하다!

- ios nfc write 로직 다시 완벽히 정리했음. 

 

 

 

7/22 (수)

- 루빗 간단한 버그 처리

7/20 (월)

- 오늘도 오픈소스에 질문 올렸다. 무음 모드에서 알람을 울릴 수 있는지!

https://github.com/zo0r/react-native-push-notification/issues/1546

 

local push notification in silent mode · Issue #1546 · zo0r/react-native-push-notification

Is it possible to make an alarm sound and vibrate when local push notification is set to sound: true, vibrate: true even when the phone is in silent mode? (Android and iOS) This phone is samsung(An...

github.com

 

- android & iOS 데이터 없는 NFC write 하는 로직 완성! 

android는 uid가 있어서 application/com.roubit 만 써줘서 루빗 바로 켜지게 해줬고,

ios는 uid를 못읽게 apple이 막아놔서 직접 텍스트를 write 해줌.

 

 

7/16 (목)

- 오늘도 오픈소스에 질문 올렸다! 엄청 금방 답변해주심. 

https://github.com/zo0r/react-native-push-notification/issues/1533

 

- 빠져있는 부분 ㅊ가해달라고 이슈 올림!

https://github.com/invertase/react-native-firebase/issues/3959

 

 

7/15 (수)

- 오 이런 방법도 있군

https://stackoverflow.com/questions/21424525/how-can-i-set-div-opacity-only-not-text

 

how can i set div opacity only not text?

I want to use opacity only for div not on the text. i use some code for div opacity but it show me text opacity also. i do not want to show the text opacity. my code is here. .opabenner { width:56...

stackoverflow.com

 

- react native splash screen - Ios에서 안먹어서 ios에서 대충 직접 글씨만 만졌다...

 

- 드디어 루빗, 눈송이 배포날

 

7/14 (화) - 5월부터 계속 루빗 작업중.. 매일매일..

- 저번에 repeatType 관련해서 readme 수정 요청했었는데 버그 또 발견해서 이번에 또 하게 되었다!)

- 푸시 알람 관련 이슈 올렸다! (내가 해결한 방법 제시, readme 수정 요청)

https://github.com/zo0r/react-native-push-notification/issues/1525

 

Custom Sound Issue on Android (I solved) · Issue #1525 · zo0r/react-native-push-notification

Please Edit README https://github.com/MaximusBaton/react-native-push-notification#custom-sounds Bug I wanted to set custom sound to local notification on Android (excluding iOS. So I don't know...

github.com

 

 

6/2 (화)

- 루빗: HashTagReport, UpdateHashTag 화면 작업

6/1 (월)

- redux-saga 연결 (루빗에 movie api로 연결해봄)

 

 

5월 막주

- 화면 비율

에 따른 스크린 조정. px 하드코딩은 좋지 않다!

- 갑자기 auto save 잘 안됨

 

 

 

5/24 (일)

1) progressCircle, pieChart 구현

progressCircle 사용법 포스팅

https://coding-dahee.tistory.com/192

 

[React Native] react-native-svg ProgressCircle로 시계 나타내는 법 / startAngle, endAngle

1. 라이브러리 https://github.com/JesperLekland/react-native-svg-charts JesperLekland/react-native-svg-charts 📈 One library to rule all charts for React Native 📊 - JesperLekland/react-native-svg-ch..

coding-dahee.tistory.com

 

pieChart는 설치할게 하나 더 있어서 이슈올려놓음. 라이브러리 이거 썼음

https://github.com/genexu/react-native-pie-chart/issues/26

 

<<<오픈소스 활동>>>

- pie-chart 사용자들이 추가적으로 해야할 일 이슈에 올림

https://github.com/genexu/react-native-pie-chart/issues/26

 

- push alarm 연속으로 보내는 방법

https://github.com/zo0r/react-native-push-notification/issues/1451

푸시 알람 연속적으로 보내는 방법은 스팸이래 흑흑 그러면 다른 알람 어플은 어떻게 한거지?

 

https://github.com/react-native-community/push-notification-ios/issues/124

맞는 레포지토리에 다시 이슈 올려놓음!

 

5/23 (토)

1) 홈에 들어올 때마다 오늘~6일후의 알람까지 자동으로 예약하도록 로직 만들었음

 

5/21 (목)

1) 알림기능 삽질

- iOS는 알람 한 번 울릴 때 interval 설정을 최소 60초로 할 수 있다. 5초마다 반복하고 싶은데 그건 안드로이드에서밖에 못함....... 후우 하루 삽질했는데 포기!!! 포기할 줄도 알아야 한다!! 대신 이슈는 올려놓았음

https://coding-dahee.tistory.com/190

5/18 (월)

- 카카오로그인 키해시값 가져옴 (자바코드로 가져오는게 제일 좋음)

- fcm 연결

https://coding-dahee.tistory.com/186

 

[React Native] Firebase 연동 & Cloud Messaging 연동

1. Firebase 연동 https://dev-yakuza.github.io/ko/react-native/react-native-firebase-v6-installation/ react-native-firebase V6 설치 React Native에서 Firebase를 사용하기 위해 react-native-firebase(V6)..

coding-dahee.tistory.com

 

- mutation 미리 알 수 없는 variables는 useRef를 이용하자

  // Mutation
  const loginInput: LoginInput = useRef({
    // useRef 적극 이용 바로 알 수 없는 값 null로 해놓고 .current로 바꾸면 좋음
    provider: null,
    accessToken: null, // 근데 이걸 뮤테이션 날릴 때 하는 방법은 없어?
    deviceId: null,
    pushId: null,
  });

  const [loginMutation, {loading, data}] = useMutation(LOGIN, {
    variables: {data: loginInput.current},
  });
  
  // 이렇게 해놓고 provider 알아내면
  // loginInput.current = 'kakao'
  // 이런식으로 하면 된다. useRef없이 그냥 loginInput = { ... } 이렇게 선언하면 
  // loginMutation() 할 때 그대로 null값이 들어간다.

 

- deviceInfo

https://coding-dahee.tistory.com/187

 

[React Native] DeviceInfo 휴대폰에 관한 정보 가져오기 / 휴대폰 기종

라이브러리 https://github.com/react-native-community/react-native-device-info react-native-community/react-native-device-info Device Information for React Native iOS and Android - react-native-commu..

coding-dahee.tistory.com

 

 

 

... 루빗 개발 ...

 

 

4/28 (화)

- 날씨, 미세먼지 api

https://coding-dahee.tistory.com/172

 

[React Native] 날씨 API, 미세먼지 API

1. 날씨 API https://home.openweathermap.org/api_keys Members Enter your email address and we will send you a link to reset your password. home.openweathermap.org api key 확인하고~ 위도 경도 필요해 h..

coding-dahee.tistory.com

- 루빗 달리자!!!!

4/27 (월)

- 애니메이션

커스텀 탭네비게이션 안에 움직이는 바 구현 animation 이용

import React, {useState, useRef} from 'react';
import {Animated, View} from 'react-native';
import styled from 'styled-components';
import {SSafeAreaView} from '../components/StyledComponents';
import {TouchableWithoutFeedback} from 'react-native';
import {withNavigation} from '@react-navigation/compat';
import {setFocusedTabIdx, ReduxStates} from '../redux/store';
import {useSelector, useDispatch} from 'react-redux';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootTabParamList} from '../navigation/RootTabNavigation';
import {SoundIcon, SoundDarkIcon} from '../assets/image_container';
import {cWidth} from '../utils/constants';
import {ThemeProp, ThemeEnum} from '../utils/theme';
import {useTheme} from '../context/ThemeContext';
import {useMovingBarX} from '../context/CommonContext';

interface Props {
  children: React.ReactNode; // 넘어오는 childre은 flex: 1로 설정되어 있어야 함
  navigation: StackNavigationProp<RootTabParamList>;
}

const height = 40;
const borderRadius = 20;
const margin = 10;

const Container = styled.View`
  width: ${cWidth}px;
  /* background-color: ${({theme}: ThemeProp) => theme.main}; */
  background-color: lightcoral;
`;

const ItemsContainer = styled.View`
  height: ${height}px;
  margin: ${margin}px;
  flex-direction: row;
  border-radius: ${borderRadius}px;
  align-self: center;
  background-color: ${({theme}: ThemeProp) => theme.lightgrey};
`;

const ItemContainer = styled.View`
  width: 33%;
  justify-content: center;
  align-items: center;
`;

const Image = styled.Image`
  width: 15px;
  height: 15px;
`;

const TabLayout = ({children, navigation}: Props) => {
  const {themeType} = useTheme();
  const {movingBarX} = useMovingBarX();
  const dispatch = useDispatch();
  const focusedTabIdx = useSelector(
    (state: ReduxStates) => state.focusedTabIdx,
  );

  return (
    <SSafeAreaView>
      {children}
      <Container>
        <ItemsContainer>
          <TouchableWithoutFeedback
            onPress={() => {
              dispatch(setFocusedTabIdx(0));
              Animated.timing(movingBarX, {
                toValue: 0,
                duration: 200,
              }).start();
              navigation.navigate('HomeStackNavigation');
            }}>
            <ItemContainer>
              <Image
                source={
                  themeType === ThemeEnum.LIGHT ? SoundIcon : SoundDarkIcon
                }
              />
            </ItemContainer>
          </TouchableWithoutFeedback>
          <TouchableWithoutFeedback
            onPress={() => {
              dispatch(setFocusedTabIdx(1));
              Animated.timing(movingBarX, {
                toValue: cWidth / 3 - margin, // TODO: 화면 별로 조정
                duration: 200,
              }).start();
              navigation.navigate('StatStackNavigation');
            }}>
            <ItemContainer>
              <Image
                source={
                  themeType === ThemeEnum.LIGHT ? SoundIcon : SoundDarkIcon
                }
              />
            </ItemContainer>
          </TouchableWithoutFeedback>
          <TouchableWithoutFeedback
            onPress={() => {
              dispatch(setFocusedTabIdx(2));
              Animated.timing(movingBarX, {
                toValue: (cWidth / 3) * 2 - margin * 2,
                duration: 200,
              }).start();
              navigation.navigate('SettingStackNavigation');
            }}>
            <ItemContainer>
              <Image
                source={
                  themeType === ThemeEnum.LIGHT ? SoundIcon : SoundDarkIcon
                }
              />
            </ItemContainer>
          </TouchableWithoutFeedback>
        </ItemsContainer>
        <Animated.View // Moving Bar
          style={{
            position: 'absolute',
            width: '33%',
            height,
            margin,
            backgroundColor: 'pink',
            borderRadius,
            transform: [
              {
                translateX: movingBarX,
              },
            ],
          }}
        />
      </Container>
    </SSafeAreaView>
  );
};

export default withNavigation(TabLayout);

 

4/23 (목)

- svg 차트 각각 뭘 의미하는지 분석. 1/4 원 그릴 수 있게 됨

 

- 백준

4/17 (금)

- 루빗 서버와 소셜로그인 연동

https://jwt.io/#debugger-io

에서 클라가 보내준 token decode하고 db에 user 정보 있는지 확인 후 jwt 토큰 만들어서 준다.

구글: 클라에서 긴 token 보내주

4/16 (목)

- 루빗 서버와 소셜로그인 연동

https://jwt.io/#debugger-io

에서 클라가 보내준 token decode하고 db에 user 정보 있는지 확인 후 jwt 토큰 만들어서 준다.

구글: 클라에서 긴 token 보내주

면 decode 후 email로 db 확인

카카오: 클라에서 짧은 token 보내주면 user/me users/me? 이 api (카카오에서 제공. 포스트맨으로 테스트 가능) 로 유저정보 얻을 수 있음 여기서 jwt 토큰 만들어서 준다

애플: 클라에서 긴 token 보내주면 decode 후 sub (이게 클라에서 user) 키의 value로 db 확인 후 jwt 토큰 만들어서 준다

 

- 그래프

https://coding-dahee.tistory.com/169

 

[React Native] 차트

1. 설치 https://github.com/JesperLekland/react-native-svg-charts https://github.com/d3/d3-shape https://github.com/react-native-community/react-native-svg svg를 안깔면 https://github.com/JesperLekla..

coding-dahee.tistory.com

example 갖다 쓰기만 했다.

커스터마이징 해야할 부분이 있어서 이건 react-native-svg 공부한 후 직접 만들어보는걸로!

 

 

 

4/15 (수)

- 루빗: 구글, 카카오 로그인 연동

https://coding-dahee.tistory.com/168

 

[React Native] Google Login 구글 로그인 / 소셜 로그인

1. firebase 연결 https://chobodogfootruler.tistory.com/28 1. 개초보도 할 수 있는 Firebase 연결(간단 SHA키 등록까지) 오랜만에 다시 티스토리에 왔다.... 졸작도 끝났고... 취업은 아직이라 시간이 떠버렸다..

coding-dahee.tistory.com

4/12 (일)

- graphql nexus 설명 들었음.

https://coding-dahee.tistory.com/167

배포 시 http 문제가 있을 것 같아서 테스트플라이트/apk 뽑는 정도까지! 디자인은 전혀 상관하지 말고. 해보자구~

 

- 이제 알고리즘 스터디를 할까?

 

4/9 (목)

- 노마드 코더 배포 부분!

헤로쿠인데,,, 쓸 일 없지 싶다!

 

- 핱시 서버 연결 (타입스크립트)

노마드코더 헤로쿠로 올리려다,,, 이거로 내가 계쏙 할거같진 않아서 그냥 도커로 올림. 아직 이해가 부족하지만 서버 배포 성공!

재균과 했던 서버 배포 그대로 적용해서 핱시 서버 올렸다!

https://github.com/daheeahn/heart-signal-client

https://github.com/daheeahn/heart-signal-server

 

근데 endpoint는 클라에서 숨겨야 함!

 

후우!!! 이제 진짜 개발하고 클라 배포만 하면 된다 화이팅!!!!!

 

나중에는 넥서스로 migrate 하기. 그 구조 재균,재규에게 물어보기!

 

포스팅용x 단순기록용o

https://coding-dahee.tistory.com/166

 

넥서스로 서버 프리즈마

1. init yarn init 2. src/index.ts 생성 3. 설치 yarn add @babel/{node,cli,core} nodemon 4. package.json "scripts": { "dev": "nodemon --exec babel-node src/index.ts" } 5. nodemon.json 파일 생성 (root..

coding-dahee.tistory.com

https://coding-dahee.tistory.com/160

 

AWS에 서버 배포하기

- http://ec2-3-135-188-254.us-east-2.compute.amazonaws.com:4466 - http://ec2-3-135-188-254.us-east-2.compute.amazonaws.com:4000 - heart-signal server 브랜치에 있는거 서버 올릴거임. https://github.co..

coding-dahee.tistory.com

4/8 (수)

- 학생 인증해서 깃헙 프로!

 

- rm -rf .git 하면 해당 폴더 git commit 기록 삭제 가능! 그리고 다시 첨부터 하면 됨.

 

- 알고리즘 공부 가볍게 시작!

입출력부터!! (차근차근님의 추천)

https://github.com/daheeahn/Algorithm

 

daheeahn/Algorithm

BaekJoon With Python3. Contribute to daheeahn/Algorithm development by creating an account on GitHub.

github.com

 

학교 알고리즘은 java. 근데 python으로 해보고 싶어서 파이썬 고

인생을 짧으니 파이썬을 쓰자!

 

https://wikidocs.net/8

 

위키독스

온라인 책을 제작 공유하는 플랫폼 서비스

wikidocs.net

https://devych.com/python-installation/

 

맥북 파이썬 3 설치하고 실행하기 - devych's blog

JavaScript, React, TypeScript, Algorithm 등 코딩 외에도 내가 관심있는 모든 것들의 저장소

devych.com

https://sun2do.tistory.com/121

 

Visual Studio Code에서 Python3 사용하기

Visual Studio Code 및 Python3 설치 Visual Studio Code는 마이크로소프트사에서 공개한 무료 에디터입니다. 아래의 사이트에서 다운로드 및 설치하면 실행됩니다. ▷ Visual Studio Code 설치 : https://code.vi..

sun2do.tistory.com

오늘은 입출력 1~7을 진행했다

백준 문제번호

2557, 1000, 2558, 10950, 10951, 10952, 10953

 

 

4/1 (수)

- vscode c 컴파일/실행 환경 구성! 이제 알고리즘 공부하자

 

<오늘은 루빗 디자인 바탕으로 화면세팅 & 간단한 View 디자인을 했다. 재밌다!>

 

- Tab 내에서 특정 화면만 TabBar 없애게 하려면 setOptions({tabBarVisible: false})로 하면 되는데, 그냥 custom tab 만드는게 제일 속편함!

- flex: 0.9 / flex: 0.1로 해야 두번째 아이템을 제일 끝에 둘 수 있음. 그냥   [스크린위] 000    0 [스크린아래]

이렇게 하고 싶으면 flex를 저렇게 해야 한다는거! flex-end 쓰니까 안됨. flex를 제대로 모르고 있었음.

- TouchableWithoutFeedback: Tab 클릭할 때 쓰면 좋음. 

 

 

- StyledComponents 라는 파일 만들어서 컴포넌트 공유 가능! Theme도 잘 내려옴. (styled-components 의 Theme)

 

- hook 써서 useInput 쓰는거 복습!

- Switch도 hooks 써서! 그리고 CustomSwitch 컴포넌트 안에 useInput 하지말고 그냥 switch가 들어가는 screen마다 만들어주는게 좋음. 그게 관리가 편함! 커스텀한 동작도 많을거라서

 

- AddNfc.tsx는 여러 Tab에서 다 접근 가능해야함.

import {CompositeNavigationProp} from '@react-navigation/native';

interface Props {
  // Composite 안한다고 goBack이 이상한 곳으로 가는건 아님
  navigation: CompositeNavigationProp<
    StackNavigationProp<SettingStackParamList, 'AddNfc'>,
    StackNavigationProp<HomeStackParamList, 'AddNfc'>
  >;
}

AddNfc.tsx 에서 이렇게 여러 곳에서 올 수 있음을 알려준다!

 

 

3/31 (화)

- 영철 실시간 강의

- 루/프 회의

- 노마드코더 리덕스 101 (2020 업데이트 버전)

Redux Toolkit 이후

https://coding-dahee.tistory.com/162

 

[노마드코더] 초보자를 위한 리덕스 101

*** 포스팅 목적이 아닌 기록/공부 목적으로 작성한 글이라, 건너뛴 부분이 많습니다! # 필요한 코드만 요약 - package.json "scripts": { "postinstall": "rndebugger-open" } - 설치 $ yarn add redux react-red..

coding-dahee.tistory.com

 - 리덕스 한 번 설명해보기 (루빗앱에 적용시키면서 해봤다! 필수코드, 최종코드 위에 보면 됨)

 

3/30 (월)

- 대학강의  - 생법 2, 3주차

 

- 노마드코더 리덕스 101 (2020 업데이트 버전)

Redux Toolkit 이전까지

3/29 (일)

- 서버 띄워보기 (비공개 포스팅)

https://coding-dahee.tistory.com/160

 

- 나의 일정 관리 만들기 by 프로그라피 추천

https://docs.google.com/spreadsheets/d/1fjx0du5_R-vHb7CJp0M4mAmSAgtSb-EOF800Wp7PsOI/edit#gid=0

 

3/28 (토)

- 러브레터는 명작이다........

3/27 (금)

- typescript 파일에서 prop 타입체킹이 안돼서 뭔가 설정이 부족함을 느낌.

https://ithub.tistory.com/234

 

React Native Typescript 설정하는 방법

안녕하세요. 오늘은 React Native에 TypeScript를 설정하는 방법에 대해서 알아보도록 하겠습니다. React Native TypeScript 설정방법 1. 프로젝트 생성 $ react-native init [project name] 2. 프로젝트 진입 $ c..

ithub.tistory.com

이곳을 참조해 타입스크립트 설정을 했다! 너무 잘되어 있다.

https://reactnative.dev/blog/2018/05/07/using-typescript-with-react-native

 

Using TypeScript with React Native · React Native

JavaScript! We all love it. But some of us also love [types](https://en.wikipedia.org/wiki/Data_type). Luckily, options exist to add stronger types to JavaScript. My favourite is [TypeScript](https://www.typescriptlang.org), but React Native supports [Flow

reactnative.dev

이게 공식문서

 

https://reactnavigation.org/docs/typescript/

 

React Navigation

React Navigation is written with TypeScript and exports type definitions for TypeScript projects.

reactnavigation.org

근데 내가 원하는건 navigation 타입 체킹이었음 => 해결법 찾아내고 포스팅함!

=> https://coding-dahee.tistory.com/157

 

[React Native] react-navigation **v5** type checking with typescript / 타입스크립트 타입체킹

 

coding-dahee.tistory.com

 

<루빗 소셜로그인 구현>

 

- 애플로그인

https://coding-dahee.tistory.com/156

 

[React Native] Apple Login 애플 로그인 구현하기

- 환경 react-native: 0.61.5 - 목적 iOS 앱에 소셜로그인(카카오, 네이버 등)이 포함되어있다면, 애플로그인도 꼭 포함해야함. 귀찮다!!!!! https://developer.apple.com/kr/news/?id=09122019b Apple로 로그인에..

coding-dahee.tistory.com

 

- 카카오로그인

https://coding-dahee.tistory.com/159

 

[React Native] Kakao login 카카오 로그인 구현하기

- 환경 react-native: 0.61.5 @react-native-seoul/kakao-login: 2.4.1 - 라이브러리 https://github.com/react-native-seoul/react-native-kakao-login react-native-seoul/react-native-kakao-login react-nativ..

coding-dahee.tistory.com

login()하면 창 뜨는 것까지 봄

 

- 에러 모음 앞으로 여기에 모으자!

https://coding-dahee.tistory.com/158

 

[React Native] 에러 모음

1. 카카오로그인 추가하는 과정에서 생긴 오류 * What went wrong: Execution failed for task ':react-native-firebase:javaPreCompileDebug'. > Could not resolve all files for configuration ':react-native-..

coding-dahee.tistory.com

 

- 0.62 Fast Refresh 안되는 문제 이슈 제기!

https://github.com/facebook/react-native/issues/28420

 

0.62 Fast Refresh doesn't work · Issue #28420 · facebook/react-native

I used this command npx react-native run-ios When I run react-native and I edit some codes, fast refresh doesn't work. instead, I can see downloading javascript bundle. please check this issue!

github.com

 

 

3/26 (목) 슬의 3회~

- 타입스크립트 적용~

https://dev-yakuza.github.io/ko/react-native/typescript/

아주 쉽다!

 

 

- 루빗 캘린더(커스텀으로 만든다), 퀵알람 구현! Hover는 실패

https://coding-dahee.tistory.com/124

 

- react native gesture handler

https://coding-dahee.tistory.com/155

 

[React Native] react-native-gesture-handler 사용법

- 환경 react-native: 0.61.5 - 라이브러리 https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html Getting Started · React Native Gesture Handler Gesture Handl..

coding-dahee.tistory.com

Swipeable 아주 쉽다!

 

 

- 마지막 날짜 구하기

https://coding-dahee.tistory.com/153

 

[Javascript] 특정 month의 마지막 날짜 구하는 법

const today = new Date(); const nextMonthFirstDate = new Date(today.getFullYear(), today.getMonth() + 1, 1); const currentMonthLastDate = new Date(nextMonthFirstDate - 1); // 1일을 빼준다 const last..

coding-dahee.tistory.com

 

3/25 (수) 핱시 첫방!! 

- 출시는 못해서 아쉽지만 그래도 대강 만들었다 ㅎㅎ

 

 

 

3/24 (화)

- 핱시 주요기능 개발 (실제 작대기 결과 등)

  - 진짜 재밌다!!!

  - useQuery로 얻은 data는 state로 한번 다시 저장. data는 useEffect로 바뀌는거 감지가능해서 useEffect 안에서 useState를 써주는 식으로! 

  const {loading: isBoardLoading, data: boardData} = useQuery(BOARD, {
    variables: {episodeId: selectedEpi?.id},
    skip: !fetchBoard || !selectedEpi,
    fetchPolicy: 'network-only', // refetch를 하면 이걸 조심해야 한다.
  });

  useEffect(() => {
    if (!isBoardLoading && boardData) {
      setFetchBoard(false);
    }
  }, [boardData, isBoardLoading]);
  
// 이 때 skip에서 selectedEpi가 완전히 set되지 않은 상태에서 불릴 수 있어서 추가 조건으로 달아준거!

이런 식의 코딩을 했음

data 감지하고 그 데이터가 있으면 fetchBoard를 안하도록! 그리고 query는 fetchBoard가 true일 때만 작동하도록!

그러니까 코드가 아주 깔끔해졌음!!!!

 

https://github.com/trojanowski/react-apollo-hooks/issues/158

 

should I put useQuery inside a useEffect and should I store returned data in state? · Issue #158 · trojanowski/react-apollo-hook

Still wrapping my head around using this library with modern react hooks patterns. Because data fetching is considered a side effect I've seen this pattern a lot in tutorials and docs. const [d...

github.com

thanks to jinshin!!!!

 

3/23 (월)

- 코드푸시 테스트 플라이트 / 아이콘 자동으로 만들어주는 사이트 

https://coding-dahee.tistory.com/152

 

[React Native] 코드푸시 & 테스트 플라이트

1. react-native-code-push 설치 https://github.com/Microsoft/react-native-code-push microsoft/react-native-code-push React Native module for CodePush. Contribute to microsoft/react-native-code-push d..

coding-dahee.tistory.com

 

- 핱시 주요기능 개발 (작대기 긋기 arrow, board)

 

3/22 (일)

- 인증기능

https://coding-dahee.tistory.com/150

 

- svg로 애니메이션

https://coding-dahee.tistory.com/151

 

[React Native] react-native-svg 사용법 (점과 점 사이를 선으로 긋는 애니메이션 구현하기)

https://github.com/react-native-community/react-native-svg react-native-community/react-native-svg SVG library for React Native, React Native Web, and plain React web projects. - react-native-commun..

coding-dahee.tistory.com

 

3/19 (목) (슬의 2회 하는 날 ㅋ.ㅋ)

- 노마드 코더 풀스택 인스타그램 클론 코딩 강의

#18.5~6

 

- camera 사용법 추가 (사진 찍기, 갤러리에 사진 저장하기)

https://coding-dahee.tistory.com/147

 

[React Native] react-native-camera 카메라 띄우기, 사진 찍기, 사진 저장하는 법 (react-native-community)

오늘 사용할 라이브러리 [1] react-native-comminity/react-native-camera (for 카메라 띄우기, 사진 촬영) https://github.com/react-native-community/react-native-camera react-native-community/react-native..

coding-dahee.tistory.com

 

- 오늘은 대학교 온라인 강의 몰아서 들어서 개발공부는 별로 못했다! 그래도 1 commit 1 tistory 했다!!

 

 

3/18 (수)

- 노마드 코더 풀스택 인스타그램 클론 코딩 강의

#17.0~3

#18.0~4

 

- permission 사용법

https://coding-dahee.tistory.com/145

 

[React Native] react-native-permission 사용법

https://github.com/react-native-community/react-native-permissions react-native-community/react-native-permissions An unified permissions API for React Native on iOS and Android - react-native-commu..

coding-dahee.tistory.com

- 갤러리 가져오기 사용법

https://coding-dahee.tistory.com/146

 

[React Native] 갤러리에서 사진 가져오기 (iOS)

갤러리에서 사진을 가져오려면 camera 권한이 필요함. 1) camera 권한 요청 https://coding-dahee.tistory.com/145 [React Native] react-native-permission 사용법 https://github.com/react-native-community/re..

coding-dahee.tistory.com

 

- camera 사용법

https://coding-dahee.tistory.com/147

 

[React Native] react-native-camera 카메라 띄우기, 사진 찍기, 사진 저장하는 법 (react-native-community)

오늘 사용할 라이브러리 [1] react-native-comminity/react-native-camera (for 카메라 띄우기, 사진 촬영) https://github.com/react-native-community/react-native-camera react-native-community/react-native..

coding-dahee.tistory.com

 

- run-ios 빌드 에러

https://right-hot.tistory.com/entry/ReactNative-runios-%E2%80%94device-%EB%B9%8C%EB%93%9C-%EC%97%90%EB%9F%AC

 

React-Native run-ios —device 빌드 에러

React-Native run-ios —device 빌드 에러 react-native 에서 아이폰 장비로 빌드시 에러 react-native run-ios --device [아이폰 장비 이름] error Failed to install the app on the device because we couldn't..

right-hot.tistory.com

brew로 설치하니까 됐음!

npm -> sudo npm -> yarn -> brew 를 시도하고 나서야 성공!

 

- 화면 가로/세로 길이 추출

https://coding-dahee.tistory.com/148

 

[React Native] 휴대폰/시뮬레이터 화면의 총 가로/세로 길이를 알아내는 법! => Dimensions

Dimensions를 이용하면 화면의 총 가로 세로 길이를 알 수 있다. constants.js import {Dimensions} from 'react-native'; const {width, height} = Dimensions.get('screen'); export default {width, height};..

coding-dahee.tistory.com

 

블로그 하나 하나가 나에게 도움됐던 것처럼, 내 블로그도 다른 사람들에게 도움이 되었으면 좋겠다!

모든 rn 개발자를 응원하며!!

 

 

 

3/17 (화)

- 루빗 회의 (노원 16:00~19:00)

회의가 길어졌지만 앱 기능도 어느정도 설명 들었고 방향성이 잡힌 것 같다!! 

 

- nfc 태그 시 앱 실행하기 (android만)

https://coding-dahee.tistory.com/144

 

[Android/React Native] NFC 태그 시 안드로이드 앱/어플 실행시키는 방법

결과적으로는 https://github.com/observ3r/nfc-ndef-react-native 에 있는 android 코드를 사용했더니 됐다! (라이브러리 설치 없이) 1) android/app/src/main/AndroidManifest.xml 에 다음 권한 추가 <uses-perm..< p=""> </uses-perm..<>

coding-dahee.tistory.com

성공했다~~~ 별거아니지만 너무 기쁨!!!

목표시간 설정해서 nfc 태깅하는 기능 만들 수 있겠다

 

- ios dev team 등록해서 실제아이폰기기에 앱 실행시키기

https://medium.com/@jang.wangsu/ios-iphone%EC%9D%98-udid-%EB%A5%BC-%ED%99%95%EC%9D%B8%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-a82ac8df93ea

 

[iOS] iPhone의 UDID 를 확인하는 방법..

근래에 오래도록 Testflight 를 주로 이용하다 보니..

medium.com

첫번째 방법 굳!

 

- automatically manage signing 이용하니 profile 만들 필요가 없었음!

 

3/16 (월)

https://github.com/zo0r/react-native-push-notification/issues/1342

 

how not to disappear push notification when gesture sideways · Issue #1342 · zo0r/react-native-push-notification

If I click the push notification and it does not disappear, I can control it with autoCancel. But how do I make sure that I don't disappear even if I gesture sideways? Is there a function like ...

github.com

- 푸시알림 push-notificatio이 제일 적합함을 깨달았다!

- localSchedule

- 원하는 기능 존재하는지 이슈 올려봤음

 

- ios developer 등록: 내돈!!!!

 

3/15 (일)

- docker 이용해서 서버 띄워보기

https://coding-dahee.tistory.com/124

 

3/13 (금)

- 노마드 코더 풀스택 인스타그램 클론 코딩 강의

#12.3~10

#13.0~

 

- 핱시앱 고난과 역경 until autoLogin

1) https://coding-dahee.tistory.com/142

 

[React/RN] useMutation react-apollo-hooks error

- version "react-apollo-hooks": "^0.5.0", "@apollo/react-hooks": "^3.1.3", - useMutation을 쓰려하니까 에러가 났다. Could not find "client" in the context or passed in as a prop. Wrap the root compo..

coding-dahee.tistory.com

useMutation 라이브러리 에러

 

2) ApolloClient 라이브러리 에러

https://coding-dahee.tistory.com/120

 

재균과스터디

[2.16 일] gql-yoga apollo-server 둘다 gql server를 띄울 수 있음 yarn add apollo bebel ecma https://node.green/ Node.js ES2015/ES6, ES2016 and ES2017 support node.green babel polyfill stream: 파일스..

coding-dahee.tistory.com

 

3) asyncStorage에서 가져와야 하는데 안가져온채로 setState해서 헤매고

4) 네비게이션 스택 쌓는데 헤매고!

5) 그래도 기본틀은 다 짜놔서 좋다.

6) 임의로 형용사+명사 로 닉네임도 지어줬다!

 

3/12 (목)

- 노마드 코더 풀스택 인스타그램 클론 코딩 강의

#10.4~7

#11.0~5

#12.0,1,2

3/11 (수)

- 노마드 코더 풀스택 인스타그램 클론 코딩 강의

~#3.20

#10.0 ~ 10.3

서버 강의 다 듣고 앱 강의 시작! 앱 조금 듣다가 서버배포 강의 들어야지!

 

- 보일러 플레이트 코드 한데 모아놓음. 언젠가는!! 패키지로 publish 하기!!!!

https://coding-dahee.tistory.com/132

 

[React Native] Bolier Plate 보일러 플레이트 코드

https://github.com/daheeahn/react-native-bolier-plate daheeahn/react-native-bolier-plate react native bolier plate with react-navigation. Contribute to daheeahn/react-native-bolier-plate development..

coding-dahee.tistory.com

 

3/10 (화)

- react native animation (루빗)

gif로 변환하니 속도가 느려졌다,,

뿌-듯

관련 포스팅도 할 예정!

https://coding-dahee.tistory.com/139

 

React native animation with styled components

오늘 만들어 볼 것은 이것입니다! ... 곧 포스팅 예정

coding-dahee.tistory.com

 

3/8 (일)

- 노마드 코더 풀스택 인스타그램 클론 코딩 강의

#3.10 ~ 3.17

resolver 계속 하는 중. prisma 짱이다.

 

- graphql 핱시앱 기본 틀 짰다.

3/7 (토)

- 노마드 코더 풀스택 인스타그램 클론 코딩 강의

#3.10 ~ 3.17

resolver 계속 하는 중. prisma 짱이다.

3/6 (금)

- 노마드 코더 풀스택 인스타그램 클론 코딩 강의

#3.7 ~ #3.9

 

- node 설치, 자바스크립트 배열, map 가르쳐줌

3/5 (목)

- 노마드 코더 풀스택 인스타그램 클론 코딩 강의

#3.3 ~ #3.6

3/4 (수)

- 구글맵 연동

project: 약국 재고 현황

github: https://github.com/daheeahn/Pharmacy-Inventory

tistory: https://coding-dahee.tistory.com/130

 

[React Native] react-native-maps 구글맵

- 환경: RN 0.61.5 - 라이브러리 https://github.com/react-native-community/react-native-maps - 설치 https://github.com/react-native-community/react-native-maps/blob/master/docs/installation.md i..

coding-dahee.tistory.com

- rn 보일러 플레이트

github: https://github.com/daheeahn/react-native-bolier-plate

tistory: https://coding-dahee.tistory.com/132

 

[React Native] Bolier Plate 보일러 플레이트 코드

https://github.com/daheeahn/react-native-bolier-plate daheeahn/react-native-bolier-plate react native bolier plate with react-navigation. Contribute to daheeahn/react-native-bolier-plate development..

coding-dahee.tistory.com

- 푸시알림 안드로이드 반복알림 버그 해결

project: roubit

tistory: https://coding-dahee.tistory.com/131

 

[React Native] react-native-push-notification local notification 안드로이드 알람이 멈추지 않을 때

- 사용 라이브러리 https://github.com/zo0r/react-native-push-notification - 환경 RN 0.61.5 - 버그 안드로이드 설치 따라하고, local notification을 실행시켜 봤는데, 알림이 멈추지 않고 계속 왔다. Android..

coding-dahee.tistory.com

 

2020년 3/3 (화)

- Nfc 태깅

project: roubit

tistory: https://coding-dahee.tistory.com/127

 

[React Native] NFC 스캔 - 안드로이드

[사용 라이브러리] https://www.npmjs.com/package/react-native-nfc-manager react-native-nfc-manager A NFC module for react native. www.npmjs.com [환경] RN 0.61.5 1. 라이브러리 설치 # RN >= 0.60 npm i..

coding-dahee.tistory.com

- floating button

project: roubit

library: https://github.com/mastermoo/react-native-action-button

 

 

 

출처: https://mingos-habitat.tistory.com/34 [밍고의서식지:티스토리]