개발 마라톤

오늘은 개인프로젝트인 캐플라이어에 대한 중간 회고를 해보려고한다. 벌써 기획까지 포함해서 약 2달이 되어가니, 계획한 시간대로 진전시키기가 여간 쉽지가 않았다 ㅠㅠ. 그래서 중간회고를 진행해보려고 한다. 지금의 결과는 어떤지, 문제점은 무엇인지, 그리고 문제라고 할 수 있는 것 인지. 내가 잘 학습하면서 하고 있는 것 인지. 나의 취준 기간은 길어지고 있고, 조급해하면 안된다는 것도 알고 있다. 그렇지만 나의 계획에 맞게 일을 진행시킨다는 것은 곧 중요한 역량이 될 것이고 그러한 내용도 포함하여 고민했던 내용들을 글로 정리해보려고 한다. 중간 결과 [계획] 캐플라이어 프로젝트 계획표 (tistory.com) [계획] 캐플라이어 프로젝트 계획표 UX/UI 구상을 먼저하려고 했으나, 생각만으로는 계획 시간이..

Next.js Routing 하기 [Next js] Route 이해하기 (velog.io) [Next js] Route 이해하기 React 프로젝트를 Next js로 마이그레이션 하면서 느꼈던 차이점은 라우팅하는 방법이였다. Next js는 pages 폴더 내의 폴더, 파일명으로 자동으로 path가 설정되기 때문에 이를 먼저 이해하고 디렉토리 velog.io 윗 글을 참고하여 정리해보았다. 방법 설명 next/link 컴포넌트 import Link from 'next/link; 를 통하여 라우팅 할 수 있다. next/router 모듈 import { useRouter } from 'next/router'; const router = useRoute(); 를 통하여 라우터를 만들 수 있다. router...

BannerSection의 완성 오늘이 되서야 BannerSection을 완성시켰다. 단순히 애니메이션을 적용하고 이벤트를 적용하는데 생각보다 많은 버그, 오류가 있었다. React 프로젝트는 이제 2번째이지만, 아직 배울 것이 많고, 그것이 또 흥미롭다고 생각한다. 있었던 이슈는 다음과 같다. 내부 컴포넌트의 애니메이션이 이벤트 시에 초기화 되는 현상 ( 내부 컴포넌트가 상위 컴포넌트의 상태 변화 시 모든 정보가 초기화되는 현상 ) onMouseEnter 등의 이벤트를 통해 클래스를 토글할 때 애니메이션 초기화 되는 이슈 · Issue #19 · 1004ljy980/CharFlyer (github.com) onMouseEnter 등의 이벤트를 통해 클래스를 토글할 때 애니메이션 초기화 되는 이슈 · I..

BannerSection 애니메이션 이번 애니메이션을 구현하면서 이슈가 존재했다. 자식이 부모보다 커지지 못하는 이슈 어찌보면 당연하게 생각했던 내용일 수도 있겠다. 자식은 크기를 기본적으로 부모에게 상속받으며, 자식은 부모 컨테이너 내에서 존재하는 것이 기본적인 설계이다. 브라우저 렌더링 순서와 원리 (velog.io) 브라우저 렌더링 순서와 원리 사전지식 1. 🖥 브라우저? 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것 이때 자원은 HTML문서, PDF, 이미지 등 다양한 형태를 띌 수 있음 자원의 주소는 URL(Uniform Resource Identifi velog.io 각 요소의 정확한 생성 방식은 찾아보지 못했지만, 생성되는 DOM 트리를 보면 어느정도 내용을 유추 가능할 것 ..

vanila extract 시작 vanilla-extract — Zero-runtime Stylesheets-in-TypeScript. vanilla-extract — Zero-runtime Stylesheets-in-TypeScript. Zero-runtime Stylesheets-in-TypeScript. vanilla-extract.style 오늘은 대부분의 시간을 vanilla-extract을 배우고, 적용하는데 시간을 보냈다. 설치는 공식 페이지의 Next.js — vanilla-extract Next.js — vanilla-extract Zero-runtime Stylesheets-in-TypeScript. vanilla-extract.style 해당 항목을 따라가면 어렵지 않게 설치 가능했다..