코딩하는 동그리

React의 정의 출처 https://ko.reactjs.org/tutorial/tutorial.html 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org React , 쉽게 정리해본다면 리액트는 상태 변화 프로그램(데이터 관리 프로그램) 이다. 즉, 반복이 많거나 변경이 빈번한 환경에서 활용된다. MVC 구조에서 view의 역할(화면 출력하는 역할)을 수행한다. React 특징 * 가상 돔을 사용하여 Application의 퍼포먼스를 최적화했다. * 싱글 페이지 Application에서 UI를 만드는 라이브러리이다보니 페이지 전환 기능 등을 제공하지 않는다. 이때는 react-router와 같은..

기존에 사용했던 자바스크립트 라이브러리는 리액트에 비하면 아무것도 아니었다. 개인 프로젝트를 시작하면서 리액트를 다루게 됐다. 리액트는 매우 복잡하기 때문에 편집기 사용이 필수이다. 나는 웹스톰 편집기를 이용해서 리액트를 공부중인데 리액트는 마치 하나의 프로젝트 만드는 느낌이다. jQuery, Vue.js 등은 html이나 jsp 파일에 조금? 추가 하는게 전부였는데 리액트는.. 밑의 사진으로 말을 대신하겠다. 리액트로 프로젝트를 생성하면 자동으로 라이브러리가 다운로드 된다. but, 추가적으로 라이브러리가 필요한 상황에 대해서 다뤄보도록 하겠다. 라이브러리 다운로드 프로젝트 > package.json 클릭 > 밑의 사진에 표기된 공간에 라이브러리 다운로드 다운로드 받고자 하는 라이브러리를 입력하면 위의..

오늘은 간단히 Vue.js를 이용해서 웹에 데이터를 출력해보겠다. 오늘의 미션 "Hello 동그리!!" , "Vue JS~_~" 출력하기 그전에 Vue.js 에 대해 간단히 정리하고 넘어가자. Vue.js의 정의 * 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크 * 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 * UI를 빠르게 개발하기 위해서 만든 자바스크립트 프레임워크 출처 : https://ko.wikipedia.org/wiki/Vue.js Vue.js의 장점 * 가상 DOM 을 지원하여 빠른 UI렌더링이 가능 * 다른 자바스크립트 프레임워크와 달리 유연하고 가벼움 * React와 Angular의 장점을 가진 Vue.js Vue는 Ang..

input 태그 안에 값을 넣을 때 아주 긴~~ 문장을 입력할 때가 있다. 이때 스타일을 적용하지 않으면 한줄로 입력이 되기 때문에 주의가 필요하다. 방법은 아래와 같다. white-space: pre-wrap 적용 전 white-space: pre-wrap 적용 후 상세보기 번호 ${vo.no } 작성일 ${vo.dbday } 이름 ${vo.name } 조회수 ${vo.hit } 제목 ${vo.subject } ${vo.content } 수정 삭제 목록

HTML의 태그를 어떻게 제어할 것인가 동적인 부분에 중심을 두었다. 화면의 동적인 움직임 삭제, 수정, 추가 읽기 등을 처리 할 때 .jsp 파일은 새로운 동작을 실행하면 메모리가 새롭게 갱신된다. 기존 페이지의 내용이 사라지는 불상사가 생기는 것이다. 영화 예매를 한다고 가정해보자. 영화관과 영화 시간 인원 좌석 등을 선택 하고 하나의 값만 수정하려고 뒤로 돌아가면 모든 데이터가 사라져 있다. 해당 홈페이지를 이용할 사람이 몇이나 될까? 자바스크립트를 이러한 현상을 해결해준다. 영화관, 영화 , 시간, 인원, 좌석 등의 모든 동작을 데이터를 유지하고 있다. 1. 변수 데이터를 저장하는 '변수'는 자동 지정 변수를 사용한다. let , const변수 변수만 지정하면 데이터형이 무엇이던 알아서 저장해준다..

input 속성 값으로 required 처리를 하면 값을 입력하지 않으면 알림이 뜬다.

HTML과 CSS를 구분할 때 CSS = 화면 디자인 이렇게 단순하게 생각해도 좋다. 화면 디자인을 하기 앞서 선택자를 반드시 알아야 한다. 그렇다면 선택자는 무엇일까? 선택자 CSS는 외부 CSS, 내부 CSS, 인라인 CSS로 사용된다. 외부 CSS와 내부 CSS는 태그 하나 하나에 직접 디자인을 적용시키는 것이 아니라 전체 태그 중 다수 또는 소수의 태그에 디자인을 적용시킨다. 만약 한 페이지 안에 태그가 10,000개가 존재한다고 생각해보자. 만개의 태그 중 특정 테이블 안에 존재하는 태그의 디자인만 변경하고 싶다. 그럼 어떻게 찾을 수 있을까? 이때 필요한 것이 선택자이다. 선택자는 태그만이 갖는 특성을 이용해서 원하는 태그를 찾을 수 있도록 '구분'한다. * 전체 선택자 페이지 내부에 있는 모..

HTML은 태그를 이용해서 값을 출력한다면, CSS는 주로 태그를 꾸며주는 기능을 한다. CSS를 한마디로 표현하자면 '화면 디자인'이라고 할 수 있겠다. HTML의 내용과 상관없이 디자인을 바꿀 수 있기 때문에 CSS를 누가 디자인 하느냐에 따라 화면 디자인이 달라진다. CSS는 3가지로 구별할 수 있다. 외부 CSS 내부 CSS 인라인 CSS 각각의 특징에 대해서 알아보자. 1. 외부 CSS 모든 페이지에 적용시길 때 css파일을 만들어 제작해두면 좋다. css파일을 하나 만들어 두고 각 페이지마다 불러오면 공통적인 화면 디자인이 가능하다. 확장자는 .css 이다. 위의 사진처럼 CSS 파일을 생성하면 필요할 때마다 어느곳에든 사용할 수 있다. 2. 내부 CSS 한 개의 파일 내부에서 설정된다. 3...

화면을 만들어 나갈 때 모든 요소는 '박스'라는 사각 영역을 생성하면서 시작된다. 박스를 구성하는 요소는 다음과 같다. * margin 속성 * border 속성 * padding 속성 * width 속성 * height 속성 먼저 그림으로 확인해보자. Margin 속성 Margin 은 브라우저와 태그 사이의 간격을 말한다. 가장 바깥쪽 여백이라고 생각하면 이해가 빠를 것이다. 브라우저에 글씨가 너무 가까이 붙어있다면, margin 속성을 주어서 공간을 띄울 수 있다. margin - top ( 위 ) > margin - right ( 오른쪽 ) > margin - bottom ( 아래 ) > margin-left ( 왼쪽 ) 위와 같은 시계 방향 순서로 값을 지정할 수 있다. margin은 4개의 방향..

HTML 문법에서 생명은 태그 사용이다. 모든 명령는 태그를 이용하기 때문에 태그 사용법을 모르면서 HTML을 안다고 할 수 없다. 태그의 속성 1.여는 태그와 닫는 태그는 쌍으로 만들어 진다. 여는 태그 닫는태그 독립 태그(Empty) _단독으로 사용 가능하다. 2. 태그 속성은 두가지이다. block 속성 : 다음줄에 출력된다. 세로출력 inline 속성 : 옆으로 출력된다. 가로출력 ( enter없이 ) 태그의 종류 1. 문자관련 태그 html에서는 무조건 한줄 출력이다. 문단을 나누기 위해선 등을 이용해야함 : 제목을 설정 bold(굵은글씨) & br(다음 줄) ~~ 숫자가 커질수록 글자의 크기는 작아진다. HTML5 H1:태그는 소문자로만 사용 HTML5 H1:태그는 소문자로만 사용 HTML5 ..