awspspgh 님의 블로그

목차1.게시판2.느낀 점 1. 게시판▣ board-app- App.jsimport './App.css';import BoardHome from './component/BoardHome';function App() { return ( );}export default App; - sever.js// 설치한 라이브러리 변수로 받아오기const express = require('express');const bodyParser = require('body-parser');const mysql = require('mysql');const cors = require('cors');//express 사용하기 위한 app 생성const app = express();//express 사용할 서..

목차1.게시판2.db 연동3.느낀 점 1. 게시판▣ board-ui-app- App.jsimport './App.css';import BoardHome from './component/BoardHome';function App() { return ( );}export default App; - BoardHome.jsximport React from 'react';import { BrowserRouter, Routes, Route } from 'react-router-dom';import BoardList from './BoardList';import BoardDetail from './BoardDetail';import '../component/board-style.css';..

목차1.useReducer2.느낀 점 1. useReducer◈ 이론■ useReducer 요청 상태에 따라 관리하기 // action : dispatch 함수로 받을 액션 const reducer = ( state, action ) => {   switch(action.type){   case "INCREMENT":    return state + 1;   case "DECREMENT":    return state - 1;  } } // state : 현재 상태 값 => 변수 // dispatch : state 값을 업데이트 하고, 재랜더링을 촉발하는 함수 const [ state, dispatch ] = useReducer( reducer, 0 ); return (   {state}    { dis..

오늘은 todoList를 만들어보겠습니다. 목차1.todoList2.axios3.느낀 점 1. todoList- App.jsimport './App.css';import TodoList from './component/TodoList';import './component/createTodo.css';function App() { return ( TodoList );}export default App; - Todo.jsximport React from 'react';import './createTodo.css';const Todo = ({ user, onRemove, onToggle }) => { return ( ..

목차1.배열2.느낀 점 1. 배열◈ 이론■ array 랜더링 시 key의 존재 유무에 따라 업데이트, 삭제, 추가 시 효율적으로 랜더링 됨. users.map((u,i)=>(         )) ■ useRef()로 컴포넌트 안의 변수 만들기 - 컴포넌트에서 특정 DOM을 선택할 때 사용 - 컴포넌트 안에서 조회, 수정을 할 수 있는 변수를 관리할 수 있음. ■ useRef()로 관린하는 변수는 값이 바뀐다고 하여  컴포넌트가 재랜더링 되지 않음. ■ useRef()를 통해 관리하는 값들... - setTimeout / setInterval을 통해서 만들어지는 id - 조회, 수정, 삭제 시 사용되는 id - 외부 라이브러리를 사용하여 생성된 인스턴스  ■ useRef() / useState() :  ..

목차1.input2.param2.느낀 점 1. inputmy-app 폴더 생성 > npx create-react-app my-app > App.js의 header부분을 삭제  Edit src/App.js and save to reload. Learn React 위의 코드를 삭제한 후 > cd my-app > npm i react-router-dom ▶입력- App.jsimport React from "react";import Home from "./components/Home";import Header from "./components/Header";import Comp1 from ..

오늘은 React 설정 및 기초에 대해서 알아보도록 하겠습니다 목차1.설정2.기초3.느낀 점 1. 설정- node.js 설치   - 설치 확인: Program Files - nodejs 파일이 있는 지 확인하시면 됩니다.: cmd에서 node -v와 npm -v를 입력하면 버전 확인이 가능합니다. (시스템 환경 변수 편집을 먼저 해야함)       - 파일을 하나 만든후 VSCode에서 만든 파일을 오픈합니다. (파일 이름은 한글을 사용하면 안 됨)그 후 터미널에서 npx create-react-app '내 파일이름'을 입력하면 여러 react 파일이 생깁니다.(ex : npx create-react-app ABC-app) ※ 만약 아래와 같은 에러가 터미널에서 발생한다면npm error code ENO..

오늘은 event에 대해서 배워보도록 하겠습니다. 목차1.event2.예제 문제3.느낀 점 1. event document에서 사용되는 이벤트를 정의 마우스 이벤트 : click(), focus(), input(), change(), mouseover(), mouseout(), scroll() ... 키보드 이벤트 : keyDown(), keyPress(), keyUp() 기타 이벤트 : preventDefault(), target, submit() addEventListener('eventNa..

오늘은 BOM, DOM, classList에 대해서 배워보도록 하겠습니다 목차1.BOM2.pop up3.setTimeout4.location5.DOM6.classList7.예제 문제8.느낀 점 1. BOM BOM : Browser Object Model : 브라우저의 객체를 지칭하는 용어(window 객체) DOM : Document Object Model : Html 문서의 객체를 지칭하는 용어(body 안에 입력된 태그 객체) 윈도우 종류와 브라우저 화면 배율 등에 따라 달라짐 window.innerHeight : 툴바를 제외한 높이 => ..

오늘은 JSON, AJAX에 대해서 배워보겠습니다 목차1.parameter2.non-standard3.JSON4.AJAX5.예제 문제6.느낀점 1. parameter parameter (파라미터) 파라미터 개수 관계없이 사용 가능 함수(메서드) 이름이 호출될 때 전달 사용 파라미터의 개수가 2개 / 실제 값이 1개처럼 파라미터의 개수가 불일치하여 받지 못하는 값이 있다면 undefined 처리 값을 받아오지 못하는 파라미터가 undefined 처리가 되는 걸 막기 위해 기본값을 설정..