분류 전체보기50 Canvas 사용법 오늘 canvas에 대해서 듣게 되었다.수료생들이 볼 수도 있는 블로그라자세한 내용은 아직 말할 수 없지만. canvas에 관한 내용을 정리해보려한다! 내 깃허브에 있는 gitanimals도 canvas로 만든거라는 사실을 알게되었다...⭐개발자라면 이런 것들도 뜯어볼 생각을 해야할 것...👀 Canvas 기본 사용법Canvas는 HTML5에서 제공하는 그래픽을 그릴 수 있는 강력한 도구이다.웹 애플리케이션에서 2D 및 3D 그래픽을 생성하는 데 사용되며, 게임, 데이터 시각화, 애니메이션 등에 활용된다. 1. Canvas 요소 추가하기HTML 문서에 Canvas를 추가하기 위해 태그를 사용한다. 아래는 기본적인 Canvas 요소의 예시이다.id 속성을 통해 JavaScript에서 해당 Canva.. 2024. 8. 9. Next.js에서 제공하는 4가지 렌더링 방식 요즘들어 모의면접을 보는데렌더링 방식에 대해서 질문하시는 경우가 있었어서정확히 알아두고자 다시 정리한다! 1. SSG - 정적 생성 (Static Generation) : 정적 생성은 빌드 타임에 페이지를 미리 생성하는 방식입니다. getStaticProps와 getStaticPaths 함수를 사용하여 데이터를 가져오고, 이 데이터를 기반으로 HTML 파일을 생성합니다. 이 방식은 빠른 페이지 로딩 속도를 제공하며 SEO에 유리합니다. 페이지의 내용에 있는 데이터가 자주 바뀔 필요가 없고, 검색엔진 최적화가 필요한 페이지에 적합하다. 블로그, 뉴스 등 정보성 페이지 🎀📚 fetch한 데이터는 영원히 변치 않는다. 계속 컴포넌트를 갱신할 .. 2024. 8. 8. react-dnd, react-beautiful-dnd, hello-pangea/dnd 최종 프로젝트 MVP 이후 단계에서📚 칸반보드 구현을 맡게 되었다! 그래서 Drag and Drop 라이브러리를 직접 써보는데react-beautiful-dnd를 쓰는데 id 부분에서 계속 에러가 났다. 내가 잘못 코드를 짠건가 싶어서 다른 예제를 그대로 들고와서 했는데도 똑같은 상황의 반복이었다... 그래서 그냥 react-dnd를 사용해봤다. react-dnd는 뭔가 아이템을 옮길때 딱딱 끊어진다고 해야하나.옮길때 애니메이션이 매끄럽지 못했다.찾아보니까 매끄러운 애니메이션을 원한다면 react-beautiful-dnd를 써야한다고 했다...ㅠㅠ 그래서 이왕 만드는거 잘 만들면 좋으니까...! 다시 react-beautiful -dnd에 도전...! 진짜 저 에러 잡겠다고 하루를 날렸는데...알고보니.. 2024. 8. 7. 모의 면접 후기 장례식을 다녀오느라 못본 모의면접...튜터님께서 오늘 오전 9시 30분에 보자고 연락이 오셔서 면접을 봤다, 아침이라서 그런지 머리도 안돌아가고 잘 못본것 같다...(+ 젤 따르고 싶은 튜터님께 본거라 너무 긴장을 한 것 같기도😥) 초반에 태도랑 자신감에서 지적을 주셨다.웃으면 좋은 줄 알았는데 그래도 진지하게 면접에 임해야하는 것 같다.그리고 자신감이 없어보였던 것 같다. 질문은1. 배열과 객체 (순서가 있는 리스트, key-value)2. Props drilling (필요없는 컴포넌트까지)3. 타입 단언 (as, 개발자인 우리가 타입을 더 잘알때)4. SEO (상위노출, 시맨틱 태그사용, head-title, meta, script...) SEO를 하기위해 Next.js를 써서 SSR을 해야한다.. 2024. 8. 6. 이전 1 2 3 4 ··· 13 다음
