웹 개발자 도전기

React에서 상태 관리는 컴포넌트가 동작하는 데 중요한 역할을 합니다. 하지만 상태 업데이트가 비동기적으로 이루어지기 때문에 최신 상태 값을 기반으로 안전하게 업데이트 하는 방법이 필요합니다. 함수형 업데이트와 직접 참조의 차이점직접 참조 방식 *setData([...data,tempdata]);설명 : 이 방식은 현재 상태값인 data를 직접 사용하여 새 데이터를 배열에 추가합니다.작동은 하지만 React의 상태 업데이트는 비동기적으로 작동하기 때문에 이 방식은 최신 상태를 참조하지 않을 수 있습니다.위험성 : 다른 상태 업데이트가 비동기적으로 발생할 경우 이전 상태가 참조될 가능성이 있어 데이터 손실이나 충돌이 발생할 수 있습니다.함수형 업데이트 방식 *setData((datas)=> [...dat..

useRef란 ?useRef는 React Hook 중 하나로 컴포넌트의 DOM 요소나 변수에 대한 참조를 저장할 수 있는 방법입니다.useState와는 다르게 렌더링을 발생시키지 않고도 값을 유지할 수 있습니다. useRef의 주요 용도DOM 요소에 접근주로 HTML 요소에 접근하여 포커스를 주거나 스크롤을 제어하거나 입력 필드의 값에 접근하는 등의 작업을 할 때 사용됩니다.렌더링 간 값 유지state를 업데이트할 때는 컴포넌트가 재 렌더링 되지만 useref는 렌더링을 발생시키지 않고 값을 유지함 useRef 사용 예시 (DOM 요소에 접근)입력 필드에 포커스주기 해당 버튼을 누르면 ref.current.focus()가 호출되어 입력 필드에 포커스 자동 설정  useRef로 렌더링 없이 값 관리하기 r..

useEffect는 React에서 Side Effect 를 처리하는 훅 입니다.컴포넌트가 렌더링된 후 추가적인 작업을 실행하거나 특정 상태 변화에 맞춰 작업을 처리하는 역할을 합니다ex API호출 , DOM 업데이트 , 이벤트리스너 설정 등등  기본 사용법 useEffect는 컴포넌트가 렌더링된 후 실행됩니다. 첫 번째 인자 : 렌더링 후 실행할 함수를 받습니다.두 번째 인자 : 의존성 배열로 , 배열 안에 있는 값이 변경될 때마다 useEffect가 다시 실행됩니다. 빈배열을 넣으면 컴포넌트가 처음 마운트될 때만 실행됩니다. 이 코드에선  처음 화면이 렌더링 될때 콘솔에 실행이 찍힙니다. 의존성 배열의 역할 useEffect가 항상 렌더링 후에 실행되지만 특정 값이 변경될 때만 실행되도록 제어하고 싶을..

useState는 React에서 컴포넌트의 상태(state)를 관리하기 위한 가장 기본적인 훅(Hook)입니다.useState는 함수형 컴포넌트 내에서 상태를 선언하고 그 상태를 업데이트하는 방법을 제공합니다.  useState의 기본문법useState는 React에서 import하여 사용할 수 있고, 이러한 문법을 가집니다. const [ state , setState ] = useState(initialValue);state는 컴포넌트에서 관리할 상태 값입니다. 기본적으로 useState에 전달된 초기 값 을 가집니다.setState는 상태 변경 함수 입니다. setState를 호출하면 컴포넌트는 상태가 변경된 것을 감지하고 다시 렌더링 됩니다.initialValue는 상태의 초기값 입니다. 숫자 ,..

기본 문법 :select 컬럼명 from 테이블명 order by 컬럼명 [asc | desc];asc : 오름차순으로 정렬 (기본값)desc : 내림차순으로 정렬 오름차순 정렬오름차순 정렬은 작은값에서 큰값 , 알파벳 순으로 정렬한다. select 컬럼명 from 테이블명 order by 컬럼명; asc(오름차순) 은 기본값이기 때문에 적어줄 필요가 없다.  내림차순 정렬내림차순 정렬은 큰 값에서 작은 값으로 또 알파벳 역순으로 데이터를 정렬합니다. select 컬럼명 from 테이블명 order by 컬럼명 desc;  여러 컬럼을 사용한 정렬 order by 절을 사용하여 여러 컬럼을 기준으로 데이터를 정렬할 수 있습니다.첫 번째 컬럼을 기준으로 정렬한 후 같은 값이 있을 경우 두번째 컬럼을 기준으..

1. 트랜잭션의 정의트랜잭션은 데이터베이스에서 일련의 작업을 하나의 논리적인 단위로 묶어서 처리하는 것여러 개의 쿼리 작업(데이터 삽입 , 수정 , 삭제 등)을 하나의 묶음으로 보고 모든 작업이 성공적으로 완료되어야만 데이터베이스에 반영 되며, 중간에 하나라도 실패하면 ** 모든 작업이 취소(롤백(rollback)) ** 됩니다. 2. 트랜잭션을 사용하는 이유 & 중요한 이유데이터의 일관성을 보장하기 위해서 사용한다. 트랜잭션은 주로 복잡한 여러 작업을 묶어서 처리할때 매우 유용합니다.트랜잭션이 없다면 데이터베이스의 일부 작업이 실패했을 때 그 전까지의 작업이 그대로 데이터베이스에 남아 있어 데이터 일관성이 깨질 위험이 있습니다.  3. 트랜잭션의 동작과정1. 트랜잭션 시작 (beginTransactio..

Data 확인select 컬럼명 from 테이블명;- 해당 컬럼만 테이블에서 확인    select * from 테이블명;- 테이블내 모든 컬럼 확인 select 컬럼명 from 테이블 where 컬럼명 ="찾을값";- 찾을값 지정해서 데이터 확인   Data 추가insert into 테이블명 (컬럼1,컬럼2,...) values (값1,값2,...)   Data 수정update 테이블명 set 컬럼1=값1,컬럼2=값2,... where 조건;  Data 삭제delete from my_test where 조건;  ★update(수정) 와 delete(삭제) 명령어를 실행할땐 항상 where 조건을 사용하는 것이 좋습니다.조건 없이 사용하면 테이블의 모든 데이터가 수정되거나 삭제될 수 있습니다!

컬럼 정보 확인desc 테이블명;   컬럼 추가alter table 테이블명 add 컬럼명 자료형(길이) 제약조건;  컬럼 삭제alter table 테이블명 drop 컬럼명;  컬럼명 변경 + 자료형 변경alter table 테이블명 change 컬럼명 변경할컬럼명 바꿀자료형(길이) 제약조건; name varchar(30) ==> fullName varchar(50)  컬럼 자료형 변경alter table 테이블명 modify 컬럼명 자료형(길이) 제약조건; userid의 varchar(20) == > varchar(50)

데이터베이스를 먼저 생성합니다. 생성한 데이터베이스를 사용하여 그 안에 테이블을 만들어줍니다. 테이블 생성 idx , age , userid...등은 컬럼명으로  JavaScript 에서 변수명이라 생각하면 이해하기 쉽습니다.MySQL 에서는 대 소문자를 구분하지 않습니다. 1. int (정수형)int는 정수값(숫자)을 저장할 때 사용합니다.음수 , 양수 , 0 등 숫자 데이터를 저장하는 데 적합합니다.예를 들어, 사용자 ID, 나이,점수,카운트 등 숫자 데이터를 다룰 때 사용합니다.예시 : idx int auto_increment primary key 여기서 auto_increment 란 숫자 자동 증가 입니다. idx에 값을 주지않아도 자동으로 하나씩 추가할때마다 +1 씩 증가합니다. primary ..