Light

yujin0719 / javascript-mission Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 0 B

javascript-mission's Introduction

😎 Skills

Platforms & Languages

🧐 Analysis

😲 Experience

부스트캠프 6기 웹 풀스택 챌린지 (2021.07.19 - 2021.08.13)
부스트캠프 6기 웹 풀스택 멤버십 (2021.08.23 ~ )

javascript-mission's People

Contributors

Watchers

javascript-mission's Issues

[Mission1] 추가 구현사항 - setState 구현

TodoList 함수에 setState(nextData)라는 함수를 만듭니다.

이 함수는 해당 컴포넌트 초기 생성 시 넘겼던 data 파라메터를 nextData로 대체하고
컴포넌트를 다시 렌더링합니다.

해당 함수를 추가한 뒤, new TodoList(...) 하는 코드 이후에 해당 컴포넌트의 인스턴스에 todoList.setState(새로운 배열) 형태로 데이터만 다시 넣었을 때 컴포넌트가 다시 렌더링 되도록 작성해주세요.

setState 함수 호출 후 다시 todoList.render()를 호출하는 것이 아니라, setState 함수 내에서 화면을 다시 렌더링하는 것까지 처리해야 합니다.

[Mission1] 추가 구현사항 - isCompleted 구현

data의 각 object에 text외에 isCompleted 라는 필드를 추가합니다.
해당 값은 true, 혹은 false 값을 지정해주세요.

var data = [
  { 
    text: '코딩하기',
    isCompleted: true
  },
  {
    text: '집안 청소하기',
    isCompleted: false
  }
]

TodoList 컴포넌트 내에 text 렌더링 시, isCompleted 값이 true인 경우 <s> 태그를 이용해 삭선처리를 해주는 걸 추가합니다.

[Mission1]

<html>

<head>
  <title>Mission 1</title>
  <meta charset="utf-8" />
</head>

<body>
  <div id="todo-list"></div>
  <script>
    var data = [
      {
        text: 'JS 공부하기'
      },
      {
        text: 'JS 복습하기'
      }
    ]
	// 이곳에서 코딩을 시작하세요!
  </script>
</body>
</html>

script 태그 내에 아래의 요구사항을 만족하는 코드를 작성합니다.

TodoList라는 이름의 컴포넌트를 작성합니다.

필수 구현사항 설명

function style의 문법, class style의 문법 어느 것을 사용해도 좋습니다.
new 키워드를 통해 생성해서 사용됩니다.
파라메터로 아래와 같은 형태의 data를 넘겨받습니다.

var data = [
  {
    text: 'JS 공부하기'
  },
  {
    text: 'JS 복습하기'
  }
]

var todoList = new TodoList(data);와 같은 형태로 파라메터를 넘기고, 생성해서 사용합니다.

해당 컴포넌트에 render 함수를 작성합니다.
- 이 함수는 파라메터로 넘겨받은 data를 순회하며 각 배열첨자의 text를 html string으로 만든 뒤, todo-list라는 id를 가진 div에 innerHTML을 이용해 렌더링 되도록 합니다.
- 이 함수는 별도의 파라메터 없이 todoList.render() 형태로 실행되도록 만듭니다.

Tip

new 키워드와 this 키워드가 생소하신 분을 위해 간단한 샘플을 준비했습니다.

function Band(name) {
  // 파라메터로 받은 name을 this.name으로 할당
  this.name = name;
  // Band 함수에 perform 함수를 만들고 그것을 this.perform 에 할당
  this.perform = function(){
    console.log(`${this.name} 밴드가 공연을 합니다!`);
  }
  this.performHTML = function() {
    document.querySelector('#stage').innerHTML = `<div>${this.name} 밴드가 공연을 합니다!</div>`
  }
}

// new 키워드를 이용해 Band 여러개를 만들기
// new를 붙이고 함수가 실행될 때마다, 함수 내 this는 새 함수 인스턴스를 가리킵니다.
var band1 = new Band('Cold Play'); // band1.name은 무엇일까요? band1.perform()을 실행하면 어떤 일이 일어날까요?

// 나머지 band2, band3, band4에 대해서도 생각해봅시다.
var band2 = new Band('Foo Fighters');
var band3 = new Band('Crying Nut');
var band4 = new Band('Jaurim');

// 무슨 일이 일어날까요?
band1.performHTML();
// 무슨 일이 일어날까요?
band2.performHTML();

data와 html string을 결합하기 위해 + 를 연산자를 이용하는 방법
- var html = '<div>' + data[0].text + </div>;

string template을 이용하는 방법

// 문자열을 '이 아닌 `(탭 위에 있는 키)로 묶는 것에 유의하세요!
var html = `<div>${data[0].text}</div>`

특정한 div 내에 html을 넣으려면 아래의 문법을 활용하세요.
- document.querySelector('#todo-list').innerHTML = 'html string';

읽으면 도움이 될 글들

JavaScript에서 사용자정의 생성자함수 - 생성자 함수에 대해 정리가 된 글입니다.
Template literals
- ES6의 Template Literals 문법에 대한 글입니다. 이번 미션을 수행하면서 html을 string 형태로 생성하게 되는데, 적절히
활용하면 data와 html string을 붙이는 작업을 편하게 할 수 있습니다.
this는 어렵지 않습니다. - this에 대해 정리된 글입니다.

아래 내용들은 필수는 아니지만, 구현해보면 재밌을(?) 내용들입니다.

new 키워드로 함수의 인스턴스를 만들 때 올바른 파라메터가 넘어오지 않을 경우 에러 발생하게 하기
- null 혹은 undefined가 넘어오면?
- array가 아닌 형태로 넘어오면?
- 데이터 내용이 이상하면?
new 키워드 안 붙이고 함수 실행 시 에러 발생하게 하기
- function 형태의 선언인 경우에만 해당

에러는 우선 에러를 내야하는 상황이 생기는 경우 throw new Error("error message") 문법을 사용해주세요.

[Mission1] 추가 구현사항 - 다중 컴포넌트

보너스 구현사항

html

<div id="todo-list"></div> 외의 다른 div를 두 개 더 html 코드에 만듭니다.
div의 id는 적당한 이름으로 지어주세요.

js

var data = [{ ... }] 외에 todo를 담고 있는 array data를 두 개 더 만듭니다.
todo의 내용은 본인의 현재 todo를 담아서 넣으면 더 좋겠죠?
TodoList 컴포넌트를 총 세 개 만듭니다. 첫 번째 컴포넌트에는 제가 넣어둔 data와 #todo-list에 렌더링하고, 나머지 두 개는 여러분이 추가하신 div + data를 활용해서 만들어주세요.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.