React.js의 State? - 데이터가 저장되는 곳, 값이 바뀔 데이터를 담는 곳 -컴포넌트에서 동적인 값을 상태(state)라고 부름 -리액트의 useState 라는 함수를 이용하면 컴포넌트에서 상태를 관리할 수 있다. why React? -리액트를 사용하면 변경된 부분만 업데이트할 수 있다.(UI에서 바뀐 부분만 업데이트 해줌) -react가 아닌 경우, 일반 JS를 쓴 브라우저는 노드 정보가 바뀔 때마다 노드 트리를 5단계에 걸쳐서 처음부터 다시 생성해야 한다. 반면, 리액트는 가상돔을 써서 우리 시야(UI)에 보이는 부분만 수정해서 보여주고 모든 업데이트가 끝나면 일괄로 합쳐서 실제 돔에 던져준다. (브라우저의 작동원리와 관련됨) * 렌더 = 렌더트리, 프론트엔트는 렌더트리 단계를 얼마나 최적..
들어가기 전에 리액트와 JSX가 궁금하다면 공식 홈페이지를 통해서 이해해보도록 합시다. 한글도 지원해서 읽어보는 게 좋을 거 같네요. https://reactjs.org/docs/introducing-jsx.html Introducing JSX – React A JavaScript library for building user interfaces reactjs.org 이전에 안 쓰이는 방법으로 React.createElement() 를 배웠습니다. 이것을 대체하려는 이유는 개발자들이 JSX라는 좀 더 편리한 도구를 사용하기 위해서 입니다. about JSX JSX(Syntax extension to JavaScript)란? - JavaScript를 확장한 문법 생긴게 HTML과 비슷해서, JSX로 Rea..
리액트를 실행하기 위해서 2가지 import하는 것이 필요하다. 위치: 여기에 임포트(body태그 뒤에) React // React JS는 어플리케이션을 interactive하도록 만들어주는 library, 엔진같은 존재 react-dom // react-dom은 library 또는 package, React elemnet를 가져다가 HTML로 바꾸는 역할 ▶아래는 리액트 임포트 예시 javaScript와 React JS를 사용하여 element 를 생성할 때는 React JS가 element를 생성한다. 즉, React JS는 업데이트가 필요한 element 를 업데이트한다. 바로 React JS가 결과물인 HTML을 업데이트할 수 있다는 것이다. -> React JS는 유저에게 보여질 내용을 컨트롤할..
jQuery를 이용해서 Ajax를 사용하게 되면 많은 이점이 있는데 그 중 하나가 크로스브라우징 이슈를 jQuery가알아서 해결해주는 것이다. jQuery를 이용해서 Ajax 통신을 하는 법을 알아보자. jQuery는 Ajax와 관련해서 많은 API를 제공한다. http://api.jquery.com/category/ajax/ Ajax | jQuery API Documentation Register a handler to be called when Ajax requests complete. This is an AjaxEvent. Register a handler to be called when Ajax requests complete with an error. This is an Ajax Event. A..
JSON이란? JavaScript Object Notation의 약자로 JS에서 객체를 만들 때 사용하는 표현식을 의미 JSON is a text format for storing and transporting data(ref: W3C) 다른 언어에서도 배열은 배열로, 객체는 객체로 전송할 수 있으며 일종의 데이터 표준 인간과 기계 둘 다 이해하기 쉽고 데이터의 용량이 작다. -> XML의 대체제로 JSON을 사용, 설정의 저장이나 데이터 전송 등에 많이 사용됨 JSON은 JS의 모든 데이터 타입을 제공하는 것은 아니다. JS의 부분적인 데이터 타입만을 지원하기 때문에 공식문서에 나온 내용을 참고하자. http://www.json.org/json-ko.html JSON API *ECMAScript5에는 ..
자바스크립트를 이용해서 웹브라우저의 통신 기능을 사용하는 방법을 알아본다. Ajax(Asynchronous JavaScript and XML) *Asynchronous adj.비동기의 : 서버와 클라이언트 간의 데이터를 주고 받는 형식으로서 JSON과 페이지 리로드 없이 웹페이지의 내용을 변경할 수 있다. 웹브라우저와 웹서버가 내부적으로 데이터 통신을 하게 한다. JS를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 말한다. 이때 사용하는 API가 XMLHttpRequest 객체이다. ->꼭 XML을 사용해서 통신해야 하는 것은 아니며 XML보단 JSON을 더 많이 사용한다. XMLHttpRequest XMLHttpRequest (XHR) objects are used to inter..
jQuery는 이벤트와 관련해서 편리한 기능을 제공한다. 이벤트 프로그래밍: jQuery와 none jQuery의 비교 -> jQuery는 크로스 브라우징을 알아서 처리해주고 이벤트를 보다 적은 코드로 구현할 수 있도록 해준다. jQuery : on API 사용해보기 ▶기본 사용법 on은 jQuery에서 가장 중요한 이벤트 API이다. on API를 통해서 jQuery에서 이벤트를 다루는 방법을 알아보자. .on( events [, selector ] [, data ], handler(eventObject) ) *jQuery 문법에서 []대괄호의 경우는 생략이 가능한 인자 뜻이다. event : 등록하고자 하는 이벤트 타입을 지정한다. (예: "click") selector : 이벤트가 설치된 엘리먼트의..
이벤트 타입이란 이벤트의 종류라고 할 수 있다. 웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 주요 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는 지 알아보자. 폼(form)에 관련된 이벤트 타입 ▶submit 이벤트 : 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다. form 태그에 적용된다. name ▶change 이벤트 input(text,radio,checkbox),textarea,select 태그에 적용된다. //입력창에 텍스트를 입력했다가 다시 지워서 원상복귀하면 change이벤트가 작동하지 않는다. ▶blur, focus 이벤트 focus는 엘리먼트에 포커스가 생겼을 때, blur는 포커스가 사라졌을 때 발생하는 이벤트이다. -> 다음 태그를 제외한 모든 태그에서 발생한다..
- Total
- Today
- Yesterday
- 부트캠프항해
- reactAPI
- getStaticPaths
- tilde caret
- is()
- aspect-ratio
- Prittier
- 원티드 프리온보딩 프론트엔드 챌린지 3일차
- 항해99프론트후기
- 원티드 FE 프리온보딩 챌린지
- ~ ^
- text input pattern
- 형제 요소 선택자
- 원티드 3월 프론트엔드 챌린지
- 타입스크립트 DT
- nvm 설치순서
- 프리온보딩 프론트엔드 챌린지 3월
- float 레이아웃
- nvm경로 오류
- 타입스크립트 장점
- && 셸 명령어
- D 플래그
- 원티드 프리온보딩 FE 챌린지
- fs모듈 넥스트
- 프리렌더링확인법
- getServerSideProps
- 항해99프론트
- grid flex
- 항해99추천비추천
- 틸드와 캐럿
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |