The Earth Man

내가 만드는 앱은 사용자의 개인 기록을 저장하는 기능이 있다. 이를 위해서 로그인 기능을 만들려고 한다. SignInPage.js에서 'Email SignIn' 버튼을 누르면 'doSignIn' 함수가 실행된다. Email SignIn 아래는 'doSignIn' 함수이다. Input 부분이 비어있으면 비어있다고 알려주는 기능을 넣었다. const doSignIn = () => { console.log(email); console.log(password); if (email == '') { setEmailError('Email is required'); } else { setEmailError(''); } if (password == '') { setPasswordError('Password is requ..

- React-Native에서 제공하는 Animation 기능 링크: https://reactnative.dev/docs/animated - 미리 구현을 해놓은 library 링크: https://github.com/oblador/react-native-animatable cmd에서 아래와 같이 설치 후 사용하면 된다. yarn add react-native-animatable - 또 다른 library 도구들 링크가 있는 사이트 주소: https://blog.bitsrc.io/top-5-animation-libraries-in-react-native-d00ec8ddfc8d

TabNavigator 기능 넣기 navigations 폴더에 TabNavigator.js 파일 생성 tool 설치: "yarn add @react-navigation/bottom-tabs" import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; 아래와 같이 탭으로 만들고 싶은 페이지들을 Tab.Screen 태그 안에 넣는다. 그러면 StackNavigator.js에 있었던 위의 세가지 페이지들을 지워주고 대신 TabNavigator을 페이지화 시켜준다. TabNavigator 자체가 하나의 페이지인 것이다. TabNavigator 안에 MapPage, FavoritesPage, MyMainPage 가 들어있는 상태 Official..

등산용 모바일 앱을 만들려고 한다. *Note* (Windows) - nvm v12 or v16 사용: "nvm ls" - cmd에서 Expo 도구 명령어를 사용할 수 있는 도구 다발을 전체 다 설치: "npm install -g expo-cli" 1) Creating Project Windows Terminal: "expo init 프로그램이름" enter(expo 프로그램 생성): "blank a minimal app as clean as an empty canvas" *Note* 'prettier' 설치 App.js 파일 위치에 '.prettierrc' 파일 생성 파일 안에 아래 코드 작성하고 저장 {"semi": true, "singleQuote": true} 공식문서 참조 가능 *Note* js..

1. Paging을 쉽게 도와주는 외부 Library, React Navigator: https://reactnavigation.org/docs/getting-started/ Navigation basic library 설치 yarn add @react-navigation/native Additional Library 설치 expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view 2. 앱에서 Component들을 페이지화 하는 Navigator Library가 바로 Stack Navigat..

앱개발 플러스 1주차 숙제이다. component를 이용하여 counter 프로그램 만들기. MinusButton.js, PlusButton.js 두개의 component를 만들고, 'setState' 함수를 이용하여 버튼을 누를 때마다 숫자가 증가 혹은 감소하도록 하였다. App.js import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { StyleSheet, View, Text } from 'react-native'; import MinusButton from './components/MinusButton'; import PlusButton from './components/PlusBut..

filter 함수를 이용해서 '포도'만 들어있는 list 구현해 보기. let fruit_list = ['사과','감','감','배','포도','포도','딸기', '포도','감','수박','딸기'] let podo_list=fruit_list.filter(fruit=>fruit == '포도') console.log(podo_list);

딸기가 총 몇 개인지 알 수 있는 방법. 다음 두 가지 방식의 결과는 같다. 첫 번째는 기존의 방식, 두 번째는 React에서 잘 쓰는 방식. 첫 번째, let fruit_list = ['사과','감','감','배','포도','포도','딸기', '포도','감','수박','딸기'] let count = 0; for(let i=0; i { if(fruit_list[i]=='딸기'){ count+=1; } }) console.log(count);

스파르타 코딩클럽 팬이 된 것 같다. 그동안 여러 다른 이벤트에 참여했었는데, 이번 무료 특강 이벤트는 좀 특별한 것 같다. 무료로 웹페이지 만들기 강의를 듣고 나면 이벤트 참여가 된다고 한다. 강의력이 정말 좋아서 이미 웹페이지를 만들 줄은 알지만 기본은 튼튼할 수록 좋기에 복습하기에 정말 좋은 기회였다. 또한 강의 내용 뿐만 아니라 재밌는 소재로 강의가 진행되기 때문에 쉬지 않고 한번에 좌르륵 수강했는데요 전혀 지루하지 않았다. 이번 무료강의에서는 기본적인 CSS, HTML에 대해 배웠다. 사실 나는 거의 복습이었다. 그런데 듣다보면 예전에 했던것인데 잊어버렸던 것들도 새록새록 기억이 나게되고 몰랐었는데 새롭게 알게된 부분들도 있었다. 특히 CSS 부분에서! 가장 기억에 남았던 부분은 카카오맵을 활용..

스파르타 웹개발 종합반 Project Challenge의 기간이 총 11일인데 벌써 7일 째이다. 이제 figma 이용해서 웹 디자인 짜고 어울리는 글꼴을 정한게 다인데 벌써 절반의 시간이 지났다니 앞으로 남은 5일 동안 번듯한 웹사이트를 만들 수 있을까 의문이 들었다. 속도를 좀 내야만 했다. 9월 10일(금) 전에 figma를 통해 디자인 한 웹페이지는 6페이지였다. 맨 처음 입구 역할을 하는 페이지는 제목과 버튼 두 개로 구성되어 있어 상대적으로 간단하여 팀원 중 한 분이 첫 페이지와 Best recipe 추천 페이지를 같이 하기로 했다. 그래서 나를 포함하여 다른 팀원들은 한 사람당 한 페이지를 맡아서 html과 css로 뼈대를 우선 만들기로 했다. 내가 맡은 페이지는 Detailpage.html..