하루하루 발전하는 개발자와 블로그🙌🏻 하루하루 발전하는 개발자와 블로그🙌🏻

Study/JavaScript

• Json이란 무엇인가.

  Study/JavaScript 2020. 6. 1. 10:09

  HTTP 브라우저 위에서 동작하고 있는 웹사이트와 웹어플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지 정의한것이 바로 http(Hypertext Transfer Protocal)이다. 즉, 어떻게 하이퍼텍스트들을 주고 받을 수 있는지를 규약한 프로토콜의 하나이다. http는 클라이언트가 서버에게 request 요청할 수 있고, 서버는 요청한 것에 따라서 그에 맞는 reponse 응답을 클라이언트에게 보내준다. 또한 여기서 말하는 Hypertext는 하이퍼링크들만 얘기하는 것이 아니라 전반적으로 쓰여지고 있는 리소스들, 문서나 이미지 파일들 이런아이들을 다 포함해서 말한다. 이렇게 http를 이용해서 서버에게 데이터를 요청해서 받아올 수 있는 방법으로는 바로 AJAX가 있다. AJAX As..

  Read More
• The Render Function

  Study/JavaScript 2020. 5. 26. 15:25

  The Render Function A component class is like a factory that builds components. It builds these components by consulting a set of instructions, which you must provide. Let’s talk about these instructions! For starters, these instructions should take the form of a class declaration body. That means that they will be delimited by curly braces, like this: class ComponentFactory extends React.Compon..

  Read More
• primitive type and object

  Study/JavaScript 2020. 5. 23. 10:22

  primitive type은 value로 값이 저장되고, object는 object를 가리키는 레퍼런스가 저장된다. 그래서 const로 정의한다 하더라도, object안에 있는 name, age 등은 수정할 수 있음.

  Read More
• 웹페이지의 스크롤 막기

  Study/JavaScript 2020. 5. 21. 15:24

  간단한 미니 게임이 들어간 자기소개 웹페이지 구현중, 웹페이지에 간단한 게임을 넣는것 까지 완성이 되었는데, 문제가 발생했다. 웹페이지를 #id값에 따라 움직이게 했더니 긴 스크롤이 발생하여, 게임 안에서 애벌레가 사과를 먹기위해 방향키를 조절할때마다 위아래로 웹페이지 스크롤이 함께 움직였기 때문이다. 어떻게 웹페이지의 스크롤은 막고, 게임 캔버스에서 방향키는 조절할 수 있도록 할 수 있을까? 이를 해결하기 위해 구글링을 해보았다. css fixed? sticky ?? 모두 내가 원하는 방식이 아니다. 덕분에 fixed 만 알았는데 몰랐던 sticky 방법에 대해서도 알 수 있었지만... 😎 구글링을 하면서 스크롤 자체를 없애주기 위해서 css 에서 oeverflow: hidden; 방식을 사용할 수 있..

  Read More
• async vs defer

  Study/JavaScript 2020. 5. 20. 19:10

  // 노드 js와 api는 모두 console에 관련된 api를 가지고 있다. 그리고 이 둘의 api들의 interface가 둘다 동일하다. 1. console api console API는 웹 API중의 하나이다. API (Appication Programming Interface). 웹 APIs 는 자바스크립트 언어 자체에 포함된 아이가 아니라 브라우저가 제공하는 브라우저가 이해할 수 있는 함수들이다. 콘솔은 언어 자체에 포함되는 아이는 아니지만, 통상적으로 사용되는 아이여서 똑같은 콘솔apis를 이용해서 node JS 로도 출력할 수 있고 브라우저 상에서도 출력되는 걸 확인 할 수 있다. 2. Dev Tools 그리고 브라우저에서 딸려나오는 이런 개발 툴을 잘 사용하면 유용하게 활용할 수 있다. i..

  Read More
• snake game

  Study/JavaScript 2020. 5. 19. 14:05

  //html js코드는 아래와 같다. const cvs = document.getElementById("snake"); const ctx = cvs.getContext("2d"); //create the unit let box = 32; //load images const ground = new Image(); ground.src = "images/ground.png"; const foodImg = new Image(); foodImg.src = "images/food.png"; //load audio files const dead = new Audio(); const eat = new Audio(); dead.src = "audios/gameover.mp3"; eat.src = "audios/eat.m..

  Read More
• (게임) 구구단 구현

  Study/JavaScript 2020. 5. 18. 16:52

  코드를 작성하기 전에 먼저 생각해본다. 컴퓨터가 랜덤한 문제를 낸다. | 내가 답을 입력한다. | 2번 (no) (yes) 1번 while (true){ let numberOne = Math.floor(Math.random() * 9) + 1; let numberTwo = Math.floor(Math.random() * 9) + 1; let result = numberOne * numberTwo; let condition = true; while (condition){ let answer = prompt(`${String(numberOne)} 곱하기 ${String(numberTwo)} 는?`) if (result === Number(answer)){ alert('올 맞췄네😊'); condition = ..

  Read More
• 객체

  Study/JavaScript 2020. 5. 18. 16:13

  객체 함수(function) 배열 숫자 문자 불린 null undefined 객체 = { 속성(프로퍼티): 값, 속성(메서드: 함수 } 호출할때, 아래와 같이 작성. 객체.속성 객체['속성'] 이 두 호출 방법의 차이 : 윗 호출방법이 편하지만, 아래 호출방법을 사용해야할 때가 있다. Array 라는 객체가 있다. 이것은 브라우저에서 만들어준 배열을 담당하는 객체이다. 그러나 배열은 아니다. 이와 같이 Math 객체, Number, window객체 등등 있다. 앞 첫글자가 대문자 인 친구들은 '생성자'이다.

  Read More