3-1기 스터디/웹개발 기초10 [웹개발 기초 스터디] React(2) : Part2 props -> read-only(수정 금지) states -> can be modified using this.setState props states 모두 render() 함수를 호출 상위 컴포넌트가 하위 컴포넌트로 값을 전달할 땐 props로 전달 하위 컴포넌트가 상위 컴포넌트로 값을 바꾸고 싶을 땐 event 사용 REDUX 는 하나의 저장소. 값이 하나 바뀌면 전체가 알아서 바뀜 CREATE - mode 변경 [Control.js] ... class Control extends Component { render() { return ( //1. create create //2. update update //3. delete ); } } ... create, update, delete를 각각 클릭해보.. 2022. 1. 3. [웹개발 기초 스터디] React(2) : Part1 17.1 - 17.3 컴포넌트 이벤트 만들기 우리가 만들려는 subject라는 컴포넌트는 onChangePage라는 이벤트가 있어서 이 컴포넌트 안에서 링크를 클릭했을 때 이 이벤트에 설치한 함수를 호출하도록 만들 것 //onChangePage 이벤트에 함수 설치 onChangePage = {function(){ alert('hihihi'); //this.setState({mode: 'welcome'}); }.bind(this)} onchangepage라고 하는 이 함수는 probs 형태로 subject에 전달됨 a태그를 onClick 했을 때 함수가 실행됨, 실행됐을 때 첫번째 인자로 이벤트 객체가 전달됨 그 객체에 preventDefault(); 호출 // 페이지바뀌는거 방지 this.props.on.. 2022. 1. 3. [웹개발 기초 스터디] React(1): Part2 📺생활코딩 강의 React www.youtube.com 컴포넌트 만들기 (이어서) Props 태그의 이름과 속성을 통해 재사용성이 높은 문법이 만들어짐 → 컴포넌트 태그를 여러 번 사용할 때 각각 다른 결과를 출력할 수 있도록 하고싶음 리액트 공식 문서의 Components and Props 항목 참고하기 - 아래는 props 권장 사용법 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } props를 이용해 App.js 의 Subject, Content 컴포넌트 수정하기 class Subject extends Component { render(){ return( {this.props.title} {.. 2021. 12. 24. [웹개발 기초 스터디] React(1): Part1 강의 출처: 생활코딩 React(https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi) React 수업은 web browser javascript와 class 기반 객체 지향 프로그래밍을 기반으로 하고 있다. React: a Javascript library for building user interfaces 엄청나게 복잡한 html 코드 ← 사용자 정의 태그(component)를 이용해 정리정돈 하는 방법 중 하나가 바로 react react을 사용할 경우에 코드의 가독성, 재사용성이 높아지며 유지보수 하기가 좀 더 용이해진다. 개발환경 세팅 npm 이용하여 create react app 설치 npm: node.js의 apps.. 2021. 12. 24. [웹개발 기초 스터디] Node.js (2) 수업의 정상 JavaScript의 기본문법, Node.js의 주요 기능, 웹애플리케이션을 만드는 방법의 본질을 충분히 살펴봤다. 하지만 킵고잉 Node.js - 동기와 비동기 그리고 콜백 동기적(synchronous): 한 일이 끝나면 다른 일이 끝날 때까지 기다린다. 비동기적(asynchronous): 특정 일이 오래걸린다면 일단 일을 시켜놓고 다른 일을 함. 일들이 병렬적으로 이루어짐.-> 시간은 효율적이지만 매우 복잡하다. node.js는 비동기적인 코드를 구현하는데 좋다. 동기와 비동기 2 node.js 함수를 보면 readFileSync, readFile 처럼 Sync가 붙은 것과 붙지 않은 것들이 있다. Sync를 붙이는 것을 보아 node.js 는 비동기 방식을 선호하는 것을 알 수 있다. .. 2021. 11. 18. [웹개발 기초 스터디]Node.js (1) ✔ Node.js란 무엇인지 웹브라우저 밖의 자바스크립트 ❓ 왜 사용하는지✔ Node.js란 무엇인지 웹브라우저 밖의 자바스크립트 ❓ 왜 사용하는지 만약 1억 개의 웹페이지의 모든 ol태그를 ul태그로 바꾸려 할 때 → 원래 html 페이지 같은 경우에는 파일 하나하나마다 태그들을 바꾸어줘야 함 💡 Node.js를 사용하면 Template.js라는 파일 내용만 수정하면 됨! 💡 Because 웹페이지를 일 억개를 저장한 것이 아니라, 사용자가 어떠한 페이지를 요청할 때마다 node.js와 같은 기술로 순간순간의 웹페이지를 프로그래밍적으로 생산해내기 때문에 가능 💡 뿐만 아니라 Node.js는 사용자에게 컨텐츠 읽기 뿐만 아니라 생성, 수정, 제거도 웹을 통해 가능토록 제공함 🛰 설치(Window 기준) .. 2021. 11. 17. 이전 1 2 다음
