WEB

[Node.js] express를 backend로 하는 Create-react-app

1. 개발환경 세팅 이번 프로젝트에서 Node.js에서 많이 사용하는 프레임워크인 Express로 백엔드를 구성하고 Create-react-app으로 프론트를 구성해보려고 한다. 이번 포스팅에서는 Express 앱을 만들고 react앱과 서버를 연결해주려고 한다. 프로젝트의 전체 폴더 안에 back와 front폴더를 각각 나눠주고, back 폴더에는 express, front폴더에는 react 앱을 세팅해준다. 2. Express Generate 로 express 앱 만들기 Express-generator는 Express 환경을 간단하게 구축해주는 npm이다. 따라서 사용하면 쉽게 Node.js 개발을 할수 있다는 장점이 있다. express-generator를 설치해서 Express App을 만든다. ..

[JS] 이벤트(Event)와 이벤트 핸들러(Event Handle)

이벤트(Event)란? 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다. 이벤트 타입 발생한 이벤트의 종류 (폼, 키보드, 마우스, HTML DOM, Window 객체 등) // 마우스 클릭 이벤트 예시 여길 클릭하세요! this : 태그에서 나온 DOM 객체의 자기자신을 의미 이벤트 핸들러 이벤트가 발생했을 때 그 처리를 담당하는 함수 지정된 이벤트가 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 핸들러를 실행 // 이 함수는 HTML 문서가 로드될 때 실행됨. window.onload = function() { // 아이디가 "text"인 요소를 선택함. var text = document.getElementById("t..

[JS] 노드(Node) 객체와 window 객체

노드(Node)와 노드 트리 노드(Node) : HTML DOM 에서 정보를 저장하는 계층적 단위 노드 트리 : 노드들의 집합으로 노드 간의 관계를 나타냄 자바스크립트에서는 HTML DOM을 이용하여 노드트리에 포함된 모든 노드에 접근할 수 있다. 노드 간의 관계 노드 트리의 모든 노드들은 서로 계층적 관계를 맺고 있다. 노드의 종류 문서 노드(document node) : HTML 문서 전체를 나타내는 노드 요소 노드(element node) : 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드 주석 노드(comment node) : HTML 문서의 모든 주석은 주석 노드 속성 노드(attribute node) : 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 ..

[JS] 자바스크립트와 DOM, HTML 요소 메소드

목차 DOM이란 자바스크립트와 DOM 01. DOM 이란? 문서 객체 모델(Document Object Model) 문서객체모델(Document Object Model) : 객체지향 모델로써 구조화된 문서를 표현하는 형식 DOM은 프로그래밍 언어와 독립적이다. 주로 자바스크립트를 사용하지만, DOM의 구현은 어떠한 언어에서도 가능하다. HTML 문서에 대한 인터페이스 DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스 DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함 DOM의 종류 Core DOM : 모든 문서 타입을 위한 DOM 모델 HTML DOM : HTML 문서를 위한 DOM 모델...

[JS] 자바스크립트 배열(array)과 sort(), split() 함수

Array (배열) 선언 하나의 변수에 여러 값을 저장할 수 있음 let array = [1,2,3,4,5] console.log(array[0]) array.push(6) console.log(array) array.length Sort (정렬) 함수 자바 스크립트 배열의 내장 함수 sort()는 배열 안의 원소를 정렬하는 함수이다. arrayobj.sort(sortFunction) arrayobj는 임의의 Array 개체이다. sortFunction는 요소 순서를 결정하는 데 사용되는 함수의 이름이다. 생략하면 오름차순, ASCII 문자 순서로 정렬된다. 문자정렬 var fruit = ['orange', 'apple', 'banana']; fruit.sort(); // apple, banana, or..

[JS] 자바스크립트 변수 (var, let, const, scope)

목차 변수 scope var이 잘 안쓰이는 이유 변수 값에 상징적인 이름으로 변수를 사용한다. 자바스크립트에는 총 3가지의 변수 선언 방법이 있다. Name Scope 변경 가능성 var Function Scoped 변경 가능 let Block Scoped 변경 가능 const Block Scoped 변경 불가능 변수 선언 방법 (var, let, const) (변수 이름) = (값); var name = "daniel"; let age = 20; const isMale = true; Scope 변수에 접근할 수 있는 범위 Global Scope (전역 스코프) 만약 변수가 중괄호( { } )밖에 선언된다면 어디서든 접근 가능한 전역 변수가 되고, 전역 스코프에 정의된다. var daniel = "awe..

[HTML+CSS] Media Query, Viewport

1. 미디어쿼리 (Media Query) 미디어쿼리란 PC 뿐만 아니라 모바일과 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문으로 특정 조건에서만 CSS 코드를 적용시켜 준다. min-width : 최소 너비 max-width : 최대 너비 min-height : 최소 높이 max-height : 최대 높이 aspect-ratio : 가로세로비 orientation : 방향 @media (조건) { 속성 } ex .media { width: 500px; height: 500px; background-color: red; } /* 미디어쿼리 */ @media (min-width: 320px) and (max-width: 800px) { .media { width: 300p..

[CSS] CSS 애니메이션 (Transform, Transition, Animation)

Transform, Transition, Animation은 전부 css3 의 언어에 등장하는 속성 1. Transform transfrom은 특정 영역을 회전시키거나, 확대/축소 시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용 1.1 rotate, scale, skew, translate .transition { transfrom: rotate(45deg); /* 회전 */ transform: scale(2,3); /* 확대 축소 */ transform: skew(10deg, 20deg); /* 각도 변경 */ transform: translate(100px; 200px); /* 위치 변경 */ } .rotate(angle): 입력한 각도만큼 회전하며, 음수도 입력 가능 ..