자바스크립트의 확장 문법 번들링되는 과정에서 자바스크립트 형태의 코드로 변환된다 jsx function App(){ return ( Hello react ); } 변환 후 function App(){ return React.createElement("div",null,"Hello", React.createElement("b",null,"react")); } 특징 감싸인 요소 컴포넌트에 여러 요소가 있다면, 반드시 부모요소 하나로 감싼 후 리턴해야 한다 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 v16 이후부터는 div태그 대신 Fragment 기능 사용 가능 function App() { return ( 에러 에러 ); } export default App; function App..

프로젝트 생성 및 실행 node.js, npm, yarn 설치 node.js는 당장은 필요없지만, 설치시 npm이 함께 설치된다 npm은 패키지매니저 도구 node.js 설치 후, node.js의 cmd창 실행 npm 설치 확인 명령어 : npm -v yarn 설치 (패키지 관리자 도구) 설치 명령어 : npm install --global yarn 설치 확인 : yarn --version 코드에디터 설치 (Visual Studio Code) 설치 후 좌측 확장팩 설치 메뉴 이용 ESLint 설치 Reactjs code Snippets 설치 Prettier-code formatter 설치 Koran Language Pack for Visual Studio Code 설치 f1 누른 후 Configure D..

개요 자바스크립트의 발전 자바스크립트 만으로 대규모 어플리케이션을 만들 수 있게 됨 구조관리의 발전 필요 이를 해결하기 위해 수많은 프레임워크 출시 앵귤러,뷰js 등 해당 프레임워크는 주로 MVC, MVVM 아키텍쳐 사용 모델과 뷰가 있다는 공통점 보통 사용자가 어떤 작업을 하면, 변경사항을 뷰에 반영 반영하는 과정에서 뷰를 변형(mutate) 페이스북 개발팀은 뷰를 변형하는 것이 아닌, 새로 렌더링하는 방식 고안 리액트 리액트의 특징 리액트는 라이브러리이다 구조가 MVC등인 프레임워크와는 달리 오직 view만 신경쓰는 라이브러리 기타 기능은 직접 구현해 사용해야한다 컴포넌트 특정 부분이 어떻게 생길지 정하는 선언체 템플릿과는 다른 개념 재사용이 가능한 API로 수많은 기능을 내장 컴포넌트 하나에서 해당..

폼 유효성 검사, 슬라이더 등의 추가 기능을 별도의 js파일로 제공하는 jquery 라이브러리 코어 플러그인 코어 프로젝트의 일부로 간주되는 jquery의 확장 부분 ex) jquery UI 커뮤니티 플러그인 개발자들이 직접 개발한 것을 공개한 플러그인 plugins.jquery.com jquery ui플러그인 jquery에서 공식적으로 지정한 플러그인 많이 사용된 유명한 jquery플러그인을 모아 정리 jquery UI 플러그인의 메서드 형태 $(selector).플러그인이름("메서드이름") $(selector).darepicker("getDate") 플러그인 소스는 항상 jquery 라이브러리 소드보다 뒤에서 삽입해야 한다 datePicker Date: Date: 버튼 Accordion Section..

1. 기본 시각 효과 $(selector).method() $(selector).method(speed) $(selector).method(speed, callback) speed 효과를 진행할 속도를 지정 밀리 초 단위의 숫자 또는 문자열(slow, normal, fast) callback 효과를 모두 완료하고 실행할 함수 show Toggle slide Toggle fade Toggle 제목1 내용1입니다 제목2 내용2입니다 제목3 내용3입니다 show() / hide() show() 대상이 되는 모든 엘리먼트를 보이도록 한다 show(speed,[function]) speed : speed 수치 동안 보이도록 한다 function : speed의 수치가 끝났을 때, callback function ..

객체초기화 방법 var regExp = /정규표현식/[Flag]; flag의 종류 자주 사용하는 flag g-Global-문자열 내의 모든 패턴을 찾는다 i-ignore case - 문자열의 대소문자를 구별하지 않는다 m-multi line - 문자열이 행이 바뀌어도 찾는다 /^[0-9-+]+$/g ^는 시작, $는 끝을 의미 대괄호 안 0-9 : 0과 9사이의 숫자 -+ : -기호, +기호 대괄호 밖 : 패턴이 한번 또는 그 이상 반복된다는 의미 결과 0~9사이 숫자나 -기호, +기호만 사용할 수 있으며, 여러번 입력할 수 있다 /^[a-z0-9_]+$/g a-z사이 문자나 0-9사이 숫자나 언더바기호만 입력 가능 대괄호 밖 + : 배턴이 한번 또는 그이상 반복 대괄호 밖 * : 0번이상 반복, 입력 ..