surpise

지난 글에서는 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..

this는 다른 언어에서는 자기 자신을 가리키는 참조 변수로 사용되는 경우가 많다.그래서 JavaScript에서도 이와 유사하게 사용하려고 하였으나 예상한 대로 코드가 동작하지 않는 문제가 발생하였다.class CategoryController extends CommonController { constructor() { super(new CategoryModel()); } loadCategories(req, res) { categoryModel.loadCategories((err, result) => { this.requestCallback(err, result, res); }); }}위 코드에서 CategoryCon..

서론기존에 프로젝트를 진행할 때, 로그인 여부를 확인하기 위한 userId를 LocalStorage에 저장하여 관리하였었다.하지만, 상태관리 라이브러리인 Zustand를 도입하면서 userId도 Zustand를 통해 관리하는 것이 좋다고 판단하였다.그래서 userId를 store에서 관리하도록 코드를 수정해 보았다.userId를 store로 분리이전에 상태를 만든 것과 같이 userId를 저장할 store를 만들기 위해 아래와 같이 코드를 작성하였다.import { create } from 'zustand';interface userState { userId: number; setUserId: (newUserId: number) => void;}const useUserStore = create((se..