전체 글411 [ 언리얼엔진 ] 블루프린트를 사용해 화면에 글자 띄우기 최종 목표게임 실행 시 아래의 이미지처럼 화면에 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. [ React ] 자주 쓰이는 NPM 설치 목록 모음 styled-components Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이프러리로 React 프레임워크에서 메인으로 사용되는 라이브러리이다. npm i styled-components react-dom 컴포넌트를 html과 연결하는 작업을 해준다. npm i react-dom react-router-dom React는 SPA(Single Page Application)이다. React에 router(페이지 이동)을 사용할 수 있게, 화면 전환을 지원해 주는 모듈이다. npm i react-router-dom ant-design 사용자의 인터페이스를 개발할때 다양한 UI 컴포넌트를 제공해 줘서 빠르게 개발을 할 수 있다. npm i antd ant-d.. 2024. 3. 25. [ React ] Ant design 설치 방법 Ant design의 장점 여러 가지 기능을 빠르게 만들 수 있다. Customize가 가능하다. 모든 예제에 TypeScript, Javascript 코드가 제공된다. CodePen, CodeSandbox 보기가 제공된다. Animation이 필요한 부분에는 자연스러운 움직임이 적용되어 있다. https://ant.design/components/overview/ Components Overview - Ant Design An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best React UI library for enterprises ant.desig.. 2024. 3. 23. 이전 1 2 3 4 5 6 ··· 46 다음 728x90
