전체 글 (393) 썸네일형 리스트형 [잔소리 프로젝트] 쉬어가는 챕터 - 생각보다 쉽지 않은 상황 들어가는 말이번 시간은 좀 쉬어가는 챕터 형식으로 현재 어떤 부분이 문제가 되고 있는가, 어떻게 개선해 나갈 것인가 등을 고민해보는 시간을 가져볼까 합니다. 오직 개발에만 집중하고 싶은데, 현실적인 부분을 고려하지 않을 수 없어서 최대한 시간을 절약해 가면서 개발 중인데요. 그 외에도 개발적인 부분에서 어떤 부분이 어렵게 다가왔고, 고려중인 부분인지 정리해볼까 합니다. 생각 보다 쉽지 않은 API 연동생각 보다 애드센스 API 를 사용하여 필요한 데이터를 가져오는 과정이 순탄하지 않습니다. 너무 만만하게 보았던 것인지, 애드센스 API 를 NextJS 환경에서 직접적으로 다루는 기술 블로그도 찾을 수 없고, 참고할 만한 자료도 파이썬이나 PHP 를 사용한 예시만 있어서 오직 단편적인 방식으로 제공되어 .. 여러분의 사이트는 안전한가요? ② HTTP Strict Transport Security 와 ③ X-Content-Type-Options 이전 포스트 | 여러분의 사이트는 안전한가요? ① | CSP 와 X-frame-Options 사이트 보안 향상 시키기 CSP 와 X-frame-Options들어가는 말이전 포스트에서 제가 만들었던 명언 웹 사이트( https://wise-sayings.com/ ) 의 웹 보안 수준을 MDN 에서 제공하는 무료 도구를 사용해서 측정했었고, 30/100 으로 낮은 점수를 받았습니다. 그duklook.tistory.com 들어가는 말이번 시간은 저번 포스트에 이어서 HTTP Strict Transport Security 에 대해 알아보고 실제 사이트에 적용해보는 시간을 가져볼까 합니다.2024.07.14 기준으로 X-Content-type-Options 부분의 내용도 추가하였습니다. 부분부분 내용이 매끄럽지 .. 여러분의 사이트는 안전한가요? ① | 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 들어가는 말웹팩는 번들러 이지만, 개발 환경에서 웹팩을 보다 쉽게 활용할 수 있는 몇 가지 기능들을 지원합니다. 보통 번들러를 통해서 하나의 소스파일로 합쳐지는 경우, 에러가 발생한다면, 각 파일별로 구분하여 알려주는 것이 아니라 하나.. 이전 1 2 3 4 5 6 7 ··· 50 다음
