오늘도 코딩하나

강의 내용 요약#5.0 ~ #6.4 ○ create-react-app개발 서버에 접근한다든가,자동으로 새로고침을 시켜준다든가즉각적으로 어플리케이션 안에 CSS를 포함시켜 준다든가 ...ReactJS 어플리케이션을 만듧에 있어 훨씬 간편해짐!   ** 나는 이미 세팅이 되어있는 상태라 create-react-app을 통해 프로젝트를 생성하는 방법은       아래 링크를 참고하면 된다.https://coding-hana.tistory.com/8 [React] (1)프로젝트 생성1. Node.js 설치React 프로젝트를 생성 전, Node.js를 설치해야 한다.https://nodejs.org/en Node.jsNode.js® is a JavaScript runtime built on Chrome's V8..

강의 내용 요약#4.0 ~ #4.4 ○ props   ※ props : 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법      첫번째이자 유일한 인자      부모 컴포넌트에서 전달받은 Object   ※ component : 어떤 JSX를 반환하는 함수    (1) props로 받는 경우    props로 변수를 받아서 그 안에서 props.big 이런 식으로 사용한다.    (2) shortcut (보통 이렇게 사용한다)function Btn({ text, big }) { return ( {text} ) } function App() { return ( ..

강의 내용 요약#3.4 ~ #3.9 ○ 대충 소제목   ※ ReactJS : 어플리케이션이 아주 interactive하도록 만들어주는 library    1. state 변경하는 방법const onClick = () => { setCounter(counter + 1) setCounter((current) => current + 1);}직접 값 설정하기함수를 전달하기  ⇒ 두 방법 모두 현재의 state를 가지고 새로운 값을 계산하지만      함수로 전달하는 방법이 더 안전하다.  ⇒ React가 current가 확실히 현재값이라는걸 보장하고 있기 때문  ⇒ 예상치 못한 업데이트가 어디선가 일어나도 그게 혼동을 주는걸 방지해줌.      2. state 적용해보기( Converter ) ..

https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad CodersReact for Beginnersnomadcoders.co 강의 내용 요약#3.0 ~ #3.3 ○ State   ※ state : 데이터가 저장되는 곳       ▶ Container 리렌더링render()가 실행되면 Container 컴포넌트가 렌더링되는데Container가 렌더링될 때는 count가 0이다.countUp()을 실행해서 Container컴포넌트에 적용하고 싶으면Container 컴포넌트를 리렌더링 해줘야함!ReactJS는 UI에서 바뀐부분만 업데이트 해준다.  useState의 형태 => [state, modifier]=>..

React 복습겸노마드코더 React강의 중 기초편인 [ ReactJS로 영화 웹 서비스 만들기 ] 강의 수강을 시작했다. https://nomadcoders.co/react-for-beginners ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad CodersReact for Beginnersnomadcoders.co 강의 내용 요약#1.2 ~ #2.6 ○ VanillaJS vs ReactJs Total clicks: 0 Click me html 만들기Javascript에서 가져오기event 감지data 업데이트   ※ ReactJS : 어플리케이션이 아주 interactive하도록 만들어주는 library   ※ React-dom : 모든 ..

기본적인 mysql 연동에 대한 내용은 하단 내용을 참고하길 바란다.https://coding-hana.tistory.com/49 [React] nodejs + mysql 연동(1) server 세팅npm init -ynpm install expressnpm install nodemonnpm install cors - server.jsconst express = require('express');const db = require('/database/db');const app = express();const path = require('path')const port = 8009;app.listen(port, functicoding-hana.tistory.com 1. 서버 설정- server.jsapp.ge..

(1) server 세팅npm init -ynpm install expressnpm install nodemonnpm install cors - server.jsconst express = require('express');const db = require('/database/db');const app = express();const path = require('path')const port = 8009;app.listen(port, function() { console.log(`listening on ${port}`);});app.use(express.json());var cors = require('cors');app.use(cors());app.use(express.static(path.join(_..

1. 일반적인 setState 사용   ▶ 단순 상태 업데이트     - 상태가 직접적으로 업데이트되는 경우     - 이전 상태에 의존하지 않고 상태를 완전히 새로 설정할 때       ( 상태를 덮어쓰는 경우)     - 단순 값 설정이 필요한 경우     - 이전 상태와 무관한 로직으로 상태를 업데이트할 때   ▶ 외부 데이터로 상태 설정     - API 호출 결과를 기반으로 상태를 설정할 때const handleCheckAll = () => { setCheckedAll([])} ⇒ 이전 상태에 의존하지 않고 새 값을 설정const handleCheck = (id) => { setCheckedItems((prev) => prev.includes(id) ? prev.filter((itemId..