분류 전체보기
-
웹 접근성과 웹 표준을 알아보자!개발 지식/WEB 2024. 5. 22. 16:55
웹 접근성 (Web Accessibility)웹 접근성은 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 이용할 수 있게 하는 방식을 가리킨다.위키 백과 즉, 모든 사람이 웹 사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 사용할 수 있도록 보장하는 것을 말합니다.이를 만족하기 위해서는 신체적 조건과 환경적 조건을 고려해야 합니다. 신체적으로는 장애인과 고령자를 포함한 모든 사람이 동등하게 이용할 수 있다는 것을 말합니다.환경적으로는 다양한 플랫폼 및 디바이스, 웹 브라우저 등 모든 환경에서 이용할 수 있다는 것을 말합니다. 웹 콘텐츠 접근성 가이드라인 (WCAG) 준수웹 콘텐츠 접근성 가이드라인은 인터넷의 주요 국제 표준 기구인 W3C에서 만든 가이드라인으로 웹 사이트 / 애플리케..
-
가상 요소(Pseudo elements)를 이용하여 배경 돌리기FE/CSS 2024. 5. 4. 00:12
서론CSS의 여러 기능들을 학습하기 위해 태양계를 구현해 보는 프로젝트를 진행해 보았다.태양과 지구 이미지를 background로 넣어주고, 애니메이션으로 transform 속성을 이용하여 요소를 회전시켜 자전과 공전을 시키려고 했다.그래서 태양의 자전을 구현하였더니 아래와 같은 문제가 발생했다. 태양의 자식 요소였던 지구의 궤도가 함께 돌아버리는 것이다.부모 요소에 애니메이션을 적용시키니 자식 요소까지 한 번에 적용되는 문제가 발생한 것이다.이를 해결하기 위해 가상 요소에 대해 학습을 진행하였다.가상 요소(Pseudo elements)가상 요소란 선택자에 키워드로 가상의 요소를 추가하는 것이다.즉, 존재하지 않는 요소를 만들어서 스타일을 입힐 수 있게 해주는 것이다.사용법은 간단히 아래와 같다. se..
-
JavaScript에서의 thisLanguage/JavaScript 2024. 3. 6. 19:23
this는 다른 언어에서는 자기 자신을 가리키는 참조 변수로 사용되는 경우가 많다. 그래서 JavaScript에서도 이와 유사하게 사용하려고 하였으나 예상한 대로 코드가 동작하지 않는 문제가 발생하였다. class CategoryController extends CommonController { constructor() { super(new CategoryModel()); } loadCategories(req, res) { categoryModel.loadCategories((err, result) => { this.requestCallback(err, result, res); }); } } 위 코드에서 CategoryController는 CommonController를 확장해서 만들어진 객체이다. Co..
-
새로 고침 후에도 전역상태를 유지하는 법 (Zustand persist)FE/Zustand 2024. 2. 5. 16:35
서론 기존에 프로젝트를 진행할 때, 로그인 여부를 확인하기 위한 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 = cre..
-
[C++] STL priority_queue 정리Language/C++ 2024. 1. 12. 16:11
요구 사항 헤더 : 네임스페이스 : std 멤버 함수 empty : priority_queue가 비어 있는지를 테스트 pop : priority_queue의 우선순위가 가장 높은 요소를 최상위 위치에서 제거 push : 우선순위에 따라 요소를 priority_queue에 추가 emplace : 요소를 구성하고 우선순위에 따라 priority_queue에 추가 size : priority_queue에 있는 요소 수를 반환 top : priority_queue의 최상위 위치에 있는 요소에 대한 참조를 반환 swap : 두 개의 priority_Queue의 내용을 바꿈 활용 #include priority_queue pq; 매개 변수 Type priority_queue에 저장되는 요소 데이터 형식 Contai..
-
Zustand로 상태 관리 해보기FE/Zustand 2024. 1. 9. 18:01
상태 관리 React로 프로젝트를 진행하다 보니 규모가 커짐에 따라 상태들의 관계가 복잡해지고 유지보수가 어려워졌다. 초기에는 컴포넌트의 수도 적고 상태의 수도 적다 보니 흐름을 쉽게 이해할 수 있어서 props로 넘겨주어도 문제가 없었다. 하지만, 프로젝트가 진행됨에 따라 하위 컴포넌트로 상태를 넘겨주는 단계가 많아지게 되는 일이 발생하였다. 상태 관리는 이런 경우에 필요하다. 상태들이 복잡하게 얽혀 있고 상호 간에 의존성이 많아지게 되면, UI가 어떻게 변하는지 알기 어렵기 때문에 잘 관리할 필요가 있다. 상태 관리를 보다 쉽게 할 수 있게 해주는 많은 상태 관리 라이브러리들이 존재하는데, 어떤 상태 관리 라이브러리를 사용할지 고민하다 Zustand를 사용해 보려고 한다. Zustand Zustand..
-
이건 무효야! Query InvalidationFE/React Query 2023. 12. 6. 23:50
React Query는 데이터를 캐싱하여 불필요한 API 호출을 줄여줍니다. useQuery로 데이터를 읽어오고, useMutation으로 데이터를 추가, 수정, 삭제할 수 있습니다. 이때, useMutation으로 데이터를 변경한다고 해서 useQuery가 바로 데이터를 새로 읽어오지 않습니다. 왜냐하면 캐싱 한 데이터를 계속 사용하고 있기 때문입니다. 자세히 알아보기 전에 react query의 데이터 흐름을 잠깐 먼저 살펴보겠습니다. React Query의 데이터 흐름 react query에서의 데이터 상태는 아래와 같은 흐름을 가지고 있습니다. fetching: 데이터 요청 상태 fresh: 데이터가 만료되지 않은 상태 stale: 데이터가 만료된 상태 inactive: 사용하지 않는 상태 del..
-
기억해줘! 기억할게! (쿠키, 세션, 토큰)개발 지식/WEB 2023. 11. 28. 23:25
HTTP는 stateless, 상태를 저장하지 않습니다. HTTP를 사용하는 서버는 우리가 요청을 여러 번 보내도 우리를 기억해주지 않습니다. 이 매정한 녀석에게 우리를 기억하게 하려면 어떻게 해야 할까요? 쿠키 (Cookie) 서버는 매정하지만 달콤한 것을 좋아한다는 이야기가 있습니다. 그리고 우리는 그 점을 이용하여 서버가 우리를 기억할 수 있게 쿠키를 이용할 것입니다. 행운의 메시지를 담은 과자인 포춘 쿠키에서 유래한 쿠키(cookie)는 마찬가지로 사용자 정보를 가지고 있는 작은 데이터 조각입니다. 사용자가 서버로 요청을 보내면 쿠키도 함께 보내지며 가지고 있는 정보를 전달하는 매개체 역할을 합니다. 그렇다면 쿠키는 무슨 정보를 가지고 있길래 사용자가 누구인지 알 수 있는 걸까요? 세션 (Sess..