0. 왜 이 이슈를 정리할 가치가 있나2025년 말 공개된 React2Shell 취약점(CVE-2025-55182) 은 단순한 “라이브러리 버그”가 아니다.이 사건은 다음 질문을 강하게 던진다.“우리가 프레임워크를 신뢰한다는 건, 어디까지 책임을 위임하는 걸까?”특히 React Server Components(RSC) 를 사용하는 서비스라면,이 취약점은 설계 수준에서의 리스크를 다시 보게 만드는 계기다. 1. React2Shell이란 무엇인가React2Shell은React의 Server Components(RSC) 요청을 처리하는 과정에서👉 역직렬화(deserialization) 로직을 악용해 서버에서 임의 코드 실행(RCE) 이 가능해지는 취약점이다.영향도: CVSS 10.0 (Critical)공격 ..

Nomad 선생님의 강의를 듣고 예시와 각각의 개념에 대해서 정리해보기로 하였습니다. https://nomadcoders.co/react-hooks-introduction/lobby 해당 영상을 통해 유용한 Hook들을 알게 되었고, 기존에 많이 사용하는 useRef, useState, useEffect 에 대한 개념을 더 잘 이해하게 된 것 같습니다. 기존에 이러한 내용을 모르고 만든 부분들에서 개선점을 확인할 수 있었고, 초보자에게 유용한 내용이였습니다. 그래서 관련 내용에 대한 개념이랑 예시 코드들을 정리해봤습니다. Custom Hook 이란 정의 Custom Hook은 React에서 제공하는 기본 Hook을 조합하거나, 특정 작업을 위한 추가 로직을 포함하여 사용자가 직접 만든 재사용 가능한 Ho..

어릴 때 시간표 만드는 것을 생각하며, 각 시간대에 어떤 것을 할 지 기획하는 것을 앱으로 만들어봤습니다. 시간이 될 때 더 많은 기능들을 추가하거나 기존 것에 결합할 예정입니다. (https://sungreong.github.io/react-time-block-schedule/) HTML 삽입 미리보기할 수 없는 소스 기능 목록 추가 기능(시작시간,종료시간,날짜) 목록 시계 형태에 추가하는 기능 현재 시간 기준 얼마나 진행하고 있는 지 확인하는 기능 시각화 기능 시계 형태 기능 달력 형태 기능 목록 기능 업로드 기능 다운로드 기능 선택하여 상세 보기 기능 진행 상태 확인하기 예시 파일 (csv, json)

NextJS는 리액트를 위해 만든 오픈소스 자바스크립트 웹 프레임워크입니다. 많은 사람들이 NextJS를 사용하고 있고, 여러가지 장점이 있어서 사용하긴 하지만 여전히 React로도 많이 개발을 하는 것 같습니다. 그래서 NextJS가 좋으면 다 그걸 쓰면 되는데, React로도 개발할까가 궁금했고 그러한 내용을 한번 정리해보고자 합니다. NextJS란? Vercel에서 만든 Next.js는 오픈 소스이며 JavaScript 프레임워크로, React를 사용하여 빠르고 사용자 친화적인 웹 애플리케이션 및 정적 웹 사이트를 개발할 수 있습니다. 실제로, 이는 Node.js와 Babel을 기반으로 하며, React와 통합하여 Single Page Applications를 개발할 수 있습니다. 이를 통해 서버 ..

개발환경 설정 node 설치 (버전 확인) node -v npm install -g create-react-app 리액트 앱 생성 다음과 같은 장점이 있어서 npx로 설치를 합니다. 간편한 설치: "npx"는 npm 패키지를 다운로드하지 않고 바로 실행할 수 있도록 해주는 도구입니다. 따라서 "create-react-app"을 전역으로 설치할 필요가 없습니다. 최신 버전의 React 템플릿: "create-react-app"은 항상 React의 최신 버전을 사용하여 애플리케이션을 생성합니다. 이는 React의 새로운 기능과 최적화를 즉시 활용할 수 있게 해줍니다. 설정의 간소화: "create-react-app"은 기본적으로 React 애플리케이션을 생성하는 데 필요한 모든 설정을 자동으로 처리합니다. ..

React 강의 듣고 공부해보기 ReactJS로 영화 웹 서비스 만들기 를 시청하며 만들어봤습니다.

ToDoList React를 기반으로 ToDoList를 만들어 봤습니다. 해당 투두리스트에서 추가로 해보고 싶은 것은 특정 기간안에 얼마가 남았는 지를 progress bar를 통해 시각적으로 보여줘서 얼마 안남았음을 표시해주고, 장기간으로 설정할 경우, 시간에 따라서 점점 색깔을 변화시켜서 일이 얼마나 남았는 지를 표시하고자 하였다. 기능 할 일 추가 할 일에 대한 디테일한 내용 추가 tag task start_date content 할 일에 대한 남은 기간 추가 할 일에 대한 남은 시각 시각화 추가 calendar gantt chart gauge chart 할 일에 대해서 시간 변환 기능(일,시,분,초) 할 일들에 대한 다운로드 및 불러오는 기능 추가 달력을 통해 전체적으로 일정 추가 특정 Task ..