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

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

app.getProgress().getStudyDuration()과 같이 호출 할 때 progress가 null인 경우 NullPointerException가 발생하는 것이 흔한 일이었음그래서if (progress ≠ null) {}과 같이 null 체크를 해줘야했음.public Progress getProgress() { if (this.progress != null) { throw new IllegalStateException(); } return progress;}위와 같이 null 인 경우 에러를 throw 하기도 했었으나 좋은 사용 예는 아님Java8에서 부터는 비어있는 값이 있을 경우 Optional을 이용해서 처리할 수 있음public Optional getProgresS() { retur..