HTTP 통신 중 사용자의 중요 정보를 담고 있는 쿠키를 보호하기 위한 방법으로, 여러 쿠키 플래그가 있습니다. 그 중에서도 HttpOnly, Secure, 그리고 SameSite 플래그에 대해 자세히 알아보고자 합니다.1. HttpOnly 플래그의 역할HttpOnly 플래그는 웹 어플리케이션에서 쿠키를 더 안전하게 관리할 수 있게 도와주는 설정입니다. 이 플래그가 설정된 쿠키는 클라이언트 사이드 스크립트, 즉 자바스크립트를 통한 접근이 차단됩니다.사용자가 웹 페이지에 접속할 때 서버에서 HttpOnly 플래그를 포함한 쿠키를 전송하면, 해당 쿠키는 브라우저에 저장되지만 document.cookie를 통한 직접적인 접근은 불가능해집니다.이러한 특성 덕분에, HttpOnly 쿠키는 Cross-Site Sc..
1️⃣ 왜 MSW를 도입했는가?1. CORS 이슈백엔드와 함께 협업하는 과정에서, CORS(Cross-Origin Resource Sharing) 문제를 만났습니다. 이를 해결하기 위해서 webpack의 Proxy를 사용하여 클라이언트 측에서 해결했습니다. 당시에는 CORS에 대한 지식이 부족해서, 이렇게만 하면 되는 줄 알았습니다.// webpack.config.js//...proxy: [ { context: ['/api'], target: process.env.REACT_APP_CRURU_API_URL, pathRewrite: { '^/api': '' }, changeOrigin: true, }, ],2. 예기치 않은 API 요청 문제이후 문제없이 개발..
1. React와 TypeScript 설치먼저, React와 TypeScript를 설치하겠습니다. TypeScript 의존성은 .ts 파일을 컴파일하는 데 사용됩니다.npm i react react-domnpm i -D typescript2. Webpack 설치다음으로, Webpack을 설치합니다. Webpack은 모듈 번들러로, 개발 중과 빌드 과정에서 유용하게 사용됩니다.npm install -D webpack webpack-cli webpack-dev-server3. 로더 설치CSS 스타일을 적용하기 위해 style-loader와 css-loader를 설치합니다. 또한, 빠른 번들링을 위해 esbuild-loader를 사용할 것입니다.npm i -D style-loader css-loader esb..
이 글은 ‘우아한 테크코스 6기’ 과정의 Level2 글쓰기 과제로 작성한 글입니다.서문이전에 썼던 글에서, 저는 ‘스스로를 드러내는 연습을 해야하는 이유’에 대해서 이야기 했습니다. 그리고 자기 자신을 드러낼 수 있는 마음가짐을 바로 ‘낭만’이라는 단어로 표현할 수 있다고 생각해요. 그래서 이번에 저는 ‘낭만’이라는 주제로, ‘스스로를 드러내는 마음가짐을 기르자’는 이야기를 해보고자 합니다.우린 낭만이란 배를 타고 떠나갈 거야‘이세계’ 밴드의 ‘낭만 젊음 사랑’이란 노래의 가사입니다. 너무 좋지 않나요? 적어도 저는 인생을 살면서 ‘낭만’ 하나만큼은 놓치며 살고 싶지 않습니다. 그만큼 의미 있는 것이죠.혹시 여러분들에게 낭만이란 것은 어떤 의미를 가지고 있나요? 큰 의미를 가지는 것인가요? 그렇다면 당..
이 글에서는 듀얼 패키지를 사용해야 하는 이유, 그로 인해 발생할 수 있는 위험성, 그리고 그 위험을 관리하는 방법에 대해 살펴보겠습니다.1️⃣ 듀얼 패키지를 사용해야 하는 이유Node.js에서 패키지를 관리하고 모듈화하는 방법은 지속적으로 발전해 왔습니다. 이전에는 CommonJS 모듈 시스템이 주로 사용되었지만, 최근에는 ES 모듈의 지원이 추가되면서 개발자들에게 더 많은 유연성과 선택지를 제공하고 있습니다.ES6의 지원 초창기에는 Node.js가 CommonJS 진입점을 실행하는 동안 빌드 도구(예: 번들러)가 ES 모듈 진입점을 사용할 수 있도록 했습니다. 즉 Babel과 같은 트랜스파일러를 사용하여거나나 다른 도구들이 ES 모듈 파일을 사용할 수 있었습니다.현재 Node.js는 ES 모듈 진입점..