목록프론트엔드 (35)
프로그래밍 공부방
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/pjEmL/btr5Zj0hqbN/gbKzFIH79luKLpoT8bQ0U1/img.png)
💛 문제점 리액트에서 환경변수를 설정을 해주었는데... undefined가 뜨는 문제가 있었습니다. 변수이름도 REACT_APP_으로 시작하게 잘 만들었는데 무엇이 문제였을까요??? 💛 해결방법 너무 어이없게 해결했습니다.....// 서버를 재시작했더니 해결이 되었습니당... ㅎㅎㅎㅠㅠㅠ 하핫.. 제대로 환경변수 설정을 했는데도 undefined가 뜬다면 서버를 재시작해보시길 바랍니다...!
💛 문제점 역시나 API 통신을 하려고 하니 프론트쪽에서 cors 에러가 났습니다~~🤦♀️ 제가 이전에 토이 프로젝트들을 진행했을 때는 프론트엔드와 백엔드를 제가 구현했기 때문에 백엔드쪽에서 CORS 에러를 해결했었습니다. 백엔드에서 CORS 에러를 해결하는 게 정석이긴 합니다... ! 하지만 이번에는 백엔드는 다른 분이 작업하고 저는 프론트만 작업하기 때문에..!!! 제가 해결할 수가 없는 상황이었습니다. 백엔드쪽에서 이 문제를 해결하기 전에 빨리 API 통신을 해보고 싶었기 때문에ㅠㅠ 이번에는 프론트에서 CORS 에러를 해결하는 방법에 대해서 알아보았습니다~~ 💛 해결 방법 Proxy 이용하기 1. 우선 npm을 이용해서 http-proxy-middleware를 설치해줍니다. $ npm instal..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bNB25G/btr4gS4Xm4E/70HpLx2BqpvZMGtVJwI6y0/img.jpg)
💛 blacklist란?우선 persist-Redux에서 blacklist가 뭘까요?? 저희는 blacklist를 이용해 persist를 제외하고 싶은 부분을 설정할 수 있습니다. whitelist와는 반대되는 개념이네요! 🐥💬개념을 알았으니 문제점으로 넘어가보겠습니당!💛 문제점persist Redux를 사용하던 중에 blacklist를 적용하려고 하는데 적용이 되지 않는 문제가 있었습니다. 아래 이미지에서 왼쪽이 새로고침 전 코드입니다. 저는 persist redux를 사용중이기 때문에 원래는 새로고침을 해도 데이터가 지워지지 않는 것이 맞습니다. 하지만 blacklist에 해당 reducer를 추가해놓은 상태였기 때문에 새로고침을 할 때 데이터가 지워져야 합니다. 오른쪽 이미지는 새로고침 후 코드인데..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/LPicc/btrUJjrVClK/KfWJsQavcok2zFyXJ62Vok/img.jpg)
🔥에러 내용: net::ERR_UNSAFE_PORT 포트 6000번을 사용하는데 다음과 같은 오류가 발생했습니다. 🤷♀️Why?🤷♀️ 크롬 브라우저 보안에서 에러가 발생되는 문제로 해당 포트가 안전하지 않은 포트이기 때문에 발생하는 오류이다. ✨해결 방법 포트를 바꾸면 간단하게 해결할 수 있습니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/l0K3x/btrPDsfrL8H/cwh1evqDPSP5HDqyqOKsq1/img.gif)
메뉴를 클릭할 때마다 전체 페이지가 이동해서 바뀌는 것이 아니라 특정 화면만 바뀌도록 만들어보겠습니다 ~.~ 아래 이미지가 완성된 결과물입니다. 코드 설명우선 메뉴 클릭에 따라 보여줄 html 코드를 한 파일에 다 짜기에는 너무 길기 때문에 나눠줍니다. 저는 메뉴별로 js파일로 나누어서 따로 저장했습니다. 그리고 이 파일들을 import로 불러옵니다. import Own_contents from "./own_contents"; // 내가 쓴 글 메뉴 파일 import Like_contents from './like_contents'; // 좋아요한 글 메뉴 파일 메뉴를 클릭할 때 userState로 만든 change변수의 값을 변경합니다.let [change, setChange] = useState('o..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b1GAn6/btrTt06p7eM/vbKIejaLsLdK7HuaQDEb4K/img.jpg)
오늘은 저번에 이어서 글 목록을 출력하는데 이에 페이징을 추가해보겠습니다. 글 목록 아래에 페이지 수가 나오고 페이지를 누를 때마다 글목록 부분만 변경됩니다! 클라이언트 코드 전체 코드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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dSe1MD/btrL44bSlgZ/CExX2Gn6NQ6xiAtr55A6ek/img.jpg)
/* 색에 대한 정보 파일 : color.js */ const colorConfig = { main_color: "rgb(107, 164, 255)", sub_color: "rgb(255, 255, 255)" } export {colorConfig}; 우선 색 정보를 담은 color config를 만들어줍니다. 저는 메인 컬러를 파란색, 서브 컬러를 하얀색으로 설정했습니다. 그 후에 colorConfig 변수를 export 해주어서 다른 파일들에서 사용할 수 있게 합니다. 꼭 이렇게 색 정보를 따로 저장해놓을 필요는 없지만 이렇게 하면 나중에 메인컬러와 서브컬러를 바꾸고 싶을 때 이 파일에서만 색을 바꾸어주면 모든 파일에서 바뀌기 때문에 더 편리합니다!! ^_^ !! /* header.js : 헤더파일 ..