전체 글

컴퓨터들은 네트워크 프로토콜로 통신을 한다. 그렇다면 여기서 말하는 프로토콜은 무엇일까? 간단히 말해서 프로토콜은 기계들이 효율적으로 데이터를 주고받을 수 있게 만들어진 규칙이다. 프로토콜에는 여러 종류가 있지만, 위 그림처럼 이메일을 주고 받을주고받을 때 사용하는 프로토콜이 있고 파일을 주고받을 때 사용하는 프로토콜이 있다. 프로토콜은 두가지 요소를 가지고 있다. 1. 물리 프로토콜 물리 프로토콜은 말 그대로 물리적 요소를 말한다. 네트워크를 연결하는 케이블이나 신호를 주고받는 장치들을 말한다. 2. 논리 프로토콜 논리 프로토콜은 데이터가 언제 어떻게 보내지는지를 관리하는 소프트웨어를 말한다. 프로토콜의 몇가지 예를 살펴보면, 웹에는 우리가 흔히 들어본 http/https 프로토콜을 사용한다. 이메일은..

위와 같은 화면이 있다. 성을 입력하는 필드에 무언가는 입력하면 Hi! 옆에 입력된 글자가 나오고 이름 필드에 입력 한 글자는 Hi! 와 성 옆에 나오게 만들어보자. 즉, 아래와 같은 결과물이 나와야 한다. 우선 처음으로 만든 소스 코드를 보자. import React, { useState } from "react"; function App() { const [fName, setFName] = useState(""); const [lName, setLName] = useState(""); function updateFName(event) { const firstName = event.target.value; setFName(firstName); } function updateLName(event) { c..

컴포넌트 안에 메서드를 만들어서 간단한 이벤트를 처리해보자! 위와 같은 화면이 있고 요구사항으로는 1. 입력 버튼에 마우스가 올라가면 색이 변해야 한다. 2. 마우스가 버튼에서 나가면 색은 다시 돌아와야 한다. 3. 이름을 입력하고 버튼을 누르면 "안녕하세요"가 "감사합니다"로 변해야 한다. 우선 1, 2번을 해결해보자! import React, { useState } from "react"; function App() { const [isMousedOver, setMouseOver] = useState(false); function handleMouseOver() { setMouseOver(true); } function handleMouseOut() { setMouseOver(false); } ret..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. MDND에서 가져온 구조 분해 할당에 대한 설명이다. 말 그대로 배열이나 객체를 분해해서 값을 가져올 수 있는 걸 말한다. const animals = [ { name: "cat", sound: "야옹" }, { name: "dog", sound: "왈왈" } ]; animals이라는 배열이 있다. 동물의 이름과 소리에 대한 정보를 가진 객체가 2개 있다. animals 배열을 분해해보자! import animals from "./data"; const [cat, dog] = animals; console.log(cat); console.log(dog); 우선 animals ..

import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( 0 + , document.getElementById("root") ); 오른쪽과 같은 UI가 있다. + 버튼을 누를 때마다 숫자가 하나씩 올라가게 만들어 보자! 왼쪽과 같은 html 코드로는 이 기능을 만들 수 없다. 증가되야하는 숫자를 변수로 만들고 +버튼이 눌릴 때마다 숫자를 올려주는 메서드를 만들면 될 거 같다! import React from "react"; import ReactDOM from "react-dom"; var count = 0; function increase() { count++; console.log("클릭!"); } ReactDOM.re..

이전 글(2022.03.30 - [Programming/React] - 컴포넌트로 반복 작업 줄이기!!)에서 반복적인 html을 리액트의 컴포넌트를 통해서 간편화 하는 방법을 알아보았다. 하지만 3개의 연락처를 보여주기 위해서 Contact 컴포넌트를 3번 만드는 작업도 역시나 반복적이다. 그러면 어쩐단 말이야! 이번에는 map()을 이용해서 반복되는 코드를 확 줄여보자! ReactDOM.render( 연락처 , document.getElementById("root") ); 위 코드는 지난번에 작성했던 3개의 연락처를 뿌려주는 코드이다. 같은 결과물을 만드는 거지만 컴포넌트와 map()를 이용하면 아래와 같이 상당히 간단하게 결과물을 만들 수 있다.!!!! import React from "react";..

오른쪽 그림과 같은 결과물을 하드 코딩으로 만들면 아래와 같다. import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( 연락처 선인장 010-1234-1234 b@cactus.com 강아지 010-8888-8888 jack@doggy.com 고양이 +918 372 574 gmail@kitty.com , document.getElementById("root") ); 현재 연락처에는 선인장, 강아지, 고양이만 있어서 다행이지만 연락처가 추가되면 지금처럼 하드코딩으로 하기에는 무리가 있다!! 이럴때 리액트의 특징 중 하나인 컴포넌트를 사용해서 더 손쉽게 연락처 결과물을 만들어 보자! 여기서 잠깐! 리액트의 컴포넌트란? CS에서..

Find() find() 메서드는 주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환합니다. 그런 요소가 없다면 undefined를 반환합니다. 이전 글(ES6 Map, Filter, Reduce 기능을 알아보자)에서 사용한 filter()는 조건에 부합하는 모든 요소들을 가져왔다. 그러면 fin()는 어떻게 다를까? MDN설명에서 주목해야할 부분은 첫 번째 요소의 값을 반환한다는 것이다. 글로 설명보다는 코드를 한번 봐보자잉 먼저 이전 글처럼 numbers 배열을 만들어 주었다. var numbers = [3, 56, 2, 48, 5]; 그리고 numbers에서 10보다 큰 요소를 find 메서드를 통해서 찾아보았다. const newNumbers = numbers.find(function(num)..