본문 바로가기

코딩 공부204

[JS] JSON JSON (JavaScript Object Notation) 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식으로 Javascript에서 객체를 만들 때 사용하는 표현식을 의미합니다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 적어서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다. 특징 서버와 클라이언트 간의 교류에서 일반적으로 많이 사용된다. 자바스크립트 객체 표기법과 아주 유사하다. 자바스크립트를 이용하여 JSON 형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있는 이점이 있다. JSON 문서 형식.. 2022. 11. 23.
[Web] Component Component 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈을 뜻한다. 그림에서 확인 할 수 있듯이 컴포넌트 기반 프로그래밍을 하면 마치 레고 블록처럼 이미 만들어진 컴포넌들을 조합하여 화면을 구성할 수 있다. 웹 컴포넌트는 이러한 컴포넌트 기반 프로그래밍을 웹에서도 적용할 수 있도록 W3C에서 새로 정한 규격이다. 웹 표준을 기반으로 구축되었으며, 최신 부라우저 및 모든 JavaScript 라이브러리, 프레임워크에서도 사용할 수 있다. 따라서 웹 컴포넌트를 이용하여 코드를 작성하면 Vue.js 나 React.js 와 같은 라이브러리, 프레임워크에 의존하지 않고 상호 운용이 가능하게끔 작성할 수 있다. 웹 컴포넌트의 규격 웹 컴포넌트는 웹 페이지 혹은 웹 앱에서 커스텀화 / 재사용화 / 캡슐화.. 2022. 11. 18.
[CSS] Bootstrap Bootstrap 트위터에서 시작된 오픈 소스 프론트엔드 프레임워크입니다. 웹페이지에서 많이 쓰이는 대부분의 요소를 내장하고 있기 때문에 bootstrap관련 사항설치 후 미리 지정되어 있는 css클래스 javascript 함수를 불러와서 바로 사용 가능합니다. 장점 - html과 css에 대한 기본 지식만 있으면 사용하기 쉽다. - 반응형 디자인을 지원합니다. 단점 - html5에 맞춰져있다보니 구형 브라우저 지원이 미흡하다. 사용방법 1. 부트 스트랩 파일 다운로드 후, 압축 해제 후 사용한다. 2. CDN(Content Delivery Network)으로 사용한다. - 어딘가에 올려져 있는 CSS 파일을 우리는 링크를 통해 단순히 접속해서 사용한다. (필요한 내용을 자유롭게 가져다 사용한다.) Co.. 2022. 11. 16.
[CSS] Grid과 CSS Unit Grid Flex는 1차원(한 방향)의 레이아웃 시스템을 제공하지만 Grid는 2차원(행과 열)의 레이아웃 시스템을 제공합니다. Flex와 동일하게 Container, item이 필요합니다. - 부모요소 : Grid Container - 자식요소 : Grid item .container { display: grid; } Grid 용어 정리 그리드 트랙 (Grid Track) 2개의 그리드 라인 사이 공간을 말합니다. 이 공간은 수평/수직 방향 모두를 말합니다. 그리드 셀 (Grid Cell) Grid를 구성하는 단일 유닛(single unit)을 말합니다. 그리드 라인(Grid Line) Grid를 행(rows)/열(columns)로 나누는 수평, 수직 선을 말합니다. 그리드 번호(Grid Number).. 2022. 11. 15.
[JS] JQuery JQuery 크로스 브라우징(호환성), 애니메이션 효과 등을 쉽게 구현할 수 있는 자바스크립트 라이브러리입니다. css 선택자를 활용하여, 객체 조작 가능하며 라이브러리로 외부파일을 내 프로젝트(작업 페이지)에 삽입해야 합니다. JQuery 연결방법 1) CDN 방식 네트워크 차단된 프로젝트에서는 쓰일 수 없습니다. 2) 다운로드 방식 제이쿼리 사이트에서 js 파일 다운로드 후 프로젝트에 삽입합니다. 1. 선택자 직접선택자 - 제이쿼리는 css 선택자로 객체 검색이 가능 - 제이쿼리 함수 인수에는 css 선택자가 삽입되어 요소 취득 - 제이쿼리는 문서(html) 로드 순서 상관 없이 쓸 수 있도록 제공되는 메소드 존재 (ready()) - 조회된 요소노드는에 메소드(이벤트) 적용 시 조회된 모든 객체에 .. 2022. 11. 14.
[Web/JS] Cookie Cookie 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데이터를 함께 전송합니다. 쿠키는 두 요청이 동일한 브라우저에서 들어왔는지 아닌지를 판단할 때 주로 사용합니다. 쿠키 사용 목적 1. 세션 관리(Session management) → 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리 2. 개인화(Personalization) → 사용자 선호, 테마 등의 세팅 3. 트래킹(Tracking) → 사용자 행동을 기록하고 분석하는 용도 예제 1. common.js 파일 /** * Cookie * document.cookie 로 쿠키 생성 * 옵션 * expires=날짜정보(만료일자); .. 2022. 11. 14.

티스토리툴바