$$config title: 김용준 공부 LOG keywords: - IT $$ # 22.07.21 - 스프링 10개 듣기 강사님꺼 - 노마드 코더 2개 이상 듣기 - 배운거 복습 # 22.07.19 - 레이어드 아키텍쳐 다 듣기 - 노마드 코더 2개 이상 듣기 - 배운거 복습 # 22.06.19 - 4단계 백준알고리즘 . .평균은 넘겠지 ```java import java.util.HashMap; import java.util.HashSet; import java.util.Scanner; public class Main { public static void main(String[] args) { Scanner input = new Scanner(System.in); int[] Number = new int[10]; HashSet Number_Hash = new HashSet(); for(int i = 0; i {return li key ={index}{el}}li); // react에서 key의 index를 추가하면 빠른 연산을 한다. // setTimeout(() => { // // arr.push(7); //[1,2,3,4,5,6] 불가능 // setArr([...arr,arr.length+1]); // //1second 주기로 추가가(7,8,9,10) 된다. // },1000) // return <>{arr.join(', ')}; return <>{arrs}; } ReactDOM.render(, document.getElementById("root")); ``` - React chapter 12 ■ 데이지UI 로드, 데이지UI를 사용하시려면, 테일윈드도 필요합니다. - CSS강의 ``` a + div { display:none; } a:hover + div { display:block; } display - none : 없어진다 - inline : 글자화, 너비최소축소, 가로 -inline :너비 마진 태그 적용 x(a, 글자) -inline-block -block: 블록화, 너비최대확대, 세로 ``` ``` ul,li{ margin:0; padding:0; list-style:none; } body{ text-decoration:underline; } a{ color:inherit; text-decoration:none; } .menu-1{ text-align:center; } .menu-1>ul{ background-color:#dfdfdf; display:inline-block; padding:0 10px; border-radius:5px; } .menu-1>ul>li{ display:inline-block; width:200px; } .menu-1>ul>li>a{ padding:10px; display:block; } .menu-1>ul>li:hover>a{ color:white; background-color:black; } ``` # 22.06.14 - 리액트 chapter 11장 ```java console.clear(); import React, { useState } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; let AppCallCount = 0; function App() { AppCallCount++; console.log(`App이 ${AppCallCount}번 실행됨!`); const [no, setNo] = useState(0); const increaseNo = () => { setNo(no + 1); // no +1 => 1 바로 랜더링이 되지않는다. 함수로 선언할 경우 no의 값을 더한후 랜더링 후 다시 함수를 재호출한다. setNo((no) => no + 5); setNo((no) => no + 5); setNo((no) => no + 5); } return ; } ReactDOM.render(, document.getElementById("root")); ``` ``` console.clear(); import React, { useState } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; function App() { const [ages, setAges] = useState([1, 2, 3]); const onClick = () => { setAges((ages) => [...ages, ages.length + 1]); setAges((ages) => [...ages, ages.length + 1]); setAges((ages) => [...ages, ages.length + 1]); }; return ; } ReactDOM.render(, document.getElementById("root")); ``` ``` console.clear(); import React, { useState } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; let AppCallCount = 0; function Sub({ setAges }) { const onClick = () => { setAges((ages) => [...ages, 10, 20, 30]); setAges((ages) => [...ages, 40, 50, 60]); }; return (

); } function App() { const [ages, setAges] = useState([]); return (

_{나이들 : {ages.join(", ")}}

); } ReactDOM.render(, document.getElementById("root")); ``` - 리액트 chapter 10장 ```java console.clear(); import React, { useState } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; import classnames from "https://cdn.skypack.dev/classnames"; function App() { const [actived, setActived] = useState(false); //const className = 'w-[150px] h-[150px] ' + (actived ? 'bg-red-500' : 'bg-blue-500'); const className = classnames( "w-[150px] h-[150px]", "flex items-center justify-center", "font-bold text-white", "select-none", "rounded-2xl", {"bg-red-500":actived}, {"bg-blue-500":!actived}, ); return ( <>

setActived(!actived)} className={className}> 안녕하세요.

); } ReactDOM.render(, document.getElementById("root")); ``` # 22.06.13 - 리액트 chapter 9장 ```java script console.clear(); import React, { useState } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; function ProductListItem({ imgNo, name: productName, productPriceFormatted }) { /* // 방법 1 const { imgNo, name, productPriceFormatted } = props; const productName = name; */ /* // 방법 2 const { imgNo, name:productName, productPriceFormatted } = props; */ return ( <>

{productName}

{productPriceFormatted}원

); } function App() { return ( <>

); } ReactDOM.render(, document.getElementById("root")); ``` - 리액트 chapter 8장 ```java script console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; function App() { const border = '10px solid red'; const [popupVisible, setPopupVisible] = useState(true); return <> {popupVisible && } ////popupVisible이 참이면 실행 {popupVisible ||}//popupVisible이 거짓이면 실행 // 위 두줄을 한줄로 축약 해서 사용이 가능하다 ex) {}

{popupVisible &&

} ; } ReactDOM.render(, document.getElementById("root")); ``` - 리액트 chapter 7장 ```java script console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; function App() { const [no,setNo] = useState(0); const noIs8multiple =<>

{no %8 == 0 && (8의 배수입니다.)};// 8로 나눈 나머지의 값이 0이(&&연산자의 효과로인해) 될때 출력이 나온다. const noIs8notmultiple =<>

{no %8 == 0 || (8의 배수가 아닙니다.)}; // 8로 나눈 나머지의 값이 0이(||연산자의 효과로인해) 될때 출력이 안나온다. const noIsEvenDiv =<>

{(no %2) == 0? 짝수입니다.:홀수입니다.}; return <> 숫자 : {no}

{noIsEvenDiv} {noIs8multiple} {noIs8notmultiple} ; } ReactDOM.render(, document.getElementById("root")); ``` - 리액트 chapter 6장 ```java script console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; function App() { const [num, setNum] = useState(0); var timeoutID = setTimeout(() => setNum(num + 1), 1000); // num 은 1초 인터벌 간격으로 증가한다. const puase = () => clearTimeout(timeoutID); const resume = () =>{ timeoutID =setTimeout(()=> setNum(num +1),1000)};// setTimeout을 하고 일시정지를 누를시 멈추지 않는 현상이 존재 => 이것을 고치기 위해 timeoutID라는 변수에 저장을 따로 해야된다. return <> 숫자 : {num}

; } ReactDOM.render(, document.getElementById("root")); ``` # 22.06.12 - 리액트 chapter 3 ```java console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; var AppCallCount = 0; function App() { AppCallCount++; console.log(`안녕 ${AppCallCount}`); const [name, setName] = useState("paul"); return ( <> { console.log(`e.target.value : ${e.target.value}`); setName(e.target.value); }} value={name} // defaultValue="123456" // value="4" /> / 현재 이름 : {name} ); } ReactDOM.render(, document.getElementById("root")); //value는 제어되는 요소, defaultValue는 비제어 요소이다 ``` - 리액트 chapter 2 ```java console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; var AppCallCount = 0; var Sub_1_CallCount = 0; function Sub1() { Sub_1_CallCount++; console.log(`Sub_1_Callcount가 ${Sub_1_CallCount}번 실행됨`); const [sub_no_1, setSub_no_1] = useState(0); return (

); } function App() { AppCallCount++; console.log(`App이 ${AppCallCount}번 실행됨!`); var no1 = 0; const [no2, setNo2] = useState(0); return ( <>

); } ``` ReactDOM.render(, document.getElementById("root")); # 22.06.10 ``` java 1. 5*5 coding - AppTest package com.exam.exam1; import org.junit.jupiter.api.Test; import static org.junit.jupiter.api.Assertions.assertEquals; public class AppTest { @Test public void _5_곱하기_5(){ assertEquals(25,new Calc().calc("5 * 5")); } } -Calc package com.exam.exam1; import org.jetbrains.annotations.NotNull; public class Calc { public int calc(String s) { return 25; } } ``` ## TDD형식으로 코딩을 작성 - JUNIT을 설치 해야된다. - 실패하는 테스트를 만든다. - 할 수 있는 단순한 방법을 사용하여 테스트를 통과하게 만든다. - 이후 단순한 방식을 계산식을 이용하여 처리할 수 있도록 정리한다. ```AppTest(1) package com.exam.exam1; import org.jetbrains.annotations.NotNull; public class Calc { public int calc(String s) { int num1, num2; String[] str = s.split(" [*] "); num1= Integer.parseInt(str[0]); num2= Integer.parseInt(str[1]); return num1*num2; } public int calc_1(String s) { int num1, num2, num3; String[] str = s.split(" [+*] "); num1 = Integer.parseInt(str[0]); num2 = Integer.parseInt(str[1]); num3 = Integer.parseInt(str[2]); return num1 + num2 * num3; } public int calc_2(String s) { int num1, num2, num3, num4; String[] str = s.split(" [+*/] "); num1 = Integer.parseInt(str[0]); num2 = Integer.parseInt(str[1]); num3 = Integer.parseInt(str[2]); num4 = Integer.parseInt(str[3]); return num1 + num2 * num3 / num4; } public int calc_3(String s) { int num1, num2, num3; String[] str = s.split("[ ([*+]) ]"); num1 = Integer.parseInt(str[1]); num2 = Integer.parseInt(str[4]); num3 = Integer.parseInt(str[6]); return (num1+num2)*num3; } } package com.exam.exam1; import org.junit.jupiter.api.Test; import static org.junit.jupiter.api.Assertions.assertEquals; public class AppTest { @Test public void 계산기(){ Calc calc = new Calc(); int value = calc.calc("5 * 5"); assertEquals(value,25); System.out.printf("%d\n", value); int value_1 = calc.calc_1("5 + 5 * 5"); assertEquals(value_1,30); System.out.printf("%d\n", value_1); int value_2 = calc.calc_2("5 + 5 * 5 / 5"); assertEquals(value_2,10); System.out.printf("%d\n", value_2); int value_3 = calc.calc_3("(5 + 5)*5"); assertEquals(value_3,50); System.out.printf("%d\n", value_3); } } ``` ```java - pom.xml -> JUNIT 추가 org.junit.jupiter junit-jupiter-api 5.8.2 test - Main package com.exam.exam1; public class Main { public static void main(String[] args) { Calc calc = new Calc(); calc.SetNo1(10); calc.SetNo2(20); int sum_result = calc.calcPlus(); System.out.printf("result: %d", sum_result); } } - Calc package com.exam.exam1; public class Calc { int SetNo1; int SetNo2; public void SetNo1(int SetNo1) { this.SetNo1 = SetNo1; } public void SetNo2(int SetNo2) { this.SetNo2 = SetNo2; } public int calcPlus() { return SetNo1 + SetNo2; } } ``` ## intelij 단축키 -Alt + 1 : 프로젝트 뷰 토글 -Alt + 방향키 : 좌 우 프로젝트로 이동 -Ctrl + 마우스클릭 : 선택한 클래스로 이동 -Ctrl + Shift + R : 파일명으로 파일검색 -Ctrl + Shift + F10 : 실행 -Ctrl + Shift + F : 소스코드 정리 -Ctrl + 1 : 오류가 나는 부분(붉은색으로 표시됨)에 마우스 커서 두고 Ctrl + 1 누르면, IDE가 해결책을 제시해 줌 ## 웹페이지 - 웹페이지 = HTML + CSS + JS - HTML : 문서의 내용 - CSS : 문서의 꾸밈(디자인) - JS: 인터렉션 - <> 태그는 여는 태그과 닫는 태그으로 구현, element가 존재(div, section, nav, article) 무속성 - inline-block => 너비 : 저비가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. => 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. => 배열방향: 한줄에 최대한 여러개 - block => 너비 : 너비가 지정되어 있지 않으면, 최대한 유연하게 늘어난다. => 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. => 배열방향: 한줄에 무조건 1개 - 주소와 새로운창에 열기위해 target을 사용 // 같은의미 a[href ="#"][target="_blank"]{내용} - text-align : 태그 안에 포함되어있는 글자 Text 위치를 선정한다 - text-decoration : 텍스트 아래 글자 효과를 제거 할 수 있다 - hover : 마우스가 위에 올려진 상대를 지정해서 조정한다 ## vscode - 자동 정렬이 안될경우 F1 눌러서 format 을 실행 후 prettier을 실행 - li x 4 => 적용할라면 F1 눌러서 emmet 을 적용 - Alt + 좌 이전 행동위치로 이동 / 더블킬릭 원하는 이동 장소로 이동 - ctrl + p 원하는 장소로 이동 ## StaticImage 좋은점 - 리랜더링이 없다. - 알아서 적절한 크기로 설정 - 내부적으로 저장 후 빠르게 실행 ## 노드 - 파일들 5개 / 노드도 5개