개발공부일지

먼저 asset 파일에 svg이미지를 넣는다. (파일내에 코드 그대로 복붙) import 해주고 싶은 파일로 이동하여 import 해줌 img 태그의 src속성에 집어넣으면 끝!!! 아주 간단하다

useCallback도 useMemo와 마찬가지로 컴포넌트의 성능을 최적화시켜준다. useCallback(() => { return value; }, [item]) useCallback은 인자로 전달한 콜백함수 그 자체를 memoization해 준다. useCallback도 두 개의 인자를 받는다. 1. 메모이제이션 해 줄 콜백함수 ( 위에서는 () => return value; } ) 2. 의존성배열 ( [item] ) const calculate = useCallback((num) => { return num + 1; }, [item]) 자바스크립트에서의 함수는 실은 객체이다. 컴포넌트가 렌더링되면 컴포넌트 함수 호출 -> 모든 내부 변수가 초기화 만약 위의 calculate 함수를 useCallba..

useMemo() 에서 Memo => Memoization을 뜻함 Memoization이란? 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술. (오픈사전) 동일한 값을 리턴하는 함수를 반복적으로 호출해야 된다면 맨 처음 값을 계산할 때 해당 값을 메모리에 저장하여 필요할 때마다 메모리에서 꺼내서 재사용하는 기법 만약 컴포넌트가 반복적으로 렌더링이 되어도 함수를 다시 호출하지 않고 이전의 결괏값을 꺼내와 재사용할 수 있다. 구조 const value = useMemo(() => { return calculate(); }, [item]); 첫 번째 인자로 콜백함수, 두 번째 인자로 배열을 받..

🔗참고 강의 영상 https://youtu.be/LwvXVEHS638?feature=shared useContext는 app 안에서 전역적으로 사용되는 데이터들을 여러 컴포넌트 끼리 쉽게 공유할 수 있는 방법을 제공해준다. 주의할 점 context를 사용하면 컴포넌트를 재사용하기 어려워질 수 있다. prop drilling을 피하기 위한 목적이하면 Component Composition(컴포넌트 합성)을 먼저 고려 context 이용하여 다크모드 만들어보기 (별코딩님 코드 참고) 먼저 useState를 이용해서 만드는 방법 App.js import { useState } from 'react'; import './App.css'; import Page from './component/Page'; func..

🔗참고 강의 영상 https://youtu.be/VxqZrL4FLz8?feature=shared import하기 import React, { useRef } from 'react'; useRef의 형태 const ref = useRef(value); // => { current: value } useRef의 value값은 { current: value } 의 형태로 저장된다. 따라서 ref 안에 있는 값에 접근하고 싶으면 ref.current 형태로 접근하면 된다. useRef는 컴포넌트가 계속 렌더링되어도, 컴포넌트가 언마운트되기 전까지는 값을 그대로 유지할 수 있다. ref안의 값을 아무리 변경해도 컴포넌트는 다시 렌더링되지 않는다. State의 변화 -> 렌더링 -> 컴포넌트 내부 변수들 초기화 R..

⚫준비하기 1. kakao developers 회원가입 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 회원가입 후, 내 애플리케이션 -> 애플리케이션 추가하기 버튼 클릭하여 추가해준다. 대충 내가 만들 사이트 이름 등등 아무거나 넣어주면 됨 2. 플랫폼 등록, KEY 확인 방금 만든 애플리케이션 추가하면 이런 창이 뜬다. 왼쪽의 플랫폼을 클릭하여 도메인을 등록해준다. (난 http://localhost:3000 입력해줌) 요약정보에 들어가면 이렇게 KEY들이 나온다. react에서 적용할 것..

프로젝트 진행 중 회원가입 부분의 이용약관 상세보기 모달창을 구현해야 하는 업무를 맡았다. 비효율적인 부분 혹은 설명이 부족한 부분이 있을 수 있다..! 피드백 환영합니다😄 파일1 (부모 컴포넌트) import AgreeModal from './AgreeModal' . . . const [agreeActive, setAgreeActive] = useState(false); const [termsAndConditions , setTermsAndConditions] = useState(''); const handleAgreeActive = (e) => { const value = e.target.name setAgreeActive(true) setTermsAndConditions(value) } const ..

quill을 이용하여 내용을 데이터에 저장한 후 출력할 때 string 형태로 변환되어 저장되는데, 이것을 다시 화면에 출력할 때 이런 식으로 html태그가 그대로 출력되는 문제점이 있었다. 그래서 const removeTags = (html) => { const doc = new DOMParser().parseFromString(html, 'text/html'); const decodedString = doc.body.textContent || ""; return decodedString }; {removeTags(noticeData.content)} 이러한 형태의 태그를 지워주는 함수를 이용하여 출력하였더니 태그가 사라진 형태로 출력되었다. 하지만 줄바꿈이 되어야 하는 부분에서 줄바꿈이 되지 않았다...

const onChange = (e) => { const { value, name } = e.target; setPostData({ ...postData, [name]: value, }); }; 프로젝트에서 게시물을 수정하는 기능을 만들고 있는데, 내용을 수정하는 부분을 onChange함수를 적용시키려고 했더니 Cannot destructure property 'value' of 'e.target' as it is undefined. 라는 오류가 뜨면서 적용되지 않았다. 챗지피티에게 물어본 해당 오류에 대한 설명: 해당 오류 메시지 "Cannot destructure property 'value' of 'e.target' as it is undefined."는 일반적으로 정의되지 않거나 존재하지 않는 객..

useEffect(() => { if (userGroup !== "관리자") { alert("관리자만 접근할 수 있는 페이지입니다.") navigate("/"); } }, [userGroup, navigate]); userGroup이 뭔지에 따라 접근 권한 설정 useEffect(() => { if (!accessToken) { alert("회원만 접근할 수 있는 페이지입니다.") navigate("/"); } }, [accessToken, navigate]); accessToken값을 이용해 회원인지 아닌지에 따라 접근 권한 설정 위의 함수만 입력하고 따로 처리를 하지 않으면 alert창이 뜨는 동시에 안의 페이지가 보일 수 있다. 이를 막기 위해 {accessToken && userGroup === ..