10일차

벌써 2주차의 마지막이다. 이번 주 한 주는 웹을 구성하는HTML, CSS, Javascript에 대해 공부를 했다. 웹에 대한 기초지식은 어느 정도 알고 있었기 때문에 복습한 시간이었다. 그리고 강의를 들으면서 내가 모르고있던 부분이나 놓치고 있던 부분을 알게 된 시간들이었다.

git : https://github.com/leeyulgok/Day4/tree/main/%EC%88%98%EC%97%85

오늘자 gitHub 사이트이다. 공부한 내용을 올려두는 곳이다.

Javascript

이벤트

Javascript에서 이벤트는 웹 페이지에서 발생하는 사용자의 동작이나 브라우저의 특정 조건에 응답하는 것을 의미한다. 이벤트 종류에는 다양한 이벤트 들이 있는데 버튼을 클릭하면 이미지가 나온다던가, 마우스를 올리면 색이 변하는 등의 모든 것이 이벤트다.

코드 예시

<button id="myButton">Click me!</button>
<script>
  var button = document.getElementById("myButton");

  button.addEventListener("click", function () {
    button.innerText = "Clicked!";
  });
</script>

이 코드는 버튼을 눌렀을 때의 이벤트이다.

결과 이미지

버튼을 누르기 전에는 'Click me!'라는 버튼이 있었고, 버튼을 누르면 'Clicked!'라는 버튼으로 바뀌었다. 이를 가능하게 해주는 것이 가장 일반적인 Javascript의 역할이다.

배열

배열(Array)은 여러 개의 값을 하나의 변수에 저장하는 데이터 구조다. 대괄호([])를 사용하여 생성하며, 각 요소는 쉼표로 구분된다.

코드예시

let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]); // 1

이렇게 간단하게 사용할 수 있다. 그 밖에 배열의 길이를 알려주는 length나 배열에 값을 추가하는 push() 같은 메서드도 존재한다.

ES6

ES6는 JavaScript 개발자들에게 새로운 기능과 향상된 문법을 제공하여 코드 작성과 유지보수를 더욱 효율적으로 할 수 있게 해준다.

코드예시

const add = (a, b) => a + b; // 화살표 함수

let x = 10; // 변수
const y = 20; // 상수

이러한 것들이 가장 일반적인 예시로 ES6 문법으로 넘어오면서 사용되는 것들이다. 이렇게 됨으로써 이전보다 코드 작성에 여유로움을 줄 수 있다.

실습 - 계산기 만들기

Javascript를 활용해서 간단하게 계산기를 만드는 실습을 진행했다.

실습코드

1. html 코드

<form id="cal-form">
  <input type="text" name="num1" id="num1" />
  <select name="cal" id="cal">
    <option value="plus">+</option>
    <option value="minus">-</option>
    <option value="mul">x</option>
    <option value="di">/</option>
  </select>
  <input type="text" name="num2" id="num2" />
  <button type="submit">계산</button>
</form>
<p id="result"></p>

2. javascript 코드

const sum = (a, b) => a + b;

const minus = (a, b) => a - b;

const mul = (a, b) => a * b;

const di = (a, b) => a / b;

document
  .getElementById("cal-form")
  .addEventListener("submit", function (event) {
  
  event.preventDefault();

  let num1 = parseInt(document.getElementById("num1").value);
  let num2 = parseInt(document.getElementById("num2").value);
  let operator = document.getElementById("cal").value;

  let result;
  if (operator === "plus") {
    result = sum(num1, num2)
  } else if (operator === "minus") {
    result = minus(num1, num2);
  } else if (operator === "mul") {
    result = mul(num1, num2);
  } else if (operator === "di") {
    result = di(num1, num2);
  }

  document.getElementById("result").innerText = "결과: " + result;
});

굉장히 길어 보이지만 하나하나 놓고 보면 그렇게 어렵지는 않았다. 만들고 싶은 계산기였기 때문에 addEventListener() 라는 메서드를 추가해서 만들었다. 또한 계산을 누르면 계속 새로고침이 되는 버그가 있었는데 이는 preventDefault()를 사용해서 새로고침이 되는 걸 막았다. 그래서 보다 괜찮은 계산기를 만들었다.

결과

결과는 사진과 같다. 가운데에서 사칙연산을 받아 값들을 계산한다. 그래서 계산을 누르면 원하는 값이 나온다.

정리하기

한 주 동안 웹을 구성하는 요소들에 대해 공부를 했다. React를 공부하는데 있어 가장 중요한 언어인 Javascript는 계속 공부해야 될 내용이기에 스스로 더 공부가 필요하다.

확실한 기초학습 마무리하기.

10일차는 마무리하면서 확실하게 HTML이나 CSS, Javascript에 대한 기초적인 것들은 주말 동안에 짚고 넘어가려 한다. 그렇지 않으면 나중에 또 찾아보느라 시간을 까먹게 되기 때문이다. 그러니 오늘 배운 내용은 가장 기본적인 부분이기 때문에 잊지말고 내것으로 만들어 활용할 줄 아는 사람이 되자.

KPT

한 주를 돌이켜보며 나의 학습을 정리하고 앞으로를 기록해보자.

Keep

1. 내가 잘하고 있고 계속해서 해야 할 거는 기록하고 있는 것이다. 매일 같이 의자에 앉아 공부한 내용들을 기록하는 건 정말 쉽지 않은 일이다. 잘하고 있으니 더 열심히 해보자.

2. 과제를 열심히 제출하는 것이다. 과제라고 말을 하면 나에게 짐을 짊어진 것처럼 느껴지지만, 나를 위해, 내가 필요해서 하는 거라면 전혀 그렇게 느껴지지 않는다. 그러니 적당한 부담을 갖고서 해보자.

Problem

이번 주의 문제는 있었던 거 같지는 않다. 공지사항이나 안내사항을 제대로 살펴보자. 내가 잘 파악을 못하는 거 같기도 하다.

Try

HTML, CSS, Javascript를 활용해서 간단하게 홈페이지를 만들어보자. 대단한 페이지 보다는 간단하게 배운 내용들을 활용만 잘해보자.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프