🎈Element앱의 UI를 구성하는 가장 단위immutable 객체(불변)화면에 표시할 내용을 기술하는 단순한 객체이며, 실제 DOM 요소를 직접 만들지는 않는다.React.createElement() 함수로 생성되며, JSX를 사용하면 더 쉽게 작성 가능하다.const element = Hello, React!;아래 element는 화면에 Hello, React!를 표현하는 객체일 뿐, 아직 실제 DOM에 반영된 것은 아니다. 리액트는 이러한 엘리먼트를 ReactDOM.render() 혹은 useState, useEffect 등의 업데이트 과정에서 가상 DOM을 통해 실제 DOM으로 변환합니다. 🎈Component리액트 엘리먼트를 반환하는 함수 또는 클래스컴포넌트는 여러개의 엘리먼트들을 조합하여 재..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.🎈Componet재사용이 가능한 구성요소이다.HTML, CSS, 자바스크립트 로직 등을 포함하고 있다.사용하는 이유컴포넌트가 없다면 html 코드가 방대하고 복잡해져 유지보수가 어려워질 수 있다.오류 가능성이 줄어든다.코드를 재활용 하는 방식이기 때문에 한 부분에서 일괄적으로 수정이 가능하다.공통된 기능을 제공하는 유사한 코드가 묶여 작성되어 개발 과정이 단순해진다.각 컴포넌트들 마다 각 기능별로 관심사가 분리되어 작업된다.컴포넌트 저장 및 좋은 프로젝트 구조src - assets - components - Header - Header.jsx - Header.c..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 리액트는 무엇일까?사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리리액트는 자바 스크립트 라이브러리라서 재 로딩 없이 웹페이지와 페이지에 표시되는 사용자 인터페이스를 업데이트 가능하기 때문에 사용자에게 즉각적인 반응과 부드러운 전환 경험을 제공한다.자바 스크립트는 백그라운드에서 실행되기 때문에 로딩이 완료된 페이지를 재로딩 없이 새로운 데이터로 업데이트가 가능하다. 리액트가 자바스크립트 라이브러리라면 왜 자바스크립트가 아닌 리액트를 사용해야 할까?순수 자바스크립트만으로 구현하는 것 보다 쉽고 빠르게 구축하도록 도와주기 때문HTML 코드와 자바스크립트 코드..

SELECT a.TABLE_NAME '테이블명', b.ORDINAL_POSITION '순번', b.COLUMN_NAME '필드명', b.COLUMN_KEY 'KEY', b.COLUMN_TYPE '데이터길이', b.IS_NULLABLE 'NULL값여부', b.COLUMN_DEFAULT '기본값', b.COLUMN_COMMENT '필드설명' FROM information_schema.TABLES a JOIN information_schema.COLUMNS b ON a.TABLE_NAME = b.TABLE_NAME AND a.TABLE_SCHEMA = b.TABLE_SCHEMA WHERE a.TABLE_SCHEMA = '스키마명(수정하세요)' -- AND a.TABLE_NAME = '테이블명..

1. Test DB 생성 및 mariabackup 설치Test DB 생성 -- 데이터 베이스 생성 CREATE DATABASE IF NOT EXISTS test; USE test; -- 테이블 생성 CREATE TABLE IF NOT EXISTS test ( id INT AUTO_INCREMENT PRIMARY KEY, name VARCHAR(255) NOT NULL ); -- 데이터 추가 INSERT INTO test (name) VALUES ('John'), ('Alice'), ('Bob'), ('Emily'), ('Michael'); -- 데이터 확인 SELECT * FROM test;mariabackup 설치 //Centos sudo yum inst..

0. 들어가기 전1. 배경얼마 전 DB 보안점검을 하면서 보안 관련된 설정을 바꿨더니 db 재실행이 안되는 문제가 발생했다.운영 전인 DB 였고 테이블 생성, 수정 쿼리문도 다 가지고 있었기 때문에 기존의 마리아디비 자체를 밀고 재설치 후 DB 구축을 다시하였다.추후 중요 데이터나 사용자가 있었다면 데이터를 다 날리는 큰일이 일어났을 것이다.이를 계기로 데이터 백업에 대한 중요성을 느꼈으며 백업 작업을 하면서 공부하고 배운 그 과정을 기록하려고 한다.2. 환경os : Ubuntu 22.04.4 LTSdb : mysql Ver 15.1 Distrib 10.6.16-MariaDB3. 논리적 백업도구로 full-backup만 하는 이유우선 논리적 백업의 도구로 mysqldump 를 사용할 수 있다.mysqld..

0. 들어가기 전1. 배경얼마 전 DB 보안점검을 하면서 보안 관련된 설정을 바꿨더니 db 재실행이 안되는 문제가 발생했다.운영 전인 DB 였고 테이블 생성, 수정 쿼리문도 다 가지고 있었기 때문에 기존의 마리아디비 자체를 밀고 재설치 후 DB 구축을 다시하였다.추후 중요 데이터나 사용자가 있었다면 데이터를 다 날리는 큰일이 일어났을 것이다.상무님께서 데이터 백업작업을 요청하셨고 그 과정을 기록 하려고 한다.2. 환경os : Ubuntu 22.04.4 LTSdb : mysql Ver 15.1 Distrib 10.6.16-MariaDB2. 백업의 방식1. 풀 백업(Full Backup)전체 데이터를 백업 하는 형식으로, 3가지 방식 중에 백업 속도가 가장 느리다.일일 백업 파일이기 때문에 그날의 백업 파일..

0. 들어가기 전1. 배경얼마 전 DB 보안점검을 하면서 보안 관련된 설정을 바꿨더니 db 재실행이 안되는 문제가 발생했다.운영 전인 DB 였고 테이블 생성, 수정 쿼리문도 다 가지고 있었기 때문에 기존의 마리아디비 자체를 밀고 재설치 후 DB 구축을 다시하였다.추후 중요 데이터나 사용자가 있었다면 데이터를 다 날리는 큰일이 일어났을 것이다.상무님께서 데이터 백업작업을 요청하셨고 그 과정을 기록 하려고 한다.2. 환경os : Ubuntu 22.04.4 LTSdb : mysql Ver 15.1 Distrib 10.6.16-MariaDB1. 백업의 유형데이터베이스를 백업하는 유형에는 크게 물리적 백업과 논리적 백업 두 가지가 있다.물리적 백업은 실제 데이터 파일을 복사하고, 논리적 백업은 CREATE TAB..

이 글은 인프런에서 김영한 님의 "스프링 핵심원리 - 기본편"을 수강 후 공부한 내용을 정리한 게시글입니다. 부족한 부분이 있다면 언제든 지적 부탁드립니다. ✏️ 스프링일반적으로 스프링은 좁은 의미의 Spring Framework를 일컫는다. 그러나 넓은 의미에서의 스프링은 Spring 생태계를 의미한다. 스프링 생태계는 다음과 같이 다양한 프로젝트들을 포함하고 있다.스프링 프로젝트 종류프로젝트설명Spring DataData 연동을 위한 API를 제공, RDBMS와 NoSQL과 연동을 적은양의 코드로 처리 가능Spring Cloud마이크로 서비스 기반의 아키텍처에서 사용되는 모든 검증된 패턴을 구현Spring Security인증과 허가에 대한 기반 프레임워크를 제공하여 보안을 간단한 설정과 코드로 구현 ..

✏️ 스프링 프레임워크Java 기반 어플리케이션 개발을 지원하는 오픈소스 어플리케이션 프레임워크Core ContainerData Access/IntegrationWebAOP, Aspects, Instrumentation, Messaging, Test 1. Core Container서블릿의 생명 주기를 관리하는 서블릿 컨테이너와 비슷하게 bean의 생성과 관리를 해주는 컨테이너 역할을 한다. 설명모듈/아티팩트Spring CoreCore 모듈은 DI와 IoC 패턴을 적용할 수 있는 기본적인 클래스들을 포함하며 항상 직간접적으로 Spring Core에 대한 종속성을 가지게 된다.spring-coreSpring BeansBean 모듈은 모든 bean 객체의 생명주기를 관리한다..빈 팩토리(BeanFactory)..

✏️ 핵심 관심사항(core concer)과 공통 관심사항(cross-cutting concer) 핵심관심사항 예) 은행서비스, 계좌서비스 , 소비자 소비스 등등 공통관심사항(부가기능) 예)보안, 트랜잭션, 로그인 인증 ✏️ AOP (Aspect Oriented Programming - 관점 지향 프로그래밍) 핵심 로직과 부가 기능을 분리하여 애플리케이션 전체에 걸쳐 사용되는 부가 기능을 모듈화하여 재사용할 수 있도록 지원하는 것 기존 oop는 함수로 뺄 수 없는 공통적으로 처리하는 부가 기능 로직이 중복되는 한계가 있어 이를 해결하기 위해 AOP가 등장하게 되었다. 이런 로직을 어스펙트(Aspect)라는 모듈 형태로 만들어서 설계하고 개발하는 방법이다. 즉 핵심적인 기능에서 부가적인 기능을 분리하는 것..

✏️ H2 데이터베이스 자바 기반의 오픈소스 관계형 데이트베이스 관리 시스템 스프링 부트가 지원하는 인메모리 관계형 데이터베이스 인메모리 특징 : 검색이 빠름, 휘발성(전원이 꺼지면 데이터 삭제) 브라우저 기반의 콘솔 프로그램 적은 용량으로 설치 가능 Embedded mode(내장모드) & Server mode(서버모드) 지원 Embedded mode(내장모드) : Application 서버 실행 종료시 데이터 모두 휘발 Server mode(서버모드) : Application 서버 종료시에도 지속적으로 해당 데이터를 사용 로컬환경이나 테스트 환경에서 많이 사용됨. ✏️ 순수 JDBC JDBC(Java Database Connectivity) 자바에서 데이터베이스에 접속할 수 있도록 하는 자바 API J..

✏️ 스프링 빈(Bean) 빈(Bean)이란 스프링 컨테이너에 의해 재사용 가능한 소프트웨어 컴포넌트이다. 즉 스프링 컨테이너에 의하여 생성되고 관리하는 자바 객체를 뜻하며, 하나 이상의 빈(Bean)을 관리한다. Spring Framework에서는 ApplicationContext.getBean() 등의 메서드로 직접 자바 객체를 가져올 수 있다. IntelliJ 에서는 Bean 인 경우 아래 사진처럼 왼쪽에 아이콘으로 표시된다. 스프링에서 스프링 빈을 인지하는 2가지 방법 스프링은 약속되어 있는 어노테이션이 붙어있는 클래스를 자동으로 인지한다. @Component어노테이션이 붙어있다면, 스프링이 자동으로 인지할 수 있게 된다. → 컴포넌트 스캔을 이용한 방식 Bean Configuration File..

✏️ 일반적인 웹 어플리케이션 계층 구조 컨트롤러 : 웹 MVC의 컨트롤러 역할 서비스 : 핵심 비즈니스 로직 구현 리포지토리 : 데이터베이스에 접근, 도메인 객체를 DB에 정리하고 관리 도메인 : 비즈니스 도메인 객체, 예) 회원, 주문, 쿠폰 등등 주로 데이테 베이스에 저장하고 관리 ✏️ 테스트 케이스 작성 회원 레포지토리 메모리 구현체 테스트 package hello.hellospring.service; import hello.hellospring.domain.Member; import hello.hellospring.repository.MemoryMemberRepository; import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.a..

목차 1. 정적 컨텐츠 2. MVC와 템플릿 엔진 3. API ➡️ 정적 컨텐츠 정적 컨텐츠 : html 을 그대로 화면에 보여주는 것 mvc와 템플릿 엔진 : html을 변형하여 보여주는것 API : html이 아닌 데이터를 던져 주는 것 ➡️ MVC와 템플릿 엔진 HelloController.java @Controller public class HelloController { @GetMapping("hello-mvc") public String helloMvc(@RequestParam("name") String name, Model model) { model.addAttribute("name", name); return "hello-template"; } } url이 hello-mvc로 요청되면 he..

➡️ 프로젝트 생성 0. 사전 준비 : Java 11 설치, Java 17 설치, IntelliJ 설치 Spring Boot 2.3.x 를 사용할 경우는 Java 11을 Spring Boot 3.0.x 를 사용할 경우에는 Java 17을 설치해야 한다. 글에서는 11로 설치했다가 다시 17로 재설치 하였다... ㅠ 더보기 1. Java 버전 확인하기 cmd 창에 java -version 명령어를 입력하면 자바 버전을 확인 할 수 있다. 현재 자바 8을 사용하고 있음을 확인 했다. Java 11을 설치해보도록 하자. 2. Java 11 설치하기 www.oracle.com/java/technologies/javase-jdk11-downloads.html 위 링크에서 jdk-11.0.9 를 설치 하면 된다. ..

💭 간단한 웹 어플리케이션을 개발하며 스프링을 익혀보자 🔎앞으로의 과정 스프링 프로젝트 생성 스프링 부트로 웹 서버 실행 회원 도메인 개발 웹 MVC 개발 DB연동 - JDBC, JPA, 스프링데이터, JPA 테스트 케이스 작성

💭 컴포넌트 통신 방법에 대해 알아보고 props 속성을 통해 컴포넌트 통신을 실습해보자. ❗ 부모 컴포넌트와 자식 컴포넌트 아래 사진처럼 화면의 영역을 쪼개서 재활용 가능한 형태를 컴포넌트라고 한다. 컴포넌트들 간의 관계가 존재하며 하위 컴포넌트는 자식 컴포넌트, 상위 컴포넌트는 부모 컴포넌트라고 한다. 부모 컴포넌트에서 자식 컴포넌트로는 데이터(props)를 준다. 자식 컴포넌트에서 부모 컴포넌트로는 이벤트(event emit)을 준다. ❗ props속성을 이용하여 데이터를 자식 컴포넌트로 전달하기 props 는 부모 컴포넌트의 데이터를 전달하기 위한 속성 실습에서는 Root 컴포넌트에서 app-header 컴포넌트로 데이터를 전달해보았다. 결과 AppHeader 컴포넌트에서 propsdata : "..

💭뷰 컴포넌트가 무엇인지 알아보고 전역 컴포넌트와 지역컴포넌트의 차이에 대해 알아보자. ❗뷰 컴포넌트 화면의 영역을 구분하여 코드로 관리하는 뷰의 기능이다. 재사용성이 올라가고 빠르게 화면을 제작하기 위해서 컴포넌트로 화면을 관리한다. 컴포넌트 생성시 각 컴포넌트 간의 관계가 생성된다. 코드에서 인스턴스를 생성하면 개발자 도구 vue에서 Root 컴포넌트로 인식 개발자도구 ❗ 전역 컴포넌트 생성하기 Vue.component 를 사용하여 컴포넌트를 생성하게 되면 전역 컴포넌트를 생성된다. 코드 결과 app-header 컴포넌트가 Root 아래 추가 됨을 확인 할 수 있다. Root는 상위 컴포넌트 app-header는 하위 컴포넌트이다. ❗ 지역 컴포넌트 생성하기 전역 컴포넌트로 사용할 경우 사용하지 않는..

💭 Vue.js 에 CDN을 추가하여 인스턴스를 생성하고 생성자 함수를 작성하여 보자. ❗Vue.js CDN으로 시작하기 CDN : 콘텐츠 전송 네트워크(Content Delivery Network)로 지리적으로 분산된 여러 개의 서버를 사용하여 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높이기 위해사 사용되는 서버 네트워크 Vue.js 라이브러리를 제공하는 CDN 링크를 script 태그에 걸어 Vue.js를 개발할 수 있다. 프로토 타이핑 또는 학습 목적이라면, 아래 코드로 최신 버전을 사용 프로덕션 환경인 경우 오류를 방지하기 위해 아래 코드를 추가하여 특정 버전의 빌드 파일을 추가 기본 ES 모듈을 사용하는 경우 이를 지원하는 ES 모듈 호환 빌드 파일 사용 출처 : https:..

💭 기존의 웹 개발 방식인 Html과 JavaScript와 비교하여 Vue의 Reactivity를 구현하는 방법을 아주 간단히 알아보자! ❗Html, JavaScript로 웹 만들어보기 변수 str 를 생성하고 화면에 출력한 후 str 값을 변경했을 때 • html 파일에서 ! 를 쓴 후 Tab 키를 누르면 아래와 같은 hmtl 양식을 손쉽게 작성할 수 있다. hi hello 결과 • 아래의 사진과 같이 str 출력이 값이 변경되기 전의 값을 출력하고 있음을 확인할 수 있다. ❗ Vue의 Reactivity(반응성) 웹 만들기 변수 str 를 생성하고 화면에 출력한 후 str 값을 변경했을 때 • 변경된 str 값이 바로 화면에 적용되는 반응성 웹 • Object.defineProperty() API를 ..

❓ Vue.js 란? 사용자 인터페이스를 만들기 위한 프로그레시브 자바 스크립트 프레임워크. ❓ Vue.js의 특징 DOM : 웹 페이지가 로드 되면 브라우저는 페이지의 Document Object Model (문서 개체 모델)을 생성 DOM LIsteners : DOM의 변경 내역을 즉각적으로 반응하여 특정 로직을 수행하는 장치 Data Bindings : View에 표시되는 내용과 Model의 데이터를 동기화 위 내용은 인프런의 Vue.js 시작하기 - Age of Vue.js 를 참고하여 공부하며 개인적으로 정리한 내용입니다. 내용에 오류가 있거나 문제 사항은 댓글로 남겨주시면 감사하겠습니다!

1. 인프런의 Vue.js 시작하기 - Age of Vue.js 를 보고 작성한 복습정리 입니다. 2. 공부에서 사용될 프로그램 - Chrome - VS Code - Node.js - Vue.js Devtools 3. 공부에서 사용될 VS Code 플리그인 - Vetur - Night Owl - Material Icon Theme - Live Server - EsLint - Prettier - Auto Close Tag - Atom Keymap 4. Live Server 이용하기 탐색기 -> 폴더 및 파일 목록 중 실시간으로 확인해볼 파일을 클릭 -> 우클릭 open with live server 클릭 크롬 브라우저로 실행시 표시된 웹 페이지가 나옵니다. 만약 실행시 127.0.0.1 로 페이지가 작동하..

❓ Regression 데이터 변수들간의 함수 관계를 파악하여 통계적으로 추론하여 결과를 도출하는 기술이다. ❓ Hypothesis 위는 Regression 데이터를 가지고 좌표를 찍은 모습이다. Regression 모델을 학습하기 전에 하나의 가설을 세울 필요가 있다. 우리가 예측할 무언가의 실제 데이터 결과가 어떤지는 모르겠으나 아래 사진의 1차원 방정식의 그래프 형태인 모델이 우리의 가설에 맞아 떨어질 것이다. 즉, 우리 가설의 결과가 1차원 방정식 그래프 형태인 모습일 것이다. 가설은 H(x)로 나타내고 H(x) = Wx+b 형태의 방정식이다. W(weight), b(bias) 우리의 목표는 실제 데이터 값들과 가장 유사하게 H(x)를 그려주는 W와 b를 값을 찾는 것이다. (W와 b 값은 여러개..

❓ Tensor ? 텐서란 데이터의 배열이라고 볼 수 있다. Rank는 몇 차원의 배열인지를 나타낸다. Type 은 텐서의 데이터 타입을 나타낸다. Shape 은 배열의 모양을 나타낸다 => ex) shapes 이 [3,4] 혹은 (3,4) 이라면 요소가 3개인 배열이 4개 있는 모양의 배열을 뜻한다. ❓ TensorFlow 텐서플로우는 다양한 작업에 대해 데이터 흐름 프로그래밍을 위한 오픈소스 소프트웨어 라이브러리 즉, 기계학습 라이브러리 ❓ TensorFlow의 Data Flow Graph Node는 연산을 나타낸다. Edge는 노드와 노드를 연결하며 데이터흐름을 나타낸다. Tensor 엣지들을 따라서 각 노드들의 사이를 이동하는 값이며 다차원 배열이다. ❗ TensorFlow 설치 1. Python..

❓ 머신러닝이란? 경험을 통해 자동으로 개선하는 컴퓨터 알고리즘 머신러닝을 통해 수신한 이메일이 스팸인지 아닌지 구분할 수 있도록 훈련 ❓ Supervised / Unsupervised learning Supervised learning 이미 label이 정해져 있는 데이터(training set)들을 사용하여 학습하는 것 이미 labeling 되어 있는 딸기와 사과를 학습시켜 딸기와 사과가 구분이 가능한 모델을 생성 (+) 딸기와 사과가 구분이 가능한 모델을 생성하기 위해 사용한 labeling 된 데이터들을 "Training data set" ㅣ라고 한다. Unsupervised learning label이 주어지지 않은 데이터로 학습하는 것 유사한 뉴스들의 그룹화(뉴스는 라벨링이 되어 있지 않다.)..