본문 바로가기

Software98

React, Next.JS 프로젝트의 심각한 취약점(CVE-2025-55182) 점검 및 업데이트 방법 최근 발표된 React 생태계의 아주 심각한 취약점이 보고되어 즉각적인 업데이트가 필요하게 되었습니다. Next.js를 최신버전으로 올리는 것만으로는 충분하지 않고, React / React-DOM / RSC 관련 패키지까지 함께 정리해야 공격 표전을 제거할 수 있다고 합니다.아래는 실제 운영 중인 개인 프로젝트를 기준으로 정리한 Next.js 업데이트 방법과 취약점 점검 절차입니다.🚨 왜 업데이트를 해야 할까요?React Server Component(RSC)라고 하는 서버사이드 렌더링과 관련된 패키지에서 심각한 취약점(NVD - CVE-2025-55182)이 발견되었다고 지난 12월 3일 발표되었습니다. 이 취약점이 무서운 게 인증 없이 서버에서 원격 코드 실행이 가능하고, React에서 기본적으로.. 2025. 12. 9.
Next.js 배포 자동화 구축하기 (feat. GitHub Actions & PM2) 개발 생산성을 극대화하는 Next.js 프로젝트 배포 자동화 방법에 대해 정리합니다.보통 수정사항이 생기면, 빌드하고 서버에 SSH로 접속해서 파일 옮기고, 서비스를 재시작하는 반복작업이 필요합니다. 어떻게 보면 간단한 절차이긴 하지만 횟수가 많아지면 귀찮은 일이 될 수밖에 없죠. 수동으로 하던 배포 과정을 클릭 한 번(Git Push)으로 끝내는 효율적인 방법을 정리하고 소개합니다.목표 아키텍처 및 준비물구축할 시스템의 전체적인 흐름은 다음과 같고, 별도의 CI/CD 서버를 두지 않고 GitHub 자체 인프라를 활용하여 비용과 복잡도를 낮추고자 했습니다.핵심 도구:GitHub Actions: 코드 변경을 감지하고 자공으로 작업을 수행하는 봇.SSH: 봇이 안전하게 서버에 접속하기 위한 보안 통로PM2:.. 2025. 12. 6.
리액트 개발서버 포트번호 변경: 3000번이 아닌 다른 번호로 설정하기! 리액트를 사용할 때 개발서버의 기본 포트번호인 3000번을 다른 번호로 바꾸는 방법입니다. 가끔 3000번 포트가 이미 다른 프로그램에서 사용 중이거나, 그냥 다른 번호로 바꾸고 싶을 때가 있죠? 이런 상황에서 포트번호를 쉽게 변경할 수 있습니다!포트번호를 바꾸는 간단한 방법포트번호를 바꾸는 방법은 몇 가지가 있는데, 그중에서 쉽게 할 수 있는 방법을 소개하겠습니다.1. package.json 수정하기 (리눅스 환경)가장 쉬운 방법은 package.json 파일을 살짝 수정하는 거예요. 아래와 같이 scripts 섹션에 start 명령어를 수정해 주세요.export PORT=53000사용할 포트번호를 명시하고 원래 있던 react-scripts start 명령어와는 "&&" 기호로 연결해 줍니다. 가장 .. 2024. 8. 21.
nodemon 사용법 nodemon 용도 nodemon은 node.js 애플리케이션을 개발할 때 매번 코드를 변경할 때마다 서버를 재시작해야 하는 불편함을 해결해 주는 편리한 도구입니다. nodemon이 코드의 변경을 감지해서 자동으로 서버를 재시작해주기 때문에 사용자가 수동으로 재시작하는 불편함을 덜어주죠. nodemon 설치 기본적으로 node.js가 설치될 때 같이 설치가 되어 있어서 설치를 신경 쓰지 않아도 되지만 만약 설치가 되어 있지 않다면 npm으로 간단히 설치 가능합니다. mpm install -g nodemon 글로벌로 설치하면 커맨드라인에서 nodemon 명령어를 사용할 수 있습니다. 만약 개발 의존성으로 설치하려면 다음과 같이 설치할 수도 있습니다. npm install --save-dev nodemon .. 2023. 7. 9.
전역변수 없이 속성으로 자식 컴포넌트에 데이터 전달하기 전역변수를 사용하지 않고 컴포넌트 속성으로 데이터를 자식 컴포넌트로 전달하는 방법입니다. 다음과 같은 예가 있습니다. 드롭다운에서 선택한 값에 따라서 하위 컴포넌트가 변경됩니다. 이런 기능을 구현하는 방법은 가장 먼저 떠오르는 것이 드롭다운의 선택값을 저장하는 변수를 useState로 정의하고 이 값의 변화에 따라 랜더링 되는 컴포넌트를 구별해서 작성하는 겁니다. import { useState } from "react"; const Result = ({ type }) => { return {type}; }; export default function App() { const [state, setState] = useState(""); const Type = () => { return ( 선택: setS.. 2023. 2. 27.
JavaScript, 파일에 데이터(문자열, 바이너리) 저장하기 데이터를 로컬디스크에 파일로 저장하는 방법을 알아보겠습니다. 지난 포스팅(JavaScript, 파일에서 데이터(문자열, 바이너리) 불러오기)에서는 로컬디스크에 저장된 데이터를 가져와서 JS에서 다루는 방법에 대해서 공부했었는데 오늘은 그 반대입니다. JS에서 직접 파일에 저장하는데 문자열을 저장하는 방법 및 바이너리 데이터로 저장하는 방법입니다. 파일에 문자열 저장하기 먼저 문자열을 저장해 보겠습니다. 다음과 같이 Textarea에 문자를 입력하고 하단에 버튼을 누르면 입력된 문자가 파일로 입력되는 예제입니다. 로컬 저장장치에 접근하기 위해서 윈도 파일시스템을 다루는 showSaveFilePicker(), createWritable() 두 가지 메서드를 사용했습니다. export default funct.. 2023. 2. 21.
JavaScript, 파일에서 데이터(문자열, 바이너리) 불러오기 파일에서 데이터를 불러오는 방법입니다. 한번 해보면 어렵지 않은데 처음에는 비동기에 대한 개념도 부족해서 한참 헤맸던 부분이라서 정리해 봅니다. 바로 코드부터 보겠습니다. 파일에서 문자열 읽기 파일에서 문자열을 읽어오는 코드입니다. import { useState } from "react"; export default function App() { const [data, setData] = useState([]); const readFileData = (e) => { const reader = new FileReader(); try { reader.onload = (result) => { setData(result.target.result); }; reader.readAsText(e.target.file.. 2023. 2. 10.
JavaScript에서 바이너리 데이터 처리 - (ArrayBuffer, TypedArray) 고성능의 데이터 처리를 위해서는 데이터를 바이너리로 다루어야 한다고 합니다. 바이너리란 말 그대로 컴퓨터가 이해하는 이진수라는 건데 코딩을 하다 보면 자주 접하는 개념인데 기초를 좀 다져야 할 필요가 있을 것 같아서 정리해 봤습니다. ArrayBuffer JS에서 바이너리를 다루는 기본적인 객체는 "ArrayBuffer"입니다. ArrayBuffer는 메모리상의 고정된 영역을 참조하는 객체입니다. const buf = new ArrayBuffer(32); 위와 같은 표현으로 객체를 생성할 수 있는데요. 'buf' 변수는 메모리상에 32바이트 크기로 할당된 메모리 영역을 가리키게 됩니다. 할당된 메모리는 모두 "0"으로 초기화됩니다. "ArrayBuffer"는 그냥 메모리의 어떤 영역이며 그 안에는 0과 .. 2023. 2. 5.
JS를 배우고 있다면 꼭 알아야 "모던 JavaScript 튜토리얼" 코딩 공부 할 때 웬만해선 인터넷에 공개된 자료들이 많아서 책을 사지 않고도 공부할 수 있는데, 특히나 JavaScript같이 인기 있는 언어는 더 그렇죠. 저도 JS 공부 처음 시작할 때는 무료 온라인 코딩 코스부터 수강하고 시작했고 그 후로는 막히는 게 생기면 모질라 재단의 MDN web docs를 검색해서 답을 찾고 있습니다. 그런데 최근에 "모던 JavaScript 튜토리얼(https://ko.javascript.info/)"이라는 프로젝트를 알게 되었는데 JS 공부한다면 필수적으로 알고 있으면 좋을만한 사이트라고 생각해서 소개합니다. 모던 JavaScript 튜토리얼 ko.javascript.info 문법이나 예제 등을 검색하다 보면 자주는 아니지만 종종 "The Modern JavaScript.. 2023. 1. 19.
리눅스 환경에서 NodeJS 설치하기 윈도의 WSL이나 리눅스 환경에서 "NodeJS"를 설치하는 방법입니다. Package 설치로 간단하게 가능하지만 설치할 때 되면 꼭 찾아보게 돼서 기록합니다. sudo apt-get install nodejs 위 명령어로 간단히 설치 가능합니다. 이렇게 설치하면 "npm"도 같이 설치됩니다. 어! 그런데 개발할 때 버전이 중요하던데 어떤 버전이 설치된 거지?? ㅡ.,ㅡ 설치버전은 다음과 같이 "node -v" / "npm -v" 명령으로 확인할 수 있습니다. 그럼 LTS 말고 최신 버전이나 다른 버전을 설치하고 싶을 때는 아래 링크를 참고하면 되겠습니다. GitHub - nodesource/distributions: NodeSource Node.js Binary Distributions NodeSour.. 2023. 1. 10.
리액트 빌드 결과 빈화면만 보일때 - 상대경로 설정하기 오늘은 리액트를 시작하는 저 같은 초보들은 한 번쯤 경험했을 법한 문제라고 생각하는데 이상하게도 여느 리액트 강의에서도 메인으로는 다루지 않는 빌드 시에 관련되는 경로에 관한 내용입니다. 그런데 생각해보면 리액트도 html, java script, css라서 그런 기본 소양을 가지고 있다는 전제를 깔고 가기 때문에 이런 건 당연한 내용이라고 여겨서 강의에서 다루지 않는지도 모르겠네요. 아무튼 리액트 프로젝트를 만들고 나서 빌드 스크립트를 실행하면 "build"라는 이름의 폴더가 생기면서 안에 배포에 사용할 결과물이 생성됩니다. 위에 보시는 것처럼 빌드 폴더 안에 보면 여러 가지 파일들이 생성되어 있는데 이 중에서 웹을 시작하게 하는 파일은 index.html입니다. 상식적으로 리액트로 만든 웹앱을 실행하.. 2022. 12. 12.
React 배포시 원본 코드 구조 숨기기 (Source map 만들지 않기) 리액트로 앱을 만들어서 배포를 하고 브라우저 개발도구에서 소스를 살펴보면 내가 짠 코드의 원본을 그대로 확인할 수 있습니다. 중간에 빌드라는 과정을 거쳤기 때문에 최소한 코드 압축 정도는 되어 있을 줄 알았는데 말 그대로 코딩했던 폴더구조가 그대로 드러납니다. 이런 게 가능한 이유가 바로 소스 맵(Source Map)이 있어서라고 하는데요. 소스 맵은 빌드된 파일과 원본을 연결시켜주는 역할을 합니다. 소스 맵은 배포된 앱에서 문제가 발생했을 때 디버깅을 쉽게 해주는 이점이 있습니다. 하지만 보안적인 문제라던가 비루한 코드가 공개되는 부끄러움 때문에라도 요걸 숨기고 싶을 때가 있는데 그럴 때는 빌드 시에 소스 맵을 작성하지 않도록 하면 됩니다. 위 그림은 크롬 개발도구에서 리액트로 만들어진 웹의 소스를 확.. 2022. 12. 4.
styled-components 사용법 [part 2 /2] 지난 포스팅에 이어서 styled-components 사용법에 대한 내용이며 이번에는 좀 더 헷갈렸던 고급 사용법에 대해서 공부해 보겠습니다. 의사 선택자(pseudo-selector) 선택자에 옵션을 줘서 일부 요소만 선택하는 방법입니다. 영어로는 pseudo라는 명칭을 사용하던데 많은 CSS 자료에서 "의사"라고 번역을 하네요. & (ampersand) "&"기호를 하나만 사용하게 되면 '모든 요소'를 의미합니다. 그냥 이렇게만 얘기하면 무슨 얘기인지 잘 이해가 안 되죠?! 저는 그랬습니다. ㅡ.,ㅡ 암튼 예제를 보면 이해가 쉽게 됩니다. 이 예제는 'styled-components' 공식 홈페이지의 예제를 그대로 가져와서 주석만 번역했습니다. 그리고 아래 내용을 이해하기 위해서는 CSS의 기본 문법.. 2022. 11. 14.
CSS의 기본 - 개념, 문법, 용법 정리 "styled-components"를 공부하던 중 계속 진도를 나가기 위해서는 CSS에 대한 지식이 좀 더 필요하겠다고 느껴서 CSS에 대해서 한번 짚고 넘어가려 합니다. CSS란 CSS는 Cascading Style Sheet의 약자로 HTML 문서의 요소들을 어떻게 보여줄지를 정의한 서식 문서입니다. HTML4부터 서식 설정을 HTML 문서로부터 분리하는 게 가능해져서 CSS라는 별도의 파일로 관리하게 되었고 그래서 사이트의 스타일을 손쉽게 관리해 줄 수 있도록 해주는 역할을 합니다. CSS는 W3C라는 기관에서 표준안을 관리하는데 1996년에 최초 표준 권고안이 제정되었고 지금까지 계속 개발이 이어지고 있다고 합니다. 참고로 지금 최신 버전은 CSS2.1입니다. CSS 문법 CSS는 선택자와 선언부.. 2022. 11. 7.
[React] styled-components 사용법 [part 1 / 2] styled-components는 리액트에서 CSS를 더 편하게 사용할 수 있도록 만들어주는 유용한 도구인데요. 저는 아직까지도 CSS가 마치 하나의 코딩 언어처럼 어렵게만 느껴지다 보니 styled-components에서는 이건 또 무슨 소리인가 싶더라고요. 그래서 기초부터 찬찬히 다시 봐야겠다는 생각이 들었습니다. "styled-components"에 대한 특징이나 기본적인 설명은 생략하고 넘어가겠습니다. 어치피 styled-components 좋은거 잘 알고 이미 잘 사용하고 있기 때문에 어떻게 사용하는지가 중요한 거 아니겠습니까?! 설치 styled-components 사용을 위해서는 먼저 설치하고 프로젝트에 추가해 줍니다. npm, yarn 등을 이용해서 설치합니다. # with npm npm .. 2022. 10. 27.

티스토리툴바