개발 마라톤

8. Create https://youtu.be/kctNCMFxciQ 더보기 애플리케이션은 기본적으로 Create, Read, Update, Delete의 4가지 기능을 구현한다. state를 변경할때, 인자를 Object(객체)로 주고 싶다면 단순히 setValue(Object)로 변경을 할 수 없다. 객체를 주기 위해서는 newValue = {...value} (혹은 배열은 [...value] 로 state를 복제한다. 그리고 state를 객체값으로 변경한 후, setValue(newValue)로 설정해주면 된다. 복잡한 이야기지만, 간단하게 객체를 복제 후 수정 한 다음 setValue 해주면 되는 것. topics를 state로 승격시켜서 create기능을 통해 topics를 추가시키면 App()..

6. 이벤트 https://youtu.be/s3cDPbcoy_4 더보기 이벤트를 통해 사용자의 행동에 따라 변화를 나타낼 수 있다. 우선 사용할 컴포넌트(사용자 정의 태그)에 onChangeMode={function(){..}} 이라는 함수를 하나 정의한다. 해당 함수도 역시 props로, 함수를 작성할 때는 중괄호 {}를 통해 작성한다. 태그 정의 함수에서 이벤트를 정의하기 위해서는 html와 같은 onClick 이벤트 속성을 작성해준다. 단, html와 다른 문법을 따르므로, onClick은 대소문자를 확실히 적고 내용은 중괄호 {function(event){..}}를 통해 적는다. 단, event함수는 event객체를 파라미터로 사용한다. props이기 때문에, 사용하기 위해서 props.onCha..

3. 소스코드 수정 방법 https://youtu.be/XQ-XqLVJBwg 더보기 src → index.js 가 메인 화면 은 무엇인가? 해당 태그는 import App from './App' 에서 온 함수이다. 즉, ./App 파일(App.js)에서 불러온 App함수이다. 보면 알겠지만, html형태의 코드가 있음을 확인할 수 있다. html 코드 처럼 수정할 수 있다. 또한, import './App.css'에서 스타일 정보를 받아온다. 개발자 모드로 사이트를 확인하면 기본 정보들이 작성되어있음을 알 수 있다. 이 기본 정보들은 public 폴더 → index.html 에 저장되어 있다. 터미널 종료 : 터미널에서 Ctrl + C 빌드는 종료된 터미널에서 npm run build 후에 build 폴..

1. 수업소개 https://youtu.be/AoMv0SIjZL8 더보기 React는 복잡한 코드를 간단하게 바꾸어 준다. class방식과 function방식이 있다. 이번에는 function문법을 사용할 것. 2. 실습환경 구축 https://youtu.be/txX3bL22esU 더보기 시작 전에 nodejs툴을 설치해야 함. Visual Studio Code로 작업할 것 메뉴의 Terminal → New Termina → npx create-react-app (상대폴더명) 입력 (기본적으로 현재폴더 '.' 이용) → npm start 로 개발 환경 진입