기존에 만들었던 index.html 파일에 OpenAPI(GET방식)를 붙여보자! 더보기 내 생애 최고의 영화들 영화 기록하기 영화URL 별점 -- 선택하기 -- ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ 코멘트 기록하기 닫기 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 미세먼지 코드를 지우고 새롭게 만들어 보자! 우선, 로드가 다 되면 실행되는 함수(구글링 해보기: javascript 로..

앱 개발 종합반 2주 차 숙제하기! sparta-myhoneytip-hyuk폴더 안에 pages 폴더를 만들어주고 그 안에 MainPage.js와 AboutPage.js 파일을 만들어준다. App.js 파일 코드 모두 복사한 후, MainPage.js에 붙여 넣기 한 다음 함수 이름을 MainPage로 바꿔주기! 그리고 MainPage.js의 코드 줄은 다음과 같이 변경! import data from './data.json'; 에서 import data from '../data.json'; App.js 코드는 다음 코드로 변경! import React from 'react' import MainPage from './pages/MainPage'; export default function App(){ ..

1주 차 때 배웠던 모듈 시스템(module system) 자바스크립트를 다루면서 여러 자바스크립트 파일이 있을 경우, 서로 다른 자바스크립트 파일에서 각 파일에 있는 함수를 불러오거나, 자바스크립트 파일 자체를 불러올 때 사용하는 모듈 시스템에 대해 배워봤다. //A.js 파일 //times, plusTwo 함수를 외부로 내보낼 준비를 한다. export function times(x) { return x * x; } export function plusTwo(number) { return number + 2; } //B.js 파일 //다른 자바스크립트 파일에서 다음과 같이 불러와 사용한다. import { times, plusTwo } from './util.js'; console.log(times(..

복습 겸, 공부 겸 메인화면을 다음 화면처럼 바꾸어보자! flex는 flex 1과 flex 5로 화면이 나눠져 있다면 flex 1인 곳은 6/1 그리고 flex 5인 것은 6/5로 이렇게 화면을 분할해서 생각하는 개념으로 화면의 구역을 나누는 기술이다. 상단에 '나만의 꿀팁' 제목 텍스트를 넣어야 된다. 목 바로 밑에 이미지를 해당 이미지를 넣어야 된다. 가운데 버튼은 횡(수평) 스크롤(ScrollView) 기능을 써서 좌우로 스크롤 가능하게 만들어야 된다. ScrollVoew 수직 스크롤은 그냥 쓰면 된다는 것을 알았지만 횡은 어떻게 해야 할까? 공식문서를 찾아보고, 수평은 영어로 Horizontal. 주어진 데이터는 문자이므로 Text 태그에 넣어야 된다. 설명 글은 긴데 3줄이 넘어가면, 말 줄임표..

처음부터 빈 페이지에 그림을 그려 나가려는 습관보다는 잘 짜여 있고, 존재하고 있는 좋은 코드들을 가져다가 잘 조합해서 쓰고, 이 코드들을 가지고 잘 응용하는 게 제일 중요하다. 화면의 영역(레이아웃)을 잡아주는 엘리먼트이다. 현재 App.js 상에서 View는 화면 전체 영역을 가진다. 우리는 이 View 엘리먼트로 다음과 같이 화면을 원하는 대로 분할할 수도 있다. 더보기 import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( ); } const styles ..

sparta-myhoneytip-hyuk 프로젝트를 VSCode 에디터로 열고, VSCode 에디터 내의 터미널을 연 다음 expo start 명령어를 실행! expo start로 열린 Expo 개발 도구 화면에서, 좌측의 QR 코드를 휴대폰 카메라로 비춘 뒤, 여러분 휴대폰에 설치했던 Expo 클라이언트 앱을 실행한다. App.js expo start로 시뮬레이터에 띄운 앱의 화면을 보면 App 함수에 기입되어 있는 글귀가 보이고 있음을 확인할 수 있다. "Open up App.js to start working on your app!" 간단히는 App.js는 앱의 화면을 그려주는 커다란 함수이다. 자세히는 App.js는 리액트 네이티브 라이브러리 그리고 Expo에서 제공해주는 기능들을 사용하여 화면을..

리액트 네이티브는 우리가 배운 자바스크립트 언어 하나로 안드로이드 앱과 iOS 앱 두 가지 모두 만들어주는 라이브러리이고 라이브러리는 개발할 때 사용하는 도구이다. 정말 리액트 네이티브로만 앱 개발을 진행하면, 자바스크립트 한 언어로 앱 개발이 가능하다 했지만 그렇지 않음을 알 수 있다. 특정 상황에선 안드로이드, iOS 각각의 폴더에 들어가 직접 코드를 만져야 하는 상황이 발생한다. 안드로이드, iOS 앱을 만들 땐 자바&코틀린과 Swift라는 언어를 써야 하는데, 그러면 언어 하나로 앱을 만들 수 있다는 취지에서 벗어나게 된다. 그래서 이에 좀 더 취지에 가깝게, 더 쉽고 빠르고 정말 안드로이드, iOS 개발 언어를 잘 몰라도 리액트 네이티브 앱 개발을 수월하게 도와주는 도구가 존재한다. Expo란?..

1주차 숙제로 완성한 팬명록에 날씨 api 코드 삽입하기 날씨 api: http://spartacodingclub.shop/sparta_api/weather/seoul 아이유 팬명록 현재기온 : 00.0도 닉네임 응원댓글 응원 남기기 새로운 앨범 너무 멋져요! 호빵맨 새로운 앨범 너무 멋져요! 호빵맨 새로운 앨범 너무 멋져요! 호빵맨