저장을 습관화

https://www.youtube.com/watch?v=d6suykcsNeY&t=53s React와 Express.js에서 fetch, axios 사용하는 방법 외에도 cors에 대한 설명도 깔끔하게 설명하는 강의 짧지만 굉장히 좋은 내용이어서 다음에 또 보려고 메모해둠 HTTP 메소드가 GET, POST 밖에 없어서 조금 아쉬움 https://github.com/jeongho218/Practice_for_fetch_axios GitHub - jeongho218/Practice_for_fetch_axios Contribute to jeongho218/Practice_for_fetch_axios development by creating an account on GitHub. github.com

- 증상 React로 작성한 프론트엔드에서 express로 작성된 백엔드의 데이터를 가져오는 테스트 중 발생한 문제 Uncaught runtime errors: × ERROR Cannot read properties of null (reading 'map') TypeError: Cannot read properties of null (reading 'map') at App (http://localhost:3000/main.3f8e2bcad6cf203e4b25.hot-update.js:42:24) at renderWithHooks (http://localhost:3000/static/js/bundle.js:19927:22) at mountIndeterminateComponent (http://localho..

https://ko.legacy.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.legacy.reactjs.org - 증상 아래와 같이 코드를 작성했으나 'map()은 화살표 함수 array-callback-return에서 리턴값을 기대합니다.' 라는 에러 메세지가 나왔고 웹에서 개발자도구로 봐도 {todoList...}의 내용이 전부 렌더링 되지 않은 상태 - 원인 map 메소드를 사용할때 {중괄호}를 사용해서 발생한 문제 React에서는 JavaScript를 그대로 쓰는 것이 아닌 개량한 JSX를 씀으로 그 문법이 조금씩 다름 이번 같은 경우에서는 (소괄호)를 ..

React CRUD 중 DELETE를 구현해보자 Update 때와 같이 게시글 상세보기를 눌렀을때만 Delete 버튼을 나오게 하고 싶으니 기존에 만들어뒀던 contextControl을 활용한다. Update 텍스트와 Delete 버튼을 빈 태그( )로 묶어 준 이유는 contextControl이 들어갈 자리가 이미 ul 태그로 묶여있기 때문이다. Delete 버튼의 onClick 함수를 완성시켜준다. { const newTopics = []; for (let i = 0; i ..

React CRUD 구성하기 Update 구현 화면에 클릭이 가능한 'Update' 텍스트를 넣는다. 이런 식으로 메인화면에 존재하게 되었지만, 어떤 게시물을 업데이트할 것인지 모호하다. HTML, CSS, JavaScript 혹은 추가된 글을 클릭하였을때 나오는 READ 화면에서만 Update 텍스트를 확인하고자 한다. // .. function App() { // .. let contextControl = null; if (mode === "WELCOME") { content = ; } else if (mode === "READ") { let title, body = null; for (let i = 0; i < topics.length; i++) { if (topics[i].id === id) { ..

React로 CRUD를 구성해보자 지금까지 컴포넌트, 프롭, 스테이트로 Read는 충족하였다. 다음은 Create를 적용해보자 사용자가 제목과 내용을 입력하면 HTML, CSS, JaavScript 밑으로 목록이 추가되는 것이 목표이다. 우선 Create 컴포넌트를 준비한다. // .. const Create = () => { return ( Create ); }; function App() { if (mode === "WELCOME") { // .. } else if (mode === "CREATE") { content = ; } return ( // .. {content} { event.preventDefault(); setMode("CREATE"); }} > Create ) } 화면 하단에 Crea..

State에 대해서 알아보자 프롭은 컴포넌트에 인자로서 들어가 내용과 리턴 값에 변화를 일으킨다. 스테이트도 비슷한 역할을 하지만 둘의 가장 큰 차이는 포릅은 컴포넌트를 사용하는 외부자를 위한 데이터이고, 스테이트는 컴포넌트를 만드는 내부자를 위한 데이터라는 점이다. 실습 내용 아래와 같은 화면에서 WEB, HTML, CSS, JavaScript를 눌렀을때 아래 본문 내용 의 내용이 바뀌게 하고 싶다. 코드 변경 - before // .. function App() { // .. return ( // .. ); } - after import { useState } from "react"; // .. function App() { const mode = "WELCOME"; // .. let content ..

이벤트를 적용해보자 HTML에서는 버튼 클릭에 대한 이벤트를 아래와 같은 방법으로 사용하였다. 이를 React에서 같은 기능을 수행하도록 작성하면 - src/App.js // .. function Header(props) { return ( {props.title} ); } // .. function App() { // .. return ( // .. ); } export default App; 화살표 함수를 적용할 수도 있다. // .. { event.preventDefault(); props.onChangeMode(); }} > // .. { alert("Header"); }} > // .. 다음은 리스트 1. HTML, 2. CSS, 3. JavaScript를 클릭하였을때 각 번호를 알림창으로 띄우..

HTML 태그의 속성, 예를 들어 아래와 같은 속성 내용을 컴포넌트에서 사용하는 방법 React에서는 저러한 속성을 Prop, 프롭이라고 부른다. 적용 방법 컴포넌트에 속성을 넣는다. 이 속성의 내용이 컴포넌트가 사용하는 함수의 전달인자로 인식된다. - src/App.js // .. function App() { return ( ); } // .. 이것만으로는 속성이 적용되지 않는다. 함수의 매개변수에 내용을 넣는다. - src/App.js // .. function Header(props) { return ( {props.title} ); } // .. function App() { return ( ); } // .. 함수 Header의 파라미터에 props를 넣었다. 내용은 반드시 props가 되지 ..

React는 사용자 정의 태그를 만드는 기술이다. 만약 아래와 같은 코드가 있다고 가정한다. - src/App.js import logo from "./logo.svg"; import "./App.css"; function App() { return ( WEB HTML CSS JS Welcome Hello, Web ); } export default App; 이 코드에서 추가나 수정, 삭제 작업이 필요할때 지금 당장은 작업에 어려움이 없겠지만 만약 나 , 의 내용이 수백 수천 수만 줄이라면, 작업을 진행하기 이전에 코드를 파악하는 것조차 벅찰 것이다. 이를 간편하게 하기 위해 기존 HTML 태그가 아닌 사용자가 직접 정의한 태그를 사용하는 기술이 React이다. src/App.js에 다음과 같이 내용을 ..