본문 바로가기

Archived(Programming)

 (74)
ReactJS_4_State 0. 컴포넌트 LifeCycle React 컴포넌트는 다음과 같은 사이클을 통해 순차적으로 실행된다. componentWillMount->render->componentDidMount이 순서대로 발생 예를 들어 componentWillMount: 영화관련 api요청 componentDidMount: 데이터 처리하는데 사용 로 표현할 수 있다. 1. 개념 State는 말 그대로 상태를 말하는 것으로 React에서는 컴포넌트의 상태를 이야기한다. React 컴포넌트는 자신의 상태를 저장할 수 있다. props와의 달리 state는 컴포넌트 내부에서 존재하므로 얼마든지 수정이 가능하다. state는 변경될 때마다 render가 발생한다. state를 직접 변경할 수 없기에 우리는 setState 같은 함수를 ..
ReactJS_3_Props 1. 개념 props는 쉽게 말해 부모 컴포넌트가 자식 컴포넌트에게 넘겨준 값을 말한다. Props는 속성(properties)의 줄임말이다. React의 props는 사용자가 컴포넌트 내에서 보존하길 원하는 데이터를 뜻한다. 따라서 컴포넌트 내부에서 props의 값은 보존되어야한다. 만약 props의 값을 수정하고자 한다면 컴포넌트 내부가 아닌, 부모 컴포넌트에서 수정하여야 한다. 2. 영화앱 우리는 모든 정보를 가지고 있는 부모 컴포넌트 App 에서 영화 제목들을 Movie Component에 넘기고자 한다. 이 때 props의 개념이 들어가게 된다. /src/App.js import React from 'react'; import './App.css'; import Movie from './Movi..
ReactJS_2_컴포넌트 1. 개념 Component는 React를 구성하는 기본 요소이며, Render를 통해 보여준다. npm이 start되면 이러한 js에 있던 컴포넌트가 컴파일 되어 html 파일이 되어 출력된다. 만들어지는 html 파일이 public 폴더 내에 생성되는 것이다. 여기서 ReactDOM은 웹으로 출력하도록 도와주는 것이고 ReactNative는 모바일로 출력하도록 도와준다. 2. 영화앱 우리는 영화 소개 페이지를 만드는 것을 목표로 한다. 그를 위해 3 가지 Component가 필요하다. movie_list component movie component image_component 이 때 JSX라는 언어를 사용할건데 이는 React Component 를 만들때 사용하는 언어이다. 특별한 규칙도 따로 없고..
ReactJS_1_입문 React로 하는 모든 것은 JavaScript 기반이다. function, object, variable. 1) Javascript 언어로 사용가능하다 2) 컴포넌트별 작업 가능 3) unidirectional Dataflow -> 데이터가 단방향 (Data -> UI 자동으로 업데이트) yts.ag - 영화 정보 API react code -> Javascript 바꿔주는 코드 트랜스파일러 - 웹팩(브라우저가 이해할 수 있는 코드로 변경) create react app, 이 안에 웹팩 파일이 담겨있고 이를 통해 손쉽게 리액트 앱을 만들 수 있다. 기본적인 세팅 node js 설치후 create-react-app 과정 따라하기 $ create-react-app movie_app $ cd movie_ap..
Chap 10. UI & API * UI와 APIUI는 user interface의 약자로, 사용자의 인터페이스API는 application programming interface의 약자로, 프로그램 동작 환경을 제어하는 것 UI는 사용자를 위한 부분, API는 프로그래머를 위한 부분사용자는 UI를 통해 프로그램 제어, 개발자는 API를 통해 프로그램의 동작 제어 자바스크립트의 내용을 전부 외우고 다닐 수 없기에 우리는 필요할 때마다 참조해서 사용하는 것이 일반적이다 레퍼런스가 사전이라면 튜토리얼은 안내서이다.자바스크립트의 경우, API 문서를 검색해서 참조!
Chap 9. 모듈 * 모듈 크고 복잡한 프로그램에서 기존의 코드를 재활용하고 유지보수를 보다 쉽게 할 수 있도록 프로그램을 나눠서 관리하는 것인데 여기서 나눠진 프로그램을 모듈이라고 표현! 순수 자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지는 않는다.BUT, 호스트 환경이라는 자바스크립트가 구동되는 환경에서 파일로 분할하여 관리할 수 있도록 가능! * 모듈화함수 부분을 계속 html에 포함시키는 것은 부담될 수 있음.따라서 이부분을 따로 빼는 것이 보다 좋을 수 있음. * Node.js 의 모듈화모듈을 로드하는 방법은 호스트환경에 따라서 달라진다!node js에서는 var mod = require('./node.circle.js') 와 같이 변수에다가 모듈을 가져와서 사용할 수 있다 * 라이브러리라이브러리는 모듈과..
Chap 8. 객체 * 객체의 소개와 문법배열과 비슷하게 연관된 데이터를 담는 그릇. 그렇지만 객체는 하나의 사물에 연관된 데이터를 저장하는 그릇연관배열(Associative array) 또는 맵(Map), 딕셔너리(Dictionary) 데이터 타입이 객체에 해당 12345var grades = {'kim' : 82, 'lee' : 50, 'choi' : 67} // 방법 1var grades = {}; // var grades = new Object(); 도 가능grades['kim'] = 82;grades['lee'] = 50;grades['choi'] = 67;Colored by Color Scriptercs * 객체와 반복문객체에 저장된 데이터를 기준으로 반복문 처리객체는 key와 value의 쌍으로 존재 1234v..
Chap 7. 배열 * 배열의 문법배열이란 연관된 데이터를 모아서 통으로 관리하기 위해 사용하는 데이터 타입. 변수가 하나의 데이터 저장, 배열은 연속된 메모리 공간에 데이터를 모아서 저장. 1234var member = ['egoing', 'k8805', 'sorialgi']alert(member[0]);alert(member[1]);alert(member[2]);cs * 배열의 효용성배열의 효용성은 굉장히 우수, 데이터를 통으로 모아서 관리하고 저장하기에 관련된 데이터를 깔끔하게 관리할 수 있다 * 배열의 사용 - 배열과 반복문배열은 반복문과 함께 사용시 효용을 더욱 발휘한다다음과 같은 사용을 통해 배열의 인덱스를 변수로 접근하여 반복문을 통해 보다 효율적인 알고리즘을 작성할 수 있다 12345678910function..

티스토리툴바