악깡버👩🏻‍🌾

[Javascript] 비동기 API 호출 (async/await, fetch)

예시 코드 1. index.html 게시판 - Main # 제목 작성자 작성일시 조회수 {{ board.boardId }} {{ board.title }} {{ board.userName }} {{ board.regDt.date | makeDateStr(".") }} {{ board.readCount }} test 글쓰기 HelloPOST 2. main.js function init() { console.log("===init==="); } init(); async function test() { console.log("===test==="); } function getData(url) { return fetch(url).then(function (data) { return data.json(); });..

[Javascript] 변수, 연산자, 조건문, 반복문, 함수, 배열

[SpringBoot] devtools란?

SpringBoot DevTools - SpringBoot에서 제공하는 개발 편의를 위한 모듈이다. spring-boot-devtools 의존성을 추가하여 사용한다. - 브라우저로 전송되는 내용들에 대한 코드가 변경되면, 자동으로 애플리케이션을 재시작하여 브라우저에도 업데이트를 해주는 역할을 한다. - 개발을 하다보면, 브라우저에 보여주는 내용(문구 등)도 수정하면 애플리케이션을 재시작해야한다. 때문에 devtools를 사용하면 브라우저에 보여주는 내용은 수정 시 자동으로 재시작해주어 브라우저에 업데이트 해주는 역할을 한다. 제공하는 기능 SpringBoot DevTools가 제공하는 기능은 크게 5가지이다. - Property Defaults - Automatic Restart - Live Reload..

[Spring Batch] 2. 스프링 배치로 Hello,World 실행하기 예제 (tasklet 사용)

스프링 배치는 설명만 읽고서는 이해하기 어려웠다. 코드로 직접 만들어보는 것이 이해하기 쉬울 것 같아 한 번 만들어보았다. 1. build.gradle에 MySQL dependency 추가 2. 데이터베이스 생성을 위한 docker-compose.yml 파일 생성 - 프로젝트의 최상단 위치에 생성 3. 설정을 위한 application.yml 파일 작성 4. docker 명령어를 통해 데이터베이스 구동 docker-compose up -d 1️⃣차 시도 했더니 위와 같은 에러 발생. 3306 포트가 충돌한 것, 아마 workbench를 켜두고 있어서 발생한 것 같다. netstat -aon 으로 확인해보니 3306 포트가 사용 중이었다. taskkill /f /pid 5952 했더니 엑세스가 거부되었다며..

[Spring Batch] 1. 스프링 배치(Spring Batch)란?

배치 (Batch) - 대용량 데이터 처리 작업을 자동화하는 것 스프링 배치 (Spring Batch) - 대용량 데이터 처리를 위한 경량화된 프레임워크 - 반복적인 작업을 수행하는 일괄처리(batch processing) 작업을 효율적으로 처리할 수 있다. 사용 목적 - 대용량의 데이터 일괄 처리 작업 - 특정한 시점에 스케쥴러를 통한 자동화된 작업 (ex. 푸시알림) 아키텍쳐 구조

[React] 8. Hooks

리액트 16.8에서 등장 Hook을 사용하면, 클래스컴포넌트의 기능을 함수 컴포넌트에서도 사용할 수 있도록 지원해준다! Hook 갈고리 원래 존재하는 기능에 갈고리를 걸어 원하는 시점에 정해준 함수가 실행되도록 함. use~ 로 시작함. 대표적인 Hook (use 어쩌구) useState() 훅 state를 사용하기 위한 Hook 함수컴포넌트에서 클래스컴포넌트처럼 state를 쓰기 위해서 사용함. ex) 값이 바뀔 때마다 렌더링이 되어야 한다. useState를 사용하여 값이 바뀔 때마다 렌더링이 되도록 함. state가 바뀔 때마다 렌더링되도록할 때 사용된다. 사용법 const [변수명, set함수명] = useState(state의 초기값); * 변수 각각에 대해 set함수가 따로 존재한다. useE..

[React] 7. State and Lifecycle

State 리액트컴포넌트의 상태. 리액트 컴포넌트의 변경 가능한 데이터. state는 개발자가 정의하여 사용한다. 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다. 자바스크립트 객체 Lifecycle 생명주기 리액트 컴포넌트의 생명주기 생성자 constructor 렌더링 render 언마운트 componentWillUnmount 상위컴포넌트에서 현재컴포넌트를 더이상 화면에 표시되지 않게 될 때 componentWillUnmount가 호출됨 컴포넌트가 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트되다가 사라진다. 알림 실습 React Developer Tools ( React Developer Tools ) 크롬 확장 프로그램 설치 후 사용 콘솔 대신 이것을 사용 No..

[React] 6. Components and Props

6. Components and Props Components A, B는 리액트 컴포넌트이다. 이러한 컴포넌트를 여러번 사용해서 하나의 페이지를 구성하고 있다. 작은 컴포넌트들이 모여 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여 전체 페이지를 구성한다. 리액트 컴포넌트를 하나의 함수라고 생각하면 쉽다. 하지만 자바스크립트의 함수와는 약간 다르다. 리액트컴포넌트는 속성Props를 넣으면 엘리먼트를 리턴한다. 객체지향의 의미와 비슷하다. Props prop이 여러 개인 것. prop : property, 속성 (엘리먼트를 만들기 위한 재료) 컴포넌트의 속성 자바스크립트 객체 컴포넌트 : props를 받아 엘리먼트를 리턴하는 함수 엘리먼트 : 보이는 부분 props : 컴포넌트에 전달할 정보를 담고 ..

[React] Error: react_dom_client__WEBPACK_IMPORTED_MODULE_1__.render is not a function

React로 간단한 Clock컴포넌트를 만들고 index.js 수정 후 렌더링을 하였더니 위와 같은 에러가 발생했다. render는 함수가 아니라고 한다. 원인 알고보니 ReactDOM.render는 React 18 이상 버전에서는 지원하지 않는다는 것이다. ReactDOM.render 대신 createRoot를 사용하라고 명시되어있다. 참고: https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis 나의 React 버전을 확인해보니 최신 버전인 18.2.0이었다. 원인을 찾았으니 해결하러 가보자. 해결 이제 ReactDOM.render를 createRoot로 바꿔보자. 렌더링이 정상적으로 되었다. 콘..

[React] 6. Rendering Elements

Elements 리액트 앱을 구성하는 가장 작은 블록들 자바스크립트 객체 형태로 존재. 컴포넌트 렌더링을 위해 모든 컴포넌트가 createElement를 통해 엘리먼트로 변환된다. Elements의 특징 immutable : 변경할 수 없는 (불변의) 엘리먼트 생성 후에는 children이나 attributes를 바꿀 수 없다. Root DOM Node 모든 리액트 앱은 단 하나의 Root DOM Node를 가지게 된다. 엘리먼트 생성 후 root div에 렌더링 렌더링 : ReactDOM.render() 사용 const element = 안녕 리액트!; ReactDOM.render(**element**, **document.getElementById('root')**); => ReactDOM.rentd..