신입개발자_장민기

import { useReducer, useState } from "react"; //1. useReducer와 useState 등록 export default function App() { const reducer = (current_state, action) => { //current_state: 현재 배열 상태 switch (action.type) { //action: { type: "타입명", item: 추가되는 값 } case "INCREMENT": //type명이 INCREMEMT인 경우 return [...current_state, action.item]; //기존 배열에 신규 값 추가 case "DECREMENT": //type명이 DECREMENT인 경우 //기존 배열에서 신규값과 같지 ..

import { useReducer } from "react" /* https://react.vlpt.us/basic/20-useReducer.html 상태관리방법 1. useState 2. useReducer : 컴포넌트와 상태 업데이트 로직을 분리 가능하도록 구현할 수 있음 - 아키택처: 액션 => reducer -> state -> 뷰(이벤트 발생) 1) reducer는 현재 상태갑인 state와 action인자를 받아서 새로운 nextState값을 반환 import{useReducer} from 'react'; const reducer = (state, action) => { retrun nextState; } 2) action의 형태(dispatch함수로 전달) { type: 'INCREMENT..

https://freehoon.tistory.com/123 Spring 블로그 만들기 - 14. 위지윅 에디터 사용하기(CKEditor5) 이 포스팅의 샘플 게시판 개발 환경은 MAC OS, STS, OpenJDK11 입니다. 블로그 만들기 - 14. 위지윅 에디터 사용하기(CKEditor5) 이번에는 게시판을 조금 업그레이드 해보려고 합니다. 현재 게시판은 단순 freehoon.tistory.com 조장 왈 에디터 통일성을 위해 ckEditor로 쓰자고 했다. smartEditor 적용하는데 오래 걸려서 슬픈 한편, 저걸 다른 사람이 적용하긴 어려울 것이라는 생각도 들긴했다. 아무튼 수정 상하단 코드가 확연히 짧아졌다. cmd가 좋긴 해 ClassicEditor .create( document.quer..

cart-context import { createContext } from "react"; export const CartContext = createContext(""); App import { useState } from "react" import CartModel from "./components/CartModel" import {CartContext} from"./store/cart-context" export default function App(){ const [shoppingCart, setShoppingCart] = useState([]); const ctxValue = { items: shoppingCart, addItemToCart: handleAddItemToCart }; funct..

cart-context.js import { createContext } from "react"; export const CartContext = createContext(""); App import { useState } from "react" import CartModel from "./components/CartModel" import {CartContext} from"./store/cart-context" export default function App(){ const [shoppingCart, setShoppingCart] = useState([]); function handleAddItemToCart(cart){ console.log(cart); setShoppingCart([...shopp..

1. 자동로그인 구현 document.cookie = "savedUserId=; expires=0; path=/"; document.cookie = "savedUserPw=; expires=0; path=/"; // 아이디 저장 체크박스 상태에 따라 쿠키 생성 if ($("#userIdSave").prop("checked")) { var userId = $("#userId").val(); //쿠키 유효기간 1일, 경로 지정은 보류(WEB-INF/member/Login/loginMain.jsp) document.cookie = "savedUserId=" + userId + "; expires=" + getCookieExpiration(1) + "; path=/"; } // 자동로그인 체크박스 상태에 따라 ..

1. 로그인 메인 등, ajax가 출력되었을 때 AutoFocus // ID 공백 여부 확인 if (userId.trim() === "") { alert("아이디를 입력하세요"); $("#userId").focus(); return false; } // PW 공백 여부 확인 if (userPw.trim() === "") { alert("비밀번호를 입력하세요"); $("#userPw").focus(); return false; } - 로그인 외에도 대부분의 ajax에 적용 2. 자동로그인 틀 자동로그인 ⚠공사중⚠ 3. 네비게이션바 nav { background-color: gray; } 문밤 4. 아이디 찾기 / 비밀번호 찾기 등에서 SSN을 숫자로 입력 제한 //ssn1 숫자로 입력 제한 $("#ssn1..

App import Box from "./components/Box" import { useRef } from "react" export default function App(){ const boxRef = useRef(); function handleEvent(){ console.log("부모창에서 자식창의 open함수 호출") boxRef.current.open(); //자식의 open함수 호출 } return ( App 자식의 open 호출 innerText ) } Box import {forwardRef, useImperativeHandle} from "react" //forwardRef로 props와 ref 감싸기 const Box = forwardRef((props, ref) => { //반드..

import { useRef, useState} from "react" export default function App(){ const inputRef = useRef(); const [showText, setShowText] = useState(true); return ( App {showText && } setShowText(() => !showText)}>텍스트 보이기/가리기 {/* 다음 버튼은 위의 버튼이 보이는 경우에만 동작 / 가리기가 된 상태에서는 에러 발생 */} inputRef.current.focus()}>텍스트1로 이동 에러 inputRef.current && inputRef.current.focus()}>텍스트2로 이동 showText && inputRef.current.focus..