본문 바로가기
728x90
반응형

Front-end100

React | Component와 Props 0. 리액트는 component 기반 라이브러리이다. 리액트는 컴포넌트 기반 라이브러리이다. 컴포넌트는 UI의 여러 부분을 분할해서 코드의 재사용성과 유지 보수성을 향상시킨다. 즉, 컴포넌트는 독립적으로 재사용 가능한 코드로 관리할 수 있도록 도와준다. 웹페이지를 하나의 완성품이라고 했을 때, 컴포넌트는 하나의 부품이다. 웹페이지가 특히 복잡할수록 각 컴포넌트로 나누어 관리한다면! 당연히 유지 보수가 필요할 때에도 전체를 건드리지 않고 해당 컴포넌트만 수정하면 된다. 혹은 비슷하지만 기능이 조금은 다른 웹페이지를 만들 때에도 컴포넌트를 조립하듯이 만들 수 있어서 재사용성이 향상되는 것이다. 컴포넌트를 나누는 기준? 기능을 단위별로 캡슐화하는 리액트의 기본 단위이기 때문에, 내부적으로 각자의 상태를 관리할.. 2021. 4. 29.
React | JSX란? 렌더링 Rendering이란? 0. 들어가기에 앞서: React란? JSX를 정리하기에 앞서 간단히 리액트를 정리해보자. 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리이다. 하나의 단일 url을 가지고 SPA(Single Page Application)으로 사이트를 표현하는 것을 가능케하는 프레임워크다. 이 리액트는 3가지의 대표적인 특징을 가지고 있다. 1. JSX 문법 2. Component 기반 3. Virtual DOM 이번엔 먼저 JSX에 대해 알아보도록 하자. 1. JSX란 쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것. 그것이 바로 JSX다! 어렵게 말해 JavaScript eXtension.. JavaScript의 확장 버전이고 결론은 자바스크립트이다. "React에서 HTML을 표현할.. 2021. 4. 29.
[React] 리액트 프로젝트 생성과 빌드 해당 글은 리액트에서 제공하는 자습서에 내용을 덧붙이고 풀어서 작성한 글입니다. 원문 : https://ko.reactjs.org/docs/getting-started.html 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 프로젝트를 만들기 위해선 creact-react-app을 이용합니다. npm install -g create-react-app create-react-app 프로젝트이름 저는 프로젝트이름을 react-tutorial으로 생성하였습니다. cd react-tutorial npm start 해당 폴더로 접근한 뒤 npm start로 실행할 수 있습니다. 정상적으로 리액트 페이지가 로드됩니다... 2021. 4. 29.
[React] React.js란 무엇인가? React.js란 무엇인가? React는 현재 현업에서 인기 있는 웹/앱(RN)의 View를 개발할 수 있도록 하는 라이브러리이다. 보통 우리가 생각하는 어플리케이션(웹, 앱 혹은 데스크톱용 소프트웨어)을 만들기 위해서는 사용자가 조작하기 위한 UI(User-Interface), UI를 컨트롤 하기 위한 로직, 데이터를 처리하는 비즈니스 로직 등 3가지 부분으로 개발이 필요하다. 이렇게 특정 부분을 나누어 개발하는 방법론을 MVC 패턴, MVVM패턴 이라고하며, React.js는 View 즉, 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다. 개발을 처음 공부한다면 MVC 패턴, MVVM패턴 외에 다양한 패턴들을 익히고, 손으로 직접 구현해보길 바란다. 다양한 패턴들이 처음에는 익숙하지.. 2021. 4. 29.
[jQuery] 제이쿼리에서 아작스(AJAX) 사용 #7 jQuery에서 Ajax 사용하기 제이쿼리를 사용하면 자바스크립트에서보다 쉽게 아작스 기술을 사용할 수 있습니다.(xhr을 사용하지 않아도 됨) 아작스는 페이지를 새로 로딩하지 않고 동적으로 페이지의 내용을 바꿀 수 있는 기술입니다. Ajax 지원 메서드 $(document).ready(function () { // 1.html 등의 text 문서 읽기 $("#t1").click(function () { // $("#disp").load("jq9_a.html");// load() : Ajax 관련 메소드 $("#disp").hide().load("jq9_a.html", function () { ​ $(this).fadeIn();// fade effect }); }); ​ // 2. json 문서 읽.. 2021. 4. 27.
[jQuery] 제이쿼리 기초 : 조작하기, 이벤트, 이펙트 #4 jQuery 조작하기 $(document).ready(function () { var p = document.getElementsByTagName("p"); // alert(p.length + ", " + p.size()); p[0].style.color = "red"; // javascript p[1].style.color = "blue"; p[2].style.color = "green"; ​ $("p").eq(1).css("color", "aqua"); // jQuery // alert($("p").index($(".kbs"))); $("p").eq($("p").index($(".kbs"))).css("color", "yellow"); ​ //$("요소~요소2") : 요소2를 요소 1에서부터 검.. 2021. 4. 27.
[jQuery] 제이쿼리 기초 : 시작하기, 선택자 jQuery 기초 jQuery(제이쿼리)는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다. jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다. (자료출처 : https://ko.wikipedia.org/wiki/JQuery) 제이쿼리를 사용하는 이유는 다음과 같습니다. 페이지 내부 요소에 접근하기 쉽다.제이쿼리를 사용하지 않으면 DOM 트리를 이용해서 요소(element)에 접근해야 합니다. 이는 배우기도 어렵고 불편한데, 제이쿼리를 사용하면 CSS의 선택자를 이용해서 간편하게 접근할 수 있습니다. 페이지의 보여지는 모습을 변경하기 쉽다.동적으로.. 2021. 4. 27.
[JavaScript] 천단위 콤마 찍기, 소수점 포함 javascript 정규식을 사용하여 input text box에 입력받는 숫자들을 천단위로 콤마를 찍어보자. 물론 소수점도 입력된다. JavaScript //문자 제거 function removeChar(event) { event = event || window.event; var keyID = (event.which) ? event.which : event.keyCode; if (keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39) return; else //숫자와 소수점만 입력가능 event.target.value = event.target.value.replace(/[^-\.0-9]/g, ""); } //콤마 찍기 function comma(obj).. 2021. 4. 20.
CSS 로 드래그 방지 / 금지 body { -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; /*글자 드래그 금지*/ } CSS로 간단하게 드래그 방지/금지 할수 있는 코드입니다. 2021. 4. 12.
728x90
반응형

티스토리툴바