초보개발자의 소소한 기록

본 게시글에서는 Header component 추가를 통해, 화면의 상단을 모두 동일하게 변경해 본다. * 앞으로 style 을 꾸미기 위해 사용할 styled-components module 추가 yarn add styled-components 1. coponents 폴더에 Header.js 파일 생성 및 코드 작성 # components > Header.js import React from "react"; import styled from 'styled-components'; const Header = ({ title }) => { return ( {title} ); } export default Header; const Wrapper = styled.View` height: 100px; flex-d..

본 게시글에서는 Bottom Tabs Navigator 를 이용해서, 아랫 부분 클릭 시 화면이 전환되도록 구성해 본다. * 가장 먼저 화면을 바로 구성하기 전에, 어떤 홈화면을 만들고 각 화면들로 어떻게 이동할 지 선택 필요 * Expo App을 실행하면 가장 먼저 App.js 파일이 실행되면서 구성된 내용이 화면에 나옴 * 화면 전환 관련 내용을 router 폴더 내에서 구성하도록 셋팅 1. App.js 실행 --> router/index.js 이동하도록 구성 # App.js (수정 전) import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-na..

본 게시글에서는 개발을 시작하기 전, 앞으로 생성할게 될 파일들을 카테고리화 하기 쉽도록 미리 폴더를 구성해 본다. * 처음 프로젝트를 시작하면 어떤 것부터 구성 해야할 지 모르는 경우 발생 * 복잡한 프로젝트를 완성한 후 아래처럼 구성했을 시 굉장히 편하다는 것을 느낌 # 기본 구성 1. src 폴더 생성 후, 하위 폴더로 components / config / router / screens / utils 생성 및 assets 폴더 이동 * 역할 - scr : 카테고리의 최상위 폴더 - assets : icons, images 등 - components : button, text 등 각 기능을 담당하는 것 - config : domain 등 환경설정 관련 내용 - router : screens 을 보여..

* React Native를 처음 시작 할 때, 2가지 방식으로 개발이 가능함 - react-native cli - expo cli 본 게시글에서는 차이점은 생략하고, 빌드/배포가 쉬운 expo-cli로 개발 환경을 셋팅해 본다. 1. expo-cli 설치 (https://reactnative.dev/docs/environment-setup) npm install -g expo-cli * 권한 이유로 아래와 같이 에러가 나면 맨 앞에 [sudo] 를 붙임 sudo npm install -g expo-cli 2. 프로젝트 폴더를 생성하고, 해당 폴더 내에서 아래 명령어 실행 expo init dev-weather // dev-weather는 프로젝트명으로 변경 가능 * 초기 셋팅을 선택할 때 blank를 ..

개발에 대한 기본지식이 전혀 없는 상태에서, React native 앱개발자가 되기 위해 공부하는 과정을 기록. 우선 노마드코더 니꼴라스의 강의를 무작정 따라하면서 날씨앱을 만들어 보았다. https://nomadcoders.co/courses # 최종 결과물 # 개발시 참고한 사이트 *react-native https://reactnative.dev/ ​ *expo https://docs.expo.io/ ​ * Weather API https://openweathermap.org/ ​ * Location API by IP https://ip-api.com/ ​ * UI gradients https://uigradients.com/ ​ # 코딩한 파일 내용 1) App.js import React fro..