색상 팔레트 생성기를 구축하는 방법 - VueJs + Bulma를 사용한 개인 프로젝트

안녕,
그래서 여기 이 게시물의 이니셔티브입니다. (제 이전 글을 읽어보신 분들은 아시겠지만) 제가 정말 바빴지만 지금은 코로나19로 인해 시험이 연기되고 외부 모임과의 격리가 더 긍정적이고 저 자신에게 투자하는 데 정말 도움이 됩니다.
그래서 나는 일찍 일어나서 뉴스를 읽고 + 새로운 것을 배우는 것으로 첫 걸음을 내디뎠습니다(웹 또는 기술과 관련되지 않음). 또한 코딩 기술을 재충전하기 위해 애완 동물 프로젝트에 참여하기로 결정했습니다. 그래서 오늘 저는 색상 팔레트 생성기를 만들었습니다. 이에 대한 세부 정보는 다음과 같습니다. 먼저 전체 프로젝트를 디자인하기 위해 따랐던 전체 절차를 공유하겠습니다.

설계 절차

첫 번째 코드 줄을 작성하기 전에도 최종 결과가 어떻게 표시될지 결정해야 합니다.

먼저 프로젝트 이름을 정합니다. 고려할 수 있는 몇 가지 트릭이 있습니다.

명백한 것의 이름을 다른 언어로 번역합니다. 예:
스크린샷 도구를 만들고 있다면 다음과 같이 정말 좋은 이름을 제안하는 Google 번역을 사용해야 합니다.

이제 다음은 완벽한 로고를 만드는 것입니다. 이렇게 하면 프로젝트가 전문적으로 보이고 커뮤니티에서 더 잘 홍보할 수 있습니다. 로고 영감을 얻으려면 dribbble을 찾아봐야 합니다. 강력하고 복잡한 로고를 디자인하라는 것이 아니라 간단한 로고를 만드세요.
어떤 도구를 사용할 것인가?
저는 항상 Figma를 사용하며 무료 SVG 아이콘을 가져오고 색상 팔레트를 선택하고 Figma에서 사용 가능한 무료 글꼴을 사용한 다음 PNG 형식으로 내보내는 데 사용해야 합니다. 따다! 새로운 로고를 받았습니다.

모든 단계를 기록하고 페이지 작성에서 최종 손질까지 체크리스트를 만드십시오.

그렇다면 프로젝트를 구축한 전반적인 경험은 어땠습니까?

거의 3시간 걸렸어요.

정말 상쾌했다. 오랜만에 그 느낌을 받았다.

저도 처음으로 Surge.sh 해봤습니다. 사용하기 매우 쉽고 매우 간단한 웹 사이트나 단일 페이지를 게시하려는 경우 명령을 실행한 다음 완료합니다! 그것은 온라인입니다.

그것을 구축하는 데 사용한 기술은 무엇입니까?

Bulma CSS (오랜만에 내 CSS 버디)

VueJS(SPA입니다)

Colormind API

데이터를 가져오는 Axios

언급할 다른 사항이 있습니까?

예, 코드를 많이 리팩토링하고 간단한 독립형 구성 요소를 만들었습니다. RGB를 HEX로 변경하는 기능도 만들었습니다. 여기서 배열을 인수로 전달해야 합니다.

rgbToHEX(rgb) {
      let r = rgb[0].toString(16);
      let g = rgb[1].toString(16);
      let b = rgb[2].toString(16);

      if (r.length == 1)
        r = "0" + r;
      if (g.length == 1)
        g = "0" + g;
      if (b.length == 1)
        b = "0" + b;

      return "#" + r + g + b;
   },

그래서 최종 결과는 무엇입니까?
참고: 저는 색상 팔레트 프로젝트에 관심이 없습니다. 앞으로 15일 동안 많은 프로젝트를 만들 예정이지만 제가 공유하고 싶은 것은 전체 프로세스입니다.
나는 아침에 프로젝트 작업을 시작했는데 "Rangeeni"라는 이름은 우르두어로 색칠을 의미합니다. 그런 다음 Figma에서 다음과 같은 로고를 디자인했습니다.


그런 다음 3시간 만에 전체 프로젝트를 완료했으며 여기를 보고 상태를 알려주세요.

Rangeeni - 강력한 AI 기반 색상 팔레트 생성기

여기에서 전체 코드를 보면 너무 많지 않기 때문에 상당히 다르며 이 접근 방식이 놀랍다는 것을 알게 될 것입니다.
여기에서 코드 찾기: https://github.com/justaashir/rangeeni_color_picker


오늘은 여기까지입니다. 가능하면 내일 만나서 개인적으로 말씀드리자면 정말 놓치고 있는 것이 있습니다... 그거 아세요?
당신은 트위터에서 나를 팔로우하고 있지 않으며 거기에서 많은 놀라운 콘텐츠를 사용할 수 있습니다. 그러니 내 말을 더 듣고 싶다면