전체 글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. 최종 프로젝트 중간발표 + 그동안의 일 최종 프로젝트를 한참하던 중,,,7월 31일에 친척분이 돌아가셔서8월 1일 오후부터 8월 2일까지 자리를 비우게 되었다. 최종 프로젝트지만 나에게 있어서 차마 안갈 수 없는...그런 분이셔서 팀원들께 양해를 구하고 출발하게 되었다. 그래도 내 분량인 공통 컴포넌트는 다 만들고8월 1일 오전까지 열심히 문제 해결도하고,, 출발하여서마음의 짐이 조금은 덜했다. 폭염이었는데 햇볓 쨍쨍 내리쬐는 산소에 있었던터라,, 두피랑 피부가 빨갛게 부어올랐다.아직도 너무너무 아프고 약바르고 있는데 그래도 프로젝트는 해야지! 다녀와서 바로 중간발표 PPT를 도맡아 만들었다.우리의 프로젝트랑 같은 느낌의 아주 심플한 PPT를 만들었다. 그리고 8월 5일 오늘 중간발표가 있었다.개인적인 생각으로 우리팀 PPT가 제일 보기 .. 2024. 8. 5. Modal과 Dialog의 차이 요즘 디자이너와의 최종 팀프로젝트를 진행 중이다. 나는 MVP 구현 단계에서 시스템 컴포넌트 제작을 맡았다.그동안 팀프로젝트에서 각자 맡은 페이지의 컴포넌트는알아서 만드는 식으로 진행했었다. 이번 기회에 공용 컴포넌트를 만들어보는 좋은 경험을 할 것 같다.겸사겸사 storybook도 배워두면 좋을 것 같다. 공용 컴포넌트를 어떻게 만들어야다른 팀원이 편하게 쓸지... 고민을 많이 해보는 중이다. 오늘 시스템 디자인 도안이 나와서 둘러보던 중,다이얼로그를 보게 되었는데개발자들은 이걸 모달이라고 부르는 것 같은데무슨차이가 있는지 궁금해졌다. Modal과 Dialog는 비슷한 개념이지만 약간의 차이가 있다.둘 다 사용자와 상호작용할 수 있도록 도와주는 창이다. Modal (모달):모달은 사용자가 현재의.. 2024. 7. 25. Next.js에서 @next/font 패키지를 사용하여 구글 폰트 적용하기 Next.js에서 구글 폰트를 간편하게 적용하려면 @next/font 패키지를 사용하는 방법이 있다.이 글에서는 @next/font 패키지를 설치하고, 구글 폰트를 프로젝트에 적용하는 방법을 단계별로 알아보자. 1. @next/font 패키지 설치하기먼저, 프로젝트에 @next/font 패키지를 설치해야 한다.npm install @next/font 2. 구글 폰트 가져오기구글 폰트를 가져오는 방법을 살펴보자. 예를 들어 Noto Sans 폰트를 사용해보겠다. 2.1. 폰트 설정하기Next.js에서는 @next/font 패키지를 사용해 구글 폰트를 쉽게 설정할 수 있다. pages/_app.tsx 또는 pages/_document.tsx 파일에서 다음과 같이 폰트를 가져오고 적용할 수 있다.pages/.. 2024. 7. 24. Chromatic을 활용한 Visual 테스트 웹사이트나 앱을 만들 때, 디자인이 의도한 대로 잘 나오는지 확인하는 건 아주 중요하다.이를 확인하기 위해 Visual 테스트를 사용할 수 있는데, 여기서 Chromatic이라는 도구가 큰 도움이 된다.Chromatic을 활용한 Visual 테스트가 무엇인지, 어떻게 사용하는지 알아보자. Chromatic이란?Chromatic은 웹 애플리케이션의 UI를 시각적으로 테스트할 수 있는 도구이다. 주로 Storybook과 함께 사용되며, 컴포넌트의 시각적인 변화를 자동으로 감지해준다. 이 도구는 개발자가 디자인이 의도대로 작동하는지 쉽게 확인할 수 있게 도와준다. Visual 테스트란?Visual 테스트는 웹 페이지나 앱의 화면이 정확히 어떻게 보이는지 확인하는 과정이다. 사용자는 UI의 디자인이 변경되었는지.. 2024. 7. 23. TDD (테스트 주도 개발)란? 프로그래밍을 할 때, 코드를 작성하기 전에 먼저 테스트를 작성하는 방법론이 바로 TDD, 즉 테스트 주도 개발이다.TDD는 크게 세 가지 단계로 이루어져 있다. 1. 테스트 작성먼저 프로그램이 어떻게 동작해야 하는지에 대한 테스트를 작성한다. 예를 들어, 어떤 함수가 2와 3을 더해서 5를 반환해야 한다고 생각해보자. 그렇다면 이 함수가 2와 3을 입력받았을 때 5를 반환하는지 확인하는 테스트를 작성한다. 이 단계에서는 당연히 테스트가 실패한다. 왜냐하면 아직 해당 기능을 구현하지 않았기 때문이다. 2. 코드 작성테스트를 통과할 수 있는 최소한의 코드를 작성한다. 위의 예시에서 2와 3을 더해서 5를 반환하는 함수를 만든다. 이 단계의 목표는 테스트를 통과하는 것이다. 따라서 아주 간단하게 구현해도 된다.. 2024. 7. 21. 이전 1 2 3 4 ··· 6 다음
