류지 프로젝트

1. fetchfetch는 자바스크립트에서 서버와 통신할 수 있도록 도와주는 비동기 함수로, 주로 HTTP 요청(GET, POST 등)을 보낼 때 사용됩니다. fetch() 함수는 URL을 인자로 받아 서버에 요청을 보내고, 그 결과를 Promise 객체로 반환합니다. 이 Promise는 응답이 도착하면 then()에서 응답(Response 객체)을 처리할 수 있으며, 네트워크 오류 등이 발생하면 catch()로 에러를 잡을 수 있습니다. fetch는 기본적으로 비동기 처리이기 때문에 응답이 도착하기 전에도 다음 코드가 실행되며, await 키워드와 함께 사용하면 보다 직관적인 코드 흐름으로 작성할 수 있습니다. 2. 기상청_관광코스별 관광지 상세 날씨 조회서비스기상청_관광코스별 관광지 상세 날씨 조..

프론트엔드/JavaScript 2025. 4. 18. 01:21

1. 프로미스자바스크립트의 프로미스(Promise)는 비동기 작업의 완료 또는 실패를 처리하기 위한 객체입니다. 프로미스는 주로 시간이 걸리는 작업(예: 네트워크 요청, 파일 읽기 등)을 처리할 때 사용되며, "미래에 결과를 약속한다"는 개념으로 동작합니다. new Promise()를 통해 생성하며, 내부에는 resolve와 reject라는 두 가지 콜백이 있어 작업이 성공하면 resolve, 실패하면 reject를 호출합니다. 이후 .then()으로 성공 결과를 처리하고, .catch()로 오류를 처리할 수 있으며, .finally()로 성공 여부와 상관없이 마지막에 실행할 코드를 작성할 수 있습니다. 이를 통해 콜백 지옥(callback hell)을 피하고, 코드 흐름을 더 읽기 쉽게 만들어 줍니다...

프론트엔드/JavaScript 2025. 4. 17. 21:40

1. localStoragelocalStorage는 웹 브라우저에 데이터를 영구적으로 저장할 수 있는 클라이언트 측 저장소로, 자바스크립트를 통해 키-값 쌍 형태로 문자열 데이터를 저장하고 관리할 수 있습니다. 사용자가 페이지를 새로 고치거나 브라우저를 닫았다가 다시 열어도 데이터가 유지되며, 용량은 약 5MB 정도로 비교적 넉넉합니다. localStorage.setItem()으로 저장하고, getItem()으로 불러오며, removeItem()이나 clear()로 삭제할 수 있습니다. 단, 모든 값은 문자열로 저장되므로 객체나 배열을 저장하려면 JSON.stringify()로 문자열로 변환한 후 저장하고, 다시 꺼낼 때는 JSON.parse()로 원래 형태로 복원해야 합니다. 사용자의 설정, 최근 검색..

프론트엔드/JavaScript 2025. 4. 17. 01:18

1. JSONJSON(JavaScript Object Notation)은 자바스크립트 객체 표기법을 기반으로 한 데이터 교환 형식으로, 사람도 읽기 쉽고 기계도 쉽게 분석하고 생성할 수 있는 텍스트 기반의 데이터 포맷입니다. 일반적으로 서버와 클라이언트 간에 데이터를 주고받을 때 많이 사용되며, 구조는 키-값 쌍으로 이루어진 객체 형태나 배열 형태를 사용합니다. 자바스크립트에서는 JSON.stringify()를 사용해 객체를 JSON 문자열로 변환하고, JSON.parse()를 사용해 JSON 문자열을 다시 객체로 변환할 수 있습니다. 언어에 독립적이면서도 자바스크립트와 호환성이 뛰어나 웹 개발뿐만 아니라 다양한 API 통신, 데이터 저장 및 전송 등에 널리 활용됩니다. 2. JSON 문법 구조1. 객..

프론트엔드/JavaScript 2025. 4. 16. 23:52

1. 정규식자바스크립트의 정규식(Regular Expression)은 문자열에서 특정한 패턴을 찾거나, 검사하거나, 치환하기 위한 강력한 도구입니다. 정규식은 /패턴/ 또는 new RegExp("패턴") 형식으로 작성되며, 이메일 유효성 검사, 전화번호 형식 확인, 특정 문자 제거 등 다양한 문자열 처리 작업에 활용됩니다. 정규식은 문자, 숫자, 특수기호, 메타문자(\d, \w, . 등), 수량자(*, +, {n,m} 등) 등을 조합하여 원하는 검색 패턴을 정의할 수 있습니다. 자바스크립트에서는 test(), match(), replace(), search(), exec() 등의 메서드와 함께 사용되며, 이를 통해 문자열 내부에서 특정 조건을 만족하는 부분을 효과적으로 다룰 수 있습니다. 정규식을 잘 활..

프론트엔드/JavaScript 2025. 4. 16. 01:06

1. 이벤트자바스크립트에서 이벤트(Event)는 사용자가 웹 페이지와 상호작용할 때 발생하는 특정 동작이나 상황을 의미합니다. 예를 들어 버튼 클릭, 키보드 입력, 마우스 이동, 폼 제출, 창 닫기 등이 모두 이벤트에 해당하며, 이러한 이벤트에 대해 자바스크립트가 특정 반응(동작)을 하도록 코드를 작성할 수 있습니다. 이를 위해 addEventListener() 같은 메서드를 사용해 특정 요소에 이벤트 리스너를 등록하거나, HTML 요소에 직접 onclick, onchange 같은 이벤트 속성을 사용할 수 있습니다. 이벤트는 사용자와의 실시간 상호작용을 처리하는 데 필수적이며, 동적인 웹 페이지를 만드는 핵심 요소로 작동합니다. 1. HTML 이벤트 속성 방식인사하기 2. DOM 속성 방식 (elemen..

프론트엔드/JavaScript 2025. 4. 16. 00:56

1. DOMDOM(Document Object Model)은 웹 페이지의 구조를 자바스크립트에서 프로그래밍적으로 조작할 수 있도록 표현한 객체 모델입니다. HTML 문서를 브라우저가 읽으면 각 요소(태그, 텍스트 등)를 트리 구조로 변환하는데, 이때 생성되는 계층적인 구조가 DOM입니다. DOM은 문서 전체를 document 객체로 표현하며, 그 하위에는 html, head, body, 각종 요소들이 노드 형태로 연결되어 있습니다. 자바스크립트를 사용하면 이 DOM 구조에 접근하여 텍스트를 변경하거나, 요소를 추가/삭제하거나, 스타일을 수정하고, 이벤트를 연결하는 등 웹 페이지를 동적으로 조작할 수 있습니다. 2. Document 객체document 객체는 자바스크립트에서 웹 페이지 전체를 표현하는 최..

프론트엔드/JavaScript 2025. 4. 15. 20:10

1. BOM자바스크립트의 BOM(Browser Object Model)은 웹 브라우저를 제어할 수 있게 해주는 객체 모델로, 웹 페이지 외부의 브라우저 자체와 상호작용할 수 있도록 도와줍니다. BOM의 핵심 객체는 window로, 브라우저 창 자체를 의미하며, 모든 전역 객체와 함수를 포함합니다. 이 window 객체를 통해 alert, setTimeout, console 같은 기능뿐 아니라, location(주소 정보), navigator(브라우저 정보), history(방문 기록), screen(화면 해상도 정보) 등의 하위 객체에 접근할 수 있습니다. BOM은 HTML 문서와 직접적으로 연결되지 않고 브라우저 환경 자체와 관련된 기능을 제공하기 때문에, 자바스크립트를 이용해 페이지를 동적으로 제어하..

프론트엔드/JavaScript 2025. 4. 15. 19:39