웹 개발자 도전기

useContext useContext는 리액트 내장 훅으로 컴포넌트 트리 전체에서 데이터를 쉽게 전달할 수 있게 해줍니다.일반적으로 로그인한 사용자 정보나 테마 같은 전역 상태를 관리할 때 사용합니다.useContext를 사용하면 컴포넌트에서 매번 props로 데이터를 전달할 필요 없이 원하는 곳에서 바로 사용할 수 있습니다. 장점리액트 기본 기능이라 별도 패키지가 필요 없다.설정이 간단하고 중소형 프로젝트에서 전역 상태 관리를 쉽게 할 수 있다.단점프로젝트가 커지면 useContext 만으로는 상태 관리를 복잡하게 만들 수 있다.useContext 자체는 전역 상태를 관리하는 기능이지 상태 업데이트에 대한 세밀한 제어나 효율적인 리렌더링 처리는 어렵다.    동작 방식User.jsx 에서 UserCo..

React Router는 리액트에서 네이게이션을 관리하는 라이브러리 입니다.다양한 경로를 정의하고 그 경로에 따라 컴포넌트를 렌더링할 수 있게 해줍니다. 설치 방법npm 사용npm i react-router-domyarn 사용yarn add react-router-dom React Router의 기본 개념BrowserRouter : 애플리케이션 전체를 감싸는 컴포넌트로 HTML5의 History API를 사용하여 URL을 관리합니다. 이 컴포넌트 안에서 라우팅이 이루어집니다.Routes : 여러 개의 Route를 감싸는 컴포넌트 입니다. 각 Route를 그룹화 하고 관리합니다.Route : 각 URL 경로에 해당하는 컴포넌트를 매핑할 때 사용합니다. 특정 경로에 들어가면 지정된 컴포넌트가 렌더링 됩니다...

모듈 설치npm i -S express cors npm i nodemon -Dnpm i http-proxy-middleware 등등express : node.js 기반의 서버 구축을 위한 간단한 웹 프레임워크cors : 다른 도메인에서 API 요청을 허용하기 위한 미들웨어nodemon : 파일 변경 시 서버를 자동으로 재시작해주는 도구http-proxy-middleware : 프록시 서버 설정을 위한 미들웨어 , API 요청을 다른 서버로 전달할 때 사  -S : 프로덕션 환경에서 필요한 모듈을 설치 (dependencies에 추가)-D : 개발 환경에서만 필요한 모듈을 설치 (devDependencies에 추가)  전체 폴더  back 쪽 src 폴더의 server.js 생성 const express ..

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 조건을 사용하는 것이 좋습니다.조건 없이 사용하면 테이블의 모든 데이터가 수정되거나 삭제될 수 있습니다!