전체 글74 [CSS] 마우스를 올리면 움직이는 3D 책 만들기 마우스를 올리면 움직이는 3D 책 만들기 인터랙티브 웹과 어울리는 컴포넌트 3D 컴포넌트 Next.js 공식문서를 읽던 중, 3D 컴포넌트를 발견하였다. 마우스를 올리면 책이 움직인다. 이 컴포넌트를 보자마자 어떻게 구현한 것인지 궁금해져 바로 개발자도구를 켜서 이 페이지의 HTML, CSS를 구경해보았다. CSS 부분을 읽어보니 프레임워크나 라이브러리 없이 순수 CSS만을 이용해서 구현했다는 것을 알 수 있었다. 충분히 간단하게 구현해볼 수 있을 것 같다는 생각이 들었고, 바로 vscode를 켜서 만들어 보았다. 완성된 모습은 이렇게 생겼다. 라이브러리 없이 단순 CSS만으로 만들기 때문에 코드도 간단하고 자바스크립트 환경 어디서든 사용할 수 있다. 구현하는 방법 HTML 제목을 입력하세요 부제목을 입.. 2023. 11. 20. [Next.js] Next.js에서 Recoil Root 설정하는 법 Next.js에서 Recoil Root 설정하는 법 Next.js에서 Recoil을 사용하려면 React와는 초기 세팅 방법이 약간 다르기 때문에 Recoil Root를 어떻게 세팅하면 되는지 정리해보려 한다. Next.js에서 Recoil 사용하는 법 1. Provider 생성 // app/RecoilRootProvider.tsx // 컴포넌트 이름은 자유롭게 지정 import { ReactNode } from "react"; import { RecoilRoot } from "recoil"; type Props = { children: ReactNode; }; export default function RecoilRootProvider({ children }: Props) { return {childr.. 2023. 10. 20. [자료구조] Stack과 Queue Stack과 Queue 스택(Stack)과 큐(Queue)는 데이터를 임시로 저장하기 위해 디자인된 추상적인 데이터 구조이다. 데이터를 저장하는 순서에 따라 구분된다. # 스택(Stack) 한쪽 끝이 막혀 있는 형태의 저장 공간이다. 데이터가 차곡차곡 쌓아 올려지는 형태로 저장되고, 저장한 자료를 빼낼 때는 마지막으로 저장한 데이터부터 사용하게 된다. 즉, 나중에 저장한 데이터를 가장 먼저 사용하는 데이터 관리 방식인 후입선출 방식(LIFO, Last In First Out)이다. 데이터는 스택의 끝에서만 삽입, 삭제할 수 있으며 스택의 마지막 원소만 읽을 수 있다. 스택 사용 사례 : 웹 브라우저 방문 기록 (뒤로 가기), 실행 취소 등 # 큐 (Queue) 스택과는 달리 양쪽이 열려 있는 형태의 저장.. 2023. 10. 6. [고민] 주니어 개발자의 고민: 같은 내용, 다른 코드 주니어 개발자의 고민: 같은 내용, 다른 코드 좋은 코드란 무엇일까에 대한 고민 고민의 시작 좋은 코드란 무엇일까? 개발 공부를 시작한 이후로 늘 하게 되는 고민이다. 개발이라는 분야에 처음 들어왔을 때는 단순히 '개발자가 되는 것'이 목표였는데, 개발자가 되고 난 후에는 '좋은 코드를 짜는 개발자가 되는 것'이 목표가 되었다. 시간이 흐르고 연차가 차면 무조건 좋은 코드를 짤 수 있게 될까? 꼭 그렇지만은 않을 것 같다😢 매일 의미 없는 코드만 작성한다면 시간이 흘러도 개발 실력에는 발전이 없을 것 같다는 두려움이 있다. 그렇다면 어떻게 해야 의미 있는 코드를 작성할 수 있을까? 이제 막 개발 분야에 발을 들인 주니어로서 좋은 코드를 위해 어떤 연습을 해야 할지 고민이 되었다. 같은 내용, 다른 코드 .. 2023. 9. 4. [React] 반응형 디자인 직접 코드로 구현해보기 반응형 디자인 직접 코드로 구현해보기 커스텀 반응형 구현하기 웹 개발을 하던 중 문득 궁금해졌다. 반응형 디자인을 직접 만들어 보면 어떨까?! css 라이브러리 혹은 @media로 구현하던 반응형 디자인을 React 코드로 구현할 수 있을까? 직접 구현해보면 재밌을 것 같아서 찾아본 결과, useEffect를 사용하면 가능하다는 걸 알게 되었다. 🥴 # 화면 사이즈에 event 걸기 const [screenWidth, setScreenWidth] = useState(window.innerWidth); useEffect(() => { const changeScreenWidth = () => { setScreenWidth(window.innerWidth); }; window.addEventListener(".. 2023. 8. 9. [Zustand] 간단한 상태 관리, React에서 Zustand 사용하는 방법 간단한 상태 관리, React에서 Zustand 사용하는 방법 Redux에서 벗어나 봅시다 Zustand 도입 계기 프로젝트를 개발하다 보면 전역 상태 관리는 거의 필수이다. 컴포넌트에서 컴포넌트로 변수를 넘겨줄 일이 많은데, 그 많은 변수들을 전부 props로 넘겨줄 수는 없기 때문이다. 따라서 전역 상태 관리 라이브러리를 도입할 수 밖에 없고, 그중에서도 가장 대표적인 툴은 아마 Redux일 것이다. 나 또한 Redux를 사용했다. 정확히 말하면 Redux Toolkit을 사용했다. 이미 많은 사람들이 사용하는 툴이고, 그래서 정보도 많고, 공부할 때 참고할 자료도 많았다. 그래서 너무 당연하게도 나에게 상태 관리란 곧 Redux Toolkit이었다. 하지만 점점 문제를 느꼈다. 뭐가 문제나면... .. 2023. 7. 15. 이전 1 2 3 4 5 ··· 13 다음
