구현 목표 웹 크롤링을 통해 공연장 목록 가져오기 cheerio 사용하기 1. cheerio 설치 npm install cheerio //사용 시 import 방법 cosnt cheerio = require('cheerio'); 2. 웹 크롤링 cheerio 사용법 const html = await getHTML(); const $ = cheerio.load(html.data); 3. 최종 코드 공연장 목록을 오브젝트 배열로 담은 후 const getTheaterList = async () => { const html = await getHTML(); const dataArr = []; const $ = cheerio.load(html.data); const $child = $(".theater-righ..
정처기 끝났으니까 다시 시작.... 카카오랑 조금 다르기도 하고 버전 올라가면서 조금 수정된 부분이 있어서 겨우겨우 성공.. 리액트는 많아도 리액트네이티브+스프링부트+네이버 로그인 참고 소스는 지인짜 찾기 힘들어서 겨우겨우 했다ㅠㅠ 1. ⭐️Frontend 1. 네이버 개발자센터 등록 설명 생략 2. 리액트네이티브 네이버 로그인 라이브러리 설치 npm install @react-native-seoul/naver-login --save // RN version >= 0.6.0부터 Auto Linking 적용, // ios 경우 추가적으로 Cocoapods 설치 필요 cd ios && pod install https://github.com/crossplatformkorea/react-native-naver-..
아무리 여러 번을 해봐도 로그인은 늘 어렵다.....ㅎㅎㅎ 그리고 아직 친해지지 못한 맥북 + 리액트 네이티브 환경에서 하려니 엄청난 에러를 겪고 겨우 성공한 카카오 로그인... 시작!! ⭐️Frontend 0. 카카오 개발자센터 애플리케이션 설명 생략 1. 리액트네이티브 카카오 로그인 라이브러리 설치 npm install @react-native-seoul/kakao-login //RN 0.60.X 이상부터는 Auto linking 지원 pod install https://github.com/crossplatformkorea/react-native-kakao-login GitHub - crossplatformkorea/react-native-kakao-login: react-native native m..
💡구현 목표 앱 메인 화면에 당월의 뮤지컬 포스터를 슬라이더로 출력하기! 1. KOPIS 공연 API 인증키 발급 아래 링크에서 인증키를 발급하고 OPEN API의 자세한 항목을 확인할 수 있다. https://www.kopis.or.kr/por/cs/openapi/openApiList.do?menuId=MNU_00074 공연예술통합전산망 예술경영지원센터 운영, 공연 예매 정보 집계 및 DB, 예매상황판, 공연통계 등 제공. www.kopis.or.kr:443 2. 리액트 네이티브 fetch + KOPIS 공연 API 가져오기 Fetch란? 리액트네이티브에서 네트워크 통신을 도와주는 api (fetch와 axios가 있음.) axios와 달리 라이브러리를 import하지 않아도 사용할 수 있다. Prom..
💡구현 목표 - 커스텀 공통 네비게이션헤더 컴포넌트를 생성하고 각 화면에서 타이틀, 아이콘이 다르게 렌더링되도록 하기 자식 컴포넌트로 아래 인자들을 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 폴더를 선택하고 아래..
백엔드 작업이 미뤄지고 있어서 프론트를 맡은 나는 화면 먼저 만드는 중~~ 🎨화면 설계도 구현 목표 광고 배너 이미지 슬라이더 만들기 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. ..