전체 글101 [React] Router 를 이용한 페이지 이동 npx create-react-app react-router0611 터미널 열어서 다운로드 해주기 npm install react-router-dom 다운로드 완료되면 package.json 에서 확인해야됨. App.js 클래스형 컴포넌트로 변경 import { Component } from 'react'; import './App.css'; class App extends Component{ constructor(props){ super(props) this.state ={ } } render(){ return( ) } } export default App; 2. 라우터 돔 임포트하고 주소 지정해주기 Home = / Profile = /profile import { Component } from 're.. 2023. 6. 11. [React] 페이지네이션2 / 이전다음버튼, 현재페이지 버튼 하이라이트 저번시간 요약 1.npx 2.App.js 클래스형 컴포넌트로 변경 3.PostList.js , Pagination.js 4.App에 state추가 - 길이가 10인 JSON배열 (게시글) (게시글 - 글번호, 글제목, 글쓴이, 글쓴날짜, 파일첨부여부, 조회수) 5.App의 상태값 postlist를 PostList에 주입시킨다 (넘긴다) App- 6. Post컴포넌트를 만들고, PostList에서 import하고 map메서드로 반복생성 (PostList 컴포넌트가 App한테 넘겨받은 postlist 배열데이터를 이용해서 map메서드로 Post컴포넌트에 주입시켜서 Post 컴포넌트 반복생성) PostList컴포넌트 내부 const result = this.props.postlist.map( (data) =>.. 2023. 6. 11. [React] 페이지네이션 투두리스트 - 로컬스토리지 할 수 있게끔 공부하기 ---------------------------------------------------------------------------------- 1. 리액트 프로젝트 생성 npx create-react-app react-pagination-practice 2.vscode App.js 클래스형으로 변경 App.js import './App.css'; import { Component } from 'react'; class App extends Component{ constructor(props){ super(props) this.state={ } } render(){ return( ) } } export default App; App.css 기본틀 생성.. 2023. 6. 10. [React] To do list 데이터 배열+1 / map() CRUD 모두 구현됐지만 id 값이 제대로 넘어가지 않아서 추가되는 항목에 id 값이 존재하지 않았다. 그래서 삭제할 때도 id 값이 비어있는 항목들은 모두 삭제 되었다. 곰곰이 생각해보니 기존 데이터값은 App.js 에 저장되어있어서 InputComp.js 나 Todo.js에서 아무리 id 값을 App.js에 넘겨도 추가된 id 값이 없었다. App.js 에서 해당 이벤트 함수에 id값의 상태값을 알려줘야한다. 추가 이벤트 함수 App.js addTodoList=(id,todo)=>{ alert('추가(App)') alert('넘어온 id : ' + (this.state.todolist.length + 1) ) //Todo에서 id 값을 설정할 수 없어서 App의 상태값에 +1 해줘야함 //(strin.. 2023. 6. 5. [Node.JS] 기초 개념 노드란 ? Node.js 는 Chrome V8 Javascript 엔진으로 빌드된 자바스크립트 런타임입니다. 대부분 노드를 서버로 알고 있지만 공식사이트에서는 서버로 소개하고 있지 않다. 노드를 배울때는 전반적으로 서버를 실행하는 방법을 다루지만, 노드가 서버만 실행할 수 있는 것은 아니다. 서버 외의 자바스크립트 프로그램을 실행하는 런타임으로 사용하는 방법도 있다. 서버와 런타임이란? 1. 서버 ① 서버는 네트워크를 통해 클라이언트에 정보나 서비스를 제공하는 컴퓨터 또는 프로그램을 말한다. 클라이언트란 요청을 보내는 주체로 브라우저일 수도 있고, 데스크톱 프로그램일 수도 있고, 모바일 앱일 수도 있고, 다른 서버에 요청을 보내는 서버일 수도 있다. ② 평소에 웹 사이트의 화면(HTML)은 어디서 가져오.. 2023. 6. 4. [React] To do List 만들기 / CRUD 수정하기 완료 + 완료파일첨부 To do list 만들어보기 구조 App - InputComp - Todo -Todo -Todo 투두리스트 만들고 로컬스토리지 추가해서 만들기 npx create-react-app react-todo-list 1. App.js 클래스형으로 작성 App.js import './App.css'; import { Component } from 'react'; class App extends Component{ constructor(props){ super(props) this.state={ } } render(){ return( ) } } export default App; 2. state에 배열 만들어주기 App.js class App extends Component{ constructor(props){ .. 2023. 6. 4. [React] CRUD 수정 react-student-crud 1.수정 버튼 누르면 함수 실행되는지 확인하고 updateStudentInfo 함수 Student.js랑 App.js 연결하기. Student.js updateStudentInfo=()=>{ alert('수정!(Student)') this.props.updateStudentInfo() } App.js updateStudentInfo=()=>{ alert('수정!(App)') } render(){ const result = this.state.studentList.map( (data) => () ) 2. 수정할 수 있는 input 있어야함. 7ways react conditional render 구글에 검색해보면 좋은 예를 볼 수 있음 **혼자서 연습해보기 (로그인이 되어.. 2023. 6. 4. [React] CRUD 삭제 react-student-crud 1. Studnt.js에 수정,삭제 버튼과 함수 만들어주기 //수정, 삭제를 하려면 상태값이 변경되어야하니까 클래스 컴포넌트를 써야함 import { Component } from "react"; import '../css/Student.css'; class Student extends Component{ constructor(props){ super(props) this.state={ } } updateStudentInfo=()=>{ alert('수정!') } deleteStudentInfo=()=>{ alert('삭제!') } render(){ return( 학번:{this.props.id} 이름:{this.props.name} 전공:{this.props.major}.. 2023. 6. 3. [React] CRUD 추가 오늘 공부 : 0603 리액트 crud 연습 다음주는 페이지네이션, 라우터 npx create-react-app react-student-crud vscode 내부터미널에서는 이미 react-student-crud 폴더 위치로 잡혀있으니까 npm start 하면 바로 실행이됨. 리액트 프로젝트는 기본 3000번 포트에서 실행된다. 리액트(3000) - express(4000) - MySQL(3306) 포트 참고해서 node.js 다시 공부할 때 이렇게 설정하기 components -> InputComp.js 생성 (클래스형 컴포넌트) 1. 클릭과 체인지 되는거 확인하기 addStudentInfo=()=>{ alert('추가') } idChange=()=>{ console.log('id change!') .. 2023. 6. 3. 이전 1 ··· 8 9 10 11 12 다음 728x90
