안녕하세요, GDGoC Hongik Organizer 이혁입니다.
프론트엔드 트랙 미션 코스 마지막 미션이 올라오게 되었어요. 지난 주차 미션도 만만치 않으셨을텐데 이번 주차 미션은 분량이 더 많을 예정이에요. 다만 지난 주차와 마찬가지로 모든 미션을 끝내기 보다는 열심히 공부했다는 것만 확인할 예정이에요.
프로젝트를 성공적으로 진행하기 위해서 꼭 필요한 내용들을 담기 위해 노력했으니, 프로젝트를 시작하기 전에는 꼭 마무리할 수 있도록 노력해주세요! 추가로 종강 이후에는 프로젝트 진행에 도움이 되는 추가 미션들도 제공해드릴 예정이니 그 전까지 꼼꼼하게 공부해봅시다.
이번 주차부터는 GitHub 기초 미션이 존재하지 않아요. 이제는 어느 정도 적응이 됐을 거라고는 생각되지만, 아직 부족한 부분이 있을 경우에는 운영진에게 문의해주세요.
내용 정리는 따로 GitHub에 md파일이 아닌, 블로그에 정리하는 식으로 하면 좋을거 같아요. 본인이 배운 내용/정리해두고 기억해야 할 내용을 위주로 진행해요.
안내 사항
- 최하단에 기재된 폴더 구조 형식에 맞춰서 파일을 만들어주세요.
- 레포지토리를 Fork한 이후, 최대한 빠른 시일 내에 PR을 올려주세요. 이후 Push를 진행해도 되니 운영진이 미션 진행 여부를 확인할 수 있도록 해주세요.
- 레포지토리는 무조건 Public으로 Fork해주세요. Private으로만 진행하면 운영진이 과제 피드백에 어려움을 겪을 수 있어요.
- 이번 주에 배우는 내용들도 블로그에 꼭 회고록과 함께 정리해주시고, 해당 링크를 제출해주세요.
- GitHub 과제 제출 가이드라인을 준수하여 진행해주세요.
이번부터 Vite를 이용해 프로젝트를 만드는 방법을 알아보려고 해요. 물론 Yarn부터 Vite를 이용해 올린 분들도 계시겠지만, Vite를 통해 어떻게 프로젝트를 만들 수 있고, 왜 Vite를 이용하는지에 대해서 간단하게 알아보면 좋을거 같아요. 이번 미션 때 만드는 모든 프로젝트는 Vite를 통해 만들어주세요.
학습 목표
- React에서 컴포넌트가 어떻게 동작하는지 props를 통해 알 수 있다.
- useState를 통해 렌더링이 어떻게 되는지 이해할 수 있다.
지난 주차까지 React 프로젝트를 만들어서 페이지를 이동시키는 것까지 알아봤어요. 이번에는 React에서 가장 중요한 개념 중 하나인 props에 대해 알아보고, 이를 실제로 이용해보려 해요.
props는 하위 컴포넌트에게 데이터를 전달해주는 방식이라 생각하면 편해요. props와 관련된 내용을 정리하고, 실제로 이용해보는 시간을 가지려 해요.
컴포넌트 내에서 변수 값의 변화가 생겼다해도, 컴포넌트가 매번 보여주는 값이 변하지 않아요. 우리가 값의 변화에 따라 컴포넌트를 재랜더링하여 보여주고 싶을 때, useState()라는 Hook을 사용할 수 있어요.
useState를 어떻게 사용할 수 있을 지 알아보기 위해서 아래 내용을 토대로 공부하고, 하단 요구 사항에 맞는 코드를 작성해봐요.
초기값에서 버튼을 누를 때마다 변화량만큼 변동이 있는 간단한 Counter 앱을 만들어볼 예정이에요.
- App.js에서 Counter라는 이름의 컴포넌트를 호출하며, props으로 원하는 초기값과 누를 때마다 변화량을 넘겨준다.
- +가 적힌 버튼을 누르면 변화량 만큼 값이 늘어나며, -가 적힌 버튼을 누르면 변화량 만큼 값이 줄어든다.
Counter 앱의 경우 React 프로젝트의 대표적인 예시 중에 하나이기 때문에 관련 자료가 많아요. props와 useState의 개념을 배울 수 있는 선에서 프로젝트를 진행해봅시다.
로그인을 구현하기 위해서는 브라우저에 어떻게 상태를 저장할 수 있는지를 알아야 해요. 따라서 토큰, 세션, 쿠키에 대한 내용을 정리하고 어떻게 이용할 수 있는지를 알아보는 시간을 가져요.
- 토큰, 세션, 쿠키에 대한 내용을 정리해요.
지난 미션에서 HTTP를 통해 어떻게 소통할 수 있는지 개념적인 부분을 알아봤어요. 하지만 매번 다른 양식으로 소통할 수는 없기에, API 명세라는 것을 작성하여 프론트엔드와 백엔드가 소통할 수 있어요.
API가 무엇이고, 이를 프론트엔드에서 어떻게 이용할 수 있는지 위주의 개념을 먼저 공부해요. API를 활용하는 코드를 작성하는 것은 기말고사 이후, 추가 미션을 드리면서 진행할 예정이에요.
- API 명세가 무엇이고, 이를 프론트엔드에서 어떻게 이용할 수 있는지, 왜 필요한 지 등을 정리해요.
위에서 배운 토큰, 세션, 쿠키를 활용하여 어떻게 로그인을 구현할 수 있을지 알아보려 해요. 아래 요구 사항에 부합하도록 코드를 작성해주세요.
- 미리 유저 정보를 저장해놓은 객체를 작성해요.
- Form 태그와 Input 태그를 통해 ID, 비밀번호를 입력받고 데이터를 확인해요.
- 유저 정보가 일치하면 토큰, 세션, 쿠키 등을 활용하여 로그인 상태를 저장해요.
- 인증된 유저만 접속할 수 있는 페이지를 통해 로그인 여부를 파악해요.
로그인 미션의 경우 난이도가 꽤 있기에 다른 미션에 비해 나중에 진행해도 돼요. 다만 추후에 프로젝트를 진행하기 위해서는 간단하게라도 알아두면 좋을 거 같아요.
useState를 통해 값(상태)이 변할 때마다 렌더링되게 하는 방법을 배웠어요. 이번에는 useEffect를 통해, 컴포넌트가 렌더링될 때마다 특정 함수를 실행하는 방법을 알아보려고 해요. useEffect가 왜 필요한지, 어떤 역할을 할 수 있는지를 기준으로 해당 개념을 배우고 응용해봐요.
- useEffect에 이용되는 개념과 사용 방법을 확인해요.
├── README.md
│
├── mission1
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ └── src
│ ├── App.css
│ ├── App.js
│ ├── # 필요한 파일 있으면 추가해서 진행해주세요.
│ ├── index.css
│ └── index.js
│
└── mission4
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src
├── App.css
├── App.js
├── # 필요한 파일 있으면 추가해서 진행해주세요.
├── index.css
└── index.js