YCombinator 인터뷰를 준비하는 방법

Anima는 YC18 코호트의 일부였으며 준비 과정에서 다가오는 인터뷰를 위한 사전 질문 앱을 개발했습니다. 이 앱은 실제 인터뷰 프로세스를 준비하면서 10분 YCombinator 인터뷰 형식을 시뮬레이션하는 교육 환경을 제공했습니다.

시도 live demo

Q&A 형식을 감안할 때 이 앱은 유용한 리소스 투자자 회의로도 판명되었습니다. 그리고 앱의 기능을 사용하고자 하는 기업들의 여러 요청을 거쳐 오픈소스 앱으로 공유할 수 있도록 재개발했습니다.

If you're interested in Amina's YCombinator journey, check out our How to nail your YC interview post.

준비 앱이 구축된 방법

Anima의 CEO인 Avishay Cohen은 Figma 디자인을 Netlify에 배포하기 전에 라이브 React 앱으로 변환하는 것과 관련된 앱 제작을 위한 단계별 프로세스를 보여줍니다.

재설계는 Figma에서 이루어졌는데 이는 대부분의 코드가 자동으로 작성될 수 있음을 의미했습니다. Anima plugin for Figma은 디자인을 코드, 특히 Figma에서 React로 변환했습니다.

그러나 이를 지원하기 위해 수행된 몇 가지 추가 작업이 있습니다. 자세한 내용은 Anima's GitHub page 에서 읽을 수 있습니다.

Anima + Figma + React + Netlify를 사용하여 자신만의 YCombinator 준비 도구를 구축하는 방법

디자인 파일로 시작하십시오.

이 Figma 샘플 파일은 duplicate here에서 사용할 수 있습니다.

1단계: 애니마와 동기화

AnimaApp.com에서 가입

Figma , Adobe XD 또는 Sketch용 플러그인을 설치합니다.

미리보기를 클릭한 다음 동기화를 클릭합니다.

2단계: React 코드 내보내기

Anima에서 전체 프로젝트의 코드 내보내기

3단계: 로컬에서 실행

Anima 코드 폴더에서 터미널을 열고 다음을 실행합니다.

npm install
npm start

열기 http://localhost:1234/

논리 추가 중

이 간단한 앱에서 대부분의 논리는 질문을 로드하고 무작위로 실행합니다.

링크 추가

애니마스 코드는 react router과 함께 제공됩니다.

History hook은 onClick에 링크를 추가하는 일반적인 방법입니다

.

질문 로드 중

State hook은 질문 배열과 현재 질문을 저장하는 데 사용됩니다.

Fetch 메서드를 사용하면 getData()에서 질문을 가져올 수 있습니다.

questions.json 파일을 정적 파일 폴더에 추가했습니다.

Effect hook은

를 트리거하는 데 사용됩니다.

배열에서 질문을 무작위로 추출하기 위해 next()라는 간단한 함수를 추가했습니다

.

렌더링 기능에서 현재 질문의 값을 추가했습니다

.

All the final code is available on GitHub

5단계: Netlify에 게시

Netlify은 React 앱을 호스팅하는 훌륭한 클라우드입니다.

netlify가 없으면 다음 명령을 사용하여 npm으로 설치합니다.

npm install netlify-cli -g

netlify가 있는 경우 다음 명령을 사용하십시오.

npm run build
netlify deploy

요청을 받았을 때 dist 폴더를 선택하면 Netlify에서 React 앱에 대한 링크를 얻을 수 있습니다.

최종 결과가 나오면 netlify deploy prod를 사용하고 공유 가능한 링크를 받으세요.

라이브 앱의 미리보기:

추가 리소스:

The Figma file

The code on GitHub

The live app on Netlify

Create an Anima account

다운로드 Anima plugin for Figma

How to convert Figma to React 블로그 게시물

How to nail your YC interview 포스트