정삼각형 모양의 별을 찍어보세요.

풀이

!codepen[eun-hye-kim/embed/wvXqWej?default-tab=html%2Cresult]

1 ~ 255 까지의 소수를 구하세요. ※ 소수: 약수가 1, 자기자신 밖에 없는 수 1은 소수가 아닙니다.

풀이

!codepen[eun-hye-kim/embed/dyKNmbd?default-tab=html%2Cresult]

2개의 정수를 입력 받아 사칙연산을 하는 함수를 작성해주세요.

풀이

!codepen[eun-hye-kim/embed/eYKzqGq?default-tab=html%2Cresult]

반복문을 사용하여 2단부터 9단까지 구구단을 출력하세요.

풀이

!codepen[eun-hye-kim/embed/oNyLrmg?default-tab=html%2Cresult]

반복문을 사용한 별찍기 5줄을 출력하세요.

출력

*
**
***
****
*****

풀이

!codepen[eun-hye-kim/embed/xxzOopB?default-tab=html%2Cresult]

JSX는 자바스크립트를 확장한 문법으로 HTML문법과 흡사한 문법을 사용하기 때문에 UI 작업시 보다 시각적으로 편리하게 작업을 할 수 있다.

!codepen[eun-hye-kim/embed/OJZPbON?default-tab=html%2Cresult]

babel이란 자바스크립트 컴파일러로 babel을 이용하면 ES6 이상의 최신 문법을 ES5 이하의 예전 문법 형태로 변경할 수 있다. 이를 통해 최신 문법들이 적용되지 않은 브라우저에서도 정상적으로 작동할 수 있게 만들어준다.

• 컴포넌트 첫글자는 대문자로 표기해야 한다.
• class는 className으로 표기해야 한다.
• for은 htmlFor로 표기해야 한다.

  funtion(){
      retutn()
  }

는 다음과 같다.

() => ()

[!] 함수는 다시 한 번 정리하기로...

state

React는 똑똑해서 리렌더링시 바뀐 부부만 업데이트한다. 동일한 HTML, UI를 다시 만들지 않는다.

useState란?

    const [값, 함수이름] = React.useState(값);

🤔

!codepen[eun-hye-kim/embed/PoeGYYm?default-tab=html%2Cresult]

🙂

!codepen[eun-hye-kim/embed/bGMwbYK?default-tab=html%2Cresult]

array 이름 지정하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

🤔

    const color = ['blue','green','white'];
    const blue = color[0];
    const green = color[1];
    const white = color[2];

🙂

    const color = ['blue','green','white'];
    const [blue, green, white] = color;

컴포넌트를 활용한 단위 변환기 만들기! !codepen[eun-hye-kim/embed/qBYaQWq?default-tab=html%2Cresult]

Props

아규먼트 처럼 부모 컴포넌트로 부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법이다.

button style 동일한 컴포넌트 만들기!

🤔

!codepen[eun-hye-kim/embed/eYrBGoa?default-tab=html%2Cresult]

🙂

!codepen[eun-hye-kim/embed/bGMBLGg?default-tab=html%2Cresult]

Memo

React.memo()를 사용하면 prop의 변경이 일어난 부분만 리렌더링 시킬 수 있다. !codepen[eun-hye-kim/embed/yLjoNmM?default-tab=html%2Cresult]

ES6

import ixport module

useEffect

코드의 실행 시점을 관리할 수 있는 선택권을 얻는 방어막 같은 존재, 디펜던시가 없을 경우 최초 1회 실행, 있을 경우 해당 값이 변할 경우 실행한다. 이 때 디펜던시는 여러개 입력이 가능하다.

• https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa

setTimeout / setInterval

• https://ko.javascript.info/settimeout-setinterval

Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법의 하나입니다. Ajax를 사용하면 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있습니다.

이때 서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있습니다.

• JSON
  • XML
  • HTML
  • 텍스트 파일 등

💡 Ajax의 장점

• 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있습니다.
• 웹 페이지가 로드된 후에 서버로 데이터 요청을 보낼 수 있습니다.
• 웹 페이지가 로드된 후에 서버로부터 데이터를 받을 수 있습니다.
• 백그라운드 영역에서 서버로 데이터를 보낼 수 있습니다.

💡 Ajax의 한계

• Ajax는 클라이언트가 서버에 데이터를 요청하는 클라이언트 풀링 방식을 사용하므로, 서버 푸시 방식의 실시간 서비스는 만들 수 없습니다.
• Ajax로는 바이너리 데이터를 보내거나 받을 수 없습니다.
• Ajax 스크립트가 포함된 서버가 아닌 다른 서버로 Ajax 요청을 보낼 수는 없습니다.
• 클라이언트의 PC로 Ajax 요청을 보낼 수는 없습니다.

💡 Ajax 프레임워크

• Prototype
• script.aculo.us
• dojo
• jQuery 🍎

👋 마치며

스터디 활동을 위해 기록하고 있습니다. 다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• http://www.tcpschool.com/ajax/ajax_intro_basic

Content-Type은 응답 내용의 타입이 무엇인지 반환하거나 POST를 할 때 Body에 넣는 값이 어떤 데이터 타입인지를 명시하는 등 컨텐츠 유형이 실제로 무엇인지를 나타내는 역할을 합니다. 이 값은 표준 mime-type 중 하나에 속합니다.

💡 Content-Type 문법

Content-Type: Type>; charset등 옵션;

Content-Type: text/html; charset=utf-8;
Content-Type: multipart/form-data; boundary=something;

💡 Content-Type 종류

👋 마치며

스터디 활동을 위해 기록하고 있습니다. 다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• https://juyoung-1008.tistory.com/4
• https://m.blog.naver.com/dsz08082/222482792610

JSON은 사람이 읽을 수 있는 텍스트 기반의 데이터 교환 표준입니다.

• JSON은 자바스크립트를 확장하여 만들어졌습니다.
• JSON은 자바스크립트 객체 표기법을 따릅니다.
• JSON은 사람과 기계가 모두 읽기 편하도록 고안되었습니다.
• JSON은 프로그래밍 언어와 운영체제에 독립적입니다.

💡 JSON 문법

1. 리터럴(literal)

리터럴(literal)은 변수와 다르게 해석되는 값 그 자체를 의미합니다.

12     // 숫자 리터럴
"JSON" // 문자열 리터럴
true   // 불리언 리터럴

2. 객체(object)

객체란 이름(key)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다.

{
  "employees": [
    {
      "name": "Surim",
      "lastName": "Son"
    },
    {
      "name": "Someone",
      "lastName": "Huh"
    },
    {
      "name": "Someone else",
      "lastName": "Kim"
    } 
  ]
}

• JSON 형식은 자바스크립트 객체와 마찬가지로 key/value가 존재할 수 있으며 key값이나 문자열은 항상 쌍따옴표를 이용하여 표기해야합니다.
• 객체, 배열 등의 표기를 사용할 수 있습니다.
• 일반 자바스크립트의 객체처럼 원하는 만큼 중첩시켜서 사용할 수도 있습니다.
• JSON형식에서는 null, number, string, array, object, boolean을 사용할 수 있습니다.

👋 마치며

스터디 활동을 위해 기록하고 있습니다. 다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• http://www.tcpschool.com/json/json_datatype_string
• https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
• https://jsonapi.org/

• 자원(Resource): URI
• 행위(Verb): HTTP Method 🍎
• 표현(Representations)

💡 HTTP Method란?

클라이언트가 웹 서버에게 사용자 요청의 목적이나 종류를 알리는 수단

⭐️ 주요 메소드 5가지

• GET : 리소스 조회
• POST : 요청 데이터 처리, 주로 데이터 등록에 사용
• PUT : 리소스를 대체, 해당 리소스가 없으면 생성
• PATCH : 리소스를 일부만 변경
• DELETE : 리소스 삭제

기타 메소드 4가지

• HEAD: GET과 동일하지만 메시지 부분을 제외하고, 상태 줄과 헤더만 반환
• OPTIONS: 대상 리소스에 대한 통신 가능 옵션을 설명(주로 CORS에서 사용)
• CONNECT: 대상 자원으로 식별되는 서버에 대한 터널을 설정
• TRACE: 대상 리소스에 대한 경로를 따라 메시지 루프백 테스트를 수행

1. GET

GET 메소드는 주로 데이터를 읽거나(Read) 검색(Retrieve)할 때에 사용되는 메소드이다. 만약에 GET요청이 성공적으로 이루어진다면 XML이나 JSON과 함께 200 (Ok) HTTP 응답 코드를 리턴한다. 에러가 발생하면 주로 404 (Not found) 에러나 400 (Bad request) 에러가 발생한다.

👉 규칙

• HTTP 명세에 의하면 GET 요청은 오로지 데이터를 읽을 때만 사용되고 수정할 때는 사용하지 않는다.
• GET 요청은 idempotent 하다. 같은 요청을 여러 번 하더라도 변함없이 항상 같은 응답을 받을 수 있다.
• 데이터를 변경하는 연산에 사용하면 안된다.

ex)

GET /user/1

• 데이터를 조회하는 것이기 때문에 요청시에 Body 값과 Content-Type 가 비워져있다. 조회할 데이터에 대한 정보는 URL을 통해서 파라미터를 받고 있는 모습을 볼 수 있다.
• 데이터 조회에 성공한다면 Body 값에 데이터 값을 저장하여 성공 응답을 보낸다.
• GET은 캐싱이 가능하여 같은 데이터를 한번 더 조회할 경우에 저장한 값을 사용하여 조회 속도가 빨라진다.

2. POST

POST 메소드는 주로 새로운 리소스를 생성(create)할 때 사용된다. 조금 더 구체적으로 POST는 하위 리소스(부모 리소스의 하위 리소스)들을 생성하는데 사용된다. 성공적으로 creation을 완료하면 201 (Created) HTTP 응답을 반환한다.

👉 규칙

• POST 요청은 idempotent 하지 않다. 같은 POST 요청을 반복해서 했을 때 항상 같은 결과물이 나오는 것을 보장하지 않는다
• 두 개의 같은 POST 요청을 보내면 같은 정보를 담은 두 개의 다른 resource를 반환할 가능성이 높다.

ex)

POST /user
body : {date : "example"}
Content-Type : "application/json"

• 데이터를 생성하는 것이기 때문에 요청시에 Body 값과 Content-Type 값을 작성해야한다. 해당 예시는 JSON을 통해서 작성된 예시이다.
• URL을 통해서 데이터를 받지 않고, Body 값을 통해서 받는다.
• 데이터 조회에 성공한다면 Body 값에 저장한 데이터 값을 저장하여 성공 응답을 보낸다.

3. PUT

PUT는 리소스를 생성 / 업데이트하기 위해 서버로 데이터를 보내는 데 사용됩니다.

👉 규칙

• PUT 요청은 idempotent 합니다.
• 동일한 PUT 요청을 여러 번 호출하면 항상 동일한 결과가 생성됩니다.

ex)

PUT /user/1
body : {date : "update example"}
Content-Type : "application/json"

• 데이터를 수정하는 것이기 때문에 요청시에 Body 값과 Content-Type 값을 작성해야한다. 해당 예시는 JSON을 통해서 작성된 예시이다.
• URL을 통해서 어떠한 데이터를 수정할지 파라미터를 받는다. 그리고 수정할 데이터 값을 Body 값을 통해서 받는다.
• 데이터 조회에 성공한다면 Body 값에 저장한 데이터 값을 저장하여 성공 응답을 보낸다.

4. DELETE

DELETE 메서드는 지정된 리소스를 삭제합니다.

ex)

DELETE /user/1

• 데이터를 삭제하는 것이기 때문에 요청시에 Body 값과 Content-Type 값이 비워져있다.
• URL을 통해서 어떠한 데이터를 삭제할지 파라미터를 받는다.
• 데이터 삭제에 성공한다면 Body 값 없이 성공 응답만 보내게 된다.

💡 멱등성(Idempotence)이란?

멱등성이란 여러번 수행해도 결과가 같음을 의미한다. 즉, 호출로 인하여 데이터가 변형이 되지 않는다는 것을 의미한다.

👋 마치며

스터디 활동을 위해 기록하고 있습니다. 다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• https://velog.io/@yh20studio/CS-Http-Method-%EB%9E%80-GET-POST-PUT-DELETE#-rest
• https://sharplee7.tistory.com/49

MVC(model–view–controller)는 소프트웨어 공학에서 사용되는 소프트웨어 디자인 패턴입니다. 이 패턴을 성공적으로 사용하면, 사용자 인터페이스로부터 비즈니스 로직을 분리하여 애플리케이션의 시각적 요소나 그 이면에서 실행되는 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있습니다. MVC에서 모델은 애플리케이션의 정보(데이터)를 나타내며, 뷰는 텍스트, 체크박스 항목 등과 같은 사용자 인터페이스 요소를 나타내고, 컨트롤러는 데이터와 비즈니스 로직 사이의 상호동작을 관리합니다.

1. 모델 (Model)

• DATA, 정보들의 가공을 책임지는 컴포넌트를 의미합니다.
• 모델(Model)은 어플리케이션의 정보, 데이터를 나타냅니다. 데이타베이스, 처음의 정의하는 상수, 초기화 값, 변수 등을 뜻합니다. 비즈니스 로직을 처리한 후 모델의 변경사항을 컨트롤러와 뷰에 전달합니다.

👉 규칙

• 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 합니다.
• 뷰나 컨트롤러에 대해서 어떤 정보도 알지 말아야 합니다.
• 변경이 일어나면, 변경 통지에 대한 처리 방법을 구현해야만 합니다.

2. 뷰 (View)

• 사용자에게 보여지는 부분, 즉 유저 인터페이스(User interface)를 의미합니다.
• MVC 패턴은 여러 개의 뷰(View)가 존재할 수 있으며, 모델에게 질의하여 데이터를 전달받습니다. 뷰는 받은 데이터를 화면에 표시해주는 역할을 가지고 있으며, 모델에게 전달받은 데이터를 별도로 저장하지 않아야 합니다. 사용자가 화면에 표시된 내용을 변경하게 되면 모델에게 전달하여 모델을 변경해야 합니다.

👉 규칙

• 모델이 가지고 있는 정보를 따로 저장해서는 안됩니다.
• 모델이나 컨트롤러와 같이 다른 구성요소들을 몰라야 됩니다.
• 변경이 일어나면 변경통지에 대한 처리방법을 구현해야만 합니다.

3. 컨트롤러 (Controller)

• 모델(Model)과 뷰(View) 사이를 이어주는 브릿지(Bridge) 역할을 의미합니다.
• 모델이나 뷰는 서로의 존재를 모르고 있습니다. 변경 사항을 외부로 알리고 수신하는 방법만 있습니다. 컨트롤러(Controller)는 이를 중재하기 위해 모델과 뷰에 대해 알고 있어야 합니다. 모델이나 뷰로부터 변경 내용을 통지 받으면 이를 각 구성 요소에게 통지해야 합니다. 사용자가 어플리케이션을 조작하여 발생하는 변경 이벤트들을 처리하는 역할을 수행합니다.

👉 규칙

• 모델이나 뷰에 대해서 알고 있어야 합니다.
• 모델이나 뷰의 변경을 모니터링 해야 합니다.

💡 MVC 패턴의 장점

• MVC 패턴을 가진 시스템의 각 컴포넌트는 자신이 맡은 역할만 수행한 후 다른 컴포넌트로 결과만 넘겨주면 되기 때문에 시스템 결합도를 낮출 수 있습니다.
• 유지보수 시에도 특정 컴포넌트만 수정하면 되기 때문에 보다 쉽게 시스템 변경이 가능합니다.
• 기능별로 코드를 분리하여 하나의 파일에 코드가 모이는 것을 방지하여 코드의 가독성,확장성,재사용성이 증가합니다.

💡 MVC 패턴의 한계

복잡한 대규모 프로그램의 경우 다수의 뷰와 모델이 컨트롤러를 통해 연결되기 때문에 컨트롤러가 불필요하게 커지는 현상이 발생합니다. 복잡한 화면을 구성하는 경우에도 동일한 현상이 발생하는데 이를 'Massive-View-Controller' 라고 합니다.

💡 그 외 다양한 디자인 패턴

• MVP 패턴
• MVVM 패턴
• Flux
• Redux
• RxMVVM

👋 마치며

스터디 활동을 위해 기록하고 있습니다. 다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• https://ko.wikipedia.org/wiki/%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%EC%BB%A8%ED%8A%B8%EB%A1%A4%EB%9F%AC
• https://junhyunny.github.io/information/design-pattern/mvc-pattern/

{"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."}

• 오탈자에 주의하자....
  ## 완성! https://api.openweathermap.org/data/2.5/weather?lat=37.3900688&lon=127.1140152&appid=2834387742b25d5393a21e88fee8246a
  !codepen[eun-hye-kim/embed/xxpPvzQ?default-tab=html%2Cresult]
  ## API_KEY 보안이슈 > 참고 https://devlog-wjdrbs96.tistory.com/237

parentNode가 ParentElement보다 상위 개념이다.

1. parentNode

• Node는 아무 DOM 객체가 될 수 있다.
• ex) 내장 DOM 엘리먼트(document, document.body...)
• 부모 Node를 반환하고 부모가 없는 경우 null을 반환한다.
  ### 2. ParentElement
• Element는 Node의 특정 Type중 하나이다.
• ex) 텍스트 노드, 주석 노드 등(HTML, id, class...)
• 부모가 없거나 DOM 요소가 아닌경우 경우 null을 반환한다.
  

💡 stringify와 parse

1. JSON.stringify()

• string로 변경하기
  ### 2. JSON.parse()
• array로 변경하기
  

💡 return과 break

1. return

• return을 만나면 실행을 중단하고 함수를 빠져 나온다.

    function counter() {
      for (var count = 1; ; count++) {  // 무한 반복
        console.log(count + "A"); // 5까지
          if (count === 5) {
            return;
          }
          console.log(count + "B");  // 4까지
        }
      console.log(count + "C");  // 절대 나타나지 않음
    }
  
    counter();
  
    // 출력:
    // 1A
    // 1B
    // 2A
    // 2B
    // 3A
    // 3B
    // 4A
    // 4B
    // 5A

  
  

2. break

• break을 만나면 실행을 중단하고 구문을 빠져나와 다음 구문으로 프로그램 제어를 넘긴다.

    outer_block: {
      inner_block: {
        console.log('1'); // 1
        console.log(':-('); // :-(
        }
      console.log('2'); // 2
    }
    // 출력
    // 1
    // :-(
    // 2
  
    outer_block: {
      inner_block: {
        console.log('1'); // 1
        break inner_block; // inner_block를 빠져나옴
        console.log(':-('); // 건너뜀
      }
      console.log('2'); // 2
    }
  
    // 출력
    // 1
    // 2
  
    outer_block: {
      inner_block: {
        console.log('1'); // 1
        break outer_block; // inner_block과 outer_block 둘다 빠져나옴
        console.log(':-('); // 건너뜀
      }
      console.log('2'); // 건너뜀
    }
    // 출력
    // 1

  
  

💡 forEach

• array의 요소들을 반복하여 작업 수행
  

💡 filter

• boolean을 사용하여 값 반환
• array의 item을 유지하고 싶은 경우 true를 return
  

💡 parseInt

• 숫자로 변경하여 값 반환하기
  

💡 ToDo List 만들기

!codepen[eun-hye-kim/embed/ExobMLm?default-tab=html%2Cresult]

1. =>

fonction sayHello(item) {
    console.log("this is the turn of", item);
}

(item) => console.log("this is the turn of", item);

• 위/아래 모두 동일한 결과값을 반환함
  

👋 마치며

스터디 활동을 위해 기록하고 있습니다. 다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• https://nomadcoders.co/
• https://dev-dain.tistory.com/128
• https://hyejin-dev.tistory.com/12
• https://developer.mozilla

정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 뜻한다.

<form></form>

💡 Input이란?

사용자로부터 입력을 받을 수 있는 입력 필드를 뜻한다.

1. Type

!codepen[eun-hye-kim/embed/xxpEaNQ?default-tab=html%2Cresult]

• text: type속성의 기본값, 한 줄로 된 텍스트 필드
• pssword: 비밀번호를 입력할 수 있는 입력 필드
• file: 파일을 업로드 할 수 있는 입력 필드
• radio: 라디오 버튼을 정의
• checkbox: 체크 박스를 정의, 다중 선택시 사용
• button: 클릭 가능한 버튼을 정의, value로 텍스트 입력 가능
• submit: 제출 버튼을 정의, value로 텍스트 입력 가능
• reset: 리셋 버튼을 정의, value로 텍스트 입력 가능

참고 http://www.tcpschool.com/html-tag-attrs/input-type

2. 속성

!codepen[eun-hye-kim/embed/wvpzNed?default-tab=html%2Cresult]

• placeholder: 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말
• required: 서버로 제출되기 전 반드시 채워져 있어야 하는 입력 필드를 검사, 블리언으로 구분
• maxlength: 입력 가능한 최대 길이를 제한
  

💡 login 만들기

!codepen[eun-hye-kim/embed/dyJXjrj?default-tab=html%2Cresult]

1. preventDefault

function onLoginSubmit(event) {
  event.preventDefault();
}

• addEventListener의 함수에서 첫 arument는 지금 막 벌어진 event들에 대한 정보를 받아 저장하고, object 형식으로 볼 수 있다.
• form을 submit하면 브라우저는 기본적으로 페이지를 새로고침하게 되어 있는데 이때 preventDefault 함수를 사용하여 기본 동작을 실행하지 못하도록 막는다.
• a태그 click시 페이지 이동을 막을때도 사용한다.

2. localStorage

• 브라우저 상에 데이터를 저장할 수 있는 기술

  localStorage.setItem("Key","Value"); //저장
  localStorage.getItem("Key"); //불러오기
  localStorage.removeItem("Key"); //삭제

  
  

👋 마치며

스터디 활동을 위해 기록하고 있습니다. 다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• https://nomadcoders.co/
• https://developer.mozilla.org/ko/docs/Web/HTML/Element/form
• http://www.tcpschool.com/
• https://www.daleseo.com/js-web-storage/

수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체

1. Math.round()

• 주어진 숫자를 반올림한 수와 가장 가까운 정수 값을 반환합니다. -> 반올림

    console.log(Math.round(0.9)); //result: 1
    console.log(Math.round(0.95)); //result: 1
    console.log(Math.round(1.05)); //result: 1

  
  

2. Math.ceil()

• 주어진 숫자보다 크거나 같은 숫자 중 가장 적은 정수 값을 반환합니다. -> 올림

    console.log(Math.ceil(1)); //result: 1
    console.log(Math.ceil(1.9)); //result: 2
    console.log(Math.ceil(1.95)); //result: 2
    console.log(Math.ceil(1.05)); //result: 2

  
  

3. Math.floor()

• 주어진 숫자와 같거나 작은 숫자 중 가장 큰 정수를 반환합니다. -> 내림

    console.log(Math.floor(4)); //result: 4
    console.log(Math.floor(4.9)); //result: 4
    console.log(Math.floor(4.95)); //result: 4
    console.log(Math.floor(4.05)); //result: 4

  
  

4. Math.random()

• 0~1(1은 미포함) 구간에서 부동소수점의 난수를 생성합니다.

!codepen[eun-hye-kim/embed/RwxrKMz?default-tab=html%2Cresult]

👉 Array.length

• 배열의 길이를 체크하여 정수로 반환합니다.

!codepen[eun-hye-kim/embed/rNpxjgK?default-tab=html%2Cresult]

💡 랜덤으로 명언 호출하기

!codepen[eun-hye-kim/embed/mdpVWXR?default-tab=html%2Cresult]

💡 랜덤으로 이미지 호출하기

//배열에 이미지 파일명 담기
const images = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg", "bg5.jpg"];

//랜덤 수 곱하기 배열의 수 = 0.XXXXX * 5
//0과 5사이의 숫자를 랜덤으로 추출하고 그 수를 내림하여 정수로 반환 (5 이상의 수는 나오지 않음)
//배열 [0 ,1, 2, 3, 4]중 랜덤으로 나온 수의 값 담기
const chosenImage = images[Math.floor(Math.random() * images.length)];

//img태그 생성
const bgImage = document.createElement("img");

//생성된 img태그 src속성에 img경로 담기
bgImage.src = `img/${chosenImage}`;

//body안에 img태그 추가하기
document.body.appendChild(bgImage);

👋 마치며

스터디 활동을 위해 기록하고 있습니다. 다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• https://nomadcoders.co/
• https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

특정 주기마다 반복하여 호출, 바로 실행되지 않고 n초 후 첫 시작이 되고 계속 n초마다 반복한다.

1. 구문

    setInterval(실행함수, 시간);

2. 실행하기

!codepen[eun-hye-kim/embed/qBpEPZo?default-tab=html%2Cresult]

💡 setTimeout이란?

일정 시간 지연후 호출, 일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행한다.

1. 구문

    setTimeout(실행함수, 시간);

2. 실행하기

!codepen[eun-hye-kim/embed/xxpbPYv?default-tab=html%2Cresult]

💡 Date란?

Date 객체는 연월일, 시분초의 정보와 함께 밀리초(millisecond)의 정보도 함께 제공해준다.

1. 연, 월, 일, 요일, 시, 분, 초 불러오기

!codepen[eun-hye-kim/embed/Exoaoxa?default-tab=html%2Cresult]

월은 0부터 1월 / 1은 2월... 요일은 0부터 일요일 / 1은 월요일 / 2는 화요일...

2. 시계만들기

!codepen[eun-hye-kim/embed/oNpgEZP?default-tab=html%2Cresult]

String: 문자로 변환하기 padStart: 문자열이 n자 미만일 경우 원하는 문자로 채워서 해당 길이만큼 만들기 (``)백틱: ES6 문자열 사용

👋 마치며

스터디 활동을 위해 기록하고 있습니다. 다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• https://nomadcoders.co/
• https://developer.mozilla.org/ko/docs/Web/API/setTimeout
• https://wonyoung2257.tistory.com/14

• Loop의 인덱스는 특별한 상황이 아닐 시 0으로 시작하도록 습관을 들여주세요. 배열(Array)의 인덱스는 항상 0부터 시작하므로 0부터 시작하는 습관이 유리한 경우가 많습니다.

• 변수명은 직관적으로 알아 볼 수 있게 작성하는 것이 소스의 유지보수 및 코드 가독성에 좋습니다. a, b 같은 의미없는 변수명 보다는 count(cnt), sum, total 등의 변수명으로 작성하는 습관을 들여주세요.

• 인덱스 변수 (작성하신 소스에서는 변수명 ‘a’)는 for loop 안에서 생성되도록 해주세요. 다른 로직에서 변수명의 충돌로 인해 지역변수가 간섭되는 케이스가 발생 될 수도 있습니다.

let sum = 0; //합한 값 담기

//1부터 1000이하의 자연수까지 1씩 증감 하면서 반복문 수행
for (num = 0; num <= 999; num++) {

  //3의 배수이거나 5의 배수인 경우 b에 합산하고 다시 반복문 수행
  if (num % 3 == 0 || num % 5 == 0) {
    sum += num;
  }
}

//result
console.log(sum);

참고

• While Loop

function whileSum() {
    let sum = 0;
    let num = 1;
    while( num < 1000 ) {
     if( num % 3 == 0 || num % 5 == 0 ) sum += num;
     num++;
    }
    return sum;
}

console.log( "sum", whileSum() );

• For

function forSum() {
    let sum = 0;
    for( let num = 0; num < 1000; num ++ ) {
        if( num % 3 == 0 || num % 5 == 0 ) sum += num;
    }
    return sum;
}

console.log( "sum", forSum() );

어떤 행위를 실행하는 것으로 이를 통해 사용자와 웹페이지가 상호 작용할 수 있다. 이벤트 핸들러를 통하여 이벤트가 발생시 원하는 함수에 연결하여 실행 시킬 수 있다.

1. Listen하고 싶은 Event 찾기

• google에 element html element mdn 검색, Web APIs라는 문장이 포함된글 찾기

• element를 console.dir로 출력해서 on 이라고 적혀있는걸 사용하기

2. Click

!codepen[eun-hye-kim/embed/LYOgYxR?default-tab=html%2Cresult]

🚨 !참고

• 특정 이벤트 발생시 함수 실행하기

    title.addEventListener("click",handleTitleClick);

• 함수 실행하기

    handleTitleClick();

  
  

3. Mouseenter & Mouseleave

!codepen[eun-hye-kim/embed/mdqzdRB?default-tab=html%2Cresult]

4. resize & copy

!codepen[eun-hye-kim/embed/QWOZbwp?default-tab=html%2Cresult]

🚨 !참고 document에서 body,head,title은 언제든 document.body로 호출 가능하지만 div나 h1 등 은 querySelector나 getElementById를 사용해야 한다.

4. if else 사용하기

!codepen[eun-hye-kim/embed/NWwOqyv?default-tab=html%2Cresult]

5. className 사용하기

!codepen[eun-hye-kim/embed/oNoaXjO?default-tab=html%2Cresult]

🚨 ! 참고 string이 반복되면 상수로 만들어 주는게 좋다. console에서 오탈자에 대해 친절하게 설명해주기 때문이다.

5. classList 사용하기

!codepen[eun-hye-kim/embed/dyZgoLG?default-tab=html%2Cresult]

6. toggle 사용하기

!codepen[eun-hye-kim/embed/RwjeWbK?default-tab=html%2Cresult] 🚨 ! 참고 5번과 6번은 같은 기능을 수행하고 있는데, toggle을 사용하여 좀 더 스마트한 코드를 만들 수 있다.

👋 마치며

스터디 활동을 위해 기록하고 있습니다. 다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• https://nomadcoders.co/
• https://developer.mozilla.org/ko/docs/Web/Events

웹 페이지 그 자체를 의미하며, document를 통해 웹 페이지에 존재하는 다양한 HTML 요소에 접근할 수 있다.

1. console.dir(document);

• 매개변수로 전달된 객체의 속성을 출력
• 요소를 JSON과 같은 트리 구조로 출력
  

2. document.getElementById();

• 특정 id를 가진 하나의 element를 반환
• id에 접근해서 값 바꾸기
  

3. document.getElementsByClassName();

• 특정 class를 가진 element를 배열로 반환

    <h1 class="title">hello</h1>
    <h1 class="title">hello</h1>
    <h1 class="title">hello</h1>
    <h1 class="title">hello</h1>

    //변수명 title에 title class를 가진 요소의 값 담기
    const title = document.getElementsByClassName("title");
    console.log(title);
  
    //console 결과
    HTMLCollection(4) [h1.hello, h1.hello, h1.hello, h1.hello]
    0: h1.hello
    1: h1.hello
    2: h1.hello
    3: h1.hello

  
  

4. document.getElementsByTagName();

• 특정 Tag를 가진 element를 배열로 반환
  

5. document.querySelector();✨👍

• 첫번째 element 하나만 반환
• . # :first-child CSS선택자와 동일한 방식으로 사용
  

6. document.querySelectorAll();

• element를 배열로 반환
• . # :first-child CSS선택자와 동일한 방식으로 사용
  

👋 마치며

스터디 활동을 위해 기록하고 있습니다. 다르거나 추가해야할 내용이 있다면 언제든지 코멘트 남겨주세요 :)

✉ dmsp1234@gmail.com

📍 참고

• https://nomadcoders.co/
• https://velog.io/@mook9288/javascript-console-%EA%B0%9D%EC%B2%B4