전체 글

앱개발 3주차

복습 👉 내가 작성한 코드 import React from "react"; import { StyleSheet, Text, View, Image, TouchableOpacity, SafeAreaView, } from "react-native"; export default function DetailPage() { const tip = { idx: 9, category: "재테크", title: "렌탈 서비스 금액 비교해보기", image: "https://storage.googleapis.com/sparta-image.appspot.com/lecture/money1.png", desc: "요즘은 정수기, 공기 청정기, 자동차나 장난감 등 다양한 대여서비스가 활발합니다. 사는 것보다 경제적이라고 생각해 렌..

[React-native] Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`. 오류 해결방법

babel.config.js 파일에 해당 코드를 추가 module.exports = { ... plugins: ['react-native-reanimated/plugin'], ... }; 출처 [리액트 네이티브]Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`. 오류 발생 시 해결방법

앱개발 2주차 과제

기존에 만들었던 나만의 꿀팁 페이지는 MainPage.js 로 따로 빼서 Pages 폴더에 각 페이지들을 분리해서 렌더링할 수 있도록 준비한다. 그러면 App.js 에서 렌더링 하고자 하는 페이지를 pages 에서 골라서 import 해와서 렌더링 할 수 있다. 구현 import React from "react"; import { StyleSheet, Text, View, Image, TouchableOpacity, SafeAreaView, } from "react-native"; export default function AboutPage() { return ( HI! 스파르타코딩 앱개발 반에 오신 것을 환영합니다 많은 내용을 간결하게 담아내려 노력했습니다! 꼭 완주 하셔서 꼭 여러분것으로 만들어가시길..

앱개발 2주차

Expo 시작 설치 Expo 설치 전 설치되어 있어야 하는 것: Node & NPM 필수! +) yarn Expo 를 이용하기 위한 명령어 도구를 설치해준다. npm install -g expo-cli 컴퓨터에 Expo 를 설치해주었다면 개발한 앱을 바로 확인할수 있는 클라이언트 앱 Expo 를 핸드폰에도 받아둔다. 핸드폰에도 설치가 되었다면 Expo 계정을 만들어주자. (가입 링크) 이제 계정도 만들어주었다면 로컬에 Expo 계정을 세팅해보자! 이것도 터미널/cmd 창에서 입력해주면 된다. expo login ... expo 이메일(또는 아이디), 패스워드 입력란이 차례로 나오고, 차례대로 입력하면 로그인 성공! 생성 로그인까지 해주었다면 expo 명령어를 입력해보자. expo 시작하기 프로젝트 폴더에..

3주차 퀴즈 핑하면 퐁하기!

3주차 내용을 기반으로 핑을 입력하면 퐁하고 alert 를 띄우도록 만들어보자. mock api 만들기 : ~~번 포트로 API 요청을 보내기 위해 버튼 만들기 fetch 나 axios 로 "http://localhost:5001/ping" 으로 get 요청하기 버튼 눌러서 확인하기 db.json { "ping": { "answer": "pong" } } App.js import React from "react"; import axios from "axios"; function App() { const callSomethingAxios = () => { axios({ method: "get", url: "http://localhost:5001/ping", }).then((response) => { let..

리액트 2주차 과제

기능 1주차에서 만들었던 TIL 리스트를 TIL을 추가하는 /write 화면과 TIL 리스트가 보여지는 메인화면으로 나누어서 구현해보자. 이 때 /write 추가하기를 누르면 / 에도 추가되도록 리덕스로 붙여넣는다. / 에서 추가를 누르면 /write 으로 이동되도록 만든다. 구현 index.js에서 BrowserRouter 를 불러와서 App 컴포넌트를 감싸준다. import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); App.js에서 경로에 따라 보여질 화면을 라우팅 처리해준다. import { Routes, Route }..

리액트 심화 2주차

Hook 16.8 버전부터 새로 추가된 기능으로, 함수형 컴포넌트에서도 상태값을 관리하거나 그 밖의 여러 리액트 기능을 사용할 수 있게 하기 위해 만들어졌다. 규칙 1. 오직 함수형 컴포넌트에서만 쓸 수 있다. 👉 정확히는 React Function 내에서만! (리액트 함수는 리액트의 규칙을 따르는 함수 정도로 생각) 2. 컴포넌트의 최상위에서만 호출할 수 있다. 👉 반복문, 중첩문 내에서는 호출할 수 없다. 반복문, 중첩문 내에서 훅을 호춯하게 될 경우, 컴포넌트가 렌더링할 때 훅의 실행순서를 늘 동일하게 보장해줄수 없기 때문이다. (= 여기서 말하는 최상위는 return 되기 이전을 말한다. 물론, 반복문/중첩문도 포함되지X ) function App() { // 최상위 위치 const [text, ..

앱개발 1주차

앱 개발을 하려면 안드로이드는 Java & Kotlin 이라는 기술로 개발이 가능하고, iOS는 Swift 라는 기술로 개발이 가능하다. 안드로이드, iOS 각각 개발하는 것 👉 네이티브 앱 웹 사이트를 만들고 껍데기를 씌워 간단히 배포하는 것 👉 하이브리드 앱 네이티브 앱과 하이브리드 앱의 장점을 모아둔 것 👉 크로스 플랫폼 앱 리액트 네이티브(React-Native) 페이스북에서 만들고 지원하고 있으며, UI를 만드는데 특화되어 있는 리액트 라이브러리/프레임워크 기반으로 앱을 제작하는 기술이다. 리액트 라이브러리/프레임워크를 기반으로 다루는 기술인 만큼, "자바스크립트"로 개발이 가능하다. 필수 프로그램 안드로이드 앱을 배포하기 위해 필요한 안드로이드 스튜디오 iOS 앱을 마켓에 배포하기 위해 필요한..

Bundle

서로 참조관계가 있는 모듈을 모아서 하나의 파일로 묶는 것을 Bundle 이라고 한다. Webpack 은 이렇게 모듈을 모아서 번들링 해주는 역할을 해준다 하여 'Module Bundler' 라고 불린다. Bundle 2개의 js 파일을 bundle.js 라는 하나의 파일로 만들어서 사용 👉 모듈들의 의존성을 안전하게 유지시키면서 하나의 파일로 만드는 과정 const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' } } ... Bundle 이 중요한 이유 모든 모듈을 로드하기 위해 검색하는 시간이 단축된다..

모듈(Module)

모듈 정의 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태 Module 사용 시 코드의 재사용성이 증가한다. 코드의 관리가 편해진다. 코드를 모듈화하는 기준이 명확해야 한다. 표준 모듈 모듈을 사용하기 위해서는 모듈을 인식하는 Module system 과 모듈을 다루는 키워드가 제공되어야 한다. Module System CommonJS (Node.js) ESM (ECMAScript 2015~) Module Keywords 가져오기 - 모든 객체를 참조하는 형태 내보내기 - 1. 한 곳으로 내보내기 2. 개별적으로 내보내기 CommonJS 가져오기: require (모듈의 경로) 내보내기: module.exports module.exports = {...} : 내보낼 값들을 한 객체 안에 할..

리액트 1주차 과제

기능 인풋에 입력받은 값을 추가하기 버튼을 누르면 왼쪽 TIL 리스트에 추가된다! 구현 제출용으로 App.js 하나에 보이도록 인라인으로 작성하였다. useRef 를 이용해서 선택하고 싶은 DOM에 ref 값을 설정 해서 해당 DOM 이 가리키는 .current 값을 받아와서 추가해줄 수 있도록 했다. 입력받은 값을 useState를 이용해서 배열에 넣어주어 상태관리를 해주었고, 이 배열 속에 있는 값을 map을 돌면서 화면에 붙여주도록 했다. 이 때 map을 사용할 경우 고유한 key 값을 주도록 메시지가 뜬다. 리액트 엘리먼트들은 누가 누구인지 알게 해주는 암묵적인 키 값을 가지고 있다. (기본적으로 랜덤으로 생성) 가상돔에서는 무언가가 변경되면 변경된 애들만 변경하려고 한다. 이 때 기본적으로 랜덤..

리액트 심화 1주차

렌더링 엔진 동작 브라우저가 화면을 그리는 렌더링 엔진 동작 과정 파싱 단계: DOM 트리와 CSSOM 트리를 만든다. 렌더 트리 단계: DOM과 CSSOM을 묶어서 렌더 트리를 만든다. 레이아웃 단계: 렌더 트리에서 각 노드가 어디에 어떻게 그려져야 하는지 모양을 계산한다. 페인트 단계: 계산한대로 화면에 엘리먼트들을 배치한다. 성능 최적화 성능 최적화는 기본적으로 적은 비용과 빠른 작업 속도가 중요하다. DOM을 조작할 때 비용이 드므로 성능을 올리고 싶다면 렌더링 엔진 동작 과정에서 레이아웃과 페인트 단계에서 드는 연산을 줄이는 것이 중요하다. 연산비용을 줄이기 위해서는 변경된 내용이 생길 때 마다 렌더 트리 전체를 뒤지기 보다는 변경된 내용만 연산을 하도록 작업한다. (더티 비트 시스템) *더티 ..