본문 바로가기

전체 글

[React.js / javascript] 구조 분해 할당 시 오류 발생 (JS 객체와 배열의 차이) TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) at handleRegTest (http://localhost:3000/main.9345674c7ec34bc46fb5.hot-update.js:64:27)      구조분해할당을 시도할 때 발생할 수 있는 에러이다. 이는 구조 분해 할당의 대상이 되는 객체가 실제로 이터러블이 아닌 경우 발생한다.  확인할 점 1. 구조분해할당 대상 확인 : 구조분해 할당을 시도하는 대상이 실제로 이터러블인지 확인 (배열이나 객체를 구조분해 하려고 할때 대상이 올바른지 확인해야함.)  처음에는 이벤트 핸들러를 호출하는 곳이 여러개가 아니라서 그런가? 헷갈렸는데 상당히 기본적인 실.. 더보기
[React / Private Route] 사용자 인증 인가 접근 처리 import React, { useContext } from "react";import { UserObjContext } from "../context/UserObjContext";import { Navigate, Outlet, Routes } from "react-router-dom";export default function PrivateRoute({ component: Component, ...rest }) { const { authData } = useContext(UserObjContext); // 로그인 상태를 확인하는 로직 const isAuthenticated = localStorage.getItem("userId") !== null; console.log("isAuthenticat.. 더보기
[ react ] 로컬스토리지 활용 : 사용자 아이디 기억하기(remember ID) Remember Me 로그인 // 아이디 저장 체크박스 활성화 const handleRememberId = () => { console.log("check 발생"); // 로컬스토리지에 LS_KEY_SAVE_ID_FLAG 라는 키값으로 아이디 기억 버튼의 상태를 저장 // 체크 -> true 언체크 -> false // 기본 값이 false localStorage.setItem(LS_KEY_SAVE_ID_FLAG, !saveIDFlag); // 상태 변경해서 저장 setSaveIDFlag(!saveIDFlag); }; // 컴포넌트가 처음 마운트 될 때만 실행되도록 빈 배열을 두번째 인자로 넘김 useEffect(() => { // 로컬스.. 더보기
[ React ] 공식문서 읽고 틱택톡 예제 따라해보기 📌 이 글은 리액트 공식 문서를 읽으며 이해를 목적으로 작성한 글입니다.  1. 사각형을 클릭하면 사각형 안의 값이 'X'로 변경됨. (useState 사용)- 각 작은사각형들은 각각의 독립적인 상태관리 변수를 갖고 있다. import { useState } from "react";function Square() { const [value, setValue] = useState(null); function handleClick() { setValue("X"); console.log("click!"); } return ( {value} );}export default function Board() { return ( .. 더보기
[React] 리액트 공식문서 보고 useState, component 이해하기 MyButton이라는 컴포넌트를 생성한 뒤 MyApp이라는 곳에서 컴포넌트를 각각 두개 호출해본다. MyButton안에는 버튼을 클릭할 때 마다 카운트가 올라가는 변수가 존재한다. import { useState } from 'react';export default function MyApp(){ // 같은 컴포넌트를 여러번 렌러링해도 각각 고유의 상태를 갖게 된다. 같은 컴포넌트를 사용하지만 다른 값을 가짐. return( Counters that update separately );}// component function MyButton(){ // useState 로 상태 관리 const [count, setCount] = useState(0).. 더보기
[일경험 / oracle] 프로시저 활용한 조회수 기능 구현 ✅ 프로시저를 구현하게 된 계기  일경험 프로그램에서 게시판 기본적인 기능 구현을 마친 뒤 새로운 기능을 하나 추가하는 과제를 진행하게 되었다.  바로 데이터베이스에서 비즈니스 로직을 수행할 수 있는 프로시저 기능을 활용하여 조회수를 카운트하는 기능이었다.  ✅ 프로시저가 뭔가? 프로시저프로시저는 PL/SQL 을 통해서 만들어짐.데이터 베이스 내에서 실행 가능한 저장된 프로그램프로시저는 SQL 쿼리와 제어구조를 포함할 수 있으며 데이터 베이스의 복잡한 작업을 수행하는 데 사용됨.프로시저는 코드의 재사용성, 유지 보수성, 성능 향상, 보안 등을 위해 사용됨.특징저장된 프로그램 : 프로시저는 데이터베이스 내에 저장. 한 번 작성된 후 여러번 호출할 수 있다.파라미터로 입력값을 받을 수 있고, 출력값을 반환받.. 더보기
[ Javascript ] 로컬스토리지 활용한 아이디 기억하기 (리멤버 미) 기능 자바스크립트에서 제이쿼리를 활용한 아이디 기억하기 코드입니다.  아이디 기억하기 기능을 구현하기 위한 방법들이 다양하게 존재하지만 이메일이나 아이디의 경우 브라우저 로컬스토리지에 저장하는 것이 적합할 것이라고 판단되어 로컬스토리지 저장방법을 선택했습니다.  로직은 다음과 같습니다. $(document).ready(function() { if (localStorage.checkbox && localStorage.checkbox !== "") { $('#rememberId').attr('checked', 'checked'); document.getElementById("email").value = localStorage.email; email = localStorage.email; } else { $.. 더보기
[ Spring ] Controller 에서 데이터를 어떤 형태로 받아야하는가? (@RequestBody, @RequestParam) 📌 개인적으로 헷갈려서 작성하게 된 글입니다. 참고자료는 아래 링크 참고 1. form 데이터 @RequestBody- 폼 태그로 데이터를 전송 시 메서드의 변수명 상관이 없지만, @PostMapping("/reply")public string reply(@RequestBody String request){ return "result";} @RequestParam- 폼 태그로 데이터 전송 시 데이터를 저장하는 이름으로 메서드의 변수명을 설정해주어야 함. name 을 전송한다는 가정하에 같은 변수 명으로 받아줘야 한다. @PostMapping("/reply")public string reply(@RequestParam String name){ return "result";}2. Json 형식의 데이터 서.. 더보기

티스토리툴바