JavaScript13 JavaScript / use strict 자바스크립트는 단기간에 만들어진 언어로 매우 유연하게 개발되었다. 때문에 자바스크립트에서는 변수를 선언하지 않고도 값을 할당할 수 있다던가, 기존에 존재하는 프로토타입을 변경하는 등의 희한한 구조가 구현가능하다. 그래서 이런 비상식적인 구조를 좀 더 엄격히 하기 위해 ECMA 5에서 'use strict'라는 것을 추가하여 보다 상식적인 선에서 자바스크립트를 작성할 수 있도록 해두었다. 결론 : 좀더 엄격한 자바스크립트를 사용하고 싶다면 .js파일의 최상단에 'use strict' 를 작성하자. 2020. 12. 25. React / RX https://m.blog.naver.com/jdub7138/220983291803 Reactive Programming과 Rx 비동기 데이터 흐름Reactive Programming을 한줄로 설명하자면 다음과 같습니다. (출처: https://gist.gi... blog.naver.com 2020. 7. 6. React / 클래스형 컴포넌트와 함수형 컴포넌트 리액트에서 컴포넌트를 선언하는 방식은 두가지다. 클래스형 컴포넌트 함수형 컴포넌트 - 클래스형 컴포넌트 예시 - 함수형 컴포넌트 예시 *클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까? 특징 클래스형 컴포넌트 - state 기능 및 라이프사이클 기능을 사용할 수 있다. - 임의 메서드를 정의할 수 있다. - render함수 가 꼭 있어야한다. - render함수 내에서 보여주어야 할 JSX를 반환해야한다. 함수형 컴포넌트 - 클래스형 컴포넌트 보다 선언하기가 훨 씬 편하다. - 클래스형 컴포넌트보다 메모리자원을 덜 사용한다. - 프로젝트 완성 후 빌드하여 배포할때 클래스형 컴포넌트보다 결과물의 파일크기가 작다. - state와 라이프사이클 API의 사용이 불가능하다. (리액트 16.8v. 업데이트 .. 2020. 6. 22. React / Recoil - 또 다른 React 상태 관리 라이브러리 https://ui.toast.com/weekly-pick/ko_20200616/ Recoil - 또 다른 React 상태 관리 라이브러리? 많은 React 상태 관리 라이브러리들이 있고, 가끔 새로운 라이브러리가 등장한다. 그러나 페이스북에서 직접 상태 관리 솔루션을 소개하는 것은 흔하지 않다. 이 라이브러리가 어떤 장점이 있고 � ui.toast.com 2020. 6. 16. React / JSX정의 및 장점 그리고 문법 *JSX란 JSX는 자바스크립트의 확장 문법이며 XML과 매우 유사하게 생겼다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니며, 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정한다. JSX는 브라우저에서 실행되기전 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 예시는 다음과 같다. //JSX function App() { return ( Hello react ); } function App() { return React.createElement("div", null, "Hello", React.createElement("b", null, "react")); } *JSX의 장점 보기 쉽고 익숙하다 일.. 2020. 6. 14. React / 번들러 *번들러? 리액트에서 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되며, 프로젝트 생성 과정에서 node_modules디렉토리에 react모듈이 설치된다. 그러면 import구문을 통해 리액트를 불러와서 사용할 수있는데 여기서 한가지 알아야 할 점이 있다. 모듈을 불러와서 사용하는 것은 원래 웹 브라우저에서는 없던 기능인데 이러한 기능을 브라우저에서도 사용하기 위해 번들러 개념이 탄생한 것이다. 번들러는 파일을 묶듯이 연결하는 것을 의미하며, 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js가 지원해준다. (참고로 Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.) 대표적인 번드러로는 웹팩, Parcel, .. 2020. 6. 13. React / Ubuntu 20.04 LTS에서 Node.js 및 npm설치하기 별거 없다. 1. 설치 명령어 sudo apt update sudo apt install nodejs npm 2. 버전확인 명령어 nodejs --version npm --version 2020. 6. 13. React / 초기 렌더링과 리렌더링 *초기 렌더링 어떠한 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 사용자 화면에 뷰를 보여주는 것을 초기 렌더링이라고 한다. 리액트에서는 렌더링을 다루는 render함수가 있다. render() {...} render함수는 다음과 같은 특징이 있다. 컴포넌트를 정의 뷰의 모양새와 작동 방식에 대한 정보를 지닌 객체 반환 내부 컴포넌트 재귀적 렌더링(컴포넌트 내부엔 컴포넌트가 들어갈 수 있다.) 이러한 특징을 가진 render함수를 가지고 초기 렌더링을 할때 과정은 다음과 같다. 내부컴포넌트 렌더링을 시작으로 최상위 컴포넌트와 내부 컴포넌트들을 렌더링함. 최상위 컴포넌트 렌더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML 마크업을 만듬. 실제 페이지의 DOM요소 안에 주입. DOM.. 2020. 6. 13. React / 리액트란? *리액트(React.js) 리액트는 페이스북에서 2013년 3월에 발표된 자바스크립트 라이브러리이며 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였다. 리액트는 사용자 인터페이스를 만들기 위해 사용되고 있으며 컴포넌트 기반으로 되어있어 컴포넌트에 데이터를 내려주면 개발자가 설계한대로 UI가 만들어져 사용자에게 보여진다. 또한 최대한 성능을 아끼고 편안한 사용자 경험을 제공하도록 구현되어 있으며 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 View만을 신경 쓴다. *리액트의 특징 컴포넌트 리액트는 컴포넌트 기반의 라이브러리이다. UI를 하나의 큰 덩어리로 생각하면 컴포넌트는 그 덩어리를 이루는 작은 요소들이다. 그런 요소들을 설계해서 쌓아 올리면 하나의 UI가 만들어지며 컴포넌트들.. 2020. 6. 11. JavaScript / HTML DOM과 자바스크립트 관계의 이해 1.HTML 페이지와 자바스크립트 객체 HTML페이지와 브라우저 윈도우나 탭에 로드되면 브루아저로부터 자바스크립트 코드에서 활용가능한 많은 객체들을 제공받는다. 다음은 3개의 객체그룹이다. ①자바스크립트 코어 객체자바스크립트 코어 객체는 브라우저의 종류나 HTML 페이지의 구조에 관계없이 자바스크립트 프로그램에서 항상 활용할 수 있는 기본 객체들이다. 코어 객체에는 String, Math, Date, Array, Function 등이 있다. ②HTML DOM 객체브라우저 HTML페이지를 로드하는 과정에서 각 HTML 태그를 하나의 객체로 만든다. HTML DOM은 W3C의 표준이므로 모든 브라우저에서 호환된다. HTML태그를 동적으로 제어하기 위해서는 HTML DOM의 지식이 반드시 필요하다. ③BOM .. 2020. 3. 12. JavaScript / 함수와 객체 1.함수 함수는 데이터를 전달받아 처리한 후 결과를 돌려주는 코드 블록이다. -function : 함수 선언을 표시하는 키워드 -함수 이름 : 개발자가 정하는 것으로 함수의 목적에 맞게 이름 붙임 -arg,arg2... : 함수를 호출하는 곳으로부터 값을 받는 매개 변수. 값을 받지 않는 경우 매개변수 필요 없음 -프로그램 코드 : 함수의 작업을 실행하는 자바스크립트 코드 -return문 : 함수의 실행을 종료하고 호출한 곳으로 되돌아 가면서 함수의 실행 결과를 반환하는 문 ▶함수호출 함수에게 일을 지시하고 결과를 받는 것을 함수 호출이라 한다. 함수의 호출에는 2가지 방법이 있다. ①변수이름 = 함수이름(arg1, arg2, ..., argN); //함수 호출 후 리턴 값 받음 ②함수이름(arg1, a.. 2020. 3. 11. JavaScript / 제어문(조건문, 반복문) ▶자바스크립트 코드의 위치 ①HTML태그의 이벤트 리스너 속성에 작성 ②내에 작성 ③자바스크립트 파일에 작성 ④URL부분에 작성 ※이벤트와 이벤트리스너 이벤트는 사용자의 입력 행위를 브라우저가 웹 페이지에 전달하는 수단이다. 사용자가 HTML태그가 출력된 영역에 키를 입력하거나 마우스를 클릭하면 이벤트가 발생하며, 이벤트는 해당 HTML태그에게 전달된다. 이벤트는 click, change, mouseover등 많은 종류가 있으며 이러한 이벤트를 처리하는 자바스크립트 코드를 이벤트 리스너라고 한다. onclick, onchange, onmouseover와 같이 이벤트 앞에 on을 붙인 이름이 HTML태그의 이벤트 리스너 속성으로 사용된다. ▶자바스크립트로 HTML 콘텐츠 출력 자바스크립트 코드로 HTML콘.. 2020. 3. 10. JavaScript / 자바스크립트란 JavaScript란? 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용되며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있다. 자바스크립트 등장배경 자바스크립트의 등장은 넷스케이프사의 Marc Andreessen의 고민에서 부터 시작되었다. 때는 1993년, Marc Andreessen이라는 한 청년은 대학을 졸업함과 동시에 Netscape라는 기업을 설립한다. 이후 Marc Andreessen은 Netscape Navigator라는 웹 브라우저를 만들어 출시하고 당시 브라우저 시장의 약 80%를 점유하게된다. 그렇게 브라우저 시장을 점유한 그는 어느.. 2020. 3. 9. 이전 1 다음
