A collection of 92 articles on programming, technology and life.
Header CSS ISSUE 1 Nav에 와 을 주고 padding하게 되면 전체 넓이를 padding + width: 100%로 계산하게 되면서 컴포넌트가 밖으로 나가는 현상이 발생한다. → 이를 막기 위해 를 추가하면 padding과 border가 width에 포함되어 계산된다. ISSUE 2 **positio
Gatsby React 기반의 프레임워크이다. 정적인 웹사이트(유저들이 데이터를 올리지 않는 경우) 제작에 특화되어 있다. Gastby로 만든 대부분의 웹사이트는 빌드, 렌더링 될 때 거의 모든 데이터를 한 번에 가져와 웹사이트를 만든다. react(create react app)는 User의 JS가 비활성화 된 상태이거나 인터넷 연결 상태가 좋지 않을 경우, 페이지에는 아무 것도 뜨지 않는다. Gatsby(develop 모드가 아닌)의 경우에는 빌드 되는
Framer Motion React JS에서 애니메이션을 쉽고 강력하게 만들어주는 라이브러리이다. 24년 11월 12일부로 framer-motion이 framer로부터 독립해 motion이라는 이름이 되었다. Motion Tag 어떠한 태그에 Framer Motion을 적용시키기 위해서는 태그 이름 앞에 을 붙여야한다. `jsx function Animation() { retur
Get Selector Jotai 라이브러리에서 get function을 통해 다른 atom 값들을 가공해 return 할 수 있다. get을 사용하면 연관된 State를 여러 개로 저장하지 않고 하나의 State로 관리할 수 있다. `jsx export const minutesState = atom(0); // minutesState 값을 가져와서 Hour로 바꿔줌 export const hourSelector = atom((get) => { const minutes = get(mi
Global State 어플리케이션 전체에서 공유되는 State state management 없이 Global State를 구현한다면 해당 Component를 받을 때까지 연결되어 있는 모든 페이지에 Pros를 넘겨야 하는 상황이 벌어진다. Jotai Recoil 말고 Jotai을 선택한 이유 React JS에서 사용할 수 있는 state management library 중 하나이다. 하지만 2025년 1월 12일 이후로 업데이트가 중단됐다. 따라서