직관적인 API와 인터셉터, 요청 취소 등을 제공하여 HTTP 요청 작업을 쉽게 만들어줌RESTful API 호출 작업을 단순화할 수 있다 Promise 기반 - 비동기 처리 쉬움요청 / 응답 데이터 자동 변환 - JSON 데이터 자동으로 직렬화 / 역직렬화요청 취소 - 요청을 취소할 수 있는 기능 제공 (CancelToken)브라우저와 Node.js 지원 - 브라우저(XMLHttpRequest) / Node(HTTP 모듈) 을 기반으로 동작한다Interceptors - 요청 / 응답을 가로채 수정하거나 공통 로직 추가 가능응답 시간 초과 설정 가능 - timeout 옵션으로 제한 시간 설정CSRF / 보안 - 자동으로 XSRF 토큰 관리  설치 : npm install axios브라우저 사용 : scr..

사용자가 입력한 값이 그대로 SQL 쿼리에 포함되며 악의적인 SQL 코드가 실행되는 공격 예를 들어, 다음과 같은 코드가 있다고 가정해보자const userId = req.query.id; // 사용자 입력const sql = `SELECT * FROM users WHERE id = '${userId}'`;connection.query(sql, (err, result) => { if (err) throw err; console.log(result);}); 만약 userId에 1 OR 1=1 과 같은 값을 입력하면 쿼리는 다음과 같이 변형된다SELECT * FROM users WHERE id = '1 OR 1=1';이 쿼리는 항상 참 (1=1)이므로, 데이터베이스의 모든 데이터를 반환할 수 있다..

서버 측 프레임워크에서 사용되며, 클라 요청과 서버 응답 사이에 추가적인 작업을 할 수 있음 특징요청-응답의 중간 단계 역할요청 데이터를 가공하거나 인증, 로깅 등의 작업을 수행한 뒤 다음 단계로 넘김.연속적인 호출 구조미들웨어는 일반적으로 req, res, 그리고 next 객체를 인자로 받아 실행되며, next()를 호출하여 다음 미들웨어로 제어를 넘김다양한 용도요청 데이터의 파싱인증 및 권한 부여로깅 및 에러 처리정적 파일 제공 // 기본구조const middleware = (req, res, next) => { // 요청(req) 처리 로직 console.log('Middleware executed'); // 다음 미들웨어 또는 라우트 핸들러 호출 next();};// ..

URL에서 ? 뒤에 추가되는 매개변수특정 데이터를 서버나 클라이언트로 전달할 때 사용검색조건, 필터링 옵션, 페이지번호, 정렬방식 등을 전달기본 구조https://example.com/page?key1=value1&key2=value2// ? 쿼리스트링 시작// key1=value1 쿼리의 첫번째 매개변수// & 매개변수들 연결// key2=value2 두번째 매개변수 예시https://example.com/search?q=react&sort=asc&page=2// q=react 검색키워드는 react// sort=asc 정렬방식 오름차순// page=2 2번째 페이지 리액트 예시import React from 'react';import { useLocation } from 'react-router-do..

React Router SPA에서 라우팅을 처리하기 위한 표준 라이브러리사용자가 URL을 변경하거나 페이지를 탐색할때 전체 페이지를 새로 로드하지 않아도 콘텐츠를 변경 할 수 있게 도와줌SPA - 전체 페이지 새로고침 없이도 페이지 전환 (컴포넌트 렌더)유연한 라우팅 - 동적 라우팅, 중첩 라우팅, 라우팅 전환시 상태 관리 가능리디렉션 설정 가능SEO 개선 가능 - 서버사이드 렌더링과 함께 사용시 SEO에 유리 사전설치 : npm install react-router-dom 전체 흐름react-router-dom 설치BrowserRouter로 페이지 라우팅 할 부분 감싸기Routes와 Route를 사용해 라우트 정의Link / NavLink를 사용한 페이지 전환 혹은동적 라우팅과 useNavigate 활..

State컴포넌트 내부에서 동적으로 변할 수 있는 데이터 (입력된 값, 버튼 클릭 여부, 서버에서 가져온 데이터)컴포넌트 내부 로컬 데이터로 컴포넌트 밖에서는 상태를 직접 수정이 불가능하다상태가 변경되면 React는 해당 상태를 사용하는 컴포넌트를 리렌더상태가 변경되지 않더라도 전달받는 Props가 변경되면 리렌더 리렌더링 되는 경우State 변경시부모로부터 전달받는 Props 변경시부모가 리렌더링 될 경우 자식도 리렌더링됨  Hooks함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 기능기존의 클래스형 컴포넌트 대신 함수형 컴포넌트에서도 복잡한 기능을 구현 가능하도록 해줌함수형 컴포넌트에서 상태 관리나 부수 효과(DOM 조작, 데이터 가져오기 등)을 사용할 수 있도록 해줌클래스형 컴포넌..

JS에는 함수 내부에 다른 함수를 선언할 수 있다 (어메이징..)스코프와 클로저를 사용해서 전역변수를 대신할 수도 있는데, 한번 알아보자 외부함수함수 내부에 다른 함수를 포함하는 함수내부 함수를 정의하고 실행할 수 있는 스코프를 제공내부함수외부 함수 안에 선언된 함수외부 함수의 변수와 함수에 접근할 수 있음 (스코프 체인에 의해 가능).클로저내부 함수는 외부 함수의 변수에 접근 가능외부 함수는 내부 함수의 변수에 접근 불가외부 함수가 실행을 끝내도, 내부 함수가 외부 변수에 참조를 유지하기 때문에 메모리에 남아 있음이를 통해 전역변수를 대신하는 방식으로 코드 작성이 가능하다데이터 은닉화, 정보보호내부 함수를 사용해 콜백 함수로 외부 상태를 유지하는것이 가능// 사용 예시function outerFunct..

// 흔하디 흔한 html 문서 Hello World This is a paragraph. DOM(도큐먼트 오브젝트 모델)HTML 또는 XML 문서를 객체로 표현한 구조웹 브라우저는 HTML 문서를 읽고 DOM 트리 형태로 변환하며, 이를 통해 자바스크립트로 문서를 동적으로 조작// 트리표현- Document (최상위 객체) └── ├── │ └── → "Document" └── ├── → "Hello World" └── → "This is a paragraph." Document: HTML 에서 최상위 객체. (()=>{}에서 this를 출력하면 알겠지만 전체 최상위는 윈도우다)El..

콜백 함수: 특정 작업이 완료된 후 호출됨왜 사용하나?비동기적 작업(예: 이벤트 핸들링, 타이머, API 호출) 처리.함수의 실행 순서를 조정하거나 로직을 분리할 때 유용합니다.사례자바스크립트에서 Array 메소드들은 대부분 콜백 함수 사용 (foreach, map 등등)setTimeout 등 비동기 작업에서 사용이벤트 핸들러에서 사용 Click me    단점가독성이 떨어지고 유지보수가 어려운 상황이 생길수도 있다 .. 콜백지옥이라 하는듯콜백 함수를 별도로 분리, Promise 사용, Async/Await을 사용하는 등 개선이 필요// 함수 분리function step1(callback) { console.log("Step 1"); callback();}function step2(..

타입문자열 String숫자 Number불리언 Boolen참조타입 (오브젝트, 배열 등) 문자열 연산: + 연산에서 문자열이 우선됨.숫자 연산: +를 제외한 산술 연산 또는 비교 연산 시 숫자로 변환.불리언 연산: Falsy(false, 0, "", null, undefined, NaN)와 Truthy를 구분.느슨한 동등 비교 (==): 타입을 자동으로 맞춘 후 비교.엄격한 동등 비교 === (값과 타입을 &&) 인터프리터 언어 접할때마다 드는 생각인데,죄다 뭉뚱그려져 있어서 편한 부분도 있는데, 명확한 가독성은 떨어지는듯.익숙해지고 싶지 않은 편안함 이라는 느낌