레퍼런스 마이닝

이번 장에서는 함수, 이벤트, 조건문 등에 대해 이야기해보자. 우린 지난 시간에 console.log를 사용하여 여러 가지를 알아보았다. 여기서 console은 Object이다. Function with Object console.log(console); console은 여러 가지 함수를 가지고 있는 Object이다. consle.log를 비롯해 alert 등 앞으로 사용하게 될 많은 함수들은 내장 함수(built-in function)라고 한다. 함수는 어떤 기능, 행위를 표현한 것이다. 필요한 곳에 원하는 만큼 사용할 수 있다. console.log('VanilaJS With Single'); console.log("VanilaJS With Double"); function vanilaJS(param..

기초적인 자바스크립트에 대해 이야기해보자. vairable, object, function을 알고 있다면 너무 쉬울 수도 있다. 이제 막 기초를 배우는 분들에게 필요한 내용이다. 우선 자바스크립트는 웹에 쓰이는 하나뿐인 프로그래밍 언어이다. Backend는 언어 선택지가 많은 반면 Frontend를 한다면 쓸 수 있는 언어는 하나뿐이다. 바로 자바스크립트이다. Frontend를 하는 사람은 자바스크립트를 알고 모두 같은 언어로 이해하고 이야기한다. 웹은 계속 빠르게 발전하고 자바스크립트도 빠르게 발전한다. 자바스크립트를 한다면 할 수 있는 일이 더 많아진다는 이야기 일 수도 있다. 자바스크립트에서 ES5, ES6을 들어본 적이 있을 것이다. 자바스크립트는 중앙 집중화가 되어 있다. 그래서 업데이트를 하면..

리액트 16의 네 번째 멋진 기능은 state null이다. 컴포넌트 업데이트 프로세스는 set state를 하면 이루어진다. state null을 통해 언제 컴포넌트를 업데이트 할지, 안 할지 제어할 수 있게 해 준다. 컴포넌트를 업데이트를 원치 않을 때의 예시 버튼을 클릭할 때마다 setState를 통해 카운트가 증가되며 MAX가 되면 null을 반환하여 화면 업데이트를 제어한다.

리액트 16의 세 번째 멋진 기능은 Error Boundaries이다. 직역하면 에러 경계이다. 이건 컴포넌트 자식의 에러를 관리할 수 있게 해 준다. 만약 포털이 에러를 만들면, 앱으로 관리할 수 있다. return types을 에러로 만들면, 동일하게 관리할 수 있다. 정상 작동할 경우에는 자식의 에러에만 한정된다. ErrorMaker 컴포넌트를 만들고 freinds에 몇 가지 이름을 넣어보자. 아래와 같이 렌더가 정상적으로 되었다. 이제 에러를 발생시켜보자. componentDidMount에서 setTimeout을 사용하여 1초 후 friends에 undefined를 할당해보자. 개발을 하다 보면 일반적이고 흔히 볼 수 있는 화면이다. 하지만 이런 화면은 사용자 입장에서는 불편하다. 에러를 잡아보자..

리액트 16의 두 번째 멋진 기능은 portals이다. 생각보다 유용해 보이지 않을 수 있는 데 사용하다 보면 유용함을 느낄 수 있다. 기본적으로 리액트는 div를 찾아서 마운트를 한다. 가끔은 리액트 root 밖에서 마운트를 해야 될 때가 있다 예를 들어 헤더가 root 밖에 있고 헤더의 타이틀 및 CSS를 변경하고 싶을 때 또는 다른 사이트를 로딩할 때 등이다. 이럴 경우 portals를 사용하면 된다. portals은 리액트 root 밖에서 리액트를 넣을 수 있도록 해준다. span 태그에 id를 지정해서 만들고 컴포넌트에서 엘리먼트를 리턴하는 대신 portals을 리턴하면 된다. import { createPortal } from 'react-dom'; const Message = () => 'J..

리액트 16의 멋진 기능 중 하나는 return type이다. 이전의 리액트에서는 컴포넌트 아니면 null을 리턴해야 했다. 그게 규칙이었다. string 같은 걸 return 할 수가 없었다. 하나가 아닌 두 개 이상의 리턴 하고 싶어도 이전의 리액트에서는 이렇게 작업을 하지 못했다. array로 감싸거나 span태그를 이용하여 다시 하나의 엘리먼트에 감싸줘야 했다. 불필요한 코드가 늘어났고 상당히 불편하였다. 리액트 16에서는 fragments라는 걸 활용할 수 있다. 또한 를 사용하여 대신할 수도 있다. 또한 String을 반환할 수 있다. fragments, string return type 리액트 16의 첫 번째 기능이다.

리액트 15 버전이 나온 지(2016년 4월 7일) 1.5년 만(2017년 9월 26일)에 리액트 16 버전이 릴리즈 되었다. 리액트 16에서 놓쳤던 부분에 대해서 알아보도록 하자. 우선 create-react-app 명령어도 프로젝트를 생성, code . 명령어로 VSC를 실행, yarn start 명령어로 서버를 구동해 보자. 리액트 16이 릴리즈 되면서 크게 변화된 4가지를 다음 시간에 같이 알아보자.

몇 해 전부터 바닐라 JS가 인기 단어로 많이 언급되었다. 이것은 오늘날 가장 중요한 프로그래밍 언어 중 하나라고 말할 수 있다. 우리는 네이티브 모바일 어플리케이션에서 서버의 복잡한 어플리케이션까지 거의 모든 것을 개발할 수 있다. 또한 구글, 페이스북과 같은 유명한 회사들이 개발하고 관리하는 라이브러리와 프레임워크가 20개가 넘는다. 여기서 프레임워크는 특정 유형의 문제에 초점을 맞추고 유사한 특성 문제를 해결하기 위한 표준화된 개념 및 기준이다. 또한 라이브러리는 기능에 대해 잘 정의된 인터페이스를 제공하는 일련의 기능 구현이다. 다시 말하면, 프레임 워크는 특정 문제를 해결하기 위한 일련의 도구, 라이브러리는 기능 구현의 집합이라고 할 수 있다. 예를 들어 Angular 프레임워크는 SPA기반의 ..

몇 해 전부터 바닐라 JS에 대한 언급이 많았다. 프로그래밍에서의 바닐라 용어는 복잡하고 화려한 UI나 사용하기 편리한 부가기능을 제외한 그야말로 기본적인 기능만 구현한 상태를 뜻한다. 그러므로 바닐라 JS는 새로운 프레임워크나, 라이브러리가 아닌 순수 자바스크립트이다. 이미 우리가 사용하는 브라우저에는 바닐라 JS가 탑재되어있다. 바닐라 JS 공식 홈페이지에는 순수 자바스크립트를 사용하면, 가볍고 빠르며 호환성이 좋다는 언급을 하고 있다. 최근 외국에서는 jQuery를 사용하는 프로젝트가 점점 줄어들고 있는 상황이다. 국내 또한 점점 외국 개발 트렌드에 맞춰가는 추세이다. 아직 국내에는 jQuery 의존도가 높긴 하지만 바닐라 JS, ES6, 타입 스크립트 등을 공부하여 시대 흐름에 뒤처지지 않은 개발..

JSdoc을 사용하여 자바스크립트를 문서화하는 도구이다. 간단한 설정과 명령어로 주석을 통해 깔끔한 템플릿을 통해 문서를 만들어준다. frontend 에도 주석을 꼼꼼히 다는 습관이 필요하다. https://github.com/jsdoc/jsdoc jsdoc/jsdoc An API documentation generator for JavaScript. Contribute to jsdoc/jsdoc development by creating an account on GitHub. github.com https://github.com/clenemt/docdash clenemt/docdash :zap: Lodash inspired JSDoc 3 template/theme. Contribute to clenem..