👨💻 FrontEnd 썸네일형 리스트형 React의 setState 업데이트가 꼬일 때, 함수형 업데이트를 써야 하는 이유 React 에서 상태(state) 를 업데이트 할 때 setCounter(count + 1); 로 상태를 업데이트 할 수 있지만, setCounter((current) => current + 1); 처럼 함수형 업데이트를 사용하는 것을 더 권장한다. 왜냐하면 이 방식이 더 상태를 업데이트할 때 안전한 방식이기 때문이다.setCounter(counter + 1); 보다 setCounter((current) => current + 1); 이 더 안전한 이유는 React 의 상태 업데이트 방식 때문이다. 1. 비동기적인 상태 업데이트 React에서 useState의 setState 함수는 비동기적으로 실행된다.즉, 여러 개의 setCounter 호출이 있을 때, 예상과 다르게 이전 값이 덮어 씌워질 가능성이 .. 더보기 [ 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).. 더보기 [ Javascript ] 로컬스토리지 활용한 아이디 기억하기 (리멤버 미) 기능 자바스크립트에서 제이쿼리를 활용한 아이디 기억하기 코드입니다. 아이디 기억하기 기능을 구현하기 위한 방법들이 다양하게 존재하지만 이메일이나 아이디의 경우 브라우저 로컬스토리지에 저장하는 것이 적합할 것이라고 판단되어 로컬스토리지 저장방법을 선택했습니다. 로직은 다음과 같습니다. $(document).ready(function() { if (localStorage.checkbox && localStorage.checkbox !== "") { $('#rememberId').attr('checked', 'checked'); document.getElementById("email").value = localStorage.email; email = localStorage.email; } else { $.. 더보기 [ javascript / html / jsp] html template 사용하여 동적으로 댓글 작성 창 생성하기 개발환경 - sts4 - jsp - jstl - js 댓글 수정, 대댓글 작성의 경우 동적으로 해당 댓글 밑에 입력 창을 만들었다가 없앴다가 하는 작업이 필요하다. 원래는 수정, 대댓글 입력창을 따로 활용했었지만 리팩토링 과정에서 하나로 통합하는 것이 좋을 것 같다는 피드백을 받아 진행해보았다. 먼저 내가 동적으로 활용할 템플릿을 생성해주었다. 태그로 묶으면 간단하게 템플릿이 완성된다. 이 템플릿은 화면에 노출되지 않으며, 이를 화면에 보이게 하기 위한 importNode라는 작업을 한 뒤 화면에 동적으로 노출시킬 수 있다. 취소 완료 .. 더보기 [ajax / javascript] form.serialize() 로 데이터 전송, controller 에서 데이터 받기 function joinMemebership() { var formData = $('#joinForm').serialize(); if (confirm("회원가입을 진행하시겠습니까?") == true) { $.ajax({ url: "/member/join", type: "post", data: formData, dataType: "json", // contentType: "application/json; charset-utf-8", success: function(response) { let code = response.code if (code = 1) { console.log("SUCCESS : ", response); alert("회원가입이 완료 되었습니.. 더보기 [ javascript / ajax ]사용자 아이디 중복 검사, 이메일 중복 검사 로직 이벤트 핸들러 등록 부분 // 사용자 아이디 유효성, 중복 검사 $("#username").change(function(event) { checkDuplicateUsername($(this));}); 페이지 로드 시 이벤트가 등록 되도록 설정함. checkDuplicateUsername() 함수 호출 시 this 로 자기 자신의 element 를 넘겨주는 방식으로 작성 해당 element 에서 필드의 아이디값, value 등을 추출하여 분기처리를 하기 위함. 중복 검사 함수 로직 function checkDuplicateUsername(element) { let username = element.val(); if (!usernameRegTest(element, fieldId)) { retur.. 더보기 이전 1 2 다음
