분류 전체보기337 [React/Next.js] 클릭 또는 몇 초 후에 카드 뒤집기 효과 (card flip) 몇 초 후에 자동으로 카드를 뒤집고 클릭시에도 카드를 뒤집는 효과이다 보통 이렇게 카드를 뒤집는 것을 card flip 이라고 하고, 검색으로 쉽게 구현이 가능한 효과다. 많은 사람들이 over 시 뒤집히도록 css로 hover 시 변화하도록 많이 구현하지만, 나는 hover가 아니라 클릭 시 뒤집히길 바라고, 클릭하지 않아도 몇 초 후에 자동으로 뒤집히게 구현해보고 싶었다. 핵심 원리를 요약하자면, CSS transition과 transform-style: preserve-3d;을 사용하여 카드 요소의 3D 회전 효과를 구현 React의 useState와 useEffect로 카드의 뒤집힘 상태(isFlipped)를 관리하고, 시간 간격이나 클릭 이벤트에 따라 상태를 변경 isFlipped 상태에 따라 .. 2023. 12. 31. [React/Next.js] 여러 줄의 타이핑(multi line typing effect) 효과 개인 포트폴리오 프로젝트 중 구현한 문자열 배열의 여러 줄 타이핑 효과이다. 한 줄만 타이핑 하는 효과의 구현은 검색으로 매우 쉽게 찾아 볼 수 있었지만, 항상 뭔가 더 추가로 더 해보고 싶은 마음에 여러 줄을 한번에 이어서 타이핑 하도록 구현해보았다. 거기에 추가로 여러개의 문자열을 번갈아가며 타이핑하도록 구현하였다. 핵심 원리를 요약하자면, useEffect내에서 상태로 관리 중인 문자열의 인덱스를 확인하고 settimeout을 사용해서 지연 시간 후에 다음 문자를 추가해준다. 근데 의존성 배열에 갱신되는 문자를 넣어서 지연시간 후에 문자가 갱신되면 다시 랜더링 되면서 useEffect로 같은 로직이 반복되는 원리이다. 코드의 각 줄마다 상세 설명을 주석으로 남겨두었다. 위의 코드는 문자열 배열을 타.. 2023. 12. 31. 구체적인 Github 프로젝트 관리 순서와 방법 깃허브를 사용해서 체계적으로 프로젝트를 관리해보자 깃허브로 코드 저장 외에 프로젝트도 관리할 수 있는데, 아래의 순서대로 따라하면 됩니다아🐰 원격 저장소 생성 및 초기 설정 프로젝트의 GitHub 리포지토리 생성 및 기본 브랜치 설정. 백로그 작성 프로젝트에 필요한 세부 작업들을 백로그로 추가하여 미리 계획. 예를 들어, 기능 개발, 디자인 작업, 버그 수정 등을 백로그 아이템으로 기록. 마일스톤으로 작업 분류 백로그의 작업들을 단계별로 나누어 마일스톤에 할당. 각 마일스톤은 프로젝트의 중요한 단계나 목표를 나타냄. 코딩 진행 및 커밋 개발 작업을 진행하면서, 관련된 변경사항을 커밋. 커밋 메시지에는 수행한 작업의 내용을 명확하게 기술. 이슈 관리 개발 과정에서 발생하는 이슈를 생성하고, 해결되면 닫음... 2023. 12. 24. Next.js 13에서 TypeScript를 사용한 WebSocket 구현 WebSocket은 HTTP와는 다른 독특한 통신 방식을 사용하여, 실시간 양방향 통신을 가능하게 합니다. 이 글에서는 Next-Chat이라는 채팅 PWA 웹앱을 만들며 작성한 코드를 다시 분석해보려 합니다. 코드 줄마다 이해한 내용으로 주석을 적어놓았으니 코드만 보셔도 됩니다! app router 가 아닌 pages router 를 선택한 이유 next.js 13 이상으로 프로젝트 생성 시, App Router를 사용하면 HTTP 메소드인 GET, POST, PUT, DELETE를 API 함수명으로 사용하지 않으면 에러가 발생하므로, App Router를 선택하지 않고 page Router를 사용해서 해결하였습니다. WebSocket은 일반적인 HTTP와 다르므로, App router를 사용해서 API.. 2023. 12. 5. 이전 1 2 3 4 5 ··· 85 다음
