실시간 코드 도전에 응답...내가 배운 것

42646 단어 interviewreact
Flatiron의 훈련 캠프를 마친 후, 나는 소프트웨어 공학을 하는 일을 찾고 있다.지난주에 저는 제가 아주 좋아하는 회사와 한 시간 동안 면접을 봤습니다. 면접관은 저에게 좋은 느낌을 주었고 우리는 멋진 대화를 나누었습니다.우리는 20분 동안 나의 경력과 회사의 업무에 대해 토론한 후에react로 약 30분 동안 실시간 코드 도전을 했고 마지막으로 나에게 질문할 시간이 좀 남았다.
나는 성공적으로 도전을 완성했고 자신을 매우 자랑스럽게 느꼈다.내가 다음 라운드에 진출하지 않겠다는 통지를 받았을 때, 적어도 나는 낙담했다.그러나 나는 면접관에게 피드백을 구했다. 나는 내가 이렇게 해서 정말 기쁘다!문화적으로는 잘 어울리지만 후보가 많아서 누가 그들의 요구에 가장 적합한지 분석해야 한다.그는 나에게 귀중한 견해를 주었고 내가 실시간 코드를 어떻게 처리하는지 알게 했다. 나는 이 두 가지 방식을 공유하고 싶다. 내가 경험을 반성하는 방식으로서 다른 사람들이 면접을 볼 수 있도록 도와주고 싶다!
도전은 두 개의 다른 옵션 카드 사이를 클릭하여 두 개의 다른 이미지를 표시할 수 있다는 것이다.두 명의 다른 고객을 위해 두 번 하다.우리는 코드sandbox에서 일한다.도전을 완수하다.나는 다른 사람들이 원한다면 따라할 수 있도록 현지의 기계에서 그것을 다시 만들고 있다.
애플리케이션 구성 요소를 얻었습니다.
src/App.js
import './App.css';
import Dashboard from './Dashboard';

function App() {
  return (
    <div className="App">
      <Dashboard />
    </div>
  );
}

export default App;
심플한 스타일:
src/App.css
.App {
  text-align: center;
}
대시보드 구성 요소는 다음과 같습니다.
계기판.js
import React from 'react'

import customer1Events from "./fake-charts/events-1.png";
// import customer1Performance from "./fake-charts/perf-1.png";
import customer2Ftp from "./fake-charts/ftp-2.png";
// import customer2Performance from "./fake-charts/perf-2.png";

import "./styles.css";

const Dashboard = () => {
  return (
    <div>
      {/* Placeholder, feel free to edit the structure below */}
      <div className="box">
        <h1>Customer 1</h1>

        <div className="tabs">
          <div className="tab selected">
            Search events
          </div>
          <div className="tab">
            Performance
          </div>
        </div>

        <div>
            <img src={customer1Events} alt="Search events over time" />
        </div>
      </div>

      <div className="box">
        <h1>Customer 2</h1>

        <div className="tabs">
          <div className="tab selected">
            FTP Usage
          </div>
          <div className="tab">
            Performance
          </div>
        </div>

        <div>
            <img src={customer2Ftp} alt="FTP usage" />
        </div>
      </div>
    </div>
  )
}

export default Dashboard
스타일링을 제공합니다.
src/styles.css
.tabs {
  display: flex;
}

.tab {
  padding: 10px;
  cursor: pointer;
}

.tab.selected {
  background-color: darkseagreen;
}

.box {
  padding: 1em;
  border: 1px solid gray;
  border-radius: 2px;
}

.box + .box {
  margin-top: 1em;
}
그리고 제공된 그림은 모두 src 폴더의 가짜 그래프 폴더에 있습니다.
브라우저에서 결과는 다음과 같습니다.

사후에 보니, 심지어 당시에는 그렇게 어렵지 않은 것 같았지만, 나는 정말 나의 신경을 붕괴시켰다고 생각한다.나는 단번에 두 가지 오류를 범했다. 하나는 제공된 코드가 내가 필요로 하는 두 장의 그림 가져오기를 포함하고 사용 중인 그림의 바로 아래에 주석이 떨어졌다는 것이다.내 뇌는 심지어 그것들을 기록하지 않았는데, 나는 그것들 아래에 거의 같은 줄을 썼다.또 다른 오류는 내가 그림 사이를 왔다 갔다 하는 데 성공한 후에 면접관은 탭의 배경이 클릭할 때도 변하기를 원하고, 나는 이 내용을 되돌려 추가해야 한다는 것을 내게 일깨워 주어야 한다는 것이다.이 두 문제는 모두 피드백에 반영된다."비헤이비어와 제시된 코드를 분석하는 데 시간이 좀 더 걸릴 것이라고 생각합니다. 구체적으로 다른 탭을 클릭할 때 반드시 발생해야 하는 UI 변경 사항을 무시하거나 (중요하지 않음)누락된 것은, 일부 가져오기가 주석이 떨어졌고, 사용자가 사용할 수 있는 추가 그림이 있습니다.나는 면접에서 다른 사람 앞에서 현장 코딩을 하는 것이 스트레스가 없는 것이 아니라는 것에 확실히 동의한다. 그래서 나는 어떤 일들이 누락될 수 있다는 것을 안다."
그래서 그래, 나는 이렇게 간단한 일을 놓친 것에 대해 화가 났다.그러나 가장 큰 위험은 선택한 그림을 업데이트하기 위해 클릭 처리 프로그램에 정보를 전달하는 것이다.나는 처음에 모든 onClick에 네 개의 독립된 함수를 짰다. 나는 심지어 그것이 불필요하다는 것을 알고 있다고 큰소리로 말했지만, 나는 그것을 작동시키고 코드를 더욱 간결하게 재구성할 수 있도록 하고 싶다.
React 갈고리use State를 사용하여 표시할 그림을 추적하기로 결정했습니다. 그리고customer 1의 두 옵션 카드에 onClickHandler를 추가했습니다. 표시할 그림의 이름으로 상태를 업데이트하고 JSX에서 3원을 사용하여 표시할 그림을 결정합니다.
import React, { useState } from 'react'

import customer1Events from "./fake-charts/events-1.png";
import customer1Performance from "./fake-charts/perf-1.png";
import customer2Ftp from "./fake-charts/ftp-2.png";
// import customer2Performance from "./fake-charts/perf-2.png";

import "./styles.css";

const Dashboard = () => {

  const [customer1, setCustomer1] = useState('customer1Events')

  const onClickHandler = () => {
    setCustomer1('customer1Events')
  }

  const onClickHandler2 = () => {
    setCustomer1('customer1Performance')
  }

  return (
    <div>
      {/* Placeholder, feel free to edit the structure below */}
      <div className="box">
        <h1>Customer 1</h1>

        <div className="tabs">
          <div className="tab selected" onClick={ onClickHandler }>
            Search events
          </div>
          <div className="tab" onClick={ onClickHandler2 }>
            Performance
          </div>
        </div>

        <div>
          { customer1 === 'customer1Events' ?
            <img src={customer1Events} alt="Search events over time" />
            :
            <img src={customer1Performance} alt="Performance over time" />
          }
        </div>
      </div>
...
    </div>
  )
}

export default Dashboard

고객 2의 논리를 중복했습니다. 탭을 클릭하면 정확한 이미지가 업데이트되고 표시됩니다.이때 내 면접관은 나도 라벨의 색깔을 바꿔야 한다고 지적했다.그림을state로 추적하기 때문에, 이 그림을 다시 사용하고, div의 클래스 이름을tab에서tabselected로 변경할 수 있습니다.
     <div className="tabs">
          <div className={ customer1 === 'customer1Events' ? "tab selected" : "tab"} onClick={ onClickHandler }>
            Search events
          </div>
          <div className={ customer1 === 'customer1Performance' ? "tab selected" : "tab"} onClick={ onClickHandler2 }>
            Performance
          </div>
        </div>
나도 customer 2를 위해 이 작업을 했다. 이때 나는 두 옵션 카드를 전환하고 정확한 CSS를 표시할 수 있다.

그래서 이 점에서 나는 그것을 운행하게 했다. 나의 면접관은 나에게 재구성하라고 했다. 그러면 나는customer one을 위해 onClick 함수를 사용할 수 있다.이것은 매우 합리적인 요구이다. 나는 심지어 이 점을 예상했지만 나는 장애에 부딪혀 위험 신호 문제가 생겼다.나는 왜 내 뇌가 이러는지 잘 안다.나는 폼을 사용하면 e.target을 사용하여 입력한 속성에 접근할 수 있다는 것을 안다.이름 또는 e.target입니다.가치관, 내 뇌는 이런 생각을 하게 되었다. "그래! 이것은div에게 매우 유용하다!"그러나 사실은 그렇지 않았다. 당시 나는 e.target과 싸우고 있었다.이름이 정의되지 않은 면접관을 되돌려줍니다. 사용자 정의 속성에 점 기호를 사용하는 것은 React에서 작용하지 않으며, 특정한 속성을 얻을 수 있는 함수가 있을 수도 있습니다.그래서 나는 빠르게 검색해서 내가 필요로 하는 물건을 찾았다: e. target.getAttribute('name').내가 이 기능을 실현하는 것은 표시할 그림을 확인하기 위해서이다.
  const onClickHandler = (e) => {
    e.target.getAttribute('name') === 'customer1Events' ?
    setCustomer1('customer1Events')
    :
    setCustomer1('customer1Performance')
  }

...

 <div className="tabs">
          <div name="customer1Events" className={ customer1 === 'customer1Events' ? "tab selected" : "tab"} onClick={ (e) => onClickHandler(e) }>
            Search events
          </div>
          <div className={ customer1 === 'customer1Performance' ? "tab selected" : "tab"} onClick={ (e) => onClickHandler(e) }>
            Performance
          </div>
        </div>
비록 이것은 확실히 효과가 있지만 나의 피드백에서 나의 면접관은 통상적인 상황에서 React에서 우리는 정보를 DOM에 추가하고 싶지 않다고 지적했다. 이것이 바로 내가 divaname에게 한 것이다.더 좋은 방법은 내연 함수를 이용하여 임의의 데이터를 전달하는 것이다. 예를 들어 this 첫 번째 예에서 보듯이.이것은 내가 놓친 또 다른 일에 도움이 될 것이다. 나는 다른 부서의 이름을 지어주지 않았다. 이것은 이 특수한 인코딩 도전에 있어서 결코 중요하지 않지만, 우리가 더 많은 탭을 추가하고 싶다면 문제가 생길 것이다.클릭 프로세서에 이름을 현저하게 전달함으로써, 나는 내가 다른div에 이름을 붙이지 않았다는 것을 알 수 있다.
이건 정말 "하하!"이것은 내가 getattribute를 작성하는 방법에 대한 이상한 느낌을 해결하는 데 도움을 주었다. 이것은 내가 이전에 vanilla javascript를 사용할 때 한 일이지만, React에서는 하지 않았다.이제 나는 그것을 더욱 잘 재구성할 수 있는 뚜렷한 길이 생겼다.이러한 정보를 바탕으로 다음과 같이 재구성했습니다.
  const onClickHandler = (selection) => {
   selection === 'customer1Events' ?
    setCustomer1('customer1Events')
    :
    setCustomer1('customer1Performance')
  }
...
  <div className="box">
        <h1>Customer 1</h1>

        <div className="tabs">
          <div className={ customer1 === 'customer1Events' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer1Events') }>
            Search events
          </div>
          <div className={ customer1 === 'customer1Performance' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer1Performance') }>
            Performance
          </div>
        </div>

        <div>
          { customer1 === 'customer1Events' ?
            <img src={customer1Events} alt="Search events over time" />
            :
            <img src={customer1Performance} alt="Performance over time" />
          }
        </div>
      </div>
일단 이것들이 모두 작용하면, 나는 온클릭핸들러의 삼원조를 스위치 박스로 바꾸기로 결정했다. 그러면 나는customer 2에서 그것을 다시 사용할 수 있다.customer 2의 코드를 포함하여 모든 재구성을 거친 것이 제가 얻은 결과입니다.
import React, { useState } from 'react'

import customer1Events from "./fake-charts/events-1.png";
import customer1Performance from "./fake-charts/perf-1.png";
import customer2Ftp from "./fake-charts/ftp-2.png";
import customer2Performance from "./fake-charts/perf-2.png";

import "./styles.css";

const Dashboard = () => {

  const [customer1, setCustomer1] = useState('customer1Events')
  const [customer2, setCustomer2] = useState('customer2FTP')

  const onClickHandler = (selection) => {
    switch(selection) {
      case 'customer1Events':
        setCustomer1('customer1Events')
        break;
      case 'customer1Performance':
        setCustomer1('customer1Performance')
        break;
      case 'customer2FTP':
        setCustomer2('customer2FTP')
        break;
      case 'customer2Performance':
        setCustomer2('customer2Performance')
        break;
      default:
        setCustomer1('customer1Events')
        setCustomer2('customer2FTP')
    }
  }

  return (
    <div>
      {/* Placeholder, feel free to edit the structure below */}
      <div className="box">
        <h1>Customer 1</h1>

        <div className="tabs">
          <div className={ customer1 === 'customer1Events' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer1Events') }>
            Search events
          </div>
          <div className={ customer1 === 'customer1Performance' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer1Performance') }>
            Performance
          </div>
        </div>

        <div>
          { customer1 === 'customer1Events' ?
            <img src={customer1Events} alt="Search events over time" />
            :
            <img src={customer1Performance} alt="Performance over time" />
          }
        </div>
      </div>

      <div className="box">
        <h1>Customer 2</h1>

        <div className="tabs">
          <div className={ customer2 === 'customer2FTP' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer2FTP') }>
            FTP Usage
          </div>
          <div className={ customer2 === 'customer2Performance' ? "tab selected" : "tab"} onClick={ () => onClickHandler('customer2Performance') }>
            Performance
          </div>
        </div>

        <div>
          { customer2 === 'customer2FTP' ?
            <img src={customer2Ftp} alt="FTP usage" />
            :
            <img src={customer2Performance} alt="FTP usage" />
          }
        </div>
      </div>
    </div>
  )
}

export default Dashboard
현재 이런 설정을 통해 더 많은 옵션 카드를 추가하는 것은 더 많은 고객과 비교적 쉽다.내가 생각할 수 있는 마지막 일은 개인적으로 문자열에 의존하는 것을 좋아하지 않는다는 것이다. 만약 내가 입력을 잘못하면 코드가 예상대로 실행되지 않은 것과 관련된 오류를 얻지 못하기 때문이다.반대로, 나는 이 문자열을 저장하는 상수를 설정하고, 이 상수를 클릭 처리 프로그램에서 switch 문장으로 전달하고 싶다.
보고 싶으면Github repo 여기서 볼 수 있습니다.
내가 이번 경험에서 얻은 가장 큰 수확은 속도를 늦추는 것이다. 진정으로 나의 절차를 기획하는 것은 인코딩 과정의 중요한 부분이다.내가 전체 문제를 완전히 이해하고, 그들이 나에게 무엇을 요구하는지, 그러면 나는 일부 숙제를 놓치지 않을 것이다.마지막으로, 자신감을 가져라!나는 이 모든 일을 할 수 있지만, 아드레날린과 스트레스가 나의 신경원 방전을 방해하지 않도록 뇌에 호흡할 수 있는 공간을 만들어야 한다.다른 사람들에게도 도움이 됐으면 좋겠어요!
즐거운 코딩!

좋은 웹페이지 즐겨찾기