고래씌

1. 게시글 목록(BoardList.js) App.js에 있는 게시글 삭제 부분 함수와 html부분을 모두 잘라서 BoardList.js 에 모두 붙여놓기한다. export default function BoardList(props){ let {게시글배열, 게시글배열변경함수} = props; const 게시글삭제 = (삭제할글번호) => { // 2) 게시글배열에서 글번호와 일치하지 않는 게시글만 필터링하기. (filter함수 이용) let 필터링배열 = 게시글배열.filter((게시글) => 게시글.글번호 !== 삭제할글번호) 게시글배열변경함수(필터링배열); } 일반게시판 번호 제목 작성자 작성일 삭제 {/* Array내부의 map함수 사용 예제 [1,2,3].map(function () {return..

1. 컴포넌트 작성규칙 1) 작명시 첫글자는 대문자로 2) 다른 컴포넌트의 외부에 작성해야한다. 2. 컴포넌트로 만들면 좋은 요소 1) 반복적으로 출현하는 html 요소 2) 애플리케이션의 각 페이지들 3) 자주 변경되는 html 요소 => 컴포넌트는 이거 외에는 사용하지 않는것이 좋다! 나중에 개발할때 유지보수 측면에서 너무 많은 컴포넌트를 사용하면 안좋음 ※ 이전 2-1, 2-2 내용과 이어짐 ▶ App.js 게시글배열은 배열데이터이고, 게시글배열변경함수는 함수데이터임. 이게 BoardInsert.js에서 매개변수로 값이 들어간다! /* eslint-disable */ import './App.css'; import {useState} from 'react'; import 초기게시글 from './d..

1. 게시글 등록 ▶ 게시글 등록 작업순서 1) 내가 입력한 값 가져오기 2) 가져온 데이터를 바탕으로 게시글 객체 생성하기 3) 생성한 게시글 객체를 게시글배열에 추가한 후, 게시글배열변경함수 호출하기(랜더링) 1) 내가 입력한 값 가져오기 - js 방식 : document.querySelector(선택자).value - react방식 : state(글제목, 글내용, 작성자) 2) 가져온 데이터를 바탕으로 게시글 객체 생성하기 //2) 가져온 데이터를 바탕으로 게시글 객체 생성하기 let 게시글 = { //글번호는 게시글 배열에서 고유해야 함 , // 게시글 배열에서 가장 큰 글번호값을 찾은 후 +1해서 반환해줄 예정 글번호: Math.max( ...게시글배열.map(function(게시글,인덱스){ ..

1. 게시판 만들기(변수) /* eslint-disable */ import './App.css'; function App() { return ( {/* jsx문법 내부에서의 주석 JSX문법) js 문법 내부에 html코드를 작성할 수 있는 문법을 jsx문법이라고 함. 리액트에서 UI를 구성할 때 보편적으로 사용되는 방법으로 복잡한 코드를 할 필요없이, 동적으로 추가되는 dom요소를 단순 코드선언으로 생성할 수 있게 도와준다. */} Whale CLASS 게시판 등록 일반게시판 {/* 번호, 제목, 작성자, 작성일, 삭제에 각각 크기 10%, 40%, 20%, 10% 인라인으로 스타일 부여해주기 */} 번호 제목 작성자 작성일 삭제 1 제목1 마스터 2023/01/15 삭제 2 제목2 마스터 2023/0..

1. 리액트란? JSX(Javascript XML) : HTML과 비슷한 형태의 태그를 작성할수 있게 해주는 자바스크립트 확장문법. 자바스크립트코드안에 HTML요소가 함께들어가있는 형태이며, ui를 구성하기 위해 리액트에서 보편적으로 사용되는 문법이다. 2. 리액트 요소 ▶ index.html에 존재하는 root노드를 선택한 후, 최상위 요소로 만듦.(react DOM으로) 루트엘리먼트는 화면을 그려주는 rendom()함수를 가지고 있으며 매개변수로 "리액트 요소를" 추가했을 때 화면을 그려준다. ▶ 일반 html요소 → , , ... 리액트 요소 → ▶ root.render는 시작함수 ▶ App : 리액트 요소 - root 엘리먼트 내부에 App 컴포넌트를 렌더링 해줌. 리액트 요소는 반드시 대문자로 ..

1. node.js 설치 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org => 20.11.0 LTS 선택하여 다운로드 => npm 폴더 생성 후, cmd 창에 npx create-react-app myapp 명령어 입력한 후, y 입력하여 설치 => react start를 하기 위해 이와같이 명령어 입력 => 이제 다시 vscode 열기 폴더열기 → C:\ReactWorkSpace\myapp 후 터미널 열기 해서 npm start 명령어 입력 - 앞으로 작업할 내용들은 "src"에서 작업하면된다. - public => 정적인 파일들을 저장하는 저장소...