사과 냄새나는 IT이야기 TAESTORY,

React-Native 프로젝트의 Back-End를 개발하며, React-Native 개발자가 API 호출하는데 이슈가 있다고하여 직접 테스팅해보기 위해 React-Native 환경을 구축하며 정리한 내용 npx react-native 실행 시TypeError: cli.init is not a function for react native 에러가 발생하는 경우 충돌 오류라react-native-cli와 react-native의 재설치가 필요함install new react-native globalnpm uninstall -g react-native-cliinstall new react-native globalnpm install -g react-native-clinpm install -g react-na..

React-Native를 특정 버전으로 init 하고자 하는 경우 --version 옵션을 활용npx react-native init reactNative --version 0.71.13

React-Native 프로젝트의 Back-End를 개발하며, React-Native 개발자가 API 호출하는데 이슈가 있다고하여 직접 테스팅해보기 위해 React-Native 환경을 구축하며 정리한 내용 여러가지 라이브러리들이 설치 되어야하는데 그 과정에서 충돌이 많음.cocoapods의 경우 gem으로 설치하는 가이드가 많아 gem으로 설치를 시도했으나계속 오류가 발생해서 ruby 버전을 변경해도 해결되지 않아 brew를 통해서 설치하였음.brew를 통해서 설치해도 문제 없어보임. sudo npm install -g react-native-clisudo gem install cocoapods#gem으로 cocoapods 설치 실패 시 homebrew로 설치brew install cocoapods#ru..

.env.development와 .env.production 파일을 구분하여 사용하는 것은 개발 환경과 프로덕션 환경에서 다른 설정을 적용하고 싶을 때 유용함..env 파일 설정.env.development: 개발 환경에서 사용될 환경 변수들을 정의. 개발 API 서버 주소나 로깅 레벨 등을 설정.env.production: 프로덕션 빌드에서 사용될 환경 변수를 정의. 운영 환경에 맞는 API 서버 주소, 트래킹 코드, 최적화 옵션 등을 설정두 파일은 프로젝트의 루트 디렉토리에 위치해야함.환경에 따라 파일 사용하기create-react-app을 사용하는 경우, 환경에 따라 자동으로 .env 파일을 사용개발 환경: npm start / yarn start를 사용하여 개발 서버를 시작, .env.develo..

컴포넌트에 데이터를 전달하는 방법컴포넌트를 호출하는 곳에서 아래와 같이 컴포넌트에 초기 값을 전달할 수 있음function App() { const number = 5; return ( );}컴포넌트에서는 인자로 받아서 사용이 가능함.import React, { useState } from "react";const Counter = (props) => { console.log(props); const [count, setCount] = useState(props.initialValue); const onIncrease = () => { setCount(count + 1); }; const onDecrease = () => { setCount(c..

State를 사용하려면 React를 import 해줘야함import React,{useState} from "react";컴포넌트는 상태가 변화하면 화면을 다시 그리는 Re-rendering 과정을 거친다.그에 따라 해당 함수가 다시 호출된다.컴포넌트는 State를 여러개 가질 수 있다.import React, { useState } from "react";const Counter = () => { //0에서 출발 //1씩 증가 //1씩 감소 //[상태의값, 상태변화메소드] = 함수(초기값); const [count, setCount] = useState(0); const onIncrease = () => { setCount(count + 1); }; const onDecrease =..

React에서 css class 사용 시 className 으로 attribute 이름을 사용CSS를 import 해서 사용import React from "react";import "./App.css";import MyHeader from "./MyHeader";function App() { let name = "테스트"; return ( 안녕 리액트 {name} React.js );}export default App;인라인 스타일로 CSS 사용import React from "react";import "./App.css";import MyHeader from "./MyHeader";function App() { let name = "테스트"; con..

React의 컴포넌트를 만드는데 사용하는 문법let test = "테스트";return ( {text} {1 + 2} {number % 2 === 0 ? "짝수" : "홀수"} );위 코드와 같이 { } 를 이용해 변수나 데이터를 넣을 수 있음.{func()} 처럼 함수를 호출할 수도 있으나 숫자나 문자열 처럼 화면에 표시할 수 있는 데이터 타입을 return해주면 화면에 해당 값을 뿌려주지만 그렇지 않은 경우 화면에는 아무것도 나타나지 않는다.닫힘 규칙여는 태그가 있으면 반드시 닫는 태그도 있어야한다최상위 태그 규칙취상위 태그 : 컴포넌트 최상위에 위치한 태그JSX로 컴포넌트를 만드려면 반드시 최상위 태그로 다른 태그들을 묶어줘야한다최상위 태그로 묶고 싶지 않다면 react fragment로 대..