Written by Jieun

👩🏻‍💻 내 마음대로 Today I Learned

React, Next

이전 글에서 프로젝트 생성과 실행을 해봤으니 이번엔 핵심 컴포넌트와 스타일링 방법에 대해서 알아보려고 한다. 1. Core Components import { StyleSheet, Text, View } from "react-native"; export default function App() { return ( Hello World!!!!! ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", alignItems: "center", justifyContent: "center", }, }); App.js에는 react-native에서 불러온 StyleSheet와 Text, View 내장 컴포넌트가 있고 ..

2023. 11. 25.

React, Next

1. React Native 시작하기 앱을 실제 기기에서 실행해보고 싶다면 앱스토어나 구글플레이에서 Expo Go를 설치하면 된다. 설치했으면 로컬에서 구축한 Expo앱을 기기에서 확인할 수 있는데 먼저 터미널에 npm start를 입력한다. 그렇게 하면 QR코드가 보이는데 Expo앱 또는 아이폰에 경우 카메라를 켜서 QR코드를 스캔하면 된다. 제대로 실행되고 있는지 확인하기 위해 App.js에 있는 Text를 바꾼 후 저장하면 폰에서도 문구가 바뀌는 걸 확인할 수 있다. 2. 로컬 개발 환경 설정하기 그렇다면 아이폰 사용자가 안드로이드로, 안드로이드 사용자가 아이폰으로 화면을 볼 수 없을까? 안드로이드는 Android Studio(https://developer.android.com/studio?hl=..

2023. 11. 20.

React, Next

1. React Native란? 이름에서 볼 수 있듯이 React와 관련이 있지만, React Native는 React와는 별개인 라이브러리이다. React는 인터페이스를 구축하기 위한 JavaScript 라이브러리로 주로 웹 개발에 사용된다. React Native 또한 JavaScript 라이브러리지만, 플랫폼 대상이 웹 브라우저가 아닌 iOS와 Android이기 때문에 모바일 앱을 구축할 수 있다. 2. React Native 원리 const App = (props) => { return ( Hello! ); }; 위 코드는 React를 사용해봤다면 익숙할 JSX코드이지만, React와는 다른 점이 있다. 바로 return 문에 있는 와 요소들! 이 요소들은 React Native가 각 플랫폼의 네..

2023. 11. 18.

React, Next

이전 글 보기 이전에 필드 테스트까지 했다면 이번엔 필드에 입력 후 로그인 버튼을 누르면 가짜 로그인 프로세스를 만들려고 한다. https://jsonplaceholder.typicode.com/ JSON placeholder는 가짜 REST API를 제공하며, DB와 연동하지 않아도 HTTP메서드(GET, POST, PUT, DELETE 등)를 지원한다. 그래서 JSON placeholder에서 user 데이터 중 아이디가 1인 user 정보를 받아오려고 한다. https://jsonplaceholder.typicode.com/users/1https://jsonplaceholder.typicode.com/users/1 1. API 테스트 npm install axios 설치하기 * CRA에서 axios..

2023. 11. 11.

React, Next

1. 요소들이 컴포넌트에 렌더링 되었는지 확인 먼저 src/components/login/Login.jsx 로그인 컴포넌트를 만들고 src/components/Login.test.js 테스트 파일 만들기 (스타일은 미리 적용해놓은 상태) // Login.jsx import React from "react"; const Login = () => { return ( 로그인 ); }; export default Login; // Login.test.js import { render, screen } from "@testing-library/react"; import Login from "./login/Login"; test("email input should be rendered", () => { render..

2023. 11. 10.

React, Next

1. React Testing Library create-react-app은 기본적으로 테스트를 위한 환경을 제공한다. 그래서 터미널에 npm start 말고 npm test를 입력하면 아래처럼 감시모드가 실행이된다. (종료는 q) src 폴더 안에 App.test.js 파일이 생성됐을텐데 이게 바로 npm test를 실행했을 때 실행되던 테스트파일이다. import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(link..

2023. 11. 7.