fwywd(퓨드)의 채용 시험에 도전하고 싶지만, 써 있는 내용이 주문으로밖에 보이지 않는다.
React · Next.js · tailwindcss · Vercel? ?
JavaScript도 전혀 모르는 초보자가 학습한 흐름을 정리했습니다.
프로그래밍 초보자나 같은 생각을 하고 있는 사람의 도움이 되면 기쁩니다.

대상

시험 내용을 파악하고 싶다

React 나 Next.js 등을 잘 모르겠습니다

무엇을 배울지 모르겠습니다

시험 내용 기사

용어 설명

더 씹어서...

React: HTML의 외형을 만들 수 있다. HTML에 변수를 전달할 수 있도록 표시를 바꿀 수 있다.

Next.js : 서버로 이동할 수 있습니다. (React에는 서버 기능 없음)

Vercel: Next.js 애플리케이션을 쉽게 배포할 수 있는 서비스.

배포 : 응용 프로그램을 서버에 배포하고 배포하여 사용할 수 있도록합니다.

Tailwind CSS : CSS를 작성하지 않고 편리하고 범용적인 클래스를 조합하여 레이아웃을 만듭니다.

"React"와 "Next.js"의 차이점에 대해 더 자세히 알고 싶다면 아래 기사를 참조하십시오. 제가 참고로 한 사이트입니다.
참고 : Next.js와 React의 차이

각 기술의 학습 방법·참고 자료

1차 시험 전반 제출까지 배운 주요 내용입니다.

자바스크립트

참고 사이트 등을 읽었습니다만, JavaScript를 학습하지 않은 나에게는 어려웠습니다.
하지만 React 튜토리얼 등을 따라 가면 구현할 수 있었기 때문에 어떻게든 되었기 때문에 날려도 좋을지도 모릅니다.

【참고】
- ES2015(ES6) 입문 - Qiita

React

튜토리얼 을 먼저 가 보았는데, 도중부터 따라갈 수 없게 되었기 때문에 한 단계씩 배울 수 있는 가이드 를 참고로 했습니다.
사이트에서 직접 온라인 에디터를 사용할 수 있기 때문에 설치하기 쉽습니다.

어느 정도, 포트폴리오를 작성 후, react-scroll 도입 를 참고로 해, 부드러운 스크롤을 구현했습니다.

【참고】
- 한 단계씩 배울 수 있는 가이드
- React 튜토리얼
- react-scroll 도입

Next.js와 Vercel

이 사이트 길을 따라 Next.js 앱을 만들고 Vercel에 배포하는 방법을 배울 수 있습니다.

흐름을 학습한 후, Next.js+Tailwind CSS의 프로젝트 작성 방법은 여기의 기사를 참고로 했습니다.

next/image에 의한 이미지의 최적화는 여기 의 기사도 참고로 했습니다.

【참고】
- Create a Next.js App
- 다음 / 이미지로 이미지 최적화를 시도했습니다.
- Next.js (JavaScript / TypeScript)에 Tailwind CSS를 도입하는 방법

Tailwind CSS

실제로 작성한 프로젝트에 기술하면서 학습했습니다. 조사 방법은 오픈 소스 템플릿이 많이 있다 Tailwind Component 에서 자신이 구현하고 싶은 레이아웃에 가까운 것을 찾고, 쓰여진 코드를 보고 tailwindcss의 공식 사이트 로 하나씩 조사해 갔습니다.

【참고】
- Tailwind Component
- tailwindcss의 공식 사이트

끝

실제로는 모르는 용어나 내용이 많아 다른 사이트도 여러가지 보았습니다만, 자신이 실제로 만들기 위해서 알기 쉽고, 필요하다고 생각한 것을 싣고 있습니다.

다음에는 실제로 구현할 때 곤란한 부분을 픽업하여 써 갑니다.
조금이라도 도전해 보려고 하는 사람의 도움이 되면 기쁩니다!