차근차근

0. React 리액트(React)는 UI를 효과적으로 구축하기 위해 사용하는 자바스크립트(JavaScript) 기반의 라이브러리이다. 리액트는 대화형 UI를 작성하기에 유리하다. 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있도록 한다. 캡슐화된 컴포넌트가 상태를 관리하고 UI를 효과적으로 구성할 수 있다. 기존의 소스코드를 불필요하게 다시 작성하지 않고 새로운 기능을 개발할 수 있다. 클라이언트 렌더링(그때그때 데이터를 받아오는 방식) 뿐만 아니라 서버 사이드 렌더링(서버에서 미리 만들어서 클라이언트로 보내주는 방식)도 지원한다. 그래서 Ajax등과 같은 비동기 방식과 비교했을 때 검색 엔진 최적화(SEO) 등에 있어서 유리한 형태로 소스코드를 작성할 수 있다. 이러한 검색엔진 최적화 문제는..

0. Planning the Movie Component componentDidMount는 처음 Load될때 실행될 때 작동하는 것을 설정하는 것이다. setTimeOut을 사용하여 6초 후에 isLoading상태를 바꿔보겠다. 1. Fetching Movies From API 그리고 일반적으로 쓰는 JavaScript의 fetch 말고 Axios를 쓸 것이다. Axios는 fetch 위에 있는 layer이다. Axios를 땅콩 주위의 초콜릿에 비유할 수 있다. Axios 사용을 위해 terminal 에서 npm i axios 를 실행해준다. API를 YTS라는 사이트에서 가져오겠다. https://yts.mx/ The Official Home of YIFY Movies Torrent Download -..

0. React의 장점 모두 JavaScript 기반이다. 별도로 프레임워크를 베울 필요 없이 JS 활용하면 된다. angular나 vue.js처럼 다른 언어를 배울 필요가 없음 예를 들어, Angular를 배우고 Angular을 안쓰면 다른 곳에 쓸 수가 없다. 그러나 React는 그렇지 않다. 리액트 구조는 요소별, 컴포넌트별로 나눠서 작업할 수 있게 되어 있다. 그룹별로 쪼개서, 작업할 수 있다. 모든 걸 작은 요소로 쪼개서 작업하고 마무리하면 가져다가 다른 곳에 쓸 수 있다. JSX는 리액트로 html을 쓰는 방법이다. 리액트는 Undirectional(단방향) 데이터플로우를 가지고 있다. 데이터는 항상 일정한 장소에 위치해 있고, 그 장소에서만 변경할 수 있다. Angular의 경우, 데이터는 ..

0. Github Repository 생성 Vue-todo-app이라는 Repository를 생성하였다. 그 후 로컬에 vue-todo-app이라는 폴더를 하나 만들고 git clone [github repository address] 을 실행시켜주었다. 1. 저장소 백엔드를 구성하지 않는다는 가정하에 데이터를 저장하고 싶다면 개발자도구의 Application 탭에서 할 수 있다. localStorage.setItem([key값], [value값]) 은 로컬저장소에 저장하는 코드이다. v-model="inputText" => 화면에 있는 inputText를 Vue의 data에 연결해 놓은 것이다. v-on:keyup="addItem" => 키보드를 눌렀다가 뗄 때 addItem을 실행한다. v-on:ke..

0. 이벤트 state props 그리고 render 함수 event, state, props 3개가 서로 상호작용하면서 앱의 역동성을 만든다. React에서는 props의 값이나 state값이 바뀌면 해당되는 컴포넌트의 render함수가 호출되도록 약속 되어 있다. 그 얘기는 props나 state가 바뀌면 화면이 다시 그려진다는 것이다. 각각의 요소를 클릭하면 그 요소에 대한 content가 출력이 되도록 해보겠다. 아래는 코드 화면이다. 아래는 mode가 welcome일때의 웹페이지 화면이다. 아래는 mode가 read일 때 웹페이지 화면이다. 여기서 React 개발자 도구에 들어간 후 직접 값을 변경할 수 있다. 1. 이벤트 설치 태그에 이벤트 설치를 해보겠다. Subject.js에서 하는 것은 ..

0. State 소개 state라는 개념은 props와 비교해가면서 봐야한다. 어떤 제품에 있어서 사용자의 입장이 있고 구현자의 입장이 있을 것이다. props는 사용자가 장치를 조작하는 장치(핸드폰의 전원 버튼 등)이고 state는 제품을 만드는 구현자들은 내부적 조작장치(내부 칩, 회로 등)이다. 정리해보면 props는 사용자가 컴포넌트를 사용하는 입장에서 중요한 것이고 state는 그 props의 값에 따라서 내부 구현에 필요한 데이터들이 state이다. 컴포넌트를 만들었을 때 컴포넌트의 기능을 조작하는 것이 props이다. 컴포넌트의 사용자에게 중요함. 사용자들에겐 알 필요도 없고 알아서도 안되는 컴포넌트 내부적으로 사용되는 것들이 State이다. 1. State 사용 App.js에서 코드를 작성..

0. Library vs Framework Libray는 기능을 제공하는 모음이라고 하면 그 모음에 규칙을 넣은 것이 Framework이다. 아래 그림을 보면, 명시적 렌더링에서 하는 역할이 DOM Listener, Data binding 이다. 명시적 렌더링, 컴포넌트까지가 Library이다. Framework 기능을 할 때는 라우터라고 해서 화면을 이동하는 기술이 쓰이고, 상태관리 기능도 쓰인다. 정리해보면, Vue.js는 작은 화면단 라이브러리 역할부터 큰 규모의 웹 애플리케이션 개발을 돕는 프레임워크 역할까지 점진적으로 적용할 수 있는 프런트엔드 프레임워크이다. Vue.js Library 라인업을 보면 다음과 같다. Vue.js 코어, Vue Router, Vuew, Vue CLI, Vue Dev..

0. JavaScript/HTML JavaScript/HTML 방식을 보기 위해 vue > old.html 파일을 만든 후 코드를 작성하였다. str을 바꿀때마다 div.innerHTML = str; 을 써줘야 했다. 참고로 JavaScript의 기능에 대해서 구글링 할 때는 검색어 뒤에 MDN(Mozilla Developer Network)을 붙여주자. 공식문서이기 때문에 보다 정확한 정보를 얻을 수 있다. Obj를 추가하여 코드를 조금 더 작성해보고 결과를 확인해보았다. Reactivity의 특성을 볼 수 있다. event 로 JavaScript예시를 들어보자. 1. Vue Vue의 특성을 보기위해 vue > vue.html 파일을 만든 후 코드를 작성하였다. 2. 비교 참고로 Vue는 JavaScr..

0. 2020년 프런트엔드 개발 현황 HTML, CSS, JS -> ES6, NPM, WebPack, TypeScript 화면 개발 방식 과거 : HTML, CSS, JS 현재 : npm(패키지 관리 도구), ES6(최신 자바스크립트 문법), WebPack(모듈 번들러), TypeScript(타입에 엄격한 자바스크립트) 예를 들어 최근에 페이스북, 에어비엔비같은 사이트들은 자바스크립트 양이 매우 많다. 그래서 위와 같은 도구들로 관리하는 것이 필요하게 되었다. 1. Vue.js가 주목 받는 이유 Vue.js는 JavaScript의 프레임워크이다. 구글 트렌드, 깃헙에서 검색량 1위 'Vue.js' 기존 기술 스택과 함께 사용하기 쉽다.(jQuery 사이에 껴넣는 것이 가능하다.) 공식문서가 아주 잘 되어..

0. 리액트가 없다면 엄청 긴 코드를 그냥 써야함 1. 컴포넌트 만들기 컴포넌트 만드는 방법 하나의 최상위 태그만 써야한다! 웹브라우저는 React라는 기술을 모른다. React는 html로 변환시켜주는 것이고 브라우저입장에서는 html 코드를 받기 때문이다. 위 코드는 javascript 는 아니다. 유사 javascript 이다. javascript에서 돌리면 에러난다. 저것은 JSX 라는 Facebook 에서 만든 언어이다. 예시 화면 컴포넌트를 정리정돈의 도구로 보면 좋겠다. 2. props React는 컴포넌트를 외부에서 조작할 때 props 를 사용한다. 좀 더 효율적인 코드 작성 가능 {this.prop.[xxxx]} 같은 방식을 이용 1 2 3 4 5 6 7 8 9 10 11 12 13 1..