정적 컨텐츠 (Static Content)서버에서 하는것없이 /static폴더 위치한 정적 파일 그대로 클라이언트에 제공 방식.스프링 부트 정적 컨텐츠 기능. http://localhost:8080/hello-static.html 요청요청 서버가 스프링에 던진 후 우선 스프링 컨테이너에서 매핑된 컨트롤러있는지 확인 (일단 여기선 간단하게 씀)*없으면 resources/static에  있는 해당 정적파일(hello-static.html) 있으면 그대로 반환*컨트롤러가 정적 파일보다 우선순위 높음MVC와 템플릿 엔진 (MVC + Template Engine)서버에서 동적으로 HTML을 생성하여 클라이언트에게 반환하는 방식.서버에서 템플릿 엔진(Thymeleaf,JSP)을 사용해 데이터를 동적으로 HTML에 ..

배웠던 Typescript을 React에 적용해보자*Typescript 모른다면 -> https://bbbpp.tistory.com/category/TypeScript*설치 -> https://bbbpp.tistory.com/163 컴포넌트의 Props 타입정의//Square.tsxconst SquItem = styled.div` height: 100px; width: 100px;`function Square() { return( );}//App.tsxfunction App() { return ( {/* TypeScript가 Props 타입 몰라 오류*/} );} TypeScript에 Square컴포넌트의..

useMemo 값의 연산 결과를 Memoization하여, 불필요한 재계산을 방지하는 훅 * Memoization?동일한 값을 리턴하는 함수를 반복적 호출할 경우맨 처음 계산 할때 메모리에 저장해뒀다 필요할때마다 다시 계산이 아니라 메모리에서 꺼내 재사용하는것 왜 필요한가?함수형 컴포넌트도 함수.함수형 컴포넌트 렌더링 ->  컴포넌트 함수 호출 -> 내부 모든 변수 초기화만약 state 와 props의 변화로 인해 수많은 렌더링을 거친다면 렌더링 될때마다 변수가 초기화가 됨function calculate(){ return 1}function MyComponent(){ const value = calculate(); return {value}} 렌더링 마다 value 변수 초기화, cal..

useRefReact에서 DOM 요소나 값을 저장하고 변경하더라도 컴포넌트가 재렌더링되지 않도록 하는 훅const ref = useRef(value)console.log(ref) // {current:value]useRef를 부르면 ref 오브젝트를 반환const ref = useRef("hi")console.log(ref) // {current:"hi"] 용도1. 저장공간State와 비슷하게 어떠한 값을 저장해주는 저장공간으로 사용변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 유용( 불필요한 렌더링 방지 성능 최적화) *State와 다른점State 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화Ref 변화 -> 랜더링X -> 변수들 값 유지∴ State 변화로 렌더링해도 Ref값 유지됨사용..

Class class User{ //생성자 매개변수에서 접근제어자(public, private, protected, readonly) 사용시 //속성 선언과 초기화 ts 자동으로 처리 constructor( private name:string, private number:number, public nickName:string ){}}const aaa = new User("김고양",123,"애옹")aaa.name; //에러private : 선언 클래스 내에서만 접근 가능protected : 선언 클래스, 자식 클래스에서 접근 가능public : 모든 클래스에서 접근 가능class User { private name: string; private number: number; publi..

Call Signatures이름 위에 커서를 올렸을 때 뜨는 매개변수 타입 정보와 리턴 타입 정보const add = (a:number,b:number) => a+b;===> 분리type Add = (a:number,b:number) => number; //Call Signaturesconst add:Add = (a,b) => a+b; // 타입 별칭 사용 Over Loading하나의 함수가 복수의 Call Signature를 가질 때 발생- 매개변수의 데이터 타입이 다른 경우type Add = { (a: number, b: number): number, (a: number, b: string): number}const add: Add = (a, b) => { if(typeof b === "strin..

기본타입 12가지string / number/ boolean / object / array /tuple / enum / null / undefined / any / void / never Tuple(튜플)열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식const user: [string, number, boolean] = ["hi", 1, true]  undefined, null, anyany: 모든 타입 (최대한 줄일것!)undefined: 선언X 할당Xnull: 선언O 할당X unknown모든타입 허용, 안전성을 강화한 any 타입why?타입 검사 없이 사용을 허용하지 않음let a:unknown🚫 let b = a + 1//타입 확인 후에만 조작 가능if(typeof a === 'n..

타입 선언1. 타입 추론변수만 생성 초기값 할당 시 TS가 타입 추론let a = "hi" //string 추론a = 1 //에러2. 타입 명시let a : boolean = 'x' //에러let c : number[] = [1,2,3]간단할 경우 추론! 타입 별칭특정 타입이나 인터페이스를 참조할 수 있는 타입 변수//string 타입 사용const name: string = '김야옹';//타입별칭 사용type Man = string;const name:Man = '김야옹'; type Words = { [key: string]: string; //property이름모르지만 타입만 알때};type Health = 1 | 5 | 10; //특정값 제한도 가능 함수에서는?type User = { nam..

간단한 애니메이션 : CSS, Styled-Components의 keyframes 사용-> 참고  : https://bbbpp.tistory.com/161  (keyframes 잘 모른다면)복잡한 애니메이션: React Transition Group, Framer Motion 같은 라이브러리 사용.-> 참고 : 주소 수정!!! 사용기존 방식//app.css@keyframes rotate { 0% { transform: rotate(0deg); } 100%{ transform: rotate(360deg); }}.rotateDiv { animation: rotate 1s infinite;}//App.jsimport './app.css'function App..

설치1. node.js 설치   1-1.버전확인node -v   1-2. 안깔려있다면 설치https://nodejs.org/en/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org2. TypeScript 설치1. 전역 설치npm install -g typescriptts -> js로 변경 컴파일러 제공 패키지-설치 확인tsc -v 2. 로컬 설치(특정 프로젝트만)  플젝 폴더 이동후npm init -ynpm install typescript --save-dev(npm i typescript -D)package.json 생성(프로젝트 관리나 향후 ..