분류 전체보기
-
정보처리기사 합격etc. 2024. 9. 19. 20:03
실기가 어려울 것이란 예측이 있어서 긴장했는데 다행히 합격 ㅎㅎ(불안해서 신기술 용어들 막판에 줄줄 암기했는데 안나옴,,)
-
[CSS] focus-within과 focus-visibleCSS 2024. 1. 10. 17:17
CSS에서 포커스 상태를 스타일링 하기 위해 가상클래스인 focus를 주로 사용하였지만 focus 이외에 focus-within과 focus-visible도 있다는 사실을 알았다. focus-within이란? focus-within을 사용한 요소는 해당 요소나 내부 요소 중에 포커스 상태가 되면 활성화가 된다. div:focus-within { background: red; } div 요소에 focus-within을 사용하여 스타일링을 한 경우 div 안의 input이 포커스를 받으면 활성화가 되어 배경색이 빨강색이 된다. 기존의 focus와 달리 해당 요소를 포함하여 내부 요소까지 감지하여 활성화가 된다는 차이점이 있다. focus-visible이란? focus-visible을 사용한 요소는 해당 요소..
-
[JavaScript] globalThisJavaScript 2023. 12. 14. 17:42
globalThis는 ES11 (ES2020)에 추가된 기능으로 자바스크립트 환경에서 전역 객체를 가리킨다. 이전 브라우저 환경에서는 window, Node.js 환경에서는 global을 사용해야 하는 등 각각의 환경에 따라 전역 객체에 접근하는 방법이 다르기 때문에 통일성이 없었다. globalThis는 이러한 차이를 해결하고 어디에서나 동일한 방법으로 전역 객체에 접근할 수 있도록 만들어졌다. console.log(globalThis === window) // 브라우저: true console.log(globalThis === global) // Node.js: true globalThis를 사용하면 특정 환경에 의존하지 않는 코드를 작성할 수 있다. + import { PrismaClient } f..
-
[JavaScript] ??=JavaScript 2023. 12. 1. 18:53
x ??= 2 ??= 코드를 처음 보았다. 추측을 하면 '아마 x가 null이나 undefined (널 병합 연산자) 면 x에 2로 할당한다는 의미이지 않을까?'는 생각이 들었고 찾아보니 내 예상이 맞았다. Nullish coalescing assignment (??=) - JavaScript | MDN The nullish coalescing assignment (??=) operator, also known as the logical nullish assignment operator, only evaluates the right operand and assigns to the left if the left operand is nullish (null or undefined). developer.moz..
-
[JavaScript] 이벤트 전파 중단하기JavaScript 2023. 11. 23. 15:28
이벤트 전파에 대한 예시를 생각하다 트위터 서비스의 예시가 이해하기 적절하다고 생각했다. posts 페이지에서 여러 트윗 목록을 볼 수 있다고 가정하자. 하나의 트윗에 답글 기능, 리트윗 기능, 마음 기능, 북마크 기능 등 여러 버튼이 하단에 배치해 있고 각각의 클릭 이벤트에 대한 콜백 함수가 등록되어 있을 것이다. 그리고 그 외의 공간을 클릭하면 해당 트윗에 대한 post 페이지로 이동하는 콜백함수가 등록되어 있다. 코드로 작성한다면 다음과 같이 될 것이다. router.push(`/post/${postId}`)}> // ... 상위 요소에 클릭 시 post 페이지로 이동하는 콜백 함수가 등록되어 있고, 하위 버튼 요소에 각각의 클릭 이벤트에 대한 콜백함수가 등록되어 있는 구조이다. 우리는 각 버튼을 ..
-
마피아 G 마스터 회고Project 2023. 11. 2. 14:11
마피아 G 마스터란 오프라인 마피아 게임을 위한 진행 가이드 서비스이다. 마피아 게임은 어렸을 때부터 간간이 해왔지만 내가 MC가 되어 진행한 적은 없었다. 이유는 마피아 게임의 규칙을 정확히 몰랐고, 혹시라도 역할을 까먹거나 진행을 실수하여 게임을 망치는 두려움도 있었기 때문이다. 이런 생각들을 줄줄이 늘어놓다 보니 나와 같은 사람이 있지 않을까 생각이 들었고 이 진행 가이드 서비스를 만들면 재밌겠다 싶어 시작하게 되었다. 디자인 주황 색상과 명도 대비 초기 생각했던 메인 색상은 주황이었다. 하지만 웹 접근성을 위해 주황 바탕에 흰 텍스트로 명도 대비를 검사해 보니 3:1 이하로 나왔다. 더 어두운 주황 계열의 색으로 바꾸면 되겠지만 그건 나의 미적 기준에 도저히 허용할 수 없었다. (...) 아쉽지만..
-
[PWA] Next.js 프로젝트에 PWA 적용하기JavaScript 2023. 10. 25. 19:11
PWA(Progressive Web App)이란 모바일 및 웹 애플리케이션 개발의 접근 방식 중 하나로, 네이티브 모바일 앱과 유사한 경험을 제공하는 기술이다. PWA를 적용하면 브라우저나 모바일 홈에서 웹 앱을 설치하여 사용할 수 있고 푸시 알림, 오프라인 등의 기능도 하여 풍부한 사용자 경험을 제공할 수 있다. Next.js 프로젝트에 PWA를 적용을 해보았다. Next.js를 위한 PWA 플러그인인 next-pwa가 있어 사용하기로 하였다. npm install next-pwa yarn add next-pwa 1. withPWA next.config.js 파일에 다음과 같이 적용한다. // next.config.js const withPWA = require("next-pwa")({ dest: "p..
-
[JavaScript] XState 기초 이해하기JavaScript 2023. 10. 20. 18:43
Stately Studio + XState docs | Stately Stately Studio and XState docs stately.ai 1. 상태 관리 라이브러리 XState는 상태 관리 라이브러리 중 하나이다. 유한 상태 기계(Finite State Machine, FSM) 기반으로 상태 기계 개념에 기초하여 만들어졌다. 2. 상태 기계(State Machines)란 상태 기계는 애플리케이션 로직을 구성한다. 만약 개 상태 기계를 만들었다고 하다면, 개 상태 기계의 상태를 asleep, awake으로 구성할 수 있다. 즉, 개는 자고 있거나 깨어있다라는 두 가지 상태를 가진다. 이는 개는 잠을 자는 동시에 깨어 있을 수 없으며, 개가 잠을 안 자고 깨어 있는 것도 불가능하다. 이처럼 상태 기계..