Web Front/Javascript 2023. 8. 18.
JavaScript React 상태 관리
리액트 상태 관리 01 상태 관리 상태 관리란? 상태 관리 기술이란 앱 상에서의 데이터를 메모리 등에 저장하고 하나 이상의 컴포넌트에서 데이터를 공유하는 것 한 컴포넌트 안에서의 상태, 여러 컴포넌트 간의 상태, 전체 앱의 상태 관리를 모두 포함 MPA와 SPA에서의 상태 관리 MPA에서는 서버의 데이터를 이용해 페이지를 렌더링하므로, 클라이언트의 데이터와 서버의 데이터가 큰 차이를 가지지 않음 SPA에서는 자체적으로 데이터를 갖고, 서버와의 동기화가 필요한 데이터만을 처리 그 외의 데이터는 Client만의 데이터로 유지 MPA는 서버에서 데이터를 관리함. 그래서 클라이언트와 서버의 데이터 상태가 같음 서버는 데이터를 유지하지 않거나 유지하더라도 보안 정보만 유지함 클라이언트에서 페이지를 빌드하는 상태를..
Web Front/Javascript 2023. 8. 17.
CSS에서 Bootstrap 이해하기
CSS에서 Bootstrap 이해하기 01 Bootstrap이란 Bootstrap이란, css를 이용한 디자인을 조금 더 쉽게 할 수 있도록 해 주는 프론트엔드 프레임워크입니다. css 단축키(다양한 class)를 제공해 주는 라이브러리라고 할 수 있습니다. css가 미리 설정되어 있는 여러 가지 class 이름들을 제공해 줍니다. (1) 버튼 예시 예를 들어, 아래의 파란색 버튼을 구현해 보자. 위 버튼을 디자인하기 위해서는, 원래라면 css 파일을 따로 작성해야 한다. 위와 같이 색이 변하고, 클릭 효과(테두리가 빛남)가 있는 만들려면 css가 조금 길어진다. html 파일 버튼1 css파일 .blue-button { color: #fff; background-color: #0d6efd; border..
Web Front/Javascript 2023. 8. 16.
JavaScript - DOM, Event
JavaScript - DOM, Event DOM Event DOM window 제공 함수 alert confirm prompt open parseInt, parseFloat setTimeout, clearTimeout setInterval, clearInterval DOM XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스 DOM은 문서 요소 집합을 트리 형태의 계층 구조로 HTML 표현 HTML 문서의 요소를 제어하기 위해 지원 상단의 document 노드를 통해 접근 문서 접근 방식 이해 getElementById (string) querySelector(css selector) querySelectorAll(css selector) getEleme..
Web Front/Javascript 2023. 8. 16.
JavaScript 기본 - 객체, 함수
JavaScript JavaScript 기본 문법 객체 함수 JavaScript 자바스크립트란? 프로토타입 기반 객체 생성을 지원하는 동적 스크립트 언어 웹 브라우저에서 주로 사용, Node.js를 이용하여 콘솔 환경에서 사용 웹 브라우저의 UI를 제어하기 위해 만들어진 프로그래밍 언어 자바와 기본 구문이 비슷하다 (C언어의 기본 구문을 바탕으로 함) Mocha → LiveScript → JavaScript ECMA International: 정보 통신에 대한 표준을 제정하는 비영리 표준화 기구 ECMAScript: ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언 EMCAScipt6: ECMA에서 제안하는 6번째 표준 명세 (2015 발표) 기본 문법 HTML 자바스크립트 사용 태그를 사용 문..
Web Front/Javascript 2023. 8. 15.
JavaScript React에서의 비동기 통신
리액트에서의 비동기 통신 비동기 통신과 프로미스 01) 자바스크립트 비동기 1 자바스크립트 비동기의 등장 초기 웹 환경에서는, 서버에서 모든 데이터를 로드하여 페이지를 빌드했으므로 자바스크립트에서는 별도의 비동기 처리가 필요하지 않음 Ajax(Asynchronous JavaScript and XML) 기술의 등장으로 페이지 로드 없이 client-side에서 서버로 요청을 보내 데이터를 처리할 수 있게 됨 XMLHttpRequest라는 객체를 이용해 서버로 요청을 보낼 수 있게 됨 자바스립트와 비동기 자바스크립트는 single-threaded language이므로, 만일 서버 요청을 기다려야 한다면 유저는 멈춰 있는 브라우저를 보게 될 것 따라서 동기가 아닌 비동기 처리를 이용해 서버로 통신할 필요가 있..
Web Front/HTML, CSS 2023. 8. 15.
HTML&CSS
HTML & CSS HTML CSS CSS Selector HTML HTML Hyper Text Markup Language Hyper Text: 참조를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 Markup: 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어 웹페이지를 작성하기 위한 언어 .html(확장자)를 가짐 태그는 대소문자 구분이 없음 엔터, 스페이스바, 탭이 적용되지 않음 HTML 구성요소 태그 (Tag) HTML의 요소는 태그와 내용으로 구성 에듀싸피 시작태그 / 종료태그로 쌍을 이루거나 시작 tag만 존재하는 tag도 있다 각각의 시작 태그는 속성과 속성값을 가질 수 있음 주석 주석의 내용은 브라우저에 출력이 되지 않음 HTML tag의 내용을 설명하기 위한 용도로 ..
Web Front/Javascript 2023. 3. 7.
JavaScript 기초 - 변수, Datatype
JavaScript 란? 웹페이지의 기능을 구현할 수 있도록 하는 스크립팅/프로그래밍 언어로, HTML, CSS와 함께 사용하여 풍성하고 동적인 웹을 구현할 수 있음 웹페이지에서 활용법 HTML에서 index.js 의 JavaScript 파일 연동 JavaScript 의 변수 변수란 데이터를 담는 공간으로서 선언하기 위해 const, var, let 의 세 가지 중 하나를 사용해서 선언 처음 선언할 때만 세 가지 키워드를 사용하면 되고, 변경할 때는 변수 이름과 변경할 값만 선언해 주면 됨 하지만 const 는 상수이므로 값을 변경할 수 없음 const fruit; var apple; let grapes; console.log(fruit); 저장된 값을 확인하고 싶을 때 console.log(변수); 사..
