1. 이벤트 처리하기 리액트에서 말하는 이벤트는 웹페이지에서 일어나는 사용자의 행위를 뜻한다. 페이지를 스크롤하는 기능, 버튼을 클릭하는 기능 등이 이벤트이며, 이번 파트에서는 리액트에서 어떻게 이벤트를 처리하는지 알아보겠다. 1-(1) 이벤트 핸들링과 이벤트 핸들러 이벤트 핸들링은 이벤트가 발생하면 특정 코드가 동작하도록 만드는 작업이다. 페이지의 버튼을 클릭하는 이벤트가 발생하면 "버튼을 클릭했다"라는 메시지 대화상자를 띄우는 코드는 다음과 같다.function handleOnClick(){ alert("버튼을 클릭했다") } return ( 클릭하세요 ) 이벤트 핸들러 함수 handleOnClick을 선언하면, 생성된 버튼을 클..

24-25/React.js 1 2024. 11. 15. 10:00

01. 스프링 부트란?스프링 프레임워크스프링 프레임워크→ 자바 기반의 애플리케이션 프레임워크→ 엔터프라이즈급 애플리케이션을 개발하기 위한 다양한 기능 제공        * 엔터프라이즈급 개발: 기업 환경을 대상으로 하는 개발스프링의 핵심 가치→ 개발자가 비즈니스 로직 구현에만 집중할 수 있게끔 하는 것  제어 역전(IoC) - Inversion of Control일반적인 개발: 객체를 생성하고 사용하는 일련의 작업을 개발자가 직접 제어하는 구조IoC 적용 환경: 객체의 관리를 컨테이너에 맡겨 제어권이 넘어간 구조                         → 의존성 주입, 관점 지향 프로그래밍 등이 가능해짐  의존성 주입(DI) - Dependency Injection제어 역전 방법 중 하나, 사용할 객..

24-25/Spring 3 2024. 11. 14. 21:55

1. 컴포넌트개발자들은 리액트를 컴포넌트 기반의 UI 라이브러리라고 소개한다. 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 마치 레고 조립하듯 하나로 합쳐 페이지를 구성하기 때문이다. 리액트의 핵심 개념 중 하나인 컴포넌트를 자세히 알아보겠다.  1-(1) 실습 환경 설정하기앞서 리액트 앱을 생성했던 방법과 동일하다.npx create-react-app . Documents 폴더 아래 chapter5 폴더를 만든 다음, 해당 폴더 안에서 터미널을 열어 위 명령어로 새로운 리액트 앱을 만든다. 그 후 사용하지 않을 파일과 코드를 삭제하면 실습 환경 설정이 완료된다.1-(2) 첫 컴포넌트 만들기리액트 컴포넌트는 주로 자바스크립트의 클래스나 함수를 이용해 만든다. 클래스로 컴포넌트..

24-25/React.js 1 2024. 11. 8. 13:36

🌟키워드: 파일 시스템 접근, 동/비동기 처리, fs메서드, 이벤트처리, 예외 처리, 1. 파일 시스템 접근 1-1. fs 모듈파일 시스템에 접근하는 모듈 →  파일 생성, 삭제, 읽거나 쓰기, 폴더 지우기 가능 const fs = require('fs');fs.readFile('./readme.txt', (err, data) => { if (err) { throw err; } console.log(data); console.log(data.toString());}); 파일을 읽은 후에 실행될 콜백 함수도 readFile 메서드의 인수로 같이 넣는다. 이 콜백 함수의 매개변수로 에러 또는 데이터를 받는다. 파일을 읽다가 무슨 문제가 생겼다면 에러가 발생할 것이고, 정상적으로 읽었다면 다음과..

24-25/Node.js 2 2024. 11. 8. 13:28

◇ Navigation MeshAI 캐릭터가 이동할 수 있는 경로를 지정하기 위해서 경로를 탐색하는 시스템이다.AI 캐릭터가 여러가지 장애물 등의 요소를 피하면서 목표 지점으로 이동하도록 할 때 이용된다.위와 같이 이런 필드 맵이 주어졌을 때, 여러가지 요소들을 고려하여 이동 경로를 지정한다. 0. Navigation 설정하기유니티의 업데이트로 인해 기존 window 탭에 있던 것이 사라졌다.유니티 window > asset store 에서 설치 후 import 해서 사용 가능하다. 1. Navigation ViewNavMesh를 따라 경로를 이동하는 AI 캐릭터를 제어하는데 사용하는 컴포넌트이다. ▷ Agent (navMeshComponent)name: agent type에 보여지는 이름radius: ..

24-25/Untiy 2024. 11. 8. 10:05

유니티 3D 기초 - Navigation MeshNavigation Mesh는 에이전트가 이동할 때 저장된 게임 월드 정보를 바탕으로 장애물을 피해 목표 위치까지 이동하는 경로 탐색을 제공합니다. 사용하는 방법은 다음과 같습니다.더보기게임 월드에 Navigation Mesh 설정이동 가능 여부 등의 경로 저장이동 에이전트에 NavMeshAgent 컴포넌트 추가Navigation Mesh 정보를 바탕으로 이동하는 오브젝트기타 게임 월드 정보 설정OffMeshLink: 절벽, 사다리 등 연결이 끊어진 지형 이동 설정NavMeshObstacle: 이동하는 장애물의 네비게이션 메시 정보 실시간 반영※ Navigation Mesh를 사용하기 위해 Package Manger에서 AI Navigation 설치 후 W..

24-25/Untiy 2024. 11. 8. 10:04

중력 적용 플레이어 오브젝트에 중력을 적용하려면 우선 중력값을 부여할 변수를 생성해야 한다. 이때 중력은 아래 방향으로 작용하므로 변수 값을 음수로 설정해야 한다.[SerializeField]private float gravity = -9.81f;+) SerializeField: 일반적으로 private으로 정의된 변수는 유니티 인스펙터에 보이지 않는다. 하지만 [SerializeField]를 사용하게 되면 인스펙터에서 설정할 수 있고, 개발자가 쉽게 변수의 값을 수정할 수 있게 된다.  private void Update() { if (characterController.isGrounded == false) { moveDirection.y += gravity * Time.d..

24-25/Untiy 2024. 11. 8. 10:03

Unity 2D 기초 1. 1인칭 카메라 제어 RotateTo 컴포넌트 카메라의 좌우, 위아래를 회전시키는 함수카메라가 좌/우로 회전하려면?  마우스의 x축 위치 변화 + 카메라 오브젝트의 y축 회전 (초록색 화살표)카메라가 위/아래로 회전하려면?  마우스의 y축 위치 변화 + 카메라 오브젝트의 x축 회전 (빨간색 화살표)이때, 카메라가 아래를 보는 것은 양수, 마우스를 아래로 이동하는 것은 음수인 것에 유의!!  중력이 적용된 코드private void Update(){ if ( characterController.isGround == false ) { moveDirection.y += gravity * Time.deltaTime; } characterControll..

24-25/Untiy 2024. 11. 8. 10:02

Navigation Mesh바닥, 장애물과 같은 게임 월드의 정보를 미리 저장해두고, 에이전트가 이동할 때 저장된 정보를 바탕으로 장애물을 피해 목표 위치까지 이동할 경로를 탐색함. 게임 월드에 네비게이션 매쉬를 설정하고, 이동 에이전트가 NavMeshAgent 컴포넌트를 기반으로 이동하도록 설정함또한 OffMeshLink, NavMeshObstacle 등의 컴포넌트도 활용함 1. 강의 링크에 있는 미리 만들어둔 GameWorld 패키지를 import2. GameWorld 프리팹을 씬에 배치함  3. Window - AI - Navigation (Obsolete)를 클릭해 Navigation View에서 Navigation Mesh를 설정함 4. Navigation View의 Object 탭을 누른 다음..

24-25/Untiy 2024. 11. 8. 10:01

3.4. 노드 내장 객체 알아보기GLOBAL전역 객체로 모든 파일에서 접근 가능하다.module.exports = () => global.message;const A = require("./globalA");globalThis.message = "hello";console.log(A());console디버깅을 위해 사용한다.개발 중 변수에 값이 잘 들어있는지 확인하거나 에러 내용을 표시하기 위해, 또 코드 실행 시간을 알기 위해 사용한다. 대표적으로 console.log()const string = "abc";const number = 1;const boolean = true;const obj = { outside: { inside: { key: "value", }, },};con..

24-25/Node.js 1 2024. 11. 8. 10:00

Animation Layer: 하나의 모델 오브젝트가 부위별로 서로 다른 애니메이션을 재생하도록 하는 것 ⇒ 여러 레이어를 통해 부위별로 다른 애니메이션 진행 or 같은 부위에서 비율에 따라 애니메이션 연산 혼합 진행 등으로 사용할 수 있음레이어가 여러개 존재하는 경우 : Layers 탬의 위에서부터 순서대로 레이어가 실행됨 톱니바퀴를 통해 각 레이어 설정 가능Weight : 가중치 설정으로 합성 정도를 설정Mask : 애니메이션을 적용할 캐릭터의 부위 순방향 운동학(FK) → 애니메이션이 관절에서 손끝 방향으로 진행역 운동학(IK) → 애니메이션이 손끝에서 시작해 그 움직임에 맞춰 다른 부위도 이동하며 진행Blending : 레이어가 적용되는 방식Override → 아래 레이어의 애니메이션을 대체함Ad..

24-25/Untiy 2024. 11. 8. 10:00

H2 데이터베이스 설치 https://www.h2database.com/html/main.html위 링크로 접속해서 All Platforms로 설치 DROP TABLE IF EXISTS member CASCADE;CREATE TABLE member ( id BIGINT GENERATED BY DEFAULT AS IDENTITY, name VARCHAR(255), PRIMARY KEY (id));   MEMBER 테이블이 만들어졌다.   SELECT 문으로도 확인이 가능하다.  INSERT문으로 데이터를 넣을 수 있다.    H2 Database 연결  의존성을 추가해준다. implementation 'org.springframework.boot:spring-boot-starter-jdbc..

24-25/Spring 2 2024. 11. 8. 10:00