분류 전체보기 (399) 썸네일형 리스트형 여러분의 사이트는 안전한가요? ① | CSP 와 X-frame-Options 들어가는 말이전 포스트에서 제가 만들었던 명언 웹 사이트( https://wise-sayings.com/ ) 의 웹 보안 수준을 MDN 에서 제공하는 무료 도구를 사용해서 측정했었고, 30/100 으로 낮은 점수를 받았습니다. 그중 -20이나 차지하는 부분이 CSP 였는데, CSP 가 무엇이고, 이를 사이트에 어떻게 적용시키는지 그 과정을 정리해볼까 합니다. 참고로 제가 만든 웹 사이트는 NextJS 14 버전으로 개발되었습니다. CSP(컨텐츠 보안 정책)과 X-frame-OptionsCSPCSP 는 말그대로 컨텐츠의 안전을 책임지는 정책 입니다. 교차 사이트 스크립팅(XSS)과 데이터 주입 공격을 비롯한 특정 유형의 공격을 탐지하고 완화하는 데 도움이 되는 추가 보안 계층으로 이러한 공격은 데이터 .. 본인이 이용하는 혹은 만든 사이트가 보안적으로 안전한가를 알아보려면 들어가는 말 모질라 MDN 에서 이번에 새롭게 무료로 웹 사이트의 보안 수준을 체크할 수 있는 도구를 공유해 주고 있습니다. 오늘은 해당 도구를 사용해본 후기 및 사용법을 공유해 보는 시간을 가져볼까 합니다. 그리고 각 포스트로 나눠서 발견된 문제들을 해결해보는 시간도 가져볼까 합니다. 다만, 현재의 포스트는 엄청 세세한 내용을 공유하는 것은 아니고 간단한 사용후기를 남기는 형식이므로 참고바랍니다. https://developer.mozilla.org/en-US/observatory HTTP Header Security Test - HTTP Observatory | MDNTest your site’s HTTP headers, including CSP and HSTS, to find security pr.. [잔소리] TailwindCSS 를 이용한 다크모드 구현 TailwindCSS 를 이용한 다크모드우선 현 프로젝트는 대시보드 형태로 만들기 때문에, 다크 모드 테마 기능을 지원하여 사용자로 하여금 콘텐츠에 집중할 수 있는 환경을 제공해주는 것이 좋다고 판단하여 추가된 기능입니다. tailwindCSS 에는 다크모드를 구현하기 위한 예제를 제공해주고 있습니다. 기본이 되는 예제는 다음과 같습니다.// On page load or when changing themes, best to add inline in `head` to avoid FOUCif (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matche.. [잔소리 프로젝트] CHAPTER03 | 개발 환경 설정 이전 이야기 | 프로젝트 계획 [잔소리 프로젝트] CAHTER 02 | 프로젝트 계획이전 이야기 [잔소리 프로젝트] CHAPTER 01 | 프로젝트의 필요성들어가는 말그저 정보공유에 초점을 맞추고, 그저그런 프로그램이 아니라 현재 불편함을 경험하고 있는 사례를 토대로 프로그램duklook.tistory.com 들어가는 말이번 챕터에서는 잔소리 프로젝트을 진행하기 전 개발 환경을 설정하는 시간을 가져볼까 합니다. 사실 기본적인 환경 설정이 절반이상이고, 이전에 환경 설정 시 다루었던 부분이 대부분이기 때문에 참고한 링크나 참고할 몇 가지 정보만 제공하는 형식이 될 것 같습니다. 그래도 중요한 자료들은 모두 첨부해 두었으니 참고하셔서 본인의 상황에 맞는 프로젝트 환경을 구성해보시길 바랍니다. 개발 환경 .. 하나의 상태에 의존하는 다수의 컴포넌트에 벌어진 일 이게 무슨 일인가 싶었다.NextJS 를 이용해 만든 명언 웹 사이트를 방문하여 TTS 를 동작시키니 다수의 카드가 동시에 실행되는 문제가 있었습니다. 문제를 인지하지 못하고 있었는데, 구글폼을 통해서 건의를 해주신 사용자분이 계셔서, 발견할 수 있었습니다. 정말 감사하다는 말을 여기서나마 다시 전해봅니다. 문제의 발단이 되었던 사건과 코드 구조 분석본론으로 와서 분명 해당 문제는 이전에 테스트했을 때는 발견되지 않았던 문제였습니다. 다만 최근에 통합테스트에 대해 학습하면서 이를 적용 해보면 좋을 것 같은 컴포넌트를 건드리긴 했습니다. 이 때, 최대한 prop 을 줄이고, 상태를 최상위에서 관리하기 위해 리팩터링 작업을 시도하였는데, 이 작업으로 괜히 잘 돌아가던 기능에 버그를 발생시킨 것으로 보입니.. 처음으로 돌아가기 | 웹팩 개발 환경 설정 https://webpack.kr/guides/development/ 오늘 참고하는 공식 문서 링크입니다. 이전 포스트 | Output 다루기 처음으로 돌아가기 | 번들 파일의 종착지, Output 관리하기https://webpack.kr/guides/output-management/ 해당 문서를 참고하여 작성됩니다. 제가 이해 한대로 작성하는 부분이 많기 때문에, 정석대로 가실거라면 공식문서를 참고해보세요. 이전 포스트 | 애샛 설duklook.tistory.com 들어가는 말웹팩는 번들러 이지만, 개발 환경에서 웹팩을 보다 쉽게 활용할 수 있는 몇 가지 기능들을 지원합니다. 보통 번들러를 통해서 하나의 소스파일로 합쳐지는 경우, 에러가 발생한다면, 각 파일별로 구분하여 알려주는 것이 아니라 하나.. [잔소리 프로젝트] CAHTER 02 | 프로젝트 계획 이전 이야기 | 프로젝트의 필요성 [잔소리 프로젝트] CHAPTER 01 | 프로젝트의 필요성들어가는 말그저 정보공유에 초점을 맞추고, 그저그런 프로그램이 아니라 현재 불편함을 경험하고 있는 사례를 토대로 프로그램을 만들어 보고 싶다는 생각을 많이 했습니다. 현재 내가 알고duklook.tistory.com 들어가는 말오늘은 프로젝트를 어떤 방향으로 구성해 나갈지에 대해서 정리해보는 시간을 가져볼까 합니다. 계획이라고 해봤자 단순하고, 누락된 부분이 많습니다. 아직 덜 구체화된 부분도 있고, 빈약하죠. 하지만 이렇게 정리해보는 시간을 가짐으로써 동기부여가 되기도 하니 한번 시도해 봅니다. 프로젝트 계획목적과 목표 정의 일단 해당 프로젝트의 목적은 단 한가지 입니다. "수익 계산 자동화" (->가능하다면.. [잔소리 프로젝트] CHAPTER 01 | 프로젝트의 필요성 들어가는 말그저 정보공유에 초점을 맞추고, 그저그런 프로그램이 아니라 현재 불편함을 경험하고 있는 사례를 토대로 프로그램을 만들어 보고 싶다는 생각을 많이 했습니다. 따라서 현재 내가 알고 있는 것에서 조금의 지식을 더 추가해서 만들 수 있는 프로그램이면서, 현재 불편함을 경험하고 있으며, 개선하고 싶은 문제는 광고 수익 부분이었습니다. 해당 문제를 개선하여 삶의 질을 높이기 위한 도전이 잔소리 프로젝트이며, 그리고 오늘 이 시간은 해당 프로젝트가 왜 필요했는가에 대한 포스트가 되겠습니다.잔소리 프로젝트의 필요성해당 프로젝트가 왜 필요할까요? 순전히 저의 기준으로 몇 가지가 있습니다. 매년 수익를 계산해서 신청하기 귀찮음현재 저는 애드센스를 적용한 블로그가 2개 있고, 네이버 애드포스트를 적용한 블로.. 이전 1 2 3 4 5 6 7 8 ··· 50 다음
