도각도각 필기노트

React.js 에서는 object를 수정하면 안된다. 수정하고 싶을 땐 기존 object에 요소를 추가/삭제한 새로운 object를 반환해야 한다. 객체 추가할 때 두 가지 방법으로 코드를 작성할 수 있다. key: 작성 일시, value: todo list의 할 일 인 Object를 선언하고, 요소를 추가하는 방법을 공부해보려 한다. 배열로 하는 것에 익숙한데, Object로도 연습하고 정리해보고자 한다. 1. Object Assign const newToDos = Object.assign({}, toDos, {[Date.now()]: { text, done: false }); Object.assign() - JavaScript | MDN Object.assign() 메서드는 출처 객체들의 모든 열거..

TouchableOpacity TouchableOpacity - Expo Documentation Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React. docs.expo.dev Press Here TouchableOpacity 태그로 감싼 컴포넌트를 터치할 경우 해당 컴포넌트가 잠시 투명도를 갖게 된다. onPress 외에도 onPressIn, onPressOut, onLongPress 속성을 추가할 수 있다. activeOpacity={0.6} 투명도를 설정할 수 있다. TouchableHighlight TouchableHighlight -..

Component - 화면에 렌더링되는 것 - return () 내에 태그 형태로 작성됨 API - 운영체제와 소통 - JS 코드로 작성됨 더보기 기본 App.js 코드 import { StatusBar } from 'expo-status-bar'; 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', }, text : { fo..

1. Build pack 정의 CRA(Create-React-App) 로 만든 리액트 앱은 Build Pack을 세팅해주어야 한다. Settings > BuildPacks에서 추가해준다. node.js를 선택해주고, 아래 링크는 직접 add 해주자. https://github.com/mars/create-react-app-buildpack.git 2. Package.json 수정 engine으로 node, npm의 권장 버전을 명시해주고, scripts 안에 heroku-prebuild, heroku-postbuild도 명시하였다. "version": "0.1.0", "private": true, "engine": { "node": "16.x", "npm": "8.x" }, "scripts": { "st..

React Native 작동 원리 React Native 앱 = 그림의 모든 structure + JS 코드(Javascript, Markup/Styling) = Bridge를 통해서 JS 코드가 운영체제와 통신을 할 수 있도록 하는 infra structure React Native = 인터페이스 : JS 코드(Javascript, Markup/Styling)와 운영체제(iOS, 안드로이드) 사이에 있는 인터페이스 React Native는 bridge를 통해 JS 코드를 운영체제에 전달해준다. 이런 면에서 React Native는 shell과 유사하다. 상세 작동방식 1. Event 2. Collect data and notify iOS, Andriod가 발생하는 이벤트들 수집 (ex. 화면 클릭) 3..

Introduction 결론부터 말하자면, 아래와 같은 이유들로 상태관리 라이브러리에 대해 반드시 공부해야겠다고 생각했다. 1. 여러 개의 component에 props를 반복 전달하는 것이 복잡하고 귀찮기 때문 2. context API보다 전역 관리 변수를 효율적으로 관리할 수 있다. 3. (이건 공부하다가 알게 된 것인데) subscribe로 변경사항이 생긴 컴포넌트만 리렌더링할 수 있다. - Redux가 필요한 이유 내가 생각하기에 Redux가 필요한 이유를 가장 간단하게 잘 설명하는 영상이다. React Hooks로 충분히 커버가 가능하다고 생각했던 나의 어리석음을 바로잡아 주었던 글. React Hooks와 Redux에 대한 개념을 바로잡기에 좋은 글이다. [번역] React Hooks가 Re..

Typescript와 React를 이용한 프로젝트를 진행중이다. 현재 초기 개발단계인데 Naver map api를 사용할 일이 생겼다. 그래서 그 사용법과 현재까지 맞닥뜨린 문제(CORS 에러)들을 정리하고자 한다. navermaps 패키지 설치 우선 React/Typescript 에서 네이버 맵을 사용하기 위해 typescript를 위한 navermaps 패키지를 설치한다. npm install --save @types/navermaps javascript를 사용할 경우 react-naver-maps 패키지를 설치해도 되는데, 해당 패키지에는 typescript 정의가 되어 있지 않아서 위 패키지를 설치해줘야 한다. index.html 에 script 추가 public/index.html 파일에서 bo..

프로젝트를 하던 도중 .mp4 영상을 삽입해야 했다. 평소 이미지 파일 삽입하던 대로 src/assets/ 폴더 아래에 videos 폴더를 만든 뒤 삽입하려 했으나 제대로 작동되지 않았다. 결국 구글링을 통해 https://stackoverflow.com/questions/60794257/react-js-react-player-how-to-play-local-video을 참고해서 영상을 성공적으로 삽입했었다. 해결책은 public 폴더에 videos폴더와 그 아래 영상들을 위치시키고, 필요한 곳에서 url='videos/video1.mp4' 을 통해 불러와 사용하는 것. 로컬로 실행할 땐 아무 문제가 없었기에 역시 스택 오버플로우가 짱이야 하면서 넘어갔었는데... 며칠 뒤 문제가 생겼다. 빌드가 제대로 ..