본문 바로가기

반응형

Web/React

(9)
[React ] React 서버 구성 요소의 심각한 보안 취약점 (+next js) https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-componentsReact에서 큰일이 났다 엄청난 보안 취약점이 나온 것이다.Log4j 이후 가장 최악이라고 기사가 났다.. 우리 회사는 다행히 19버전을 사용하고 있지않아서 문제가 없었지만,react 19버전을 사용하거나, next 15~16버전을 사용한 회사들은 지금 난리 났지 않았을까 싶다.좀 더 귀를 열고 살아야하는데 못한 것 같다.이것을 계기로 또 구독을 하나 늘려본다. --React 서버 구성 요소의 심각한 보안 취약점2025년 12월 3일 React 팀 작성React Server Components에 인증되지 않은 원격 코드 실행 취약점이 있습니..
[React] pdf export image S3 CORS (feat. html2canvas, react-pdf) react에서 pdf로 파일을 내보내는 기능을 만드는데 CORS 에러가 났다. html2canvas와 react-pdf로 시도해 보았다. 기본적으로 해주어야하는것 서버쪽에서 cors권한 추가해주면 된다고해서 S3 CORS 정책을 추가하였다. 일반적인 경우 서버쪽에서 이런 처리를 해주면 된다. [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET", "HEAD" ], "AllowedOrigins": [ "*" ], "ExposeHeaders": [ "x-amz-server-side-encryption", "x-amz-request-id", "x-amz-id-2" ], "MaxAgeSeconds": 3000 } ] 근데도 안되었다.. 멘붕;; 원인 S3 에서는 ..
[React] CRA에서 Eject 사용 안하고 webpack custom 하기(customize-cra, react-app-rewired, 웹팩 설정 오버라이딩) ecject은 custom을 할 수 있는 정말 좋은 기능이지만 그거에 따른 부작용이 좀 많다. 그럼에도 불구하고 장점이 많아서 eject을 했는데 eject을 안해도 된다는 신박함을 알게 되어 포스팅 해본다. custom은 ecject만큼은 아니라고 하지만.. 음.. 괜찮은듯 하다. 상세한 설명이 필요하면 아래 링크를 들어가보자. https://medium.com/@jsh901220/create-react-app%EC%97%90%EC%84%9C-eject%EC%82%AC%EC%9A%A9%EC%95%88%ED%95%98%EA%B8%B0-customize-cra-react-app-rewired-10a83522ace0 Create-React-App에서 Eject사용안하기(customize-cra, react-..
[React] React 초보? 참고 사이트 추천 [Web] 웹 개발자 초보가 보면 유용한 글https://24hours-beginner.tistory.com/209 [Web] 웹 개발자 초보가 보면 유용한 글유용한 사이트인기 웹 프레임워크https://hotframeworks.com/ Web framework rankings - HotFrameworksFind your new favorite web frameworkMeasuring web framework popularity so you can find interesting frameworks to check outRankings FrameworkGithub24hours-beginner.tistory.com Create-React-App에서 Eject사용안하기(customize-cra, react-a..
[React] 소스 맵(Source Map) sourcemap 이란? 소스 맵(Source Map)이란 배포용으로 빌드한 파일과 원본 파일을 서로 연결시켜주는 기능입니다. 보통 서버에 배포를 할 때 성능 최적화를 위해 HTML, CSS, JS와 같은 웹 자원들을 압축합니다. 그런데 만약 압축하여 배포한 파일에서 에러가 난다면 어떻게 디버깅을 할 수 있을까요? 정답은 바로 소스 맵을 이용해 배포용 파일의 특정 부분이 원본 소스의 어떤 부분인지 확인하는 것입니다. 이러한 편의성을 제공하는 것이 소스 맵입니다. sourcemap 확인하기 프로젝트를 build하고 나면 기본적으로 소스가 그대로 보인다. 크롬 기준 > 개발자 도구(ctrl+shift+i or F12) > Sources 이걸 소스맵(sourcemap)이라고 한다. 이럴 경우 내가 만든 모든게..
[React] GENERATE_SOURCEMAP=false build error (feat. windows 10) 아래와 같이 build를 했을 경우에는 문제가 없었다. package.json // package.json "scripts": { "build": "react-scripts build", }, // or "scripts": { "build": "react-scripts build && gulp licenses", }, 그런데 sourcemap 제거를 위하여 아래와 같이 GENERATE_SOURCEMAP=false 옵션을 줬더니 에러가 났다. // package.json "scripts": { "build": "GENERATE_SOURCEMAP=false react-scripts build", }, 'GENERATE_SOURCEMAP'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파..
[ReactJS] react-chartjs-2 https://github.com/jerairrest/react-chartjs-2/issues/25 Scattered data support without requiring labels · Issue #25 · jerairrest/react-chartjs-2 This was fixed in the original react-chartjs however there are a few long standing issues on that one and I was redirected here. However it doesn't appear that your library works in the same wa... github.com
[TypeScript] React 프로젝트 초기 설정 (window) (mobx) 1. 설치설치할 위치에서 아래 코드 실행 (cmd) yarn create react-app 다운로드경로 --template typescript //현재폴더 yarn create react-app . --template typescript yarn 이 없다면 아래 명령어 부터 실행 npm install -g yarn 2. tsconfig.json 설정 추가 (선택) (기본루트 설정) "baseUrl": "src" 3. 필요없는 파일 삭제(선택) App.test.tsx logo.svg setupTests.ts 4. 폴더구조 생성 (선택) components lib pages store 5. mobx 기준 store 생성 (선택)(StoreProvider.tsx) const MobxProvider = MobX..

반응형