💡구현 목표 - 커스텀 공통 네비게이션헤더 컴포넌트를 생성하고 각 화면에서 타이틀, 아이콘이 다르게 렌더링되도록 하기 자식 컴포넌트로 아래 인자들을 prop로 전달하고 오른쪽 아이콘을 렌더링시킬지, 왼쪽 아이콘을 렌더링 시킬지 혹은 둘다 렌더링 시킬지 아래와 같이 조건문으로 분기 처리 전체 소스 import React from "react"; import {View, TouchableOpacity, StyleSheet} from "react-native"; import {useNavigation} from "@react-navigation/native"; import Icon from "react-native-vector-icons/Ionicons" import { defaultFontText as Te..
React Native FlatList 컴포넌트란 - 많은 양의 스크롤이 필요한 리스트 아이템을 보여줄 때 사용하는 리액트 네이티브 컴포넌트 - 데이터가 화면을 벗어났을 때 Scroll을 생성하여 벗어난 부분을 볼 수 있게 해주는 와 달리 FlatList는 더 많은 기능이 있다. - 데이터 길이가 가변적이고 데이터 양을 예측할 수 없는 경우 사용하기 적절하다. FlatList 사용법 - data, renderItem 두 가지 prop만 이해하면 된다. data는 리스트 소스를 담는 prop, renderItem은 data로 받은 소스들 그 각각의 item을 랜더시켜주는 콜백함수이다. - keyExtractor는 각각의 item에 고유의 키를 부여하는 역할을 수행한다. 나는 이번 프로젝트 UI중 여러 목록..
블로그에 글을 적지 않았던 동안 expo -> React Native 빌드 환경을 세팅하고 아예 리액트 네이티브로 개발할 준비를 했다. 리액트 네이티브 커스텀 폰트 적용 방법 리액트 네이티브에서 외부 폰트를 적용하려면 2가지 방법이 있는데 나는 직접 폰트 파일을 추가하고 설정하는 방법을 택했다. 1. 사용할 폰트 파일 다운 ios 폴더에 fonts 라는 폴더를 만들고 다운받은 ttf 파일을 넣어준다. 2. ios 폴더 경로에 [project name].xcodeproj 혹은 [project name].xcworkspace 를 통해 xcode를 실행한다. 3. 프로젝트 우클릭 후 Add Files to [프로젝트 이름] 을 클릭한다. 4. 아까 폰트 파일을 넣어두었던 ios/fonts 폴더를 선택하고 아래..
지난번에 네이버 뉴스 API로 수집한 뉴스 데이터를 메인 화면에 출력해 보려고 한다. 이번 프로젝트에서 사용할 부트스트랩 테마는 RuangAdmin 이라는 테마이다. https://github.com/indrijunanda/RuangAdmin GitHub - indrijunanda/RuangAdmin: RuangAdmin - Free Admin Control Panel Themes Based on Bootstrap 4 RuangAdmin - Free Admin Control Panel Themes Based on Bootstrap 4 - GitHub - indrijunanda/RuangAdmin: RuangAdmin - Free Admin Control Panel Themes Based on Bootst..
🗓️프로젝트 기간 2022. 11. 01 ~ 2023. 03 회사 인턴과 함께 프로젝트를 하기로 했고 인턴 끝나는 기간이 저때라 일단 이 정도로 잡아두었다. 💡프로젝트 주제 선정 주식 데이터를 활용한 웹 사이트 구축 ❓주제 선정 이유 ▪️파이썬을 활용한 프로젝트는 대부분 데이터 수집이 핵심 기능임. ▪️그중 가장 일반적으로 사용하는 데이터가 바로 주식 데이터임. ▪️나는 웹 프로그래밍 경험이 많지만 팀원은 웹 프로그래밍 경험이 없어서 공부를 하고 싶어함. ▪️주식 차트 + 경제 뉴스 기능이 핵심인 웹 사이트 구축을 해보자! 🛠️개발 환경 📁프로젝트 구조 Flask 구조로 구성 stockping ├── app │ ├── main//메인 화면 ││├── app.py │├── news//네이버 뉴스 API │..
백엔드 작업이 미뤄지고 있어서 프론트를 맡은 나는 화면 먼저 만드는 중~~ 🎨화면 설계도 구현 목표 광고 배너 이미지 슬라이더 만들기 React-native-image-slider-box 라이브러리 사용 1. 라이브러리 설치 npm install react-native-image-slider-box 2. 아직 DB에 이미지 데이터가 없어서 샘플 이미지를 assets/ 경로에 저장 후 불러왔다. const images = [ require('../../assets/banner/banner_sample1.png'), require('../../assets/banner/banner_sample2.png'), require('../../assets/banner/banner_sample3.png'), ]; 3. ..
리액트 네이티브 카카오 로그인 라이브러리를 사용하려면 sdk가 필요한데 내가 개발하고 있는 Expo 환경에서는 이 방식이 불가능하다. 대신 webview 라이브러리를 사용해서 소셜 로그인 구현이 가능하다. 📌React-native-webview npm install react-native-webview //웹뷰 설치 리액트 네이티브 웹뷰는 말 그대로 web 화면을 띄우는 데 사용하는 라이브러리이다. 웹뷰를 사용해서 소셜 로그인을 구현할 때에는 웹 개발 시 REST API로 동작했던 방식 그대로 리액트 네이티브에 적용해 주면 된다. 나는 이번 프로젝트에서 카카오 / 네이버 / 깃허브 로그인을 사용하기로 했다. 1. 카카오 앱키 발급 카카오 개발자 센터에서 애플리케이션을 등록하고 이중 REST API 키를 ..
리액트 네이티브(React-Native) 앱 만들기 프로젝트 🛠️개발 환경 프론트는 RN , 백은 Spring으로 구현 예정 FrontEnd BackEnd Tool 📁프로젝트 구조 잡기 일단은 구조만... 개발하면서 수정 예정 src ├── App.js ├── Theme.js // 프로젝트에서 사용할 색상 정의 ├── components // 컴포넌트 파일 관리 │ ├── Input.js │ ├── Button.js │ ├── CommentForm.js // 댓글 입력 form │ ├── CommentList.js // 댓글 리스트 │ ├── CommentItem.js // 댓글 한개 │ ├── CustomFont.js //폰트 설정 │ ├── Detail.js // 스터디 세부 정보 │ ├── Stud..