프로그래밍 공부방

💛 문제점 아래 화면처럼 페이지를 이동할 때마다 header가 다시 렌더링되면서 깜빡이는 문제가 발생합니다. 로그인 여부에 따라서 헤더의 오른쪽 컴포넌트가 바뀌어야하기 때문에 생기는 문제입니다. 사용자가 홈페이지를 이용할 때 보기 안좋을 것 같군요...ㅠㅠ 이 문제가 발생했을 때의 코드를 확인해보겠습니다. 🤔 문제가 발생한 코드 let [loginState, setLoginState] = useState(); const accessToken = localStorage.getItem('accessToken'); const confirmLoginState = () => { if (accessToken === decryptAccessToken()) setLoginState(true); } useEffect((..

💛 useEffect와 useLayoutEffect 비교 1. useEffect useEffect는 비동기적이며 화면에 렌더링이 완료된 후에 수행이 됩니다. 🕐순서 - 렌더링을 한 후 React가 이를 DOM에 배치합니다. - 브라우저에서는 이 컴포넌트를 화면에 보여줍니다. - 그 후 useEffect 내의 코드를 실행합니다. - 실행이 완료된 후 React는 DOM을 업데이트합니다. - 업데이트 후 다시 렌더링을 하고 화면에 보여줍니다. 따라서 useLayoutEffect 내에 DOM에 영향을 주는 코드가 있으면 화면에 보여주는 작업을 한 후 DOM이 변경되기 때문에 레이아웃 깜빡임 효과가 나타납니다! 2. useLayoutEffect 위에서 나온 useEffect와 같지만 모든 DOM 변경 후에 동기..

💛 문제점 리액트에서 환경변수를 설정을 해주었는데... undefined가 뜨는 문제가 있었습니다. 변수이름도 REACT_APP_으로 시작하게 잘 만들었는데 무엇이 문제였을까요??? 💛 해결방법 너무 어이없게 해결했습니다.....// 서버를 재시작했더니 해결이 되었습니당... ㅎㅎㅎㅠㅠㅠ 하핫.. 제대로 환경변수 설정을 했는데도 undefined가 뜬다면 서버를 재시작해보시길 바랍니다...!

💛 문제점 역시나 API 통신을 하려고 하니 프론트쪽에서 cors 에러가 났습니다~~🤦‍♀️ 제가 이전에 토이 프로젝트들을 진행했을 때는 프론트엔드와 백엔드를 제가 구현했기 때문에 백엔드쪽에서 CORS 에러를 해결했었습니다. 백엔드에서 CORS 에러를 해결하는 게 정석이긴 합니다... ! 하지만 이번에는 백엔드는 다른 분이 작업하고 저는 프론트만 작업하기 때문에..!!! 제가 해결할 수가 없는 상황이었습니다. 백엔드쪽에서 이 문제를 해결하기 전에 빨리 API 통신을 해보고 싶었기 때문에ㅠㅠ 이번에는 프론트에서 CORS 에러를 해결하는 방법에 대해서 알아보았습니다~~ 💛 해결 방법 Proxy 이용하기 1. 우선 npm을 이용해서 http-proxy-middleware를 설치해줍니다. $ npm instal..

메뉴를 클릭할 때마다 전체 페이지가 이동해서 바뀌는 것이 아니라 특정 화면만 바뀌도록 만들어보겠습니다 ~.~ 아래 이미지가 완성된 결과물입니다. 코드 설명우선 메뉴 클릭에 따라 보여줄 html 코드를 한 파일에 다 짜기에는 너무 길기 때문에 나눠줍니다. 저는 메뉴별로 js파일로 나누어서 따로 저장했습니다. 그리고 이 파일들을 import로 불러옵니다. import Own_contents from "./own_contents"; // 내가 쓴 글 메뉴 파일 import Like_contents from './like_contents'; // 좋아요한 글 메뉴 파일 메뉴를 클릭할 때 userState로 만든 change변수의 값을 변경합니다.let [change, setChange] = useState('o..

오늘은 저번에 이어서 글 목록을 출력하는데 이에 페이징을 추가해보겠습니다. 글 목록 아래에 페이지 수가 나오고 페이지를 누를 때마다 글목록 부분만 변경됩니다! 클라이언트 코드 전체 코드import React, { useState, useEffect } from 'react'; import { useNavigate, Link, useParams } from "react-router-dom"; import axios from "axios"; function Plant_info_share() { const navigate = useNavigate(); // 페이지 이동을 위해 필요 let one_page_contents = 20; // 한 페이지 당 게시글의 개수 const [contents, setConte..

/* 색에 대한 정보 파일 : color.js */ const colorConfig = { main_color: "rgb(107, 164, 255)", sub_color: "rgb(255, 255, 255)" } export {colorConfig}; 우선 색 정보를 담은 color config를 만들어줍니다. 저는 메인 컬러를 파란색, 서브 컬러를 하얀색으로 설정했습니다. 그 후에 colorConfig 변수를 export 해주어서 다른 파일들에서 사용할 수 있게 합니다. 꼭 이렇게 색 정보를 따로 저장해놓을 필요는 없지만 이렇게 하면 나중에 메인컬러와 서브컬러를 바꾸고 싶을 때 이 파일에서만 색을 바꾸어주면 모든 파일에서 바뀌기 때문에 더 편리합니다!! ^_^ !! /* header.js : 헤더파일 ..