whatisthis?

React) React Js 입문 - (下) JSX React) React Js 입문 - (中) Events in React React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 **.. mywebproject.tistory.com 입문편의 예제를 이어서 진행함. (지난 포스팅 참조) 컴포넌트에 state를 추가 let count = 0; const Container = () => ( Total clicks: {count} Click me ); 우선, count변수에 저장된 값이 출력되도록 {count}와 같이 적는다. 그리고, button을 클릭했을 때 카운트..

React) React Js 입문 - (中) Events in React React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 ** 직접 바닐라 자바스크립트의 코드와 리액트를. mywebproject.tistory.com - 이전 포스팅에서 요소를 만들때는 -const 변수명 = React.createElement(태그명, {props Obj}, content} 와 같이 작성했었다. 이 방법은 기본적이지만 어려운 방식이고, 이번 시간에 더 효율적이고 쉽게 element를 생성하는 법을 알아보겠다. JSX 소개 – React A JavaScript library ..

React) React Js 입문 - (上) React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 ** 직접 바닐라 자바스크립트의 코드와 리액트를 사용한 코드를 비교해 mywebproject.tistory.com const root = document.getElementById("root"); const span = React.createElement("span", null, "Hello!"); const btn = React.createElement("button", null, "Click me"); 여기서 span과 btn을 동시에 root위치에 보내려면 방법1 / 배열로 묶듯이 함 ReactDOM.r..

React.js 는 interActive 웹사이트를 쉽게 만들 수 있게 해줌. - vanila JS로만 작성한 코드보다 훨씬 효율적이고, 편리한 기능 多 ** 직접 바닐라 자바스크립트의 코드와 리액트를 사용한 코드를 비교해보자. - vanila JS만 사용해서 버튼을 클릭하고, 클릭할때마다 1,2,3,4, .. 회가 뜨도록 하는 간단한 앱을 만들자. vanila.html Total clicks: 0 Click me 그러면, 이제 리액트를 사용했을 때를 보기 위해 리액트를 설치하는 코드를 두개 추가해야한다. 새로운 파일인 index.html에 body 아래에 script태그 두줄을 추가하고, 콘솔창을 켜서 React라고 쳐보면 아래와 같이 떠야한다. 위 코드는 react.js와 react-dom 두가지를 ..

이 기술을 배워야하는지? 1 / 누가 이 기술을 사용하는지, 규모가 어느정도 되는지. 2 / 사용하는 이들에게 얼마나 중요한 기술인지. 3 / 계속해서 사용 가능한지. (전망) - 리액트는 FaceBook에서 처음 만들었고, 모든 FaceBook 웹사이트를 다시 만들었다. 4/ 큰 커뮤니티를 가지고 있다. - 자바스크립트와 아주 가깝기 때문에 대부분의 작업은 js 작업이다. >> 더 나은 js 개발자가 되기 위해 배우는 라이브러리. 5/ 리액트를 기반으로 제작하는 프레임워크 등이 존재. -> 예- 리액트 native. (리액트 JS로 안드로이드 or iOS 어플 제작 가능) React 시작하기 - Web 개발 학습하기 | MDN 이 문서에서는 React를 소개합니다. 우리는 React에 대한 약간의 배경..

z-index - CSS: Cascading Style Sheets | MDN CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. developer.mozilla.org /* 키워드 값 */ z-index: auto; /* 값 */ z-index: 0; z-index: 3; z-index: 289; z-index: -1; /* 음수 값으로 우선순위를 낮출 수 있음 */ /* 전역 값 */ z-index: inherit; z-index: initial; z-index: unset; 수직방향으로 붕 뜨게되면, z-index라는 레벨이 생김. 만약 포지션이 겹친다면 나중에 오는 요소..

보호되어 있는 글입니다.

제이쿼리(jQuery) write less, do more 이라는 모토로 만들어진 오픈소스 기반의 자바스크립트 라이브러리. 쉽게 element를 찾고 조작할 수 있고, 브라우저의 호환성이 뛰어나다. 또한 메소드 체이닝 등 짧고, 유지관리가 용이한 코드를 지원한다. 장점 IE8,9를 지원한다. 모든 브라우저에서 호환 가능. 코드가 보기 좋다. (디자인을 위해) 플러그인을 지원한다. (다양한 기능 추가 가능) 애니메이션, AJAX도 간단히 사용 가능. 단점 무겁다. 바닐라 자바스크립트보다 10배~100배정도 느리다. 모듈화가 안되어있다. 예> $(document).ready(function(){ alert("Hello World!"); $("#blackBox").hide(); }); window.onload..

실행 컨텍스트(Execution Context) javaScript. (18) 실행 컨텍스트 실행 컨텍스트 (Execution Context) 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. var name = 'zero'; // 전역변수.. mywebproject.tistory.com - 지난번에 업로드했던 실행 컨텍스트 포스팅은 var을 기준으로 한 설명이였다. 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생김. 컨텍스트 생성 시 컨텍스트 안에 변수객체(argument, variable) , 스코프체인, this가 생성됨. 컨텍스트 생성 후 함수가 실행되는데..

원칙적으로, 자바스크립트로 CSS를 조작하는것은 지양하는 것이 맞다. 그러나, CSS만으로는 처리할 수 없을 때, (예 - 리액트같은 프레임워크를 쓰거나, 스크롤 문제 해결시) 어쩔 수 없이 js로 CSS를 조작해야 하는 경우가 발생한다. - 태그의 CSS를 변경 document.querySelector('선택자').style.display = 'inline-block'; 여기서 주의할 점은 -가 들어간 속성(예>background-color)은 -를 빼고 뒤의 문자를 대문자로 바꿔준다. (자바스크립트는 캐멀케이스 이므로) +) 처음부터 -가 붙은 CSS속성 (예> -webkit) 또한 -를 제거하고 w를 대문자로 바꿈. - 자바스크립트에서는 '-'가 빼기 연산자로 인식됨. - 태그의 css 속성을 읽어..