개발 마라톤

오늘은 개인프로젝트인 캐플라이어에 대한 중간 회고를 해보려고한다. 벌써 기획까지 포함해서 약 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 트리를 보면 어느정도 내용을 유추 가능할 것 ..

DB 연결하기 Nextjs MongoDB Atlas 연결하기 mongoose, TypeScript 사용 (tistory.com) Nextjs MongoDB Atlas 연결하기 mongoose, TypeScript 사용 MongoDB Atlas란? 우선 MongoDB는 NoSQL 데이터베이스입니다. 간단히 말하면 MySQL같은 데이터베이스랑은 달리 테이블을 만들고 정규화 시키고 할 필요 없이 그냥 저장하고 싶은대로 저장할 수 있습니다. supern0va.tistory.com Next.js의 MongoDB 연결은 윗 글을 참고했다. 1. MongoDB를 연결하기 위해 연결 URI를 환경변수 파일에 저장한다. MONGODB_URI= ... Next.js는 기본적으로 환경변수 관리를 지원하기 때문에, 따로 모듈..