구현 목표 웹 크롤링을 통해 공연장 목록 가져오기 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..
💡구현 목표 - 커스텀 공통 네비게이션헤더 컴포넌트를 생성하고 각 화면에서 타이틀, 아이콘이 다르게 렌더링되도록 하기 자식 컴포넌트로 아래 인자들을 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 폴더를 선택하고 아래..
크롤링이란? -웹 페이지에서 필요한 데이터를 추출해 내는 작업. BeautifulSoup 라이브러리 - HTML, XML, JSON 등 파일 구문을 분석하는 모듈. 웹 페이지를 표현하는 HTML 분석을 위해 사용함. pip install beautifulsoup4//설치 방법 목표 : 메인 화면에 실시간 주가 지수 정보를 출력해보기 API를 사용하는 방법은 앞서 뉴스 API를 활용해보았으므로 이번에는 BeautifulSoup을 활용한 웹 크롤링을 해보기로 했다. 1. 크롤링 준비 크롤링 방법은 매우 간단하다. 먼저 네이버 금융 페이지에 접속한다. https://finance.naver.com/sise/ 국내증시 : 네이버 금융 관심종목의 실시간 주가를 가장 빠르게 확인하는 곳 finance.naver.c..
지난번에 네이버 뉴스 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..
🤍 목표 기능 등록 : 할 일 추가 수정 : 완료되지 않은 할 일 항목 수정 삭제 : 할 일 삭제 완료 : 할 일 항목의 완료 상태 관리 기능 🤍 프로젝트 준비 프로젝트 생성 exop init react-native-todo //프로젝트 생성 cd react-native-todo npm install styled-components prop-types //프로젝트에서 사용할 라이브러리 설치 프로젝트에서 사용할 색상 정의 - theme.js export const theme = { background: '#101010', itemBackground: '#313131', main: '#778bdd', text: '#cfcfcf', done: '#616161', } 1.타이틀 만들기 import React f..
개인 공부 + 이직 위해 미니프로젝트 해보기!! 시작한지 일주일정도 됐고 뒤늦게 블로그에 차근차근 정리해보기로 한다. 학원 스터디원들과 해본 것 말고 혼자서 처음부터 끝까지 다 해보는 것은 처음인데 혼자 하니까 확실히 공부는 많이 되는 것 같다. 💡 프로젝트 소개 뮤지컬을 기반으로 한 커뮤니티 사이트 구축 뮤지컬의 대중적인 인지도가 높아지고 있는 반면에 뮤지컬 팬들이 자유롭게 소통할 수 있는 커뮤니티 사이트는 아직 마련되어 있지 않음. 👩💻 작업 목표물 (아직 경험이 없는) Open API 가져와서 쓰기 -> 신청, XML JSON 파싱, DB까지 넣기 뮤지컬 목록 출력 로그인, 회원가입 뮤지컬 평점 회원 게시판 💡 개발 환경 Java 11 IntelliJ SpringBoot + Thymeleaf My..