안녕하세요, GDGoC Hongik Organizer 이혁입니다.
앞으로 3주 간 프로젝트를 진행하기에 앞서 실력을 기를 수 있는 미션 코스를 진행하려 해요. 지난 온보딩 이후 미션 난이도를 대폭 조정하여, 프론트엔드 프로젝트를 진행하기에 부족함 없는 개발자로 성장하기에 필요한 내용들을 최대한 준비 해봤어요.
약 한 달 남짓한 기간동안은 이 미션 코스에 써야하는 시간이 많을 수도 있어요. 미션 코스를 통해 최대한 성장할 수 있도록 구성되어 있으니 모두 화이팅합시다.
추신: 프론트엔드 미션 코스 진행 중에 헷갈리는 부분이 생기거나 도움이 필요하다면 AI를 이용하지 말고, 스스로 검색하여 해결하거나 디스코드에서 @이혁미역을 불러주세요.
안내 사항
- 최하단에 기재된 폴더 구조 형식에 맞춰서 파일을 만들어주세요.
- 이번 주에 배운 내용들은 모두 개인 블로그에 회고록과 함께 정리하여 업로드 후, 노션에 제출해주세요.
- 파일의 변경 사항을 Commit으로 최대한 자주 남겨주세요.
학습 목표
- Git과 GitHub를 통해 파일을 자유자재로 업로드할 수 있다.
- Git과 GitHub를 이용하여 협업하는 과정을 알 수 있다.
아직 Git과 GitHub에 익숙하지 않은 분들을 위해 미션을 준비했어요. 이번 미션들을 진행하며, 모든 Commit에 대해 Commit 컨벤션을 지켜서 작업해주세요.
GitHub에 파일을 어떻게 업로드하는 지가 헷갈리는 분들은 아래 링크를 통해 방법을 익히고, 활용해봐요.
- fork한 레포지토리에서 본인 GitHub 핸들명으로 된 branch를 만들고, 해당 branch에서 작업해요.
- 미션을 완료하면 기존 레포지토리의 main 브랜치로 PR을 날려요.
학습 목표
- HTML과 CSS를 활용하여 화면을 구성할 수 있다.
- JavaScript의 기본 문법을 활용하여 코드를 짤 수 있다.
아직 HTML과 CSS에 대한 개념적인 부분이 많이 부족하다고 느꼈어요. 해당 지식들을 정리하면서 배우고, 정리하는 시간을 가져보려 해요.
위 사이트는 제가 공부를 시작할 때부터 지금까지 많은 도움을 받고 있는 사이트예요. 해당 사이트에 있는 HTML5, CSS, JavaScript에 대한 개념적인 내용들을 배우는 시간을 가져요. 모든 내용을 다 정리하지 말고, 몰랐거나 새로 배운 내용들 위주로 정리하며 개념을 메꿔봅시다.
-
HTML5, CSS3 각각 레슨 10까지의 내용을 학습하고 정리해요.
-
배운 내용을 기반으로 자기 자신을 소개하는 페이지를 구성해봐요.
-
JavaScript 레슨 15까지의 내용을 학습하고 정리해요.
-
배운 내용을 기반으로 메인 미션 2를 구현해요.
학습 목표
- JavaScript의 기본 문법들을 이용하여 코드를 구현할 수 있다.
- 공백으로 구분되는 두 정수 사이의 하나의 연산자가 입력으로 주어진다.
- 각 연산자마다 계산하는 기능을 함수로 구현한다.
- 입력은 항상 출력 결과가 정수인 경우만 주어지며, 오류는 생각하지 않는다.
# 입력
3 + 5# 출력
8학습 목표 React 프로젝트를 스스로 생성할 수 있다. React 컴포넌트 파일을 만들어서 이용할 수 있다.
마지막으로 프로젝트 트랙에서 주로 배울 라이브러리인 React에 대해 알아보려 해요. React를 활용하려면 아직 더 배워야할 것들이 많지만, 프로젝트를 생성하는 과정 자체는 어렵지 않아요.
React 프로젝트는 별도의 자료 없이 미션이 제공돼요. 도움이 필요할 경우에는 디스코드 등을 활용하여 질문해주세요.
힌트: 폴더 구조에 적힌 대로 reportWebVitals.js와 setupTests.js를 지우게 되면 오류가 발생할 수도 있어요. 어떤 부분에서 오류가 발생하는지 확인해보고 해결해봐요!
- Node.js를 설치하고, React를 설치하는 방법을 알아봐요.
- Node.js는 LTS라 적힌 버전을 설치하고, 바로 이용이 안될 경우 재부팅해주세요.
- CRA(
create-react-app) 커맨드를 이용하여 React를 생성해요. - Button 컴포넌트를 만들어서, 눌렀을 때 인삿말이 출력되도록 해요.
- 컴포넌트 파일은 대문자로 시작해야 해요.
├── README.md
│
├── mission1
│ ├── CSS3.md
│ ├── HTML5.md
│ ├── introduce.css # 자기 소개 페이지 CSS
│ ├── introduce.html # 자기 소개 페이지 HTML
│ └── JavaScript.md
│
├── mission2
│ └── calculator.js # 계산기 구현 파일
│
└── mission3
├── package-lock.json
├── package.json
├── public
└── src
├── App.css
├── App.js
├── Button.js # Button 컴포넌트 파일
├── index.css
└── index.js