초급자를 위해 준비한
[웹 개발, 프론트엔드] 강의입니다.

리액트는 실무에서 가장 많이 찾는 인기있는 프론트엔드 기술입니다. 리액트 기술을 이용해 어플리케이션을 빠르게 개발하고 유지 보수 가능한 코드를 만들어 보세요.

✍️
이런 걸
배워요!

웹 어플리케이션 개발 실습을 통해 React.js의 핵심 개념 이해

순수 JS 개발과 리액트 개발의 비교

실습을 통한 디자인 패턴 적용의 이점

강의 :

https://www.inflearn.com/course/만들면서-학습하는-리액트

소스 :

• https://github.com/jeonghwan-kim/lecture-react

요구사항 분석

검색폼 구현
● 검색 상품명 입력 폼이 위치한다
● 검색어를 입력하면 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

김정환블로그

강의 노트

• 준비편 > 순수 자바스크립트 1 > MVC

6. [순수JS1]폴더구조

https://www.inflearn.com/course/lecture?courseSlug=만들면서-학습하는-리액트&unitId=76163&tab=curriculum

강의 노트

• 준비편 > 순수 자바스크립트 1 > 폴더 구조

코드 가져오기

• 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

강의 노트

• 준비편 > 순수 자바스크립트 1 > 검색폼 1

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

강의 노트

• 준비편 > 순수 자바스크립트 1 > 검색폼 2

브랜치 이동


• 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 버튼을 클릭하거나 검색어를 삭제하면 검색 결과를 삭제한다

이하 강의 내용 비추  생략 ~

이하 내용 김정환블로그 에서 볼것

만들면서 학습하는 리액트: 준비편

https://jeonghwan-kim.github.io/series/2021/04/05/lecture-react-ready.html#%EA%B2%80%EC%83%89%EA%B2%B0%EA%B3%BC-1

[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