FE

CRA(Create React App) vs ViteReact 프로젝트를 시작할 때 쓰이는 두 가지 방식 Create React App(CRA)과 Vite을 비교할 것이다.0. 프로젝트 생성 방식 (공통: 패키지 매니저는 Yarn 사용)🧱 CRA로 생성yarn create react-app cra-react⚡ Vite로 생성yarn create vite vite-react --template react1. 프로젝트 구조 비교🧱 CRA로 생성한 구조cra-react/├── node_modules/├── public/│ ├── index.html│ └── favicon.ico ...├── src/│ ├── App.js│ ├── index.js│ ├── reportWebVitals.js│..

캐릭터가 몬스터를 때렸을 때 몬스터의 hp를 어디서 깎는지 캐릭터 객체와 몬스터 객체 각각에서는 알 수 없다. 이를 위해 singleton 패턴을 이용해 단 하나의 GameManager와 같은 객체를 생성한다. 싱글톤 패턴의 개념과 이번 주차에서 학습한 전체 내용은 아래 포스트에서 확인할 수 있다.2025.04.25 - [Study] - [ SJCE 스터디 / 3주차 ] Unity 씬 전환, DontDestroy, 물리엔진, 싱글톤 [ SJCE 스터디 / 3주차 ] Unity 씬 전환, DontDestroy, 싱글톤2024.09.21(토): 원래 3주차는 14일로 예정되어 있었으나, 학교 정전의 이슈로 일주일 미뤄서 진행됐다. 또한, 서버 파트 선배님께서도 일정이 있으셔서 참석하지 못하셔서 유니티 수업으..

캐릭터와 몬스터가 만나면 전투가 시작되어야 한다. 이를 위해 충돌과 물리처리를 해줄 것이다.이번 주차때 배운 전체 내용은 아래 포스트에서 확인할 수 있다.2025.04.25 - [Study] - [ SJCE 스터디 / 3주차 ] Unity 씬 전환, DontDestroy, 싱글톤 [ SJCE 스터디 / 3주차 ] Unity 씬 전환, DontDestroy, 싱글톤2024.09.21(토): 원래 3주차는 14일로 예정되어 있었으나, 학교 정전의 이슈로 일주일 미뤄서 진행됐다. 또한, 서버 파트 선배님께서도 일정이 있으셔서 참석하지 못하셔서 유니티 수업으로만 진행record-coding53.tistory.com 몬스터는 화면 밖에 위치시켰다가 등장시킬 것이다. Step 1. Monster 스크립트 ..

우리는 게임 그래픽 작업까지는 직접 할 수 없어서 상업적 이용을 포함해 자유로운 이용이 가능한 저작권(CC0)에 해당하는 캐릭터 파일을 https://opengameart.org/ 해당 사이트에서 가져올 것이다. 이번 주차에 배운 전체 내용은 아래 글에서 확인 가능하다.2025.04.25 - [Study] - [ SJCE 스터디 / 3주차 ] Unity 씬 전환, DontDestroy, 싱글톤 [ SJCE 스터디 / 3주차 ] Unity 씬 전환, DontDestroy, 싱글톤2024.09.21(토): 원래 3주차는 14일로 예정되어 있었으나, 학교 정전의 이슈로 일주일 미뤄서 진행됐다. 또한, 서버 파트 선배님께서도 일정이 있으셔서 참석하지 못하셔서 유니티 수업으로만 진행record-coding53.t..

씬 전환 시에도 사라지지 않는 DontDestroy 오브젝트를 만드는 법에 대해 기술하겠다. 이번주에 학습한 전체 내용은 아래 게시글에서 확인이 가능하다.2025.04.25 - [Study] - [ SJCE 스터디 / 3주차 ] Unity 씬 전환, DontDestroy, 싱글톤 [ SJCE 스터디 / 3주차 ] Unity 씬 전환, DontDestroy, 싱글톤2024.09.21(토): 원래 3주차는 14일로 예정되어 있었으나, 학교 정전의 이슈로 일주일 미뤄서 진행됐다. 또한, 서버 파트 선배님께서도 일정이 있으셔서 참석하지 못하셔서 유니티 수업으로만 진행record-coding53.tistory.com Step 1. DontDestroy 스크립트 생성Assets > Scripts 폴더에 do..

후에 서버에서 로그인 관련 api를 만들어서 붙일 예정이라,유니티에서도 로그인 씬을 만들고 로그인이 성공하면 전투 씬으로 넘어가게끔 구현해야 한다. 이번주에 학습한 내용 전체는 아래 게시글에서 확인이 가능하다.2025.04.25 - [Study] - [ SJCE 스터디 / 3주차 ] Unity 씬 전환, DontDestroy, 싱글톤 Step 1. 새로운 씬 생성유니티에서 새 프로젝트를 만들면 자동으로 SampleScene이라는 이름의 씬 파일이 기본으로 포함되어 있다.우리는 로그인을 위한 씬을 새로 만들 것이다.Project 패널에서 Assets>Scenes폴더에 Create > Scene씬 이름은 SignInScene으로 하겠다. Step 2. 새로운 씬에 버튼 만들기새로 만든 씬을 ..

SJCE 스터디에서 진행하는 방치형 게임 만들기의 배경은 3개의 이미지가 반복해서 등장하는 방식으로 구현할 것이다. 이번 주차에 배운 개념에 관한 글은 아래에서 확인할 수 있다.2025.04.24 - [Study] - [ SJCE 스터디 / 2주차 ] 유니티 기초 (라이프 사이클, State Machine , 배경 설정, 델타 타임, Enum) 와 DB [ SJCE 스터디 / 2주차 ] 유니티 기초 (라이프 사이클, State Machine , 배경 설정, 델타 타임, Enum) 와 DB2024.09.07 (토)[ 🖥️ Client Part. ] 🕹️ 유니티의 생명주기 (Lifecycle)https://docs.unity3d.com/kr/2023.2/Manual/ExecutionOrder.html 이..

HTML(Hyper Text Markup Language) : 웹페이지가 어떻게 구조화 되어 있는지 브라우저가 알 수 있도록 하는 마크업 언어 하이퍼텍스트?: 웹 페이지를 다른 페이지로 연결하는 링크. 링크는 웹의 근본적인 속성으로, 인터넷에 자료를 올리고 다른 사람이 만든 페이지로 연결함마크업 언어?: 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한 규칙들을 정의한 컴퓨터 언어의 일종 HTML은 수많은 태그들의 집합이다. 자세히는, 콘텐츠의 서로 다른 부분들을 씌우거나 감싸서 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소로 이루어져 있다요소(element) : 내용 태그의 종류1. 꾸며주는 태그 볼드체 (중요하거나 강조해야 하는 의미론적 중요성..

Next.js는 페이지 라우터와 앱 라우터, 두가지의 라우터를 제공한다. 페이지 라우터는 Next 초창기부터 제공되어 오던 구 버전의 라우터이고,앱 라우터는 Next13버전과 함께 2023년 처음 공개된 신규 라우터이다. 앱 라우터는 페이지 라우터의 단점을 보완하기 위한 서버 컴포넌트나 스트림이나 서버 액션등의 새로운 기능이 포함되어 있고 아직은 과도기를 겪고 있다. 그래서 페이지 라우터란, 현재 많은 기업에서 사용되고 있는 안정적인 라우터로 react router처럼 특정 조건을 기준으로 웹 서비스의 페이지를 분할하고 그 페이지 간의 이동을 제공하는 기능이다. 이름에 걸맞게 pages라는 폴더를 기준으로 라우팅한다. pagesㄴ index.js ㄴ about.js ㄴ item.js  next는 파일명 ..

node js로 구현된 백엔드 서버 코드를 깃허브에 올려주셔서 다운받아 사용했다.DB 연결도 supabase라는 서비스를 사용해 간편하게 진행했다. (이거 신기하더라 ,, ㅎ) supabase 설정 이후 받은 database url을 .env 파일에DATABASE_URL = [DB 비밀번호]postgresql://어쩌구의 db 주소설정을 해주고 npm run buildnpm run start명령어를 통해 서버를 켠다. 그리고 localhost 포트 12345번으로 접속하고 엔드포인트를 /api로 설정하면 swagger로 넘어가 자세한 api호출을 볼 수 있게 구성되어 있다. 서버 종료는 ctrl+c로 진행하면 되고, 데이터를 좀 더 간편하게 보기 위해서 vs 터미널 창의 휴지통 왼쪽의 split 아이콘을..