본문 바로가기

분류 전체보기404

[ 언리얼엔진 ] ThirdpersonGameMode에 총을 들고있는 캐릭터 삽입하기 ThirdpersonGameMode에 총을 들고 있는 캐릭터를 사용하기 위해서는 언리얼엔진에서 무료로 제공하는 애니메이션 스타터 팩을 설치해 적용해 보았다. 언리얼엔진 마켓플레이스에서 애니메이션 스타터 팩이라고 검색하면 무료로 설치가 가능하다.  라이브러리로 이동해서 원하는 프로젝트에 추가해 준다.  애니메이션 스타터 팩을 추가한 프로젝트 실행한다.Content Browser에서 AnimStarterPack으로 이동한다. 여기서 Ue4ASP_Character을 사용할 예정이다. World Settings에서 GameMode Override에서 BP_ThirdPersonGameMode를 선택해 준다.화면에서 World Setting가 보이지 않는다면 Window > World Settings를 선택한다. .. 2024. 6. 23.
[ 언리얼엔진5 ] Event Hit을 사용해 material 색깔 바꾸기 언리얼엔진 버전 5.4.2  일인칭 템플릿을 선택하고 프로젝트 이름 입력 후 생성하기를 선택한다.  도형에 +가 있는 메뉴 선택 후 Shapes > Cube를 선택한다. (원하는 도형선택)  선택한 도형이 아래 이미지 처럼 화면에 생긴다.  Content Browser 선택 후 FirstPerson폴더 안에 Material폴더를 생성해 준다. Content Browser 빈 공간에 오른쪽 마우스 클릭 > New Folder 선택필수는 아니지만 프로젝트를 깔끔하게 정리하는 습관을 가지는게 좋다.  생성한 Materials폴더 더블 클릭후, 빈 공간에 오른쪽 마우스 클릭 후  Material 선택  M_TargetRed로 이름을 지어주자. M은 Material을 표기하는 약자이다.  생성한 M_TargetR.. 2024. 6. 16.
[ 언리얼엔진 ] 블루프린트를 사용해 화면에 글자 띄우기 최종 목표게임 실행 시 아래의 이미지처럼 화면에 Power 뜨게 하기  방법1. 새로운 프로젝트 생성하기  2. Content Browser 안에 Blueprint Class 선택 3. Actor 선택 4. Blueprint를 PowerFunction으로 이름 변경Blueprint를 더블클릭해서 열기  5. My Blueprint 안에 FUNCTIONS 옆 '+' 클릭하기CalculatePower로 이름 변경 이름 변경 시 아래 이미지처럼 보라색으로 노드에도 이름이 변경되어 있다. 6. CalculatePower을 선택하면 오른쪽에 Details 메뉴가 있다.아래 이미지 처럼 입력하면 Return Value노드도 만들어진다.최종적으로 이렇게 만들 예정이다. Inputs, Outputs는 아래 이미지 처럼.. 2024. 6. 4.
[ React ] 콘솔 경고들 수정하기 프로젝트 개발 중에 생긴 콘솔 경고들을 해결해 보았다. 경고 수정 #1  Form.Item을 사용하기 위해서는 Form 태그에 감싸주어야 한다.Warning: Cant not find FormContext. Please make sure you wrap Field under From. 경고문에서 수정 힌트를 주니 좋다. 원래 코드 {inputtype === 'ColorPicker' ? setMeta(meta => ({ ...meta, color: color.toHexString() }))} /> : null} {inputtype === 'ColorPicker' ? null : setMeta(meta => ({ ...meta, name: e.target.value }))} />} 수정 코드아.. 2024. 6. 4.
[ Next.js ] next-intl을 활용한 다국어 웹사이트 구현하기 Next.js 애플리케이션에서 다국어 지원을 손쉽게 구현하기 위해, next-intl 라이브러리를 사용해 보았습니다. 이 글에서는 next-intl의 주요 기능, 사용 방법, 그리고 프로젝트 통해 다국어 웹사이트를 구현해 보겠습니다. next-intl이란?next-intl은 Next.js를 위한 국제화(i18n) 라이브러리로, 간단하고 직관적인 API를 제공하여 복잡한 설정 없이도 다국어 지원을 구현할 수 있습니다. 이 라이브러리는 가벼운 번들 크기를 유지하면서도 효율적인 다국어 기능을 제공합니다. 주요 기능:간단한 API: 복잡한 설정 없이도 다국어 지원 추가 가능.동적 로드: 언어별 번역 파일을 동적으로 로드하여 효율적 사용 가능.리치 포맷 지원: 날짜, 숫자 등의 형식을 현지화된 형태로 제공.작은 .. 2024. 5. 30.
[ Next.js ] next/babel 에러 Next.js 개발을 위해 파일 설치 후 아래와 같은 에러가 뜬다 Parsing error: Cannot find module 'next/babel'  npm run dev를 하면 실행은 되지만, 파일에 빨간 줄이 나타나는게 너무나도 신경이 쓰인다.  해결 방법.babelrc file을 생성해 주고 아래와 같은 코드를 적고{ "presets": ["next/babel"]} .eslintrc파일 생성우 아래 코드를 적어주면  빨간 줄이 바로 없어진다. { "extends": ["next", "next/babel", "next/core-web-vitals"]}  하지만 더 쉬운 방법!새로운 파일 생성없이 기존에 존재하는 .eslintrc.json파일의 코드만 수정해주면 된다!.eslintrc.json 파.. 2024. 5. 23.
[ React ] Ant design Layout 적용해보기 아래 링크로 이동하면 다양한 구조로 적용이 가능하다.https://ant.design/components/layout Ant design 설치npm i antd   제일 심플한 구조인 Header, Content, Footer 구조로 만들어 보자. App.jsimport './App.css';import { Layout } from 'antd'; // Ant design의 layout을 가져온다.const { Header, Content, Footer } = Layout; // layout안에 Header, Content, Footer을 가져온다.function App() { return ( Logo content .. 2024. 5. 21.
[ Javascript ] Drop Down(드롭다운) 메뉴 만들기 결과물 Drop 버튼을 누르면 아래와 같이 메뉴가 나오는 토글 버튼을 만들어 보았다. codepen 실제 결과물 보기: https://codepen.io/pen?template=VwNqPGw dropDown.html 버튼 클릭 시 dp_menu() 함수가 실행된다. Menu들은 기본으로 display:none 스타일링이 되어있다가 버튼이 클릭되면 display: block으로 바뀐다. Drop Menu1 Menu2 Menu3 Menu4 dropDown.css body { margin: 10px; padding: 10px; text-align: center; } .dropdown { position: relative; display: inline-block; } .button { padding: 10px .. 2024. 4. 23.
[ 프로그래머스 / Javascript ] 추억 점수 https://school.programmers.co.kr/learn/courses/30/lessons/176963 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물.. 2024. 4. 23.
728x90