코딩 일기장

Node.js와 npm https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org yarn https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com git https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git sourc..

리액트? 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용 타 프레임워크가 MVC, MVVM, MVW 아키텍처 구조를 가지는 한편 리액트는 오직 V만 신경씀 컴포넌트 리액트 프로젝트에서 특정 부분이 어떻게 생길지를 정하는 선언체 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과는 다른 개념 템플릿이 보통 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데 이와달리 컴포넌트는 좀 더 복잡한 개념 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의 렌더링 사용자 화면에 뷰를 보여주는 것을 렌더링이라고 함 초기 렌더링 어떤 UI 관련 프레임워크, 라이브러리를 사용하든 맨 처음 어떻게 보일지를..

1. Web Browser와 Window 객체 window 객체 개요 window 객체는 웹 브라우저에서 작동하는 자바스크립트의 최상위 전역객체이다. window 객체에는 브라우저와 관련된 여러 객체와 속성, 함수가 있다. 자바스크립트에서 기본으로 제공하는 프로퍼티와 함수도 포함 BOM으로 불리기도 함 window 객체 사용 alert, confirm, prompt window 객체의 함수를 호출하면 브라우저에서 제공하는 창을 open alert() : 브라우저의 알림창 confirm() : 브라우저의 확인/취소 선택창 prompt() : 브라우저의 입력 창. navigator navigator 객체는 브라우저의 정보가 내장된 객체 navigator 정보로 서로 다른 브라우저를 구분할 수 있으며, 브라우..

1. javascript 특징 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍언어 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 각 브라우저별 javascript 엔진은 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리속도가 느린 인터프리터의 단점을 해결 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀트 패러다임 언어 2. javascript 선언 HTML에서 javascript를 사용하려면 setTimeout(function () { console.log('3초후 실행됩니다.'); }, 3000);

1. semantic? semantic의 사전적 의미는 '의미론적인', '의미가 통하는' 이다. 검색 로봇 또는 스크린 리더등의 기계가 쉽게 해석하고 분석 할 수 있도록 만들어진 태그 HTML4에서 와 id 속성을 이용하여 화면을 구성 id의 이름을 정하는 규칙이 없기때문에 문서의 구조를 이애하는데 한계. 웨어러블 장치나 스마트 기기를 이용하여 웹문서를 읽는 데 부적합 구조 해결책으로 HTML5에서는 웹 문서 레이아웃을 표준화하는 semantic tag를 이용 사이트의 제목과 로고, 검색 창 등이 있는 헤더, 여러 내용이 있는 본문, 본문 외 내용을 나타내는 사이드바, 저작권 정보와 제작자 정보를 표시하는 푸터로 이루어져 있다. 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을..

1. 선택자의 이해 개요 HTML 문서에서 CSS 규칙 적용 타겟이 되는 다양한 종류의 CSS 선택자가 존재 일반 선택자는 전체 선택자, 타입 선택자, 클래스 선택자, ID 선택자로 분류 복합 선택자는 자식 선택자, 하위선택자, 인접 형제 선택자, 일반 형제 선택자로 분류 그 외에도 가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자가 존재 전체 선택자 : * {} 타입 선택자 : h1, h2, h3 {} 클래스 선택자 : .className {} ID 선택자 : #idName {} 하위 선택자 : E1 E2 {} 자식 선택자 : E1>E2 {} 인접 형제 선택자 : E1+E2 {} 일반 형제 선택자 : E1~E2 {} 가상 클래스 선택자 요소 가상 클래스 선택자는 User Agent가 제공하는 가..

CSS? HTML5 웹 문서를 구성하는 3가지 요소. HTML : 웹 페이지 문서 담당 CSS : 웹 페이지 디자인 담당 JS : 웹 페이지 이벤트 담당 Cascading Style Sheets의 약자 스타일 사용이유 웹 문서의 내용과 상관 없이 디자인만 바꿀 수 있다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들수 있다. 웹 페이지를 표현하기 위한 스타일 규칙을 모아 놓은 문서 웹 브라우저 별 CSS3 지원. site : http://css3test.com CSS 규칙은 선택자와 선은 두 부분으로 구성. 선택자는 규칙이 적용되는 엘리먼트. 선언 부분에서는 선택자에 적용될 스타일 작성. 선언은 중괄호로 감싸며, 속성과 값으로 이루어짐. 속성은ㅊ 선택자에서 바꾸고 싶은 요소. 값은 속성에 적용할 값...

1. 포맷팅 요소 포맷팅 요소에는 화면에는 동일하게 출력되지만 각 요소가 가진 의미가 다른 것이 있다. 예를 들면 와 은 모두 텍스트를 굵게 표현하지만, 요소는 텍스트를 강조 : 생략된 약어 표시, Title 속성을 함께 사용 : 연락처 정보 표시. : 긴 인용문구 표시, 좌우로 들여쓰기가 됨. : 짧은 인용문구 표시, 좌우 따옴표가 붙음. : 공백, 줄바꿈 등 입력된 그대로 화면에 표시 : 컴퓨터 인식을 위한 소스코드 : 특정 문자열을 강조, 화면에는 하이라이팅 됨. : 구분선 , : 굵은 글씨로 표시, 특정 문자열 강조 , : 이텔릭 표시, 특정 문자열을 강조 , : 큰 글자, 작은 글자로 표시 , : 위 첨자, 아래 첨자로 표시 , : 취소선, 밑줄 2. 목록형 요소 목록 tag는 하나 이상의 하의..

1. HTML 기본 tag와 속성 class tag에 적용할 스타일의 이름 지정 dir 내용의 텍스트 방향을 지정 왼쪽 >> 오른쪽(기본값, ltr) 오른쪽 >> 왼쪽(rtl) id tag에 유일한 ID를 지정함. 자바스크립트에서 주로 사용. style 인라인 스타일을 적용하기 위해 사용 title tag에 추가정보를 지정. tag에 마우스 포인터를 위치시킬 경우 title의 값 표시 Root 요소 tag는 HTML 문서 전체를 정의 Head와 Body로 구성 Head 요소 문서 머리글, 제목 tag는 브라우저에게 HTML문서의 머리 부분임을 인식. , , , , tag를 포함 가능. tag는 문서의 제목을 의미, 브라우저 제목 표시줄에 tag내용이 나타남 tag 이외의 다른 tag로 표현한 정보는 화면..