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

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로 대..

Playwright를 사용하기 위해 짧게나마 notion에 정리내용을 블로그에 옮김 async함수를 비동기 실행하도록 해줌 return promiseawait비동기 함수 앞에 붙여 호출할 경우 비동기 함수를 동기 형태로 사용할 수 있음await 은 뒤에 있는 함수의 결과를 대기함//일반 함수function hello() { return "hello";}//async를 붙이면 promise를 반환하는 비동기 객체가 됨async function helloAsync() { return "hello async";}console.log(hello()); console.log(helloAsync()); //return promisehelloAsync().then((res) => { console.log(re..

Playwright를 사용하기 위해 짧게나마 notion에 정리내용을 블로그에 옮김 Truthy : 참 같은 값Falsy : 거짓 같은 값//조건 식에 빈 문자열 a를 넣으니 false로 인식해서 FALSE가 출력됨let a = "";if (a) { console.log("TRUE");} else { console.log("FALSE");}//조건 식에 비어있지 않은 문자열 a를 넣으니 true로 인식해서 TRUE가 출력됨let a = "string";if (a) { console.log("TRUE");} else { console.log("FALSE");}이 처럼 Javascript에서는 조건문에 boolean 형식이 아닌 변수를 넣어도 참이나 거짓으로 인식되는 속성이 있음.실제로 boolean..