230511 로그 - KKYHH

[KKYHH]

✅  동기 (Synchronous) 비동기 (Asynchronous)

1️⃣ 동기 / 비동기 요청한 작업에 대해 완료 여부를 신경 써서 작업을 순차적으로 수행할지 아닌지에 대한 관점

Synchronous (동기) 의 Syn는 그리스어로 '함께'이란 뜻이고 chrono는 '시간'이라는 뜻이다

즉 Synchronous 작업 시간을 함께 맞춰서 실행 한다 라는 뜻
작업을 맞춰 실행한다는 말은 요청한 작업에 대해 완료 여부를 따져 순차대로 처리하는 것을 말한다

Asynchronous는 앞에 A 라는 접두사가 붙어 부정의 형태
그래서 동기와는 반대로 요청한 작업에 대해 완료 여부를 따지지 않기 때문에 자신의 다음 작업을 그대로 수행한다

2️⃣ 비동기의 성능 이점

보통 비동기 특징을 이용하여 성능과 연관지어 말한다

요청한 작업에 대하여 완료 여부를 신경쓰지 않고 그 다음 작업을 수행한다는것은 I/O (입출력 input output) 작업과 같은 느린 작업이 발생할 떄, 기다리지 않고 다른 작업을 처리하면서 동시에 처리하는 멀티 작업을 진행할 수 있기 때문이다 이는 전반적인 시스템 성능 향상에 도움을 준다

☀︎Ex) 웹 애플리케이션에서 데이터베이스 쿼리를 수행하는 작업이 있다고 가정할 때

• 작업을 동기적으로 수행하면, 데이터베이스에서 응답이 올 때까지 기다려야한다 그러면 웹 애플리케이션은 다른 요청을 처리하지 못하므로, 대규모 트래픽이 발생할 경우 성능이 저하될 수 있다
• 하지만 비동기 방식으로 데이터베이스 쿼리를 수행하면, 응답이 올 때까지 기다리는 동안에도 다른 요청을 동시에 처리 할 수 있게 된다
• 이렇게 비동기 방식을 사용하면, 대규모 트래픽에서도 안정적으로 동작할 수 있는 웹 애플리케이션을 만들 수 있다

✅ React onClick 이벤트

React 에서 onClick 이벤트는 일반적으로 JavaScript에서 사용되는 방식과 유사하게 사용된다
요소를 클릭할 때 실행될 함수를 정의한다

import React from 'react';

function MyComponent() {
  // Define a function that will be executed when the button is clicked
  function handleClick() {
    alert('Button Clicked!');
  }

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

export default MyComponent;

위 예시에서 MyComponent 라는 컴포넌트를 설정하고 컴포넌트 내에서 호출될 때 alert 표시를 하는 handleClick 이라는 함수를 정의한다

다음으로 버튼 엘리먼트의 onClick prop으로 할당된다
사용자가 버튼을 클릭하면 handleClick 기능이 실행된다

요약

• React에서 이벤트 이름은 camelCase로 작성되므로 일반 HTML / JavaScript 에서 사용되는 onclick 대신 onClick 이라는 점에 유의해야 한다
• React 에서 onClick 이벤트를 사용하면 상호 작용을 쉽게 처리하고 컴포넌트내의 해당 이벤트를 기반으로 작업을 트리거 할 수 있다

➡️ 회고

☀ 프로젝트 내용은 React와 SpringBoot로 웹사이트 만드는 프로젝트를 진행하고 있다
아직 백엔드 쪽은 이해가 되지 않아 그나마 바로 구현되어 확인할 수 있는 프론트로 먼저 진행을 해보았으며
화면을 만드는 HTML CSS 까지는 주먹구구식으로 넣어보고 지워보고 하며 크게 어려운 점 없이 나름 구현이 되어갔다

현재는 각 팀원들과 같이 구현한 페이지들과 서버와 데이터베이스를 연결해서 웹페이지의 구색을 갖추어 가는 중이다
남은 건 추가적인 기능들인데 현재 내 머릿속에 HTTP 통신이며 Java 와 SpringBoot의 작동도 사실 제대로 잡히지 않은 상태다
전까지는 무작정 코드들을 살펴보며 뜯고 붙이고를 하면서 했던 방식이 나름의 이해가 됐었지만

지금부터는 얼렁뚱땅 넘어가는 게 안될 것 같다
설사 팀원의 도움으로 진행된다 해도 정작 내 머릿속에는 흘러가는 물처럼 사라질게 뻔하다 스스로의 이해가 필요한 시점이다
모르는 건 꼭 알고 넘어가야 하는 성격상 더 그런 것 같다

지금은 미니 프로젝트로 단순 구현을 목표로 하지만 이 프로젝트 그대로 최종까지 가기로 결정했기에
미니 프로젝트 기간 안에 각 언어의 기능이며 문법이며 100%는 넣을 수 없더라도
서버와 클라이언트가 데이터를 서로 주고받고 띄우는 로직은 무조건 완벽하게 이해하도록 노력해야 할 것 같다

이번 주말에는 맨날 보고 듣지만 뭔지도 모르고 지나치는 용어들 및 문법들을 정리해 보고
월요일부터 남은 일주일 기간을 프로젝트 구조 이해에 힘을 써야겠다