숙련된 언어로 모의 면접을 진행하다
29749 단어 react
나는 구글에서 검색을 해서 몇몇 친구들과 이야기를 나누고 모의 면접 상황을 이해했으며 두 편의 문장SKILLED Technical Interview과 Mock Technical Interview with SKILLED: what to expect을 읽었다.
나의 학우들은 각양각색의 상황을 만났다.한 학우의 가장 큰 도전은 기내 오락 알고리즘을 해결하는 면접 케이크다.사람들은 문자열을 대상으로 변환하고 문자열에 알파벳이 나타나는 횟수를 계산한 다음 계수기를 추가하는 단추로 React 구성 요소를 만들어야 한다. 그리고 이 계수에fizz buzz 알고리즘을 표시하고, 함수 곱셈(5)(6)을 30으로 되돌리는 함수를 어떻게 사용하는지 확인해야 한다.또 하나는 React에 대한 15분간의 문화와 기술적 이해를 시작으로 두 번의 입력으로 하나의 구성 요소를 구축한 다음에 더 높은 구성 요소를 만들고 면접관에게 갈고리에 관한 미니 수업을 듣게 하는 것이다.
학교의 필기와 연습 설정 계수기를 복습함으로써 저는 자신의 기술 지식에 대해 연구를 했지만 그 결과 저는 매일 인코딩과 연습이 가장 좋은 준비라는 것을 증명했습니다.나의 인터뷰는 내가 읽은 블로그와 내 학우의 경력과 약간 다르다.저는 여러분과 제 면접 경험을 공유하고 싶습니다. 가장 중요한 것은:준비를 잘 해라, 그러나 실제로는 면접관이 너에게 무엇을 테스트할지 모른다!
면접은 약 15분의 구두 질문으로 시작하고 40분의 현장 코딩으로 시작하며 몇 분 후에 제가 질문할 수 있습니다.
제1부.구두 질문:
제2부분.숙련된 텍스트 편집기의 실시간 코드
코드 편집기에 대한 몇 가지 설명은, 문법이 가장 밝고, 가장 적으며, 거의 자동으로 채워지지 않았다.따라서 VSC 편집기 'rcc 옵션 카드' 를 사용하고 클래스 구성 요소를 위한 템플릿 파일을 만드는 데 익숙해지면, 이 모든 것을 수동으로 구축하는 방법을 기억해야 합니다.그리고 제 코드는 출력도 없고 보이는 브라우저도 없기 때문에 제 지식에 의존해서 제가 작성한 코드가 제가 원하는 결과를 낼 수 있는지 알아야 합니다.나도 구글 사용을 금지당했다. 내 면접관에 따르면 실제 면접 상황을 더욱 정확하게 반영하기 위해서다.그렇기 때문에 나는 추출문법을 기억하기 위해 MDN using fetch에 매우 의존하고 useEffect hook를 사용할 때 정확한 문법을 기억하지 못한다는 것을 알게 되었다.나의 면접관은 매우 상냥하고 친절해서 그들이 내가 필요할 때 나를 도왔다.내가 공백 상태일 때, 나는 성실하고 솔직하다. 그들은 내가 잃어버린 괄호와 소괄호를 입력하고, 나는 계속 전진할 것이다. 이렇게 해서 우리는 실시간 코드에서 좋은 리듬을 유지할 것이다.
그들은 나에게 무엇을 하라고 구두 지시를 하고 코드에 주석을 남겨 직관적으로 나를 제시하는 데 도움을 줄 것이다."Hello라는 react 클래스 구성 요소 만들기"에서 시작합니다. 이 구성 요소는 h1의 "Hello"를 되돌려줍니다.
//Build a react class component called Hello
//that returns an h1 with "Hello"
import React, { Component } from 'react'
export default class Hello extends Component {
render() {
return(
<div>
<h1>Hello</h1>
</div>
)
}
}
// make a constructor, assume it accepts props
//with state helloTranslations set to an empty array
import React, { Component } from 'react'
export default class Hello extends Component {
constructor(props) {
super(props);
this.state = {
helloTranslations: []
};
}
render() {
return(
<div>
<h1>Hello</h1>
</div>
)
}
}
// assume you have an endpoint of this.props.helloTranslations = 'https://hello/translations'
// What kind of function would you set this up in?
// componentDidMount()
// make a fetch to that endpoint
import React, { Component } from 'react'
export default class Hello extends Component {
constructor(props) {
super(props);
this.state = {
helloTranslations: []
}
}
componentDidMount() {
fetch(this.props.helloTranslations)
//I did not remember the exact syntax for fetch, asked to use MDN, he said let's not since I most likely won't be able to in an interview setting
//he mentioned the first arg is the endpoint you want to hit, optional second arg of {} with all your headers such as 'POST' etc
.then(response => response.json())
.then(data => console.log(data));
}
render() {
return(
<div>
<h1>Hello</h1>
</div>
)
}
}
//that data returns an array data.translations = ['Hola', 'Bonjour', 'Hello', etc.]
// access that array and set your state of helloTranslations equal to that array
//but exclude 'Hello'
import React, { Component } from 'react'
export default class Hello extends Component {
constructor(props) {
super(props);
this.state = {
helloTranslations: []
}
}
componentDidMount() {
fetch(this.props.helloTranslations)
.then(response => response.json())
.then(data => {
let newArray = data.translations.filter(trans => trans !== 'Hello')
this.setState({helloTranslations: newArray})
})
}
render() {
return(
<div>
<h1>Hello</h1>
</div>
)
}
}
//display that data: <li><button>Hola</button></li>
import React, { Component } from 'react'
export default class Hello extends Component {
constructor(props) {
super(props);
this.state = {
helloTranslations: []
}
}
componentDidMount() {
fetch(this.props.helloTranslations)
.then(response => response.json())
.then(data => {
let newArray = data.translations.filter(trans => trans !== 'Hello')
this.setState({helloTranslations: newArray})
})
}
renderTranslations = () => {
return this.state.helloTranslations.map( trans =>
<li key={ trans }><button>{ trans }</button></li>
)
}
render() {
return(
<div>
<h1>Hello</h1>
<ul>
{ this.renderTranslations() }
</ul>
</div>
)
}
}
//write a function that when a button is clicked it console.logs that translation
import React, { Component } from 'react'
export default class Hello extends Component {
constructor(props) {
super(props);
this.state = {
helloTranslations: []
}
}
componentDidMount() {
fetch(this.props.helloTranslations)
.then(response => response.json())
.then(data => {
let newArray = data.translations.filter(trans => trans !== 'Hello')
this.setState({helloTranslations: newArray})
})
}
logTranslation = (translation) => {
console.log(translation)
}
renderTranslations = () => {
return this.state.helloTranslations.map( trans =>
<li key={ trans }><button onClick={ () => this.logTranslation(trans) }>{ trans }</button></li>
)
}
render() {
return(
<div>
<h1>Hello</h1>
<ul>
{ this.renderTranslations() }
</ul>
</div>
)
}
}
//take this component and rewrite it as a functional component
//you can either write over it directly or write a new component
import React, { useState, useEffect } from 'react'
const Hello = ({ helloTranslations }) => {
const [translations, setTranslations] = useState([])
useEffect(() => {
fetch(helloTranslations)
.then(response => response.json())
.then(data => {
let newArray = data.translations.filter( trans => trans !== 'Hello')
setTranslations(newArray)
})
}, [])
const logTranslation = (translation) => {
console.log(translation)
}
const renderTranslations = () => {
return translations.map( trans => <li key={ trans }><button onClick={ () => logTranslation(trans)}>{ trans} </button></li>)
}
return(
<>
<h1>Hello</h1>
<ul>
{ renderTranslations() }
</ul>
</>
)
}
export default Hello
어떤 상태 관리 도구를 사용할 수 있습니까? 왜 사용해야 합니까?나는 그들에게 레드ux에 대해 잘 알고 있다고 말했다. 당신은 아주 큰 프로그램에서 레드ux를 사용할 수도 있고, 상태를 도구로 손자나 증손자에게 전달해야 한다는 것을 알게 될 것이다.Redux는 어셈블리가 직접 상태에 액세스할 수 있으므로 드릴을 피할 수 있습니다.그런 다음 React context의 장점을 간략하게 설명하고 Redux를 대체합니다.
그리고 그들은 무엇이 심판이냐고 물었다.다음은 클라이언트와 서버 쪽 응용 프로그램 사이의 차이는 무엇입니까?
나는 Ref를 들은 적이 있지만, 그것이 무엇을 가리키는지 기억이 나지 않는다. 나는 React가 클라이언트 응용 프로그램이라는 것만 들은 적이 있다.나는 솔직하게 말했다. 그리고 우리는 클라이언트와 서버 쪽 응용 프로그램을 어떻게 사용하는지 재미있는 토론을 진행했다.그들은 내가 이 정보를 모른다는 것에 놀라지 않았다. 왜냐하면 많은 훈련소 졸업생들이 그들이 말하는 고급 반응 화제를 모른다는 것을 알아차렸기 때문이다.
이렇게!저에게 있어서 가장 큰 수확은 문법을 복습하고 갈고리 연습을 더 많이 하며 더 높은 React 주제를 연구하기 시작하는 것입니다.전반적으로 이것은 나에게 있어서 매우 적극적인 경험이다.이것 또한 나로 하여금 자신감을 배가시켰다. 왜냐하면 나는 자신의 반응 개념을 확실히 알고 면접 환경에서 코드를 성공적으로 작성할 수 있기 때문이다.요컨대, 나는 React의 이론 지식에 대해 구두적인 문제를 제기하고, 하나의 종류와 하나의 기능 구성 요소를 구축했는데, 모두 상태를 사용하고 비동기적으로 요청을 받는다.숙련된 면접 기교가 있으면 당신은 진정한 면접처럼 다양한 일을 요구받을 수 있습니다!그러니 준비를 잘 해야 한다. 그러나 당신이 준비한 것이 면접관의 기대가 아닐 수도 있다는 것을 알아야 한다.
즐거운 코딩!
Reference
이 문제에 관하여(숙련된 언어로 모의 면접을 진행하다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/mmcclure11/react-mock-interview-with-skilled-5cih텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
