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

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

StreamStream은 데이터를 담고 있는 저장소(컬렉션)가 아니다.Functional in nature, 스트림이 처리하는 데이터 소스를 변경하지 않는다.스트림으로 처리하는 데이터는 오직 한번만 처리한다.무제한일 수도 있다. (Short Circuit 메소드를 사용해서 제한할 수 있다.)중개 오퍼레이션은 근본적으로 lazy하다.손쉽게 병렬 처리할 수 있다..parallelStream()을 사용하면 JVM이 병렬처리parallelStream을 사용한다고 무조건 빨라지는 것이 아니니 적절히 사용해야함스트림 파이프 라인0 또는 다수의 중개 오퍼레이션 (intermediate operation)과 한개의 종료 오퍼레이션 (terminal operation)으로 구성한다.스트림의 데이터 소스는 오직 터미널 오..

사내에서 필요한 도구를 Chrome Extension으로 만들어봤었는데 Desktop Application 형태로 만들려면 어떤 도구가 적합할까 생각하다가 찾았던 Electron.notion에 메모했던 내용을 블로그로 옮겨본다.  기본적으로 npm 설치가 선행되어야함 프로젝트 시작하기1. 적당한 경로에 작업 폴더를 생성2. 작업 폴더에서 npm init 명령어 실행3. 명령어 실행 후 설정 값들을 입력할 때 다른 값들은 기본 값을 사용하되 entry point는 main.js로 입력Electron Application에서 main.js를 entry point로 사용하는 것은 많은 튜토리얼에서 사용하는 관습Electron Application은 두 가지 주요 프로세스로 구성됨 (Main / Renderer..