Travel to Frontend (372) 썸네일형 리스트형 자바스크립트 스프레드 연산자 배열 객체 객체 스프레드의 경우에는 최근값으로 대체할 수 있다. (key값 'a'참고) React에서 .env-cmdrc 안먹을때 .env가 개발환경에서 만약에 안되거나 undefined로 찍힌다면? 나같은경우는 REACT_APP_URL은 먹는데 두번째 키부터 인식되지않는것같았다. 1. package.json 점검 devDependencies와 dependencies에 둘다 설치했는지 확인하고 시작하거나 배포할때 명령어를 점검해보자. "scripts": { //개발환경 "start": "env-cmd -e development react-scripts start", // 빌드-QA환경 "build-qa": "cross-env BUILD_PATH='./build-qa' env-cmd -e qa react-scripts build", // 빌드-프로덕션환경 "build-prod": "env-cmd -e production react-s.. [리팩토링] if문 대신 매핑하기 모달 초기화를 하는 기능을 하다가 메뉴별로 초기화를 다르게 해야해서 if문을 넣으려했는데 코드도 너무 길어지고 가독성이 떨어지는것같았다. 한 유투버가 if문을 깔끔하게 하는방법을 알려줬다. 매핑관계를 만들어서 분리시키는 방법이었다. 덕분에 코드가 훨씬 가독성이 좋아진것같다. 성능은 약간은 떨어질수 있다는데 왜그런지는 모르겠지만 한눈에보여서 기분좋아짐. 리액트 state로 setFileList를 사용하고있어서 함수를 호출하는것이아닌 함수 자체를 할당하는방식으로 교체하였다. const handleModalCancel = () => { //모달 초기화 //수정전 // if (currentModal === 'Artwork') { // setFileList([]) // }else if(currentModal ==.. fetch 에러 SyntaxError: Unexpected end of JSON input fetch의 catch에서 자꾸 에러가 잡혔다. 클라이언트 문제라고생각해서 요청헤더를 수정해봤는데 고쳐지지않았다. 찾아보니 서버문제였다. 원인 서버에서 전송된 json데이터가 비어있거나 올바르게 형식화 되어있지 않았을 때 발생한다. API를 확인해보니 성공시 다음과같이 리턴해주고있었다. return res.status(200).json() 성공상태를 나타내는 success를 속성을 추가하여 해결하였다. return res.status(200).json({ success: true }); Nodejs index.js 예시 1. ejs를 사용할경우 index.js const express = require("express"); const cors = require("cors"); const app = express(); app.set("view engine", "ejs"); require("dotenv").config(); const {port} = ensureEnv('PORT') app.use(cors()); // app.use(cookieParser()); app.use(express.static("public")); app.use(express.json({ limit: "50mb" })); app.use(express.json()); app.use(express.urlencoded({ extended: false, l.. 리엑트 크롬 쿠키 저장안됨 해결 분명히 응답헤더에는 set-cookies가 잘찍히는데 브라우저 쿠키에 자동으로 저장이 안된다면? 원인은 sameSite였다. 명시하지않더라도 크롬정책에 의하여 기본값으로 세팅되어있다고한다. 해결방법은 서버에서 쿠키 구울때 sameSite:none랑 secure옵션을 추가해보자. 단 이렇게될경우 https에서만 작동된다. http 즉 로컬(http://localhost:3000/)로 개발할때는 크롬에서 막아 저장되지않으니 참고. router.post( "/", async (res, req) => { const jwt = 'test' const cookieOptions = { // sameSite: "strict", sameSite: "none", httpOnly: true, secure: true, // .. [env-cmd] 리액트 env 사용방법 nodejs처럼 리액트에서도 env를 사용해보자. env-cmd를 설치하고 루트 경로에 .env-cmdrc를 추가한다. npm i env-cmd .env-cmdrc 개발환경에는 백엔드 로컬서버를 넣고 배포환경에는 배포시 사용될 URL을 넣는다. { "development":{ "REACT_APP_URL":"http://localhost:500/" }, "production":{ "REACT_APP_URL":"배포시 사용될 URL" } } package.json scripts에 env-cmd -e 개발모드 혹은 배포모드를 추가한다. ... "scripts": { "start": "env-cmd -e development react-scripts start", "build": "env-cmd -e produ.. [build] 에러 Cannot convert a BigInt value to a number 해결 개발할때는 문제없었는데 빌드를 하고난후에 확인해보니 Cannot convert a BigInt value to a number에러가 나서 화면이 보이질않았다. package.json에서 browserslist의 production모드(배포) 버전을 손보니까 해결됨 browserslist 속성은 브라우저 및 버전을 설정하는데 사용되는 속성으로 주로 css전처리기(예: Autoprefixer)나 Javascript 번들러(예: Babel)에서 사용되어 해당 프로젝트를 지원하는 브라우저 범위를 설정합니다. 수정전 배포버전에서는 지원이 중단되지않은 브라우저 중에서 사용률이 0.2% 이상인 브라우저만 지원하겠다는 의미이고 개발버전에서는 크롬,파이어폭스,사파 최신버전들만 지원하겠다는 의미 "browserslist".. 이전 1 2 3 4 5 6 7 ··· 47 다음 목록 더보기
