나아가는중

React Native React Navigation - Stack Navigation React Native 앱 개발에서 필수라고 할 수 있는 React Navigation 화면 전환 기능을 사용해 보겠습니다. React Navigation 아래 여러 종류의 Navigation이 있는데, 그 중 Stack Navigation입니다. React Navigation 설치 npm install @react-navigation/native React Native 프로젝트 폴더 터미널에서 위와 같이 입력을 해주시고요 Dependencies도 같이 설치 해주셔야 합니다. npm install react-native-reanimated react-native-gesture-handler react-native-sc..

React Native react-native-vector-icons 사용법 및 문제해결 React Native 개발을 하다보면 아이콘을 사용해야 할 일이 당연히 생기게 되는데요, 이번에 icon 사용방법에 대해 설명드리겠습니다, icon을 사용하려고 구글 검색을 하면 react-native-vector-icons가 가장 먼저 나타나게 되는데요, npm에서 react-native-vector-icons를 확인해 보면 주에 20만명이 넘을 정도로 많이 사용을 하고 있습니다. 자 이제 npm에 나와 있는 설명대로 설치를 진행해 볼 텐데요, 이 방법만으로 icon 사용이 가능해지는 것은 아닙니다. 실제로 사용할려고 하면 문제가 생기더라고요. 우선 npm 명령어를 사용하여 설치를 진행해 줍니다. npm inst..

React Native TextInput 키보드(keyboard) 안나타날 때 dosen't apper React Native 공부하고 있는 초보입니다. TextInput을 만들고 테스트하는데, 키보드가 안나타나서 당황했는데, 제가 찾은 해결방법을 공유해드리려고 합니다. 분명 위의 화면처럼 TextInput에 커서도 가있고, 키보드로 입력하는건 정상으로 작동이 되는데, ios simulator 내에 키보드가 안뜨더라고요 command(cmd) + k 를 해주시면 소프트웨어 키보드가 나타납니다. command(cmd) + shift + k 를 하드웨어 키보드에서 소프트웨어 키보드로 기본 설정이 변경됩니다. IOS simulator 상단의 탭에서 I/O 에서 keyboard를 보시면 현재 상태를 확인 및 변..

React Native 스토리북(Storybook) 스크린(Screen) 띄우기 앞서 React Native 프론트 개발을 컴포넌트들을 스토리북(Storybook)에 추가하는 방식들을 설명 드렸습니다. 스토리북을 사용해서 React Native 프로젝트를 실행하면 Storybook이 자동으로 실행되어 생성한 컴포넌트(component) 들만 확인이 가능했어습니다. 스토리북에서 컴포넌트들을 추가했으면 이제 스크린에 컴포넌트들을 띄워 앱을 만드는 방법을 해보겠습니다. 제가하는 방식이 정답이 아닐 수도 있고 맞을 수도 있는데, 제가 사용하는 방법을 보여드리겠습니다. 따라하시면 간편하게 화면(screen)을 띄울 수 있습니다. Storybook을 설치하고 실행할때에 프로젝트에 있던 App.js를 삭제해주었었습니..

앞서 스토리북을 사용해서 컴포넌트(components)와 스토리 추가하는 방법을 설명했습니다. 컴포넌트와 스토리를 아직 추가 하실줄 모르시거나 안하셨으면 아래 링크를 참조해 주세요~! https://dlee0129.tistory.com/6 [React Native] 스토리북(Storybook) 컴포넌트 & 스토리 추가하기 React Native 앱 프론트 개발을 할때 스토리북을 사용하면 편하게 개발할 수 있습니다. 사용할 컴포넌트들을 스토리북을 통해 보다 직관적으로 볼 수 있어 재사용이나 이해하기 좋은것 같습니다. dlee0129.tistory.com React Native 프론트 개발을 할 때에 스크린에서 를 생성해서 flex: 1 그리고 margin과 같은 스타일들을 추가해서 사용하는데, 스토리북에서..

React Native 스토리북(Storybook) 컴포넌트(component) & 스토리(story) 추가, 생성하기 React Native 앱 프론트 개발을 할때 스토리북을 사용하면 편하게 개발할 수 있습니다. 사용할 컴포넌트들을 스토리북을 통해 보다 직관적으로 볼 수 있어 재사용이나 이해하기 좋은것 같습니다. 이제 스토리북(Storybook)에 컴포넌트(component)랑 스토리(story)를 추가해 보겠습니다. 먼저 스토리북 설치와 기본 세팅이 안되신 분은 앞선 글을 보시고 설치 및 세팅을 해주시면 됩니다. 아래 링크를 통해 들어가시면 됩니다~! https://dlee0129.tistory.com/5 [React Native] 스토리북(StroyBook) 설치 React Native 프로젝트에 ..

React Native 프로젝트에 스토리북(StroyBook)을 설치해서 사용하는 방법 먼저 스토리북을 사용할 프로젝트에 스토리북(StoryBook)을 설치합니다. npx -p @storybook/cli sb init --type react_native 터미널에서 위의 명령어를 입력하여 설치를 합니다. 설치를 진행하는 도중 아래와 같은 문구가 나오면 y를 눌러 설치를 계속합니다. ? Do you want to install dependencies necessary to tun Storybook server? You can mannually do it later by install @storybook/react-native-server 설치가 완료되면 storybook 디렉토리가 추가가 됩니다. 스토리북에..

React Native MacBook M1 에뮬레이터(Emulator) 시뮬레이터(Simulaotr) 구동하기(run) 실행환경은 MacBook Pro M1 입니다. 먼저 Visual Studio Code를 실행시켜주고 프로젝트 폴더를 워크스페이스에 추가합니다. 방법은 상단의 File에서 Add Folder to Workspace... 을 선택하고 프로젝트 포더를 선택하여 Add해주면 됩니다, 자 이제, 상단의 Terminal에서 NewTerminal을 선택해줍니다. 먼저 터미널에서 아래 명령어를 실행시켜 주고 npm start iOS 실행 다른 터미널에서 아래 명령어를 입력하면 iOS simulator 시뮬레이터가 나타납니다. react-native run-ios 저는 터미널에서 Split Termin..

Visual Studio Code에서 간단하게 Github 연동하는 방법입니다. 옆의 Branch 브랜치처럼 생긴 아이콘을 선택해줍니다. Publish to Github 아이콘을 선택하면 아래 이미지와 같은 화면이 나타나게 됩니다. public or private 중에 원하는 공개 범위로 선택하여 선택해줍니다. 이제 Git 에 연동은 완료되었고, push를 해주면 됩니다, git push --set-upstream origin master Visual Studio에서 Terminal을 열어 위와 같이 입력해주면 완료됩니다, 위와 같이 Github에 제대로 잘 올라간것을 확인 할 수 있습니다.

React Native Visual Studio Code 프로젝트 생성 & 시작하기 M1 MacBook Pro에서 진행합니다. React Native 프로젝트를 Visual Studio을 이용해서 생성합니다. 위의 메뉴에서 Terminal를 선택하고 New Terminal을 열어줍니다. 하단에 터미널이 열리면 cd 명령어를 이용하여 원하는 생성위치로 이동합니다. 이제 원하는 버전의 React Native 프로젝트를 생성합니다. react-native init --version 0.63.3 MovingFoward 저는 0.63.3 버전의 MovingFoward 라는 이름으로 프로젝트를 생성하였습니다. 설치가 완료되면 상단의 File 에서 Add Folder to Workspace... 를 선택하여 생성한 ..