finepiz finepiz

https://bgeun2.tistory.com/19 React(리액트): JSX 규칙 (태그, 중괄호{}, 주석) JSX의 기본 규칙 알아보기 JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다. 얼핏 보기에는 HTML처럼 생겼지만 사실 자바스크립트이다. 'BABEL(바벨)'이라는 도구를 사용해서 XML bgeun2.tistory.com : 많이 참고 https://bgeun2.tistory.com/20?category=878823 React(리액트): props(properties), defaultProps, children 리액트에서 props는 컴포넌트를 사용할 때 특정 값을 전달해주는 역할을 한다. App.js import "./App.css"; import Hello from ..

====================================================== *현재진도 - 20.1 update부터 하면됨 *모르겠는부분 - (3)이론 2 17.3에 var data = this.props.data;인데 왜 굳이 bind로 해서 data[i].id로 해서 function(id 이렇게 인자로 onChangePage(id);이렇게 넣나? onChangePage(data[i].id) 이렇게 넣으면 안돼? 안되니까 저렇게 할 것 같은데 왜 안됨? this때문인건 아닌 것 같은데 this.props.onChangePage는 되면서?? ====================================================== =========================..

https://youtu.be/nwwJ2xU7E8w ============================================================================ 19.1. create 구현 : 소개 저는 모든 정보기술은 CRUD안에 갇혀있다고 생각합니다 CR이 핵심. 만들지 않으면 R도 쓸도 없다 + 읽지도 않을건데 만들 이유가 없다. UD 지금까지 Read를 했고 지금 Create는 코드에 박아둔 상태 : 어떻게 react로 create를 할것인가? 어차피 코드는 여러분이 계속하지 않으면 일주일 후에 까먹어요 생각의 흐름이 훨씬 중요 TOC와 Content사이에 버튼 3개 생성 수정 삭제 생성버튼 1. create버튼을 누르면 App 컴포넌트에 mode가 read에서 cre..

https://youtu.be/WLdbsl9UwDc ============================================================================ URL에 따라서 적당한 콘텐츠를 전송해주는 것을 Routing이라고 합니다. http://example.com/ --- 홈페이지 http://example.com/topic --- 토픽 페이지 http://example.com/about --- 소개 페이지 React에서 라우팅 기능을 구현하는 것은 쉬운일이 아닙니다. 이런 일을 도와주는 도구가 React Router 입니다. 이 도구를 이용하면 리액트 앱의 복잡도를 획기적으로 줄여줍니다. 리액트를 이용해서 여러개의 페이지로 이뤄진 애플리케이션을 쉽게 만드는데 도움을 ..

--- ▽뭐가 더 편해? - props를 인자로 받아와야 하기 때문에 비구조화를 왠지 해야될것같고 더 편하다 - 함수 쓸 때 bind신경 안써도 된다 - render() 가 사실상 함수형이라 다른거 --- https://opentutorials.org/module/4600 React class & function style coding React에서 콤포넌트를 작성하는 방법은 두가지입니다. 클래스 스타일과 함수 스타일로 코딩하는 것입니다. 클래스 스타일은 모든 기능을 다 사용할 수 있지만, 복잡합니다. 함수 스타일은 제한된 opentutorials.org https://youtube.com/playlist?list=PLuHgQVnccGMCEfBwnNGsJCQDiqSWI-edj React class vs ..

============================================================================ 16.1. 이벤트 state props 그리고 render 함수 어플을 역동적으로 만들어주는 state, props, event 3개. 같이 생각해야함 할 것 여기에 클릭한대로 컨텐츠가 나오게 할 것 이벤트에 따라 스테이트가 바뀌고 바뀐스테이트가 props로 전달됨으로 동적으로 어플이 바뀜 지금 현재 페이지가 어떤 종류의 페이지인지 구분하기위해 state에 mode라고 하는 값을 주고 기본값으로 'welcome'을 준대 : 상태를 나타내기 위해 state에 변수를 주네. + mode가 welcome일 때, 컨텐트 영역에 표시할 text도 지정을 해주겠습니다. : 이건 ..

============================================================================ 10.리액트가 없다면 https://opentutorials.org/module/4058/24737 여기에 코드 변경 사항이 다 있다. 기술은 항상 절망감을 재물로 삼는다 절망감이 충분히 성숙하면 기술이 발달 > 사람들은 환호 > 반복하며 문명의 발달 리액트가 없다면? 이 과정을 알면 react가 선물처럼 느껴질 것이다. public디렉토리는 npm run start했을 때 파일을 찾는 document root다 여기에 리액트를 쓰기 전 html코드를 적어볼게요 시멘틱태그는 react와는 아무 상관없는 HTML5의 스펙 : 웹페이지는 대부분 헤더, nav, 본문, 푸터..

https://youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi React www.youtube.com 선수과목 - WEB2 JavaScript - 이 수업은 클래스기반의 객체지향 스타일로 코드를 작성함. > 객체지향 : https://opentutorials.org/module/4047 --JS 객체지향 강의, ~객체간의 상속까지 듣기 후속수업 - https://opentutorials.org/module/4600 : React class & function style coding - https://youtu.be/WLdbsl9UwDc : React Router - https://opentutorials.org/module/4549 : Reac..