solsol

News.js 파일 생성 import { useState } from "react"; import axios from "axios"; const News = () => { const [data, setData] = useState(''); const onClick = () => { axios.get("https://newsapi.org/v2/top-headlines?country=kr&apiKey=ffbbc82f694941a7b0e2d4f4515abcc7") .then(response => { setData(response.data); }); }; return ( 서버 정보 불러오기 {data && } ); }; export default News; App.js 파일에 News 추가 import './A..

Router 설치 1. PowerShell로 Router 설치 2. vsCode 새폴더로 kh-router-ex 열기 3. vsCode 터미널에서 yarn add react-router-dom 입력 프로젝트로 라우터 적용 -src 폴더 밑에 pages 폴더 생성 -js 파일 생성 (Home.js, About.js, Setting.js) App.js에서 라우터 이동경로 생성 import './App.css'; import { BrowserRouter as Router, Route, Routes} from 'react-router-dom'; import Home from './pages/Home'; import About from './pages/About'; import Setting from './pag..

REST(Representational State Transfer)는 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미 여기서 상태는 전송되는 데이터 일반적으로 JSON 형태로 데이터를 주고 받는다. REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 사용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 네트워크 상에서 클라이언트와 서버 사이의 데이터를 통신하기 위해 가장 많이 사용되는 통신 방식 중 하나 웹에서는 일반적으로 서버에서 구현애 놓은 REST API를 클라이언트가 호출해서 데이터 전송, 조회, 수정, 삭제 같은 기능을 서버에 요청 할 수 있게 해준다. HTTP+JSON 형태로 REST API를 정의하면, 웹, 안드로이드, iOS 같은 플랫폼에 구애받지..

*JSON JSON을 사용하면 다른 프로그래밍 언어와의 데이터 송수신이 간단해진다. 서버와 웹 클라이언트가 데이터를 주고 받을 때 JSON을 자주 사용 JSON(JavaScript Object Notation)은 자바스크립트 객체를 문자열로 표현하는 데이터 포맷 객체를 직렬화 할 수 있다. 속성과 값의 쌍의 배열 자료형이이면 직렬화가 가능 원래는 자바스크립트 언어로 부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립적인 포맷 사람과 기계가 모두 읽기 편하도록 고안 자바스크립트 객체를 JSON 문자열로 변환하기 : JSON.stringify 첫번째 인수인 value에는 JSON으로 변환할 객체를 지정 두 번째 인수인 replacer에는 함수 또는 배열을 지정 JSON 문자열을 자바스크립트 객체로 ..

*정규표현식 문자열에 포함된 특정 문자 조합을 찾기 위해 사용되는 패턴 복잡한 프로그램 코드를 간략하게 작성할 수 있다는 장점 가독성이 떨어지고코드 구현이 쉽지 않다. 하지만 굉장히 어려운 프로그램도 쉽게 해결할 수 있기 때문에 굉장히 유용 정규식 만들기 래시(/)로 감싸는 패턴인 정규식 리터럴을 사용하는 방법 const regexp = /World/; 정규식 함수 예시 전화번호 검사 \d는 숫자를 의미하고, {} 안의 숫자는 갯수를 의미 정규식 주요 패턴 및 사용 예 정규표현식 매칭 패턴 정규표현식 검색 패턴 정규표현식의 갯수(수량) 패턴 정규표현식 플래그 이메일 검사 const regexp_email = /^([a-z]+\\d*)+(\\.?\\w+)+@\\w+(\\.\\w{2,3})+$/; conso..

*이벤트 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 의미 이벤트가 발생하면 이벤트 종류에 따라 어떤 작업을 하거나 미리 등록한 함수를 호출하는 등의 조작을 자바스크립트로 지정 할 수 있다. 이벤트 등록하기 이벤트가 발생할 때 어떤 작업을 할지 자바스크립트 코드로 작성하는 것 인라인 방식으로 이벤트 등록하기 프로퍼티 리스너 방식으로 이벤트 등록하기 요소 노드에 직접 속성으로 이벤트를 등록하는 방법 이벤트 등록 메서드로 이벤트 등록하기 DOM에서 제공하는 addEventListener() 메서드를 사용해 이벤트를 등록 3가지 방법 중 가장 권장하는 방식 함수 표현식으로 정의된 함수는 호이스팅에 의해 선언과 할당이 분리되므로 참조하려면 함수가 addEventListener() 메서드보다 반드..

*문서 객체 모델(DOM) HTML 문법으로 작성한 태그, 주석, 텍스트와 같은 구성 요소들은 웹브라우저에서 각각 하나의 객체로 인식한다. 이러한 HTML 구성 요소들을 다루는 객체를 **문서 객체 모델(Document Object Model)**이라고 한다. 웹 브라우저는 HTML 문서의 구성 요소를 모두 객체로 인식 DOM이란, 웹 브라우저에서 HTML 문서 구조를 객체화한 모델을 의미 속성으로 노드 선택하기 let doc = document.firstChild; console.log(test); let html = document.firstElementChild; console.log(html); 메서드로 노드 선택하기 속성으로 노드를 선택하는 방법은 노드의 타입을 가리지 않고 모든 노드를 이동하며..

*객체 자바스크립트의 객체는 이름과 값을 한 쌍으로 묶은 집합 이름과 값이 한 쌍을 이룬 것을 프로퍼티 객체 리터럴로 생성하는 방법 객체를 생성하는 가장 쉬운 방법은 리터럴 표기(literal notation)를 이용하는 방법 let memberInfo = { name : "유나", age : 20, addr : "경기도 수원시", gender : "여성" }; console.log(memberInfo); 생성자로 생성하는 방법 new 연산자를 사용하여 객체를 생성하고 초기화 이때 사용되는 메소드를 생성자(constructor) 이 메소드는 새롭게 생성되는 객체를 초기화하는 역할 function MemberInfo(name, age, addr, gender) { this.name = name; this...

*함수 자바스크립트에서 가장 중요한 개념 자바에서는 메소드라는 용어로 사용 함수란? 특정 작업을 여러 번 반복해야 하는 경우 해당 작업을 재사용 가능한 구조로 만들게 되는데 이때 사용하는 것이 함수 함수로 구현된 코드는 그 함수를 호출함으로써 반복된 기능을 쉽게 처리 함수가 정의되었다고 자동으로 실행되는 것이 아니라 함수명을 사용해서 호출 했을 때 실행 함수의 선언과 실행 순서 자바스크립트의 코드를 해석 할 때 함수의 선언 부분을 코드의 윗쪽으로 옮겨서 먼저 해석 함수 표현식 변수에 함수를 할당해서 사용하는 방식 객체의 파생된 자료형 자바스크립트의 자료형은 변수에 할당 할 수 있어야 하며, 따라서 함수도 변수에 할당 할 수 있다. 이를 이용한 함수 정의 방법을 함수 표현식 함수 표현식은 변수에 할당하는 ..

*그리드 레이아웃 웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 스타일 2차원 방식이란 가로(row)와 세로(column)를 같이 사용해 레이아웃을 설계하는 방식 그리드 레이아웃의 기본 속성 display 속성 그리드 레이아웃은 항상 display 속성값을 grid나 inline-grid로 지정 display:grid; /* inline-grid */ 해당 속성이 지정된 요소는 그리드 컨테이너, 자식 요소는 그리드 아이템 grid-template-columns와 grid-template-rows 속성 3열 X 2행 만들기 상대적인 크기를 지정하는 fr 단위 그리드 레이아웃의 행과 열을 크기를 지정 할 때 픽셀(px)를 사용하는 경우 크기가 항상 고정되므로 반응형 웹 디자인에 적합하지 ..