-
[Next.js 14] 프로젝트 폴더 구조 구성 및 git repository 연결
프로젝트 설치가 끝나면 아래와 같이 app, public 등등의 여러 폴더가 생성되었을 것이다.일단 '프로젝트 생성'이라는 큰 산을 하나 넘었으니 이제 개발을 시작하면 된다. 다만 일반적으로, 특히 협업을 진행하는 경우에는, github에 업로드하여 버전 관리를 진행하므로 본격적인 개발에 앞서 git repository를 연결하는 과정이 필요하다. 폴더 구조 구성그 전에 앞서 프로젝트 폴더 구조를 파악하고 시작하고자 한다. 아무런 가이드나 규칙 없이 그때그때 파일을 만들면 프로젝트의 구조도 복잡해지고, 필요한 파일을 빠르게 찾지 못해 개발의 효율성도 떨어지기 때문에, 나중에 폴더나 파일 구조가 좀 바뀌더라도 나는 먼저 틀을 잡고 가는 편이다.이제부터 내가 아래의 공식 문서와 나름대로 사용하면서 요래조래 ..
-
[티스토리] 자동 목차 생성 방법 (기존 문제 해결)
웹 개발의 가장 처음이 티스토리 관련이라니 살짝 아쉽긴 하지만, 개발 블로그로 거듭나기 위해서는 꼭 필요한 작업이었으므로.. 또 기존 방법이 가지고 있던 문제도 해결했으므로... 만족... 아래는 그 문제들로, 이것에 대한 해결 방법을 찾고 있는 분들은 바로 문제 해결 방법 쪽으로 넘어가셔도 좋습니다! '카테고리 글 더 보기' 플러그인 관련 문제 스크롤 전에 목차가 안 보이는 문제 왼쪽 표시바의 중앙이 안 맞는 문제(?) 첫 번째 콘텐츠 시작 전에 해당 목차에 있다고 표시되는 문제(?) 일단 내가 사용하는 Letter 스킨 기준이라 다른 스킨에서는 다르게 작동할 수 있는데, 그래도 위에서 언급한 네 가지 문제를 해결하는 데 조금이라도 도움이 될까 싶어 작성해봅니당 자동 목차 생성 사실 조금만 검색해보면 ..
-
[Unity][ClickEvent] 버튼 클릭 이벤트를 처리하는 n가지 방법
나 이제 웹 개발 해.... 그래서 웹 개발 관련 정리하기 전에 호다닥 네이버에 정리해둔 거를 여기에 업데이트 하려 한다.확실히 티스토리가 구글에 노출이 잘 돼서 아예 버릴 순 없을듯.역시 이번에도 네이버에 있는 내용 + 알파. [Unity][ClickEvent] 버튼 클릭 이벤트를 처리하는 n가지 방법놀랍게도 이번 주가 개발 21주차였다. 거의 세 달동안 포스팅을 쉬었구만... 다시 흐름을 잡을 겸 포스팅 ...blog.naver.com1. [MonoBehaviour] Update()에서 Input.GetMouseButtonDown(0)using UnityEngine;public class ClickEventTest : MonoBehaviour { void Update() { if ..
-
[웹 개발] 리액트 개발환경 세팅 및 Next.js 프로젝트 생성[Next.js 14]
나는 맥북을 사용 중이라 MacOS 기준으로 작성하겠다. 윈도우에 개발환경을 세팅하는 방법도 크게 다르진 않음. 1. node.js 설치아래의 링크를 클릭한 후, 왼쪽의 LTS 버전을 눌러 다운로드 및 설치를 진행한다. Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. terminal 실행하여 npm 설치 확인 및 next.js 설치npm 설치 확인 (node.js 설치 패키지 안에 함께 내포됨)npm -vnext.js 설치npm install -g create-next-app// 에러 발생 시 아래의 코드처럼 앞에 sudo를 붙여 재실행// sudo npm install -g create..
리스트 : 콘텐츠가 있으면 최근 5건을 불러옵니다.
-
[Node.js] 서버 CI/DI 솔루션 [GitHub Actions][AWS EC2]일반 2025.01.21 03:25
오늘은 Github Action을 이용하여 서버 CI/CD 파이프라인을 작성하는 법에 대해 작성해보려 한다. 들어가기 전 참고한 영상 첨부합니당 CI/CD 란?CI/CD는 소프트웨어 개발 프로세스에서 중요한 역할을 하는 두 가지 개념이며, 소프트웨어 개발의 효율성과 품질을 향상시키기 위해 자동화된 빌드, 테스트, 배포 프로세스를 구현하는 방법론이다.CI (Continuous Integration)는 새로운 코드 변경 사항이 발생할 때마다 자동으로 애플리케이션을 빌드하고 테스트하는 과정이다. 이 과정을 통해 개발자는 수동으로 빌드와 테스트를 수행할 필요 없이, 코드 변경 사항이 코드베이스에 통합될 때 자동적으로 품질 검사를 받을 수 있다. CI를 성공적으로 구현하면, 팀의 협업이 원활해지고, 코드 오류를 ..
-
[Unity] Custom Control이 Library 창의 Project 탭에 안 뜰 때 [UI Toolkit]Unity, C# 2025.01.08 09:05
스크립트로 VisualElement나 BaseField 등을 상속한 Custom Control를 작성했을 때, 해당 요소가 Library 창의 Project 탭에 안 뜨는 경우가 있다. 결론만 말하자면 UxmlFactory 속성이 없어서 해당 문제가 발생하며, 스크립트에 아래와 같이 UxmlFactory를 추가해주면 해결된다.// UxmlFactory needed for UI Builder integrationpublic new class UxmlFactory : UxmlFactory { } 끗~
-
[Unity][UI Toolkit] UI Toolkit 사용하면서 살짝 헤맨 부분들Unity, C# 2024.12.31 10:00
오래 헤매진 않았고, 그냥 당연히 이렇게 하면 되겠지~라고 했다가 안 돼서 검색한 부분을 살짝쿵 모아보았다. 커스텀 컨트롤에서 Content Container 설정ui toolkit custom control content container add child in innercustom c# visualElement child나의 경우에는 커스텀한 Label Container을 만들 때와 grid View를 만들고 해당 뷰와 연결되는 리스트가 비어있을 때 보여줄 empty container을 만들기 위해 사용하였다.간단하게 VisualElement의 virtual 프로퍼티인 contentContainer을 override하면 된다.private VisualElement _contentContainer;pu..
-
[Unity][UI Toolkit] Localization 적용 방법Unity, C# 2024.12.31 04:36
Unity 6부터는 binding을 본격적으로 지원하기 시작하면서 Localization을 쉽게 할 수 있다고 한다.하지만 나는 지금 2022 버전을 쓰고 있어, Localization하는 방법을 따로 찾아야 했다.UI Toolkit이 처음 도입되었을 때는 uxml을 검사하면서 text=""나 tooltip="" 등 localization이 필요한 부분을 변환하는 파이썬 코드를 짰었다. 스크립트를 돌리면 자동으로 지원하는 locale 별로 uxml 파일이 생성되도록 했는데, 유지 및 보수 측면에서 아주 BAAAAAD... 그래서 이번에 2022 버전에서 UI Toolkit을 다시 이용하게 되었을 때는 다른 방법을 찾아봤는데, 감사하게도 아래의 코드를 발견할 수 있었다.https://gist.github...
-
[Next.js 14] 다국어 지원 방법 / Localization / Internationalization 응용(데이터 및 태그를 포함한 변환) [i18next]Nextjs 14 2024.12.13 21:58
아래의 예시처럼 특정 위치에 css를 다르게 적용하고 싶거나텍스트 중간에 사용자 닉네임이나 결제 예정일 등의 데이터를 포함하여 함께 Localization, 즉 다국어 지원을 해야한다면잘 찾아오셨습니다! 들어가기 앞서, 해당 글은 이전에 작성했던 i18next를 이용한 App router 기반 Localization 방법의 응용편입니다. [Next.js 14] App router 기반 Localization / Internationalization [i18next]다국어를 지원하는 웹에 들어가보면 드롭다운으로 언어를 바꾸고, 그에 맞게 텍스트가 휙휙 바뀌는 것을 본 적이 있을 것이다.이번 포스팅에서는 i18next 모듈을 이용해서 앱 라우터 기반의 Next.jshotsunchip.tistory.com ..
-
[Unity][Animancer] Layer pause / resume 하는 법Unity, C# 2024.12.13 21:21
항상 생각하는 거지만 매뉴얼을 잘 보자.. Animancer - Playing AnimationsAfter you Download Animancer, you can add an AnimancerComponent to your model and control it with a script: Don't create an Animator Controller like you normally would. Animancer doesn't need them. Add a reference to the AnimancerComponent (let’s call itkybernetik.com.au private void OnPlayButtonClicked() { if (_play..
-
[Unity][UI Toolkit] uss에서 gap 옵션(child 사이 spacing) 구현하기 [USS]Unity, C# 2024.11.29 20:37
uss는 css처럼 유니티 UI Toolkit에서 스타일을 적용시킬 때 사용한다.웹 형식과 비슷해 더욱 쉽게 디자인할 수 있다는 장점이 있지만,아직 개발 단계라 css에서 제공하는 속성 중 적용되지 않는 것(line-height, gap 등)이 있다는 것이 단점이다. 특히, 웹을 할 때는 css에서 flex 속성과 함께 gap 속성을 주면 자식 요소를 간단하고 깔끔하게 정렬할 수 있었는데유니티 uss에는 해당 속성이 없어서 자식의 margin을 하나씩 다 설정해줘야 한다. (아래의 css 코드처럼 말이다)div > *:not(:last-child) { display: block; margin-bottom: 20px;} 그런데 문제는, uss가 not 선택자는 물론 last-child 선택자도 ..
-
[Unity][UI Toolkit] uss에서 first-child, last-child 구현하기 [USS]Unity, C# 2024.11.29 20:07
UI Toolkit -> UGUI (Nova) -> 다시 UI Toolkit으로 migration 하는 중...유니티 버전을 2021에서 2022로 업그레이드 하면서 UI Toolkit도 많이 안정되었구나 싶긴 했는데,그래도 여전히 기존 css에서 구현되는 기능이 다 사용 가능한 건 아니라 한계를 다시 체험하고 있다. 그 중에 제일 답답했던 것이 child 사이의 거리를 설정할 수 없는 것...웹을 할 때는 css에서 flex 속성과 함께 gap 속성을 주면 간단하고 깔끔하게 정렬할 수 있었는데,유니티 uss에는 해당 속성이 없어서 자식의 margin을 하나씩 다 설정해주는 방식으로 가야한다. 이 기능을 자동으로 해주는 스크립트를 작성하고 싶었다.그러기 위해서는 last-child를 알아야 했는데, 역시..