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

컴포넌트에 데이터를 전달하는 방법컴포넌트를 호출하는 곳에서 아래와 같이 컴포넌트에 초기 값을 전달할 수 있음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..

함수를 파라미터로 넘겨 활용할 수 있다?Function값을 하나 받아서 하나의 값을 리턴하는 형태R apply(T t)package learn;import java.util.function.Function;public class Plus10 implements Function { @Override public Integer apply(Integer integer) { return integer + 10; }}//이렇게 클래스를 만들어서 사용할 수도 있고Plus10 plus10 = new Plus10();System.out.println(plus10.apply(1));//아래와 같이 람다식으로 요약해서 사용할 수 있음.Function plus10 = (i) -> i + 10;함..