초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.
리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용해 어플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.
✍️
이런 걸
배워요!
웹 어플리케이션 개발 실습을 통해 React.js의 핵심 개념 이해
순수 JS 개발과 리액트 개발의 비교
실습을 통한 디자인 패턴 적용의 이점
강의 :
https://www.inflearn.com/course/만들면서-학습하는-리액트
소스 :
요구사항 분석
검색폼 구현
● 검색 상품명 입력 폼이 위치한다
● 검색어를 입력하면 x버튼이 보이고, 없으면 x 버튼을 숨긴다
● 엔터를 입력하면 검색 결과가 보인다
● x 버튼을 클릭하거나 검색어를 삭제하면 검색 결과를 삭제한다
검색 결과 구현
● 검색 결과가 검색폼 아래 위치한다. 검색 결과가 없을 경우와 있을 경우를 구분한다.
● x버튼을 클릭하면 검색폼이 초기화 되고, 검색 결과가 사라진다
탭 구현
● 추천 검색어, 최근 검색어 탭이 검색폼 아래 위치한다
● 기본으로 추천 검색어 탭을 선택한다
● 각 탭을 클릭하면 탭 아래 내용이 변경된다
추천 검색어 구현
● 번호, 추천 검색어 이름이 목록 형태로 탭 아래 위치한다
● 목록에서 검색어를 클릭하면 선택된 검색어의 검색 결과 화면으로 이동한다
최근 검색어 구현
● 최근 검색어 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아래 위치한다 (추천 검색어와 비슷)
● 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면으로 이동한다 (추천 검색어와 같음)
● 목록에서 x 버튼을 클릭하면 선택된 검색어가 목록에서 삭제된다
● 검색시마다 최근 검색어 목록에 추가된다
====> 김정환블로그
[1] 준비편
1. [개요]백문이 불여일타
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76077&tab=curriculum
2. [개요] 결과물 미리보기
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76078&tab=curriculum
3. [개요] 실습환경 구성
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76081&tab=curriculum
강의 노트
아래 4가지 도구를 사용해서 실습 환경을 구성합니다.
- Node.js
- 에디터: VS Code
- 웹브라우져: 파이어폭스, 크롬
- Git 클라이언트
4. [개요] ⭐중간정리
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76083&tab=curriculum
[2] 준비편 - 순수JS
5. [순수JS1]MVC 패턴
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76162&tab=curriculum
강의 노트
6. [순수JS1]폴더구조
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76163&tab=curriculum
강의 노트
코드 가져오기
- git clone https://github.com/jeonghwan-kim/lecture-react.git
코드 저장소 주소(깃헙)
- https://github.com/jeonghwan-kim/lecture-react
브랜치 이동
- git checkout -f ready/scaffoding
7. [순수JS1]검색폼 1
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76207&tab=curriculum
강의 노트
SearchFormView.js
import { qs } from "../helpers.js";
import View from "./View.js";
export default class SearchFormView extends View {
constructor() {
super(qs("#search-form-view"));
this.resetElement = qs("[type=reset]", this.element);
this.showResetButton(true);
}
showResetButton(visible = true) {
this.resetElement.style.display = visible ? "block" : "none";
}
}
8. [순수JS1]검색폼2
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76208&tab=curriculum
강의 노트
브랜치 이동
- git checkout -f ready/search-form-1
● 엔터를 입력하면 검색 결과가 보인다
● x 버튼을 클릭하거나 검색어를 삭제하면 검색 결과를 삭제한다
SearchFormView
import { qs } from "../helpers.js";
import View from "./View.js";
const tag = "[SearchFormView]";
export default class SearchFormView extends View {
constructor() {
super(qs("#search-form-view"));
this.inputElement = qs("[type=text]", this.element);
this.resetElement = qs("[type=reset]", this.element);
this.showResetButton(false);
this.bindEvent();
}
showResetButton(visible = true) {
this.resetElement.style.display = visible ? "block" : "none";
this.on(this.resetElement, "click", () => {
this.resetElement.style.display = "none";
});
}
bindEvent() {
console.log("bindEvent :");
this.on(this.inputElement, "keyup", () => this.handleKeyUp());
}
handleKeyUp() {
const { value } = this.inputElement;
console.log(tag, "handleKeyUp", value);
this.showResetButton(value.length > 0);
}
}
9. [순수JS1]검색폼3
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76209&tab=curriculum
Controller.js
const tag = "[Controller]";
export default class Controller {
constructor(store, { searchFormView }) {
this.store = store;
this.searchFormView = searchFormView;
this.subscribeViewEvents();
}
subscribeViewEvents() {
this.searchFormView.on("@submit", (event) => this.searchFormView(event));
}
search(keyword) {
console.log(tag, keyword);
}
}
SearchFormView.js
~
handleSubmit(e) {
e.preventDefault();
console.log(tag, "handleSubmit");
const { value } = this.inputElement;
this.emit("@submit", { value });
}
~
10. [순수JS1]검색폼4
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76210&tab=curriculum
x 버튼을 클릭하거나 검색어를 삭제하면 검색 결과를 삭제한다
11. [순수JS1]검색폼4 풀이
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76211&tab=curriculum
x 버튼을 클릭하거나 검색어를 삭제하면 검색 결과를 삭제한다
이하 강의 내용 비추 생략 ~
이하 내용 김정환블로그 에서 볼것
만들면서 학습하는 리액트: 준비편
[2] 리액트 소개편
김정환 블로그 참조
만들면서 학습하는 리액트: 소개편
https://jeonghwan-kim.github.io/series/2021/04/08/lecture-react-intro.html
1. [React 소개] 데이터를 화면에 출력하는 방법
강의 :
https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76502&tab=curriculum
댓글 ( 4)
댓글 남기기