전체 글 34

[ React ] Component Recycle Method

6단원. 반복되는 Component리스트나 데이터셋을 기반으로 동일한 구조의 UI를 여러 개 렌더링1. Map 함수반복되는 컴포넌트를 렌더링파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성arr.map(callback, [thisArg])const numbers = [1, 2, 3, 4, 5];const result = numbers.map(num => num * num);console.log(result);2. 함수의 Parameter• callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지1. currentValue: 현재 처리하고 있는 요소2. index: 현재 처리하고 있는 요소의 index 값3. array..

FrontEnd/React 2025.04.06

[ React ] Element handling & Dom

4단원. Event Rerendering웹 브라우저에서 DOM 요소들과 상호작용하는 것1. 이벤트 이름은 카멜 표기법 사용onClick 2. 이벤트 실행할 자바스크립트 코드를 전달하는 것이 아니라 함수 형태의 값을 전달화살표 함수 () => {}렌더링 부분 외부에 미리 만들어서 전달 3. DOM 요소에만 이벤트 설정 가능{ /\* (...) \*/ }1. onChange event 설정e 객체]SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체import React, { Component } from 'react';class EventPractice extends Component { render() { return ( 이벤트 연습 { ..

FrontEnd/React 2025.04.03

[ React ] JSX Component & Props & State

💡 개발할 때 자주 쓰는 명령어 비교- 명령어 설명npm install 또는 npm i패키지(라이브러리) 설치npm start개발 서버 실행 (브라우저에서 보기)npm run build배포용 코드로 압축/최적화npm test테스트 코드 실행✅ 함수형 → 클래스형으로 바꾸기(공부용/과거 코드 호환용)🧠 핵심 변화 요약- 함수형 클래스형함수형 클래스형useStatethis.state + this.setState화살표 함수(RSC)클래스 메서드로 작성 (RCC)return (...)render() { return (...) } 안에서 작성useState는 HOOK이라 ctrl +space+ ENTER해서 import해줘야 함단방향 vs 양반향 처리 bonding → ← obChangeReactDevelop..

FrontEnd/React 2025.04.02

[ React ] JSX

0단원. React란?사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리HTML과 비슷한 형태로 작성할 수 있어서 직관적이고 가독성이 좋은 코드 작성 가능=> Virtual Dom을 통하여 현재 보여줄 화면만 렌더링(rendering)하고, 완성하면 진짜 부어주는 방식을 사용확장 도구라이브러리역할기능비고React Router페이지 이동(라우팅) 처리SPA 필수Redux글로벌 상태 관리복잡한 상태에 유용Recoil / ZustandReact-friendly 상태 관리 도구Redux보다 가볍고 간단Next.js서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 지원SEO 최적화, 라우팅 내장React Query서버 상태(Fetching, Caching) 관리API 데이터 처리에 특화Style..

FrontEnd/React 2025.04.01

[ GITHUB ] Repository 설정 및 PR 실습 예제

1. repository 생성하기1.1 내 C드라이브에 project 파일 생성 후 깃허브 실시- repository 생성더보기git inti git config --local user.email "이메일" git config --local user.name "id"- Readme 파일 추가더보기git add . git commit git branch -M maingit remote add origin 주소 git push origin main1.2 깃허브에 Template 등록하기- 나의 new repository을 private으로 만들기- setting > feature에 set up-template의 Bug/ Feature/ New feature 추가하고 Propose changes 버튼 클릭 후..

[ GITHUB ] 비전공자도 이해할 수 있는 GitHub 핵심 과정 8가지

✅ 1. 초기화 (.git 폴더 만들기) + Local Repository 만들기💡 Git을 처음 시작하는 과정📌 비유: 팀 프로젝트 폴더를 노트북에 만들고, 변경 내역을 저장할 준비하기📌 과정:여러분이 **팀 프로젝트를 위한 폴더(예: "팀프로젝트")**를 만듭니다.이 폴더를 Git이 관리할 수 있도록 초기화(설정)합니다.이 과정이 끝나면 숨겨진 .git 폴더가 생성되며, 이제부터 변경 내역을 추적할 수 있음.🔧 실제 Git 명령어sh복사편집mkdir 팀프로젝트 # 폴더 만들기 cd 팀프로젝트 # 해당 폴더로 이동 git init # Git 초기화 (숨겨진 .git 폴더 생성됨) ✔ .git 폴더가 생기면 이제부터 Git이 변경 사항을 기록할 준비가 완료됨!✅ 2. 커밋 만들기 (파일 저장하고 ..

[ DB ] mybatis, Dao

Mapper데이터베이스와 Java객체 사이의 변환을 담당하는 인터페이스코드를 더 간단하고 유지보수가 쉽게 되도록 함ParamSpring에서 Spring과 MyBatis에서 SQL쿼리에 전달할 파라미터를 매핑할때 사용하는 어노테이션ControllerAdviceProject에서 발생하는 모든 오류를 처리하는 기술ex.에러 메세지가 한글인 경우 깨지므로 한글 처리를 위한 응답 헤더 설정 RestControllerRestful service를 위한 controller로 모든 메서드의 응답을 @ResponseBody를 붙여주는 효과ResponseBody요청 방식이 Put과 Post이면서 데이터가 JOSON형식일 때전달되는 요청 packet의 body를 객체로 전달받을때 사용하는 annotationComponent..

[ DB ] DDL문, JDBC API

1. DDL문1. DDL이란?Database에서 사용하는 다양한 객체를 생성, 삭제, 변경하는 문으로 수행하면 DB에 바로 반영됨(1) 객체 종류 table(데이터를 관리하는 최소 단위), index, view 생성 : create 객체 객체명;ex) create sequence board_no;삭제 : drop 객체 객체명;ex) drop sequence board_no;(2) 테이블데이타를 관리할 최소 단위생성 create table 테이블명( 컬럼명 데이타타입 [[CONSTRAINT 제약조건이름] 컬럼레벨 제약조건] , ... ,[[CONSTRAINT 제약조건이름] 테이블레벨 제약조건] ); 2. 데이타 무결성데이타의 정확성, 일관성, 유효성이 유지되는 것을 말한다.개체 무결성 (Entity int..

카테고리 없음 2025.03.05

[ DB ] DML문

1. DB1. SubQuery이란?Query문 내에 작성하는 Query를 SubQuery라고 한다.기본적으로 외부 Query가 수행되기 전에 SubQuery가 먼저 수행되고 그결과를 외부 Query에서 사용한다. 단, 상호 연관 쿼리는 외부 Query한행에 대해 SubQuery가 수행되므로 SubQuery는 외부 Query의 행 수만큼 수행된다.2. 종류where절에서 사용하는 단일행, 다중행, 다중열, 상호 연관 subqueryfrom절에서 사용하는 inline view스칼라 서브쿼리(단일행, 단일열)로 조회되는 sub query sub query가 사용되는 위치 select절, from절, where절, having절, order절=> group by절 빼고 create table문, insert문,..

[ DB ] join 함수

join 함수1. join 함수란?두개 이상의 테이블을 연결해서 질의하는 것2. 종류데이타 추출되는 것에 따라(1) Inner Join조인을 위해 사용하는 비교 조건에 맞는 데이타만 조회ex. RGBMS master data & detail dataempno있는 내부 데이터만 조회됨조인 조건에 맞지 않은 데이타는 조회 되지 않는다.join할 때 outer join으로 표시 하지 않으면 기본적으로 Inner join으로 조회된다.(2) Outer Join조인을 위해 사용하는 비교 조건에 맞지 않는 데이타도 조회된다.종류 left outer join : 비교 조건에 맞지 않은 왼쪽 테이블의 데이타도 조회됨 right outer join : 비교 조건에 맞지 않은 오른쪽 테이블의 데이타도 조회됨 full ou..