찐빵이의 개발일기

몇 달 전, 바닐라JS에서 CSS로 다크모드 설정하는 방법을 공부했다. 그리고 리액트를 공부하다가 다시 한번 다크모드 설정을 구현하게 되었는데, 너모너모 쉬워서 깜짝 놀랐다. 잊고 싶지 않아서 글로 남겨본다. 1. 다크모드 Context 만들기 앱 전반적으로 활용해야하는 설정이라면 Context를 사용해서 구현하는 게 편리하다. 다크모드도 앱 전체에 적용되어야 하는 값이기 때문에 Context를 활용하여 구현해 준다. // DarkModeContext.jsx import { createContext, useContext, useEffect, useState } from 'react'; export const DarkModeContext = createContext(); export function Dar..

Routing이란? 주소창에 uri를 입력했을 때 서버가 요청된 uri에 해당하는 페이지를 전달해 주는 것 동작 순서 클라이언트에서 서버로 페이지 요청 → 서버에서 페이지 전달 → 페이지 전체가 업데이트 됨 Client Side Routing이란? 페이지를 이동할 때 새로운 html을 받아오는 것이 아니라, 각 페이지에서 필요한 데이터를 네트워크 통신(fetch)을 사용해서 필요한 데이터만 받아오는 것 동작 순서 클라이언트에서 서버로 변경되는 데이터 요청 → 서버에서 데이터 JSON 형태로 전달 → 필요한 부분만 업데이트됨 React Router Client Side Routing을 가능하게 해주는 API 장점 SPA를 유지하면서 멀티 페이지 형태의 장점(uri 경로 변경)을 사용할 수 있다. histo..

Immer 가 뭐야? 며칠 전, Reducer로 상태 관리를 하는 방법에 대해 배웠다. Reducer를 사용해서 편리하게 상태 관리하는 건 알았어! 그런데, 중첩된 객체가 많아진다면?? 상태 업데이트 할 때마다 중첩 객체 업데이트를 위해 spread 연산자 사용하고, 복잡해질 것이다. 그래서 중첩 객체가 많아도 쉽게 간단하게 상태 관리를 할 수 있도록 Immer가 나온 것이다. Immer 예시 Immer를 사용했을 때는 가변성 객체를 다루는 것처럼 쉽게 상태 변경을 할 수 있다. Immer 객체 내부에서 새로운 객체를 생성하고 있기 때문에, 우리는 그걸 신경 쓰지 않아도 되는 것이다. Immer 사용 방법 Install yarn add immer use-immer Use import { useImmer ..

서비스를 개발할 때 아이템의 상태 관리를 하는 것은 중요하다. 리액트에서도 상태 관리를 할 수 있다. 기본 상태 관리 - useState 컴포넌트 안에서 사용하는 아이템의 상태를 관리하려면 useState를 사용하면 된다. 그런데 다른 컴포넌트에서도 이 아이템을 사용하고 싶다면?? 이런 고민과 불편함은 상태 관리 라이브러리를 사용하여 해결할 수 있었다. 상태 관리 라이브러리 종류: Redux, MobX, Immer 등... 하지만! 지금은 최신 React에서 제공해 주는 Hook을 이용해서 상태 관리를 할 수 있다. React Hook으로 상태 관리하기 useState : 일반 원시값이나 객체, 배열인 경우 useReducer : 상태 관리 코드를 분리하고 재사용하고 싶을 경우 context : 여러 컴..

이벤트를 위임할 때 Element 하나씩 이벤트 핸들러를 달아주면 성능도 저하되고 코드도 복잡해진다. 따라서 부모 태그에 이벤트 리스너를 만들고, 자식 요소를 클릭하면 이벤트 버블링이 일어나서 부모 태그에 만들어 둔 리스너가 동작한다. 이때 이벤트 리스너에서 event.target을 체크한 뒤 원하는 동작을 구현하면 코드가 간단해지고 성능도 빨라진다는 장점이 있다. 이러한 방법을 이벤트 델리게이션이라고 한다.

우리가 코드를 작성하면, 화면에 어떤 원리로 나오는 것일까? 궁금해서 공부해 봤다. HTML → DOM 브라우저는 우리가 작성한 HTML을 읽는다. HTML은 Element로 이뤄져 있는데, 이걸 노드로 변환한다. 이렇게 변환한 노드를 모으면 DOM Tree가 된다. 즉, DOM Tree는 노드의 집합이라는 것! DOM에는 어떤 정보가 있을까? DOM에는 콘텐츠, 이벤트에 관련된 내용을 가지고 있다. (단, 스타일은 제외된다.) 노드에 콘텐츠(Value)가 들어있는 건 이해하지만, 이벤트는 어떻게 가지고 있는 걸까? 바로 Node가 EventTarget을 상속받기 때문! EventTarget에는 addEventListener 등 이벤트 등록, 제거 관련 메서드가 있는데, 노드에서 이것을 상속하기 때문에 ..

웹을 구현할 때 Click 이벤트를 구현하는 방법이 두 가지가 있다. addEventListener('click', () => {} 이렇게 이벤트 리스너를 추가하는 방법과 onclick() HTML에 onClick을 더해주는 방법! onclick이 더 간단한 것 같고, onclick이 가능한 곳에서 왜 addEventListener을 사용하나 궁금해서 문서를 작성하게 되었다. 브라우저 호환성 Onclick 메서드는 모든 버전에서 호환되지만, AddEventListener는 IE에서 호환되지 않는다. 버블링, 캡처링 설정 가능 여부 Onclick 메소드는 구현할 기능인 함수만 받지만, AddEventListener는 3번째 파라미터로 버블링, 캡쳐링 동작 여부를 결정할 수 있다. boolean 값으로 tr..

그냥 태그로 다 쓰면 안돼요? 네 안돼요. 시맨틱 마크업이 무엇인지, 왜 필요한지 알아보자. 시맨틱 마크업 시맨틱(Semantic)이란 단어를 해석하면 의미론적인이란 뜻이고, 마크업은 HTML 태그로 문서를 작성하는 것을 말한다. 즉, 시맨틱 마크업은 의미에 맞는 HTML 태그를 사용해서 문서를 작성하는 것을 말한다. 의미를 가진 마크업? 어떻게 하는 건데? HTML은 여러 종류의 태그가 있다. 여러 태그 중에서 내용에 맞는 태그를 선택하여 문서를 작성하면 된다. 예를 들어 문서 제일 상단에 오는 박스인 경우 : 태그 사용 텍스트인 경우 : 태그 사용 최상위 제목인 경우 : 태그 사용 순서 없는 목록인 경우 : 태그 사용 등등.. 무작정 태그를 사용하거나, 제목인데 , css size 변경으로 스타일링을..

구글 폰트 웹 사이트에 들어가 원하는 폰트를 찾는다. 폰트를 선택하면 왼쪽 바에 Use on the web이라는 메뉴가 보인다. 위에 보이는 링크를 복사해서 HTML 헤더에 추가한다. CSS에서 폰트를 적용할 지역에 CSS rules to specify families에 나온 폰트 코드를 넣어준다. body * { font-family: 'Noto Sans KR', sans-serif; }그럼 폰트가 적용된 화면을 볼 수 있다.

최근에 많이 사용되는 다크모드, 라이트모드를 구현해 보면서 처음 알게 된 내용을 정리해보려고 한다. 1. OS 설정에 맞춰 모드 변경하는 방법 : prefers-color-scheme prefers-color-scheme 미디어 쿼리는 OS에서 설정된 라이트/다크 모드를 감지하여 자동으로 라이트, 다크 모드 스타일을 적용하는 기능이다. 일반식으로 쓰면 아래처럼 표현할 수 있다. @media (prefers-color-scheme: 모드) { /* 해당 모드에 적용할 스타일 */ } 다크모드 스타일 설정 예시 @media (prefers-color-scheme: dark) { body { background-color: var(--background-color); color: var(--text-color..