전체 글101 [React Hook] axios / api 받아오기 리액트 훅으로 api 받아오기 npx create-react-app react-hook-axios useEffect 임포트 해주기 import './App.css'; import {useEffect} from 'react'; function App() { //리액트 오리지날 - componentDidMount 기능 useEffect( () => { },[]) //[name], ... //useEffect - componentDidMount, componentDidUpdate, componentWillUnm ... return ( 화면 ); } export default App; axios 써주기 import './App.css'; import {useEffect} from 'react'; function.. 2023. 6. 18. [React] React hook CRUD npm install express npm install mysql npm install react-router-dom npm install axios (XMLHttpRequest -> $.ajax -> axios) npm install query-string queryString.parse() 프로젝트 React - Express -MySQL React : 화면 만들고, 서버에 요청(axios), 응답받고 Express : React에서 보낸 요청을 받아들여서 인자, 쿼리스트링, 바디를 읽음 , 읽고 꺼내고 가공(요청된 정보를 가공)함/ 이 연결된 데이터베이스에 CRUD MySQL : DB구축 -------------------------------------------------------------.. 2023. 6. 18. [JS] XMLHttpRequest HTTP 요청 전송 const xhr = new XMLHttpRequest(); //생성자 함수 호철하여 생성 xhr.open(method, url[, async]) // method:Http 요청메서드(GET,POST,PUT,DELETE 등 ) ..... xhr.send(); //HTTP 요청전송 XMLHttpRequest.prototype.open open메서드는 서버에 전송할 HTTP요청을 초기화한다. HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법이다. 주로 5가지 요청 메서드를 사용하여 CRUD를 구현한다. HTTP 요청 메서드 종류 목적 페이로드 GET index / retrieve 모든/특정 리소스 취득 X POST create 리소스 생성 O PUT repla.. 2023. 6. 18. [React hook] 리액트 훅으로 카운터 만들기 React 2013 - 클래스형 컴포넌트, 함수형 컴포넌트 React hook 2018 -함수형 컴포넌트 -useState, useEffect, useRef hook - 갈고리 ------------------------------------------------------------------------------ 기존의 클래스형으로 만들었던 카운터 기능을 리액트 훅으로(함수형으로) 만들어보기 npx create-react-app react-hook-counter Counter1 은 클래스형 import { Component } from "react"; class Counter1 extends Component{ constructor(props){ super(props) this.state={ num:.. 2023. 6. 17. [React] 검색창 만들기 / api 서버로 데이터 받아와서 검색기능 프론트엔드 4 : 서버에서 DB접근해서 가져와서 화면뿌리기(풀스택) express 어떻게 받고 응답하는지 서버 동작원리 ,req.params, req.body, req.query -------------------------------------- npx create-react-app react-search-practice 라우터 다운로드 npm install react-router-dom App.js 클래스형으로 만들어주기, components 폴더생성 후 SearchInput.js, Home.js, SearchResult.js 파일생성 SearchInput은 상태값을 저장해야하기 때문에 클래스형으로 만들어주기 import '../css/SearchInput.css'; import { Component.. 2023. 6. 17. [React] 라우터를 이용한 로케이션 객체 Tab, Travel, Life 상태값 따로 없으니 함수형으로 만들어주기 import '../css/Tab.css'; function Tab(){ const moveLife=()=>{ window.location.href='/life' } const moveTravel=()=>{ window.location.href='/travel' } return( 라이프 트래블 ) } export default Tab; import '../css/Life.css'; function Life(){ return( 라이프 ) } export default Life; import '../css/Life.css'; function Travel(){ return( 트래블 ) } export default Travel; App에.. 2023. 6. 17. [팀프로젝트] 게시글작성 위즈윅 ckeditor 사용하기 ckeditor5 builder 사이트 이용하기 하나씩 추가 next step > start We`re working on it >> 대기 Something went wrong 뜨면 다시 돌아가서 반복하기(완료될때까지) >> Previous step > 한국어선택 > next step 아래 완료된화면 압축풀고 파일전체로 문서폴더로 옮기기. 빌드폴더 안에 있는 파일들 전체 복사 후 프로젝트로 복사하기. src > main > resources > static > resources libraries 폴더 생성 > ckeditor 폴더생성 3개의 파일과폴더 복붙 2023. 6. 13. [Java] 객체지향언어 / 클래스, 객체, 인스턴스, 참조변수, 메서드 객체지향언어란 1. 코드의 재사용성이 높다. (새로운 코드를 작성할 때 기존의 코드를 이용하여 쉽게 작성할 수 있다.) 2. 코드의 관리가 용이하다. (코드간의 관계를 이용해서 적은 노력으로 쉽게 코드를 변경할 수 있다.) 3. 신뢰성이 높은 프로그래밍을 가능하게 한다. (제어자와 메서드를 이용해서 데이터를 보호하고 올바른 값을 유지하도록 하며, 코드의 중복을 제거하여 코드의 불일치로 인한 오동작을 방지할 수 있다.) 클래스와 객체 1. 클래스란 - '객체를 정의해놓은 것' , '객체의 설계도 또는 틀' => 클래스는 객체를 생성하는데 사용되며, 객체는 클래스에 정의된 대로 생성된다. ex) 제품 설계도와 제품의 관계 클래스 객체 제품 설계도 제품 TV 설계도 TV 붕어빵 기계 붕어빵 - 클래스를 정의하.. 2023. 6. 11. [React] Router 버튼클릭시 주소이동 버튼 만들어주고 클릭 이벤트 걸어주기 App.js import { Component } from 'react'; import './App.css'; import {BrowserRouter, Routes, Route} from 'react-router-dom'; import Home from './components/Home.js'; import Profile from './components/Profile.js'; class App extends Component{ constructor(props){ super(props) this.state ={ } } moveHome=()=>{ window.location.href='/' //로케이션 객체 } moveProfile=()=>{ window.locatio.. 2023. 6. 11. 이전 1 ··· 7 8 9 10 11 12 다음 728x90
