728x90

Programming 275

2023.09.20.WEB (useState, useRef, useEffect, useMemo, React.memo, useCallback, useReducer, Context)

useState: useState Hook은 함수 컴포넌트에서 상태를 관리하는 데 사용됩니다. 상태 변수와 해당 변수를 업데이트하는 함수를 반환합니다. useRef: useRef Hook은 DOM 요소 또는 다른 값을 참조하는 데 사용됩니다. current 프로퍼티를 통해 참조된 값을 유지합니다. useEffect: useEffect Hook은 부수 효과(side effect)를 수행하는 데 사용됩니다. 컴포넌트가 렌더링될 때마다 특정 작업을 실행하거나 정리할 때 사용합니다. useMemo: useMemo Hook은 계산 비용이 높은 계산 결과를 캐싱하고, 의존성 배열에 변화가 없는 한 결과를 재사용하는 데 사용됩니다. React.memo: React.memo 함수는 컴포넌트를 메모이제이션하여, 컴포넌트..

Programming/TMP 2023.09.20

Git - 이것저것 기억용

1. git clone으로 다른 컴퓨터에서 사용 - 터미널에서 작업 할 디렉토리로 이동하여 git clone으로 해당 repository를 복사해 온다. - 위와 같이 clone된 파일들이 보인다. * 새롭게 git init을 하여 새로운 저장소를 만들게 되면 기존의 저장소의 히스토리가 없기 때문에 관리가 복잡하기 때문에 주의하자 - branch - branch는 기존의 저장소 흐름에서 새로운 흐름을 새롭게 생성하여 독립적으로 개발 및 관리하기 위한 것이다. - 추후에 기존의 저장소 흐름에 합칠 수 있다. git branch "..." -> 새로운 브랜치 생성 git checkout "..." -> 해당 브랜치로 이동 - 위와 같이 새로운 브랜치를 생성하여 해당 브랜치로 이동하게 되면 새로운 흐름이 생성..

Programming/GIT 2023.09.20

React - React.js (JSX, State, Props)

- JSX - JSX는 JavaScript 파일 내에 HTML과 유사한 마크업을 작성할 수 있게 해주는 JavaScript용 구문 확장이다. - JSX의 규칙 1. 단일 루트 요소를 반환한다. Hedy Lamarr's Todos ... - 최상위 태그로 를 사용하였고 를 사용해도 된다. Hedy Lamarr's Todos ... - 빈 태그를 조각이라고 한다. HTML 트리에 흔적을 남기지 않고 항목을 그룹화 할 수 있다. 2. 모든 태그는 닫아야 한다. - 자체 닫는 태그인 같은 경우 와 같이 닫는다. 3. CamelCase를 사용한다. - 이름에는 대시를 포함하거나 class와 같은 예약어를 쓸 수 없다. - class는 예약어이므로 React에서는 해당 DOM 속성의 className 이름을 따서 ..

Programming/React 2023.09.15

React - React.js 기초 (설치 및 실행)

- React.js 1. 반복적인 코드를 줄 일 수 있다. - 컴포넌트와 방식을 사용하기 때문에 중복된 코드로 인한 산탄총 수술을 할 필요가 없어진다. - 즉, React는 Component 기반의 UI 라이브러리이다. 2. 선언형 프로그래밍으로 목적을 바로 나타낸다. - 프로그래밍 방식에는 명령형 프로그래밍 (대표적으로 jQuery)가 있고, 선언형 프로그래밍에는 (React)가 있다. - 선언형 플로그래밍은 목적을 바로 나타내기 때문에 코드의 목적이 간결하고 확실해진다. 3. V irtual DOM - DOM (Document Object Model)은 태그, 아이템이 코드에 추가 될 때마다 브라우저가 웹 페이지를 보여주기 위해 동작하는 흐름이 계속해서 반복적으로 일어난다. - React는 Virtu..

Programming/React 2023.09.14

React - Node.js 설치 및 사용 (기본, npm)

- Node.js - JS는 JS 엔진 위에서 동작하게 된다. 대표적으로 Chrome의 V8 JS 엔진이 대표적인 JS 엔진이다. - JS는 웹브라우저 안에서만 동작하고 html 문서 안에서 동작하게 된다. - Chrome의 V8 엔진을 브라우저가 아닌 어디서든 사용할 수 있도록 시작한 프로젝트가 Node.js이다. - 즉, Node.js JS의 실행 환경이고 JS엔진이며 어디서든 JS를 사용할 수 있도록 도와준다. + JS로 Web Server를 생성하는 것이 가능해졌다. - 결론적으로 React는 JS 파일을 쉽게 만들어내는 기술이다. React는 Node.js를 기반으로 실행된다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime bui..

Programming/React 2023.09.14

Javascript - 응용(동기&비동기, Promise, async&await, API 호출하기)

- 동기 & 비동기 - 동기 - Javascript는 코드가 작성된 순서대로 작업을 처리한다. - 이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다린다. - 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. - 비동기 - 싱글 쓰레드 방식을 이용하면서, 동기적 작업의 단점을 극복하기 위해 여러 개의 작업을 동시에 실행 시킨다. - 즉, 먼저 작성된 코드의 결과를 기다리지 않고, 다음 코드를 바로 실행한다. function taskA(a,b, cb) { // console.log("A 작업 끝"); setTimeout(() => { const res = a + b; cb(res); }, 3000); } function taskB(a, cb){ setTimeout(() =..

Programming/React 2023.09.11

Javascript - 기본, 응용(배열 내장 함수, Truthy & Falsy, 삼항 연산자, 단락회로 평가, 조건문 업그레이드, 비 구조화 할당, Spread 연산자) +a

- 함수 // 콜백 함수 사용 function checkMood(mood, goodCallback, badCallback) { // 함수 파라미터로 함수를 사용할 수 있다. if(mood === "good"){ // 기분 좋을 때 하는 동작 goodCallback(); } else { // 기분 안 좋을 때 하는 동작 badCallback(); } } function cry() { console.log("ACTION :: CRY"); } function sing() { console.log("ACTION :: SING"); } function dance() { console.log("ACTION :: DANCE"); } checkMood("sad", sing, cry); let person = { nam..

Programming/React 2023.09.11

Spring - @Builder, @Builder.Default, @NoArgsConstructor에 관하여...

* 결과부터 얘기하자면 1. @Builder + @Builder.Default 사용 - 디컴파일 부분을 확인해보면, page, size의 필드가 초기화 되어 있지 않고, builder에 의한 default에 의한 값이 설정되어 있어 파라미터로 값이 넘어오지 않으면 null이 주입된다. 2. @Builder만 사용 - 디컴파일 부분을 확인해보면 @Builder.Default가 빠지게 되면, 기본 필드에 설정한 1, 10 값이 필드에 그대로 남아 있는 것을 확인 할 수 있지만, 생성자 주입에 의해 파라미터로 아무런 값이 넘어오지 않으면 null로 초기화 된다. 3. @Builder, @NoArgsConstructor, @AllArgsConstructor 사용 - 기본 생성자가 생성되고, 매개변수로 아무런 값..

Spring - 문서화 (Rest Docs 문서)

- Rest Docs는 Spring MVC를 사용하는 REST API를 문서화하는데 도움을 주는 프로젝트이다. - Restful 서비스를 문서화하는 것은 주로 해당 리소스를 설명하는 것이다. HTTP 요청과 생성되는 HTTP 응답의 세부정도이다. - 빌드 구성 plugins {// 1. id "org.asciidoctor.jvm.convert" version "3.3.2" } configurations { asciidoctorExt// 2. } dependencies { asciidoctorExt 'org.springframework.restdocs: spring-restdocs-asciidoctor:{project-version}'// 3. testImplementation 'org.springfram..

Programming/Spring 2023.09.08
728x90