1.  컴포넌트   [실습 환경 설정] 실습 환경 설정을 위해 새 폴더 chapter5를 만들고 터미널에서 npx create-react-app . 명령어로 새로운 리액트 앱을 만든다. 그리고 src 폴더에서 실습에 사용하지 않을 아래의 파일들을 제거한다. - src/App.test.js- src/logo.svg- src/reportWebVitals.js- src/setupTest.js Create React App이 자동으로 생성하지만 실습에는 사용하지 않는 코드를 모두 삭제한다.각각 index.js와 App.js의 파일이 아래와 같은 코드들만 남도록 불필요한 코드를 모두 삭제한다.import React from 'react';import ReactDOM from 'react-dom/client';im..

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

7. 스프링 DB 접근 기술H2 데이터베이스 설치 개발이나 테스트 용도로 가볍고 편리한 DB https://www.h2database.com/ ※ 참고: 윈도우 사용자인 경우 All Platforms이 아닌, Window Installer로 설치하여야 오류없이 실행되는 것으로 보임 ✅ 윈도우 사용자는 h2.bat로 실행하면 됨 ✅ ~/test.mv.db 파일 생성 확인✅ 이후부터는 jdbc:h2:tcp://localhost/~/test로 접근하도록 함파일 직접 접근이 아닌 TCP 소켓을 통해 접속해야 어플리케이션과 콘솔이 동시에 접근했을 때 오류가 발생하지 않음 스프링 통합 테스트스프링 컨테이너와 DB까지 연결한 통합 테스트아래 코드와 같은 버전이지만 DB까지 연결한 테스트 코드는 어떻게 변경 되는지 확..

24-25/Spring 3 2024. 11. 7. 19:16

4. 스프링 빈과 의존관계 컴포넌트 스캔과 자동 의존관계 설정- 각 화면을 붙이기 위해서는 MemberController를 생성해야 한다. (회원 컨트롤러가 회원 서비스와 회원 리포지토리를 사용할 수 있게 한다.)- MemberController -> MemberService를 통해서 회원가입, 데이터 조회를 할 수 있어야 한다.=> "서로 의존관계가 있다." 회원 컨트롤러에 의존관계 추가package hello.hellospring.controller;import hello.hellospring.service.MemberService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereo..

24-25/Spring 2 2024. 10. 11. 12:35

3장. Node.js[Node.js란?] Node.js는 웹 브라우저 이후 등장한 자바스크립트 런타임 이다.  자바스크립트 런타임이란 자바스크립트의 구동 환경이라는 뜻으로, 지금까지는 웹 브라우저가 유일한 자바스크립트 런타임이었으며, 그러므로 자바스크립트는 웹 브라우저 외에서는 사용할 수 없었다.그런데 Node.js라는 독립적인 자바스크립트 런타임이 등장하면서 어떤 환경에서도 자바스크립트를 실행할 수 있게 되었고, 활용 범위가 넓어짐과 함께 자바스크립트를 사용하는 개발자도 늘어나 2022년 기준으로 자바스크립트는 개발자가 가장 많이 사용하는 프로그래밍 언어가 되었다.  Node.js는 단순히 자바스크립트 런타임이며, 서버 개발 기술은 아니다.  리액트 활용을 위해 Node.js의 학습이 선행되어야 하는 ..

24-25/React.js 2 2024. 10. 11. 12:34

게임 오브젝트 충돌 처리 충돌을 위한 필수 조건 두 오브젝트 모두 Collider2D 컴포넌트를 가지고 있어야 함Collider2D는 오브젝트의 충돌 범위를 정의. 충돌이 일어나려면 모든 오브젝트가 이 컴포넌트를 가지고 있어야 함두 오브젝트 중 하나 이상은 Rigidbody2D 컴포넌트를 가져야 함Rigidbody2D는 Unity에서 물리 법칙을 적용하기 위한 컴포넌트. 오브젝트의 이동이나 충돌이 물리적으로 처리되려면 최소한 한 오브젝트가 이 컴포넌트를 포함해야 함   📍  기존 코드using UnityEngine;public class Movement2D : MonoBehaviour{ private float moveSpeed = 5.0f; // 이동 속도 private void Updat..

24-25/Untiy 2024. 10. 11. 12:33

Unity 2D 기초 1. 게임오브젝트 이동 함수transform.position 이 함수를 이용해서 오브젝트를 이동시킬 수 있다.  transform.position = transform.position + new Vector3(1, 0, 0) * 1;위의 코드는 새로운 위치 = 현재 위치 + (방향 * 속도)라는 것을 의미한다. 그러면 이 오브젝트는 1만큼의 속도로 x축에 이동하게 된다. 코드에 작성한 것과 같이 1의 속도를 가지고 x축 방향으로 1만큼만 움직인 뒤 더는 움직이지 않는다.  Time.deltaTime 이전 Update() 종료부터 다음 Update() 시작까지의 시간으로, 즉 업데이트 사이의 시간을 말한다. 사양이 좋을수록 Update()의 호출 횟수가 많아진다. 1분(60초)를 기준..

24-25/Untiy 2024. 10. 11. 12:33

게임오브젝트 물리와 충돌 Rigidbody2D: 오브젝트에 물리를 적용하고 중력을 받을 수 있도록 함중력 ⇒ 별다른 설정 없이 바로 적용, Gravity Scale 값 수정하여 중력 정함물리력에 의한 이동, 회전, 마찰력 등 다른 오브젝트와의 상호작용이 필요한 경우⇒ 오브젝트의 충돌 범위를 나타내는 Collider2D 컴포넌트가 필요함 Collider2D: 오브젝트의 충돌 범위를 나타내는 컴포넌트Box Collider2D : 사각형 범위의 충돌 범위Offset : 충돌 범위 중심점Size : 충돌 범위 크기+ 충돌 범위가 오브젝트보다 크거나 작게 설정 가능Circle Collider2D : 원 범위의 충돌 범위⇒ 중심점과 반지름만 있어도 충돌 계산 가능하여 연산 속도가 가장 빠름Offset : 충돌 범위..

24-25/Untiy 2024. 10. 11. 12:32

유니티 2D 기초게임 오브젝트 이동하기실제 게임을 진행할 때는 유니티 에디터나 인스펙터 뷰와 같은 화면을 볼 수 없기 때문에 스크립트의 코드를 이용해 트랜스폼 컴퍼넌트의 포지션 정보를 수정해야 합니다.유니티에서는 각각의 게임 오브젝트에 소속된 컴포넌트에 접근할 수 있고, 컴포넌트 내부 클래스의 변수 데이터를 사용하거나 수정하고, 사용자가 만든 함수를 호출할 수 있습니다.using UnityEngine;public class Movement2D : MonoBehaviour{ private void Awake() { transform.position = transform.position + new Vector3(1,0, 0)*1; // transform.position +..

24-25/Untiy 2024. 10. 11. 12:32

게임 오브젝트 Collider 유니티에는 Collider라는 것이 존재한다. 이는 오브젝트의 물리 충돌과 트리거를 처리할 때 유용하게 쓰일 수 있는 컴포넌트이다. collider는 물체끼리 충돌했을 때 상호작용할 수 있도록 오브젝트 모양을 정의해준다. 이때, 생성된 오브젝트와 크기가 일치해도, 그보다 더 크거나 작아도 상관없다. 오브젝트가 어떠한 역할을 맡았는가에 따라 사용자가 임의대로 collider 범위를 설정할 수 있다. 또한 유니티에서는 다양한 collider 모양을 지원한다. 또한 한 개의 오브젝트에 2개 이상의 콜라이더도 적용할 수 있다. 이번에는 여러 오브젝트를 하나로 묶는 Composite Collider 2D에 대해 알아보겠다. 다음과 같은 오브젝트가 scene에 존재할 때 왼쪽에 위치한..

24-25/Untiy 2024. 10. 11. 12:32

◇ Transformtransform  컴포넌트를 통해 오브젝트의 위치를 설정할 수 있다.아래와 같은 속성을 통해서 값을 지정할 수 있다.transform.position : 오브젝트의 위치정보 (Vector3 타입)transform.rotation : 오브젝트의 회전정보 (Quaternion 타입)이 외에도 scale  등 다양한 속성 지정 가능* Vector3 구조체게임의 2D/3D 공간에서의 이동, 회전, 크기를 표현하기 위해 (x,y) 또는 (x,y,z)의 좌표 체계를 나타내는 단위유니티에서 제작한 구조체1단위의 방향 두 점 사이의 거리, 각도 등의 연산을 위한 프로퍼티와 메소드 제공 ◇ Rigidbody2D2차원 공간에서 오브젝트의 물리와 중력을 담당하는 컴포넌트이다.오브젝트에 해당 컴포넌트를 ..

24-25/Untiy 2024. 10. 11. 12:31

🌟키워드: REPL, CommonJS 모듈, ECMAScript 모듈, 내장 객체, 내장 모듈1. REPL 노드에서 제공하는 콘솔로, 입력한 코드를 읽고(Read), 해석하고(Eval), 결과물을 반환하고(Print), 종료할 때까지 반복(Loop)한다는 의미이다. -REPL 사용방법→  터미널에 node를 입력한다, 프롬프트가 >로 바뀌었다면 입력 가능한 상태이다.-REPL 종료방법→  Ctrl+C를 두 번 누르거나, 창에 .exit를 입력한다.2. JS 파일 실행콘솔에 node [자바스크립트 파일 경로]→ 파일을 저장할 때는 .js로 저장하고, 실행시 확장자(.js)는 생략 가능하다. ※ REPL이 아니라 콘솔에서 입력해야 한다. ※ 파일이나 폴더의 이름에 /, \, |, , :, ", ?, * 등..

24-25/Node.js 2 2024. 10. 11. 12:28

🌟키워드: ES2015+문법, 화살표 함수, 프로미스(Promise), async/await, 널병합/옵셔널 체이닝 1. ES2015+ 문법- 2015년을 기점으로 매년 문법 변경 사항이 발표되었다.- ES2015 이상의 자바스크립트를 통틀어 ES2015+라 표현한다.- 실무에서는 대부분 최신 문법을 사용하므로 자바스크립트 기본 문법부터 익힐 필요가 있다. 1-1. const, let- var 변수는 const와 let으로 대체한다if (true) { var x = 3;}console.log(x); // 3if (true) { const y = 3;}console.log(y); // Uncaught ReferenceError: y is not defined ① var와 const, let의 차이va..

24-25/Node.js 2 2024. 10. 11. 12:22