surpise

프로젝트를 작업하다 보면 비슷한 작업을 반복하게 되는 경우가 있습니다.새로운 기능을 하나 추가하기 위해 파일을 만들고, 관련 설정을 등록하고, 필요한 문자열을 추가하고, 마지막으로 빠진 부분이 없는지 확인하는 식입니다.각각의 작업은 어렵지 않았지만 항상 비슷한 순서로 여러 파일을 수정해야 했습니다.처음에는 Cursor에게 매번 기존 코드를 참고해서 작업해달라고 요청했습니다.하지만 비슷한 작업이 계속되다 보니 이런 생각이 들었습니다.이 작업 방법 자체를 Cursor에게 미리 알려둘 수 없을까?Cursor 문서를 찾아보니 이런 반복 작업에는 Skill을 사용할 수 있었습니다.처음에는 Skill 하나만 만들어두면 될 것이라고 생각했습니다.그런데 실제로 자동화를 만들어 사용하다 보니 Skill 하나에 모든 역할..

React로 화면을 만들던 중 다음과 같은 오류를 만났습니다.Maximum update depth exceeded특정 화면을 열거나 값을 변경한 직후 발생했고, Stack Trace에는 useEffect와 setState가 반복해서 나타나고 있었습니다.처음에는 단순히 setState를 너무 많이 호출해서 발생하는 문제라고 생각했습니다.하지만 코드를 따라가다 보니 문제는 호출 횟수 자체보다 State 변경으로 발생한 Render가 다시 같은 Effect를 실행시키고 있었다는 것이었습니다.그렇다면 useEffect는 어떻게 무한 반복에 빠지게 되는 걸까요?useEffect 안에서 State를 변경하면먼저 단순하게 생각해 보았습니다.useEffect 내부에서 setState를 호출하면 State가 변경되고 C..

지난 글에서는 Cortex-M3에서 IAP와 Application을 분리하여 사용할 때 Application의 시작 주소와 Vector Table을 어떻게 설정해야 하는지 알아보았습니다.Application을 Flash의 다른 위치에서 실행하기 위해 Linker Script의 시작 주소를 변경하였고, Cortex-M3에서는 VECT_TAB_OFFSET을 이용하여 Vector Table의 위치도 Application에 맞게 변경할 수 있었습니다.이후 Cortex-M0를 사용하는 MCU에서도 동일하게 IAP와 Application을 분리하는 구조를 적용하게 되었습니다.처음에는 Cortex-M3에서 사용했던 방법을 그대로 적용하면 될 것이라고 생각했습니다.하지만 Cortex-M0에서는 같은 방법으로 Vecto..

지난 글에서는 기존 C 프로젝트를 C++로 리팩토링하기 위해 Keil에서 STM32CubeIDE로 프로젝트를 옮기면서 발생했던 문제들을 알아보았습니다.컴파일 에러를 하나씩 해결하면서 STM32CubeIDE에서도 빌드할 수 있게 되었고 이후 본래 목적인 C++ 리팩토링을 계속 진행하였습니다.그런데 빌드된 파일을 보드에 올려보니 정상적으로 동작하지 않았습니다.기존 프로젝트의 구조를 다시 확인해 보니 IAP와 Application이 분리되어 있었고 Application은 Flash의 시작 위치가 아닌 별도의 주소에서 실행되는 구조였습니다.그렇다면 IAP에서 Application을 실행하기 위해서는 무엇을 설정해야 할까요?IAP와 Application기존 프로젝트는 하나의 프로그램이 Flash 전체를 사용하는 ..

기존에 사용하고 있던 프로젝트는 오래된 C 코드로 작성되어 있었습니다.기능을 추가하거나 수정하는 과정에서 코드의 가독성이 떨어지고 유지보수가 어려운 부분들이 있었기 때문에 기존 코드를 C++로 변경하면서 전체적인 구조를 리팩토링하기로 하였습니다.단순히 C++로 변경하는 것뿐만 아니라 앞으로 계속 기능을 추가하고 관리해야 하는 프로젝트였기 때문에 이후 작업의 효율도 함께 높이고 싶었습니다.그래서 이번 기회에 기존에 사용하던 Keil에서 비교적 최신 개발 환경인 STM32CubeIDE로 IDE도 함께 변경하기로 하였습니다.처음에는 기존 코드를 옮기고 C++로 하나씩 변경하면 될 것이라고 생각했습니다.하지만 실제로 프로젝트를 옮겨보니 Keil에서 사용하던 프로젝트를 STM32CubeIDE에서 그대로 사용할 수..

최근 개발하고 있는 웹 사이트에 보안을 조금 더 강화해야 하는 일이 생겼습니다.일부 사이트에서는 더 높은 수준의 보안을 요구하고 있었고, 웹 사이트에 보안 취약점이 있는지 확인하기 위해 ZAP(Zed Attack Proxy)을 사용하여 검사를 진행하였습니다.그런데 검사 결과에서 아래와 같은 항목이 발견되었습니다.CSP Header Not SetCSP Header가 설정되어 있지 않다는 의미였습니다.CSP라는 단어는 들어본 적이 있었지만 실제로 적용해 본 적은 없었기 때문에, 이번 기회에 CSP가 무엇인지 알아보고 직접 적용해 보았습니다.CSP (Content Security Policy)CSP는 Content Security Policy의 약자로 콘텐츠 보안 정책을 의미합니다.웹 페이지에서 스크립트, 스..

웹 접근성 (Web Accessibility)웹 접근성은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다.위키 백과 즉, 모든 사람이 웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 사용할 수 있도록 보장하는 것을 말합니다.이를 만족하기 위해서는 신체적 조건과 환경적 조건을 고려해야 합니다. 신체적으로는 장애인과 고령자를 포함한 모든 사람이 동등하게 이용할 수 있다는 것을 말합니다.환경적으로는 다양한 플랫폼 및 디바이스, 웹 브라우저 등 모든 환경에서 이용할 수 있다는 것을 말합니다. 웹 콘텐츠 접근성 가이드라인 (WCAG) 준수웹 콘텐츠 접근성 가이드라인은 인터넷의 주요 국제 표준 기구인 W3C에서 만든 가이드라인으로 웹 사이트 / 애플리케..

CSS의 여러 기능들을 학습하기 위해 태양계를 구현해 보는 프로젝트를 진행해 보았다.태양과 지구 이미지를 background로 넣어주고, 애니메이션으로 transform 속성을 이용하여 요소를 회전시켜 자전과 공전을 시키려고 했다.그래서 태양의 자전을 구현하였더니 아래와 같은 문제가 발생했다. 태양의 자식 요소였던 지구의 궤도가 함께 돌아버리는 것이다.부모 요소에 애니메이션을 적용시키니 자식 요소까지 한 번에 적용되는 문제가 발생한 것이다.이를 해결하기 위해 가상 요소에 대해 학습을 진행하였다.가상 요소(Pseudo elements)가상 요소란 선택자에 키워드로 가상의 요소를 추가하는 것이다.즉, 존재하지 않는 요소를 만들어서 스타일을 입힐 수 있게 해주는 것이다.사용법은 간단히 아래와 같다. sele..