[React, Material UI] Sier 엔지니어가 1주일 이내에 포트폴리오 웹 사이트 완료

나의 현재 목표는 SIER에서 본사의 서비스 기업으로 이직하는 것이다.
그 준비의 하나로 자신의 조합 사이트를 만들었기 때문에 완성될 때까지 절차를 정리했다.
React의 간단한 개발 절차와 UI 라이브러리를 활용하고 싶은 Material UI가 짧은 시간 안에 사이트를 만들고 싶은 분들께 참고가 된다면 기쁘겠습니다!
의사 일정

다시 한 번 자기소개 부탁드릴게요.

기술을 사용하다

구조

프런트엔드

백엔드

프로그램 설계

매혹적인 일

최후

다시 한 번 자기소개 부탁드릴게요.
저는 현재 제조업체 시스템 SIER 3년차입니다. 주로 서버 측 엔지니어로 일하고 전단의 개발 경력은 지금까지 모두 4개월 정도입니다.
업무상 처음 리액트 개발을 할 때는 워낙 프런트 자체가 유데미여서 HTML을 조금 배우면 다급해졌지만 간단한 화면이라 리액트를 배우면서 HTML, CSS 지식을 강화하는 좋은 경험이었다.
더 개인적인 일은 이번에 만든 사이트에 적혀있어요!
기술을 사용하다
이번에 사용된 주요 기술을 총결하였다.

프런트엔드

React (create-react-app, JavaScript)

Material UI(UI 라이브러리)

styled-components(CSS 라이브러리)

react-responsive/styled-media-query(회전 스펀지 지원)

구름 끝

AWS(API Gateway, Lambda(Python)(웹 API의 생성)

프로그램 설계

GitHub Pages

기타

Slack incoming webhook(Slack에 채팅 전송)

구조
기본적으로 GiitHub Pages로 React를 구축하는 파일을 공개하는 프로세스입니다.
또한 이번에는 입력한 내용을 슬랙에 전송하는 컨설팅 양식을 작성하는 기능을 고려했고, 이를 위해 AWS에서 서버 없는 API를 제작했다.
프런트엔드
이번엔 최대한 빨리 끝내는 게 우선이니까 넥스트.js와 타입 스크립트를 사용하지 않고 웹 팩 설정 등에도 필요 없는create-react-app로 프로젝트를 만들었다.
구성 요소의 디자인으로 Atomic Design을 참고했지만 얕은 것이 독자적인 구성이 된 부분도 있다고 생각합니다.
예를 들어 기능만 보이는 구성 요소를 'utils' 라는 디렉터리에 집합합니다.
CSS 관련 대략적인 화면 디자인은 머티리얼 UI의 박스와 Grid 구성 요소를 사용했고 디테일한 부분은 스타일드-components에서 진행했다.
또한 응답 디자인으로 하고 싶어서react-responsive에서 화면 너비에 따라 디스플레이 구성 요소를 전환하고styled-media-query에서 styled-components의 CSS를 전환합니다.
또한 axios는 웹 API와의 협력에 사용됩니다.
백엔드
구성도 썼고 이번에는 슬랙에 상담 양식 내용을 보낼 API만 준비하면 된다.
따라서 먼저 Slack API에서 incoming webhook URL을 생성합니다.
생성된 URL 처리는 송신 전용이기 때문에 보안상 데이터 유출 위험은 없지만, 신중을 기하기 위해 AWS를 사용하는 API Gateway와 람바다는 전면에서 볼 수 없다.
아울러 API 자체의 요청수 등도 간단히 설정할 수 있어 정말 편리하다
프로그램 설계
GiitHub Pages에 있는 프로그램 디자인은gh-pages라는 프로그램 라이브러리가 보기에 매우 편리하기 때문에 사용했다.
GiitHub 창고 설정부터 일련의 절차를 시작하겠습니다. 다음 기사를 참고하겠습니다!
매혹적인 일
주제라지만 이번 개발에 가장 적합한 한 가지를 소개해 드리겠습니다.
Material UI 모드에서 텍스트의 입력 막대를 구성할 때useState를 사용하여 입력 값을 유지하면 입력 막대의 초점이 입력하자마자 바로 빗나가는 현상이다.
이번에는 다음과 같은 상담 형식을 제작했다.

이 형식으로 회사명'a'를 누르면 바로 회사명란에서 초점을 벗어나 입력할 수 없습니다.
일탈의 초점이 어디에 있는지를 조사하면 모태 자체에 있는 것 같고, 고민 use State를 잠시 사용했기 때문에 다시 렌더링하는 이유를 고려했다.
따라서 우리는useState를 사용하지 않는 방법을 고려하여 다음과 같은 방법을 해결했다. 발송 버튼만 누르면 각 입력 표시줄의 값을 가져와 발송할 수 있다.
입력 과정에서 값의 검증 등을 하려는 경우에는 이 방법을 쓸 수 없었으나 이번에는 간단한 형식이어서 이 방법을 쓰기로 했다.

입력할 수 없는 코드

const Contact = props => {
  // 会社名の入力値の保持
  const [company, setCompany] = useState("");
  const handleSetCompany = (e) => {
    setCompany(e.target.value);
  }

  // 氏名の入力値の保持
  const [name, setName] = useState("");
  const handleSetName = (e) => {
    setName(e.target.value);
  }

  // メールアドレスの入力値の保持
  const [mail, setMail] = useState("");
  const handleSetMail = (e) => {
    setMail(e.target.value);
  }

  // 問い合わせ内容の入力値の保持
  const [content, setContent] = useState("");
  const handleSetContent = (e) => {
    setContent(e.target.value);
  }

  const Contents = () => (
    <>
      ...
        <TextField
          id="company"
          label="会社名"
          variant="standard"
          required
          value={company}
          onChange={handleSetCompany}
        />
        <TextField
          id="name"
          label="お名前"
          variant="standard"
          required
          value={name}
          onChange={handleSetName}
        />
        <TextField
          id="mail"
          label="メールアドレス"
          variant="standard"
          required
          value={mail}
          onChange={handleSetMail}
        />
        <TextField
          id="content"
          label="お問い合わせ内容"
          variant="standard"
          required
          value={content}
          onChange={handleSetContent}
          multiline
          rows={8}
        />
      ...
    </>
  );

수정된 코드

  // 送信ボタンのonClickイベントメソッド
  const handleSendMessage = () => {
    const company = document.getElementById("company").value;
    const name = document.getElementById("name").value;
    const mail = document.getElementById("mail").value;
    const content = document.getElementById("content").value;

    // 送信処理
　　　　　　　...
  }

  const Contents = () => (
    <>
      ...
        <TextField
          id="company"
          label="会社名"
          variant="standard"
          required
        />
        <TextField
          id="name"
          label="お名前"
          variant="standard"
          required
        />
        <TextField
          id="mail"
          label="メールアドレス"
          variant="standard"
          required
        />
        <TextField
          id="content"
          label="お問い合わせ内容"
          variant="standard"
          required
          multiline
          rows={8}
        />
      ...
    </>
  );

최후
↓ 이번에 만든 코드의 창고입니다.
인코딩에 대한 내용은 거의 쓰지 않았습니다. 마음에 드는 내용이 있으면 댓글과 트위터에 연락 주세요. 지식 범위 내에서 대답해 주세요!
또한, 우리도 약간의 흥미를 가진 사람과 같은 상황을 가진 사람의 연락을 기대하고 있습니다!