본문 바로가기

웹37

JSX 문법 정리 JSX란 Javascript + XML 의 약자로써 자바스크립트와 XML이 합쳐진 문법이다.JSX는 React에서 UI를 정의하기 위해 사용되는 문법 확장JSX를 사용하면 JavaScript 코드 안에서 태그 기반의 구문을 통해 React 엘리먼트를 직관적으로 정의할 수 있으며, 이를 통해 동적인 UI를 쉽게 구현할 수 있음❓ XML이란?XML(eXtensible Markup Language) 은 HTML과 같은 마크업 언어이지만, HTML은 데이터를 표현하는 마크업 언어라면, XML은 데이터를 기술하는 언어이다.예를 들어 HTML에서는 h1, p 같은 이미 만들어진 태그를 사용해야 하지만, XML은 정의된 부분을 제외하고는 사용자가 태그를 임의로 만들 수 있다.엄밀히 말하자면 XML은 마크업 언어라기 .. 2025. 3. 19.
데이터 처리 [JSON 형식의 API에서 데이터를 불러올 때 주로 사용되는 데이터 처리 방법]이 과정은 API 호출, 데이터 변환, 상태 관리 및 오류 처리 등을 포함1. API 호출API를 호출할 때는 fetch API나 axios와 같은 라이브러리를 사용함1.1. Fetch API 사용fetch('') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // JSON 데이터로 변환 }) .then(data => { console.log(data); // 데이터를 처리 }) .. 2025. 2. 12.
JSON 기본 구조 1. JSON 기본 구조객체: { "key": "value" } 형태로, 키와 값의 쌍으로 이루어져 있음배열: [ { "key": "value" }, { "key": "value" } ] 형태로, 여러 개의 객체를 포함할 수 있음2. 일반적인 API 응답 구조API 응답은 여러 가지 형태를 가질 수 있지만, 다음과 같은 구조가 일반적1. 단일 객체 응답{ "id": 1, "name": "John Doe", "email": "john@example.com"}2. 배열 응답[ { "id": 1, "name": "John Doe" }, { "id": 2, "name": "Jane Smith" }]3. 메타데이터 포함{ "data": [ { "id": 1, "name.. 2025. 2. 12.
정적/동적 웹페이지 📍정적 페이지 서버에 요청이 들어올 때마다 파일 내용이 변경되지 않고 그대로 전송 ( 웹 서버에 이미 저장된 파일(html 파일, 이미지, Javascript 파일을 그대로 봄)사용자의 입력이나 데이터에 따라 내용이 바뀌지 않고 모든 사용자에게 동일한 내용이 표시 ( EX) Apache 서버 소프트웨어ex) 회사 소개 페이지, 반복이 없는 포트폴리오 페이지 등이 있음☑️ 프로세스클라이언트 요청클라이언트의 요청 전 리스너 포트를 열어둠접속이 되면 서버는 각 클라이언트를 위한 소켓을 생성하고 통신을 하게 됨 2.필터링3.응답프로토콜에 따라 헤더에 동적/정적페이지에 대한 정보를 넣고 브라우저가 캐싱해야될지 결정하게 해줌 캐싱 : 웹 브라우저가 웹 페이지 자원(html,css,javascript,이미지)를 임.. 2024. 9. 11.
경로 📍1. 절대 경로 다른 웹사이트에서 호스팅되는 외부이미지로 연결 (고유 경로 ) 도메인 주소를 시작으로 최상위 폴더 부터 거슬러 내려가기) 파일이 변해도 주소가 변하지 않음 Ex) 예: src="https://www.w3schools.com/images/img_girl.jpg" 📍2. 상대 경로 : 웹사이트 내에서 호스팅되는 이미지에 대한 링크 - 현재 문서를 기준으로 경로를 인식하는 방법 index.html 에서 동일한 위치에 있는 apple.png를 가져오기 => src = "apple.png" 또는 scr = " ./apple.png" index.html 의 상위 폴더에 이미지가 있는 경우 => src = "../apple.png" => 현재 문서의 위치가 /home/user/documents 라면.. 2024. 1. 12.
overflow 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들 때 사용 (크기가 고정 될때 이용) 1) overflow: visible; - 기본 값 - 넘칠 경우 컨텐츠가 상자 밖으로 보여짐 2) overflow: hidden; - 넘친 컨텐츠가 잘라지고 보여지지 않음 3) overflow: scroll; - 넘친 콘텐츠는 잘리고 스크롤바가 생김 (가로/세로 둘다) 4) overflow: auto; - 넘칠 경우 스크롤바가 자동으로 생성(가로, 세로 필요한 부분에만 생김) 5) overflow-x, overflow-y - 가로 세로 각각 조절 overflow-y: hidden; overflow-x: scroll; 2024. 1. 5.

티스토리툴바