실시간 코드 도전에 응답...내가 배운 것
나는 성공적으로 도전을 완성했고 자신을 매우 자랑스럽게 느꼈다.내가 다음 라운드에 진출하지 않겠다는 통지를 받았을 때, 적어도 나는 낙담했다.그러나 나는 면접관에게 피드백을 구했다. 나는 내가 이렇게 해서 정말 기쁘다!문화적으로는 잘 어울리지만 후보가 많아서 누가 그들의 요구에 가장 적합한지 분석해야 한다.그는 나에게 귀중한 견해를 주었고 내가 실시간 코드를 어떻게 처리하는지 알게 했다. 나는 이 두 가지 방식을 공유하고 싶다. 내가 경험을 반성하는 방식으로서 다른 사람들이 면접을 볼 수 있도록 도와주고 싶다!
도전은 두 개의 다른 옵션 카드 사이를 클릭하여 두 개의 다른 이미지를 표시할 수 있다는 것이다.두 명의 다른 고객을 위해 두 번 하다.우리는 코드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;
}
브라우저에서 결과는 다음과 같습니다.
사후에 보니, 심지어 당시에는 그렇게 어렵지 않은 것 같았지만, 나는 정말 나의 신경을 붕괴시켰다고 생각한다.나는 단번에 두 가지 오류를 범했다. 하나는 제공된 코드가 내가 필요로 하는 두 장의 그림 가져오기를 포함하고 사용 중인 그림의 바로 아래에 주석이 떨어졌다는 것이다.내 뇌는 심지어 그것들을 기록하지 않았는데, 나는 그것들 아래에 거의 같은 줄을 썼다.또 다른 오류는 내가 그림 사이를 왔다 갔다 하는 데 성공한 후에 면접관은 탭의 배경이 클릭할 때도 변하기를 원하고, 나는 이 내용을 되돌려 추가해야 한다는 것을 내게 일깨워 주어야 한다는 것이다.이 두 문제는 모두 피드백에 반영된다."비헤이비어와 제시된 코드를 분석하는 데 시간이 좀 더 걸릴 것이라고 생각합니다. 구체적으로 다른 탭을 클릭할 때 반드시 발생해야 하는 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
<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 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>
name에게 한 것이다.더 좋은 방법은 내연 함수를 이용하여 임의의 데이터를 전달하는 것이다. 예를 들어 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>
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
보고 싶으면Github repo 여기서 볼 수 있습니다.
내가 이번 경험에서 얻은 가장 큰 수확은 속도를 늦추는 것이다. 진정으로 나의 절차를 기획하는 것은 인코딩 과정의 중요한 부분이다.내가 전체 문제를 완전히 이해하고, 그들이 나에게 무엇을 요구하는지, 그러면 나는 일부 숙제를 놓치지 않을 것이다.마지막으로, 자신감을 가져라!나는 이 모든 일을 할 수 있지만, 아드레날린과 스트레스가 나의 신경원 방전을 방해하지 않도록 뇌에 호흡할 수 있는 공간을 만들어야 한다.다른 사람들에게도 도움이 됐으면 좋겠어요!
즐거운 코딩!
Reference
이 문제에 관하여(실시간 코드 도전에 응답...내가 배운 것), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mmcclure11/react-live-code-challenge-what-i-learned-22f8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
