-
[Next.js 14] 프로젝트 폴더 구조 구성 및 git repository 연결
프로젝트 설치가 끝나면 아래와 같이 app, public 등등의 여러 폴더가 생성되었을 것이다.일단 '프로젝트 생성'이라는 큰 산을 하나 넘었으니 이제 개발을 시작하면 된다. 다만 일반적으로, 특히 협업을 진행하는 경우에는, github에 업로드하여 버전 관리를 진행하므로 본격적인 개발에 앞서 git repository를 연결하는 과정이 필요하다. 폴더 구조 구성그 전에 앞서 프로젝트 폴더 구조를 파악하고 시작하고자 한다. 아무런 가이드나 규칙 없이 그때그때 파일을 만들면 프로젝트의 구조도 복잡해지고, 필요한 파일을 빠르게 찾지 못해 개발의 효율성도 떨어지기 때문에, 나중에 폴더나 파일 구조가 좀 바뀌더라도 나는 먼저 틀을 잡고 가는 편이다.이제부터 내가 아래의 공식 문서와 나름대로 사용하면서 요래조래 ..
-
[티스토리] 자동 목차 생성 방법 (기존 문제 해결)
웹 개발의 가장 처음이 티스토리 관련이라니 살짝 아쉽긴 하지만, 개발 블로그로 거듭나기 위해서는 꼭 필요한 작업이었으므로.. 또 기존 방법이 가지고 있던 문제도 해결했으므로... 만족... 아래는 그 문제들로, 이것에 대한 해결 방법을 찾고 있는 분들은 바로 문제 해결 방법 쪽으로 넘어가셔도 좋습니다! '카테고리 글 더 보기' 플러그인 관련 문제 스크롤 전에 목차가 안 보이는 문제 왼쪽 표시바의 중앙이 안 맞는 문제(?) 첫 번째 콘텐츠 시작 전에 해당 목차에 있다고 표시되는 문제(?) 일단 내가 사용하는 Letter 스킨 기준이라 다른 스킨에서는 다르게 작동할 수 있는데, 그래도 위에서 언급한 네 가지 문제를 해결하는 데 조금이라도 도움이 될까 싶어 작성해봅니당 자동 목차 생성 사실 조금만 검색해보면 ..
-
[Unity][ClickEvent] 버튼 클릭 이벤트를 처리하는 n가지 방법
나 이제 웹 개발 해.... 그래서 웹 개발 관련 정리하기 전에 호다닥 네이버에 정리해둔 거를 여기에 업데이트 하려 한다. 확실히 티스토리가 구글에 노출이 잘 돼서 아예 버릴 순 없을듯. 역시 이번에도 네이버에 있는 내용 + 알파. [Unity][ClickEvent] 버튼 클릭 이벤트를 처리하는 n가지 방법 놀랍게도 이번 주가 개발 21주차였다. 거의 세 달동안 포스팅을 쉬었구만... 다시 흐름을 잡을 겸 포스팅 ... blog.naver.com 1. [MonoBehaviour] Update()에서 Input.GetMouseButtonDown(0) using UnityEngine; public class ClickEventTest : MonoBehaviour { void Update() { if (Inp..
-
[웹 개발] 리액트 개발환경 세팅 및 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건을 불러옵니다.
-
[CSS] 이미지 위에 gradient 넣기 + 틈 없애기소소한 팁, 버그 해결 2024.11.22 20:57
다음 페이지로의 자연스러운 전환이나, 이미지 스크롤러의 양 끝에 자연스럽게 이미지가 사라지는 효과를 위해 background를 gradient로 설정한 div 태그 등을 넣기도 한다. 이때, graident 컴포넌트가 생기기는 하는데 이미지 뒤에 있는 경우에는 z 값 조정 대신 position 속성을 absolute로 설정하면 해결된다.아래는 예시 코드. (나는 tailwind css 사용 중이라 아래처럼 입력했다).gradient-edge { @apply absolute inset-0 left-0 right-0 top-0 bottom-0; background: linear-gradient(90deg, rgba(255, 255, 255, 1) 5%, rgba(255, 255, 255, 0.00) 25..
-
[Next.js 14] router.push에서 query만 변경 시 스크롤 유지하기 [Scroll Restoration]Nextjs 14 2024.11.21 22:08
웹사이트를 구현할 때 popup modal을 query에 값을 확인해서 해당 값이 있으면 overlay로 현재 화면 위에 뜨는 방식으로 구현했다.그런데 이렇게 구현하다 보니 팝업을 띄우는 버튼을 눌렀을 때 router.push를 이용하는데,이게 쨌든 url을 바꾸다 보니까 계속 뒤에 있는 화면 스크롤이 처음으로 올라갔다. 근데 이게 굉장히 거슬린달까...팝업을 켰다가 끄면 응당 원래 화면 위치가 보일 것을 기대하는데, 갑자기 처음으로 올라가는 것이 부자연스러웠다. 이를 해결하기 위해 scroll restoration이라는 키워드로 검색을 해보았다.스크롤 유지 기능을 검색해보았을 때, 뒤로가기를 했을 때 전 페이지의 스크롤 유지하는 방법만 발견했다. (심지어 실험적인 기능)module.exports = {..
-
[Github Actions] self-hosted runner 사용 중 CICD 오류 및 EC2 ssh 접속 안 됨 해결 (원인: EC2 인스턴스 CPU사용량 100%) [AWS EC2]소소한 팁, 버그 해결 2024.11.21 21:52
이번에 회사에서 웹 수정하면서 서버가 다운되는 일이 발생하여 어째저째 해결했는데,나중에 같은 일을 겪을 분들을 위해 정리해보기로 했다. 문제는 이제 클라이언트 쪽에서 새로 추가될 api를 사용하기 위해 서버 코드를 github에 업로드하면서 발생했다.지금 서버랑 클라이언트 모두 github actions을 이용해 CICD를 수행하고 있는데, 서버 쪽 CICD 과정이 덜컥 실패한 것이다.The self-hosted runner: {{name-of-runner}} lost communication with the server.Verify the machine is running and has a healthy network connection.Anything in your workflow that termi..
-
[Next.js 14] 프로젝트 빌드 시 발생하는 no-console 에러 해결 [ES-Lint]소소한 팁, 버그 해결 2024.06.02 22:46
console.log일반적으로 JavaScript 프로그래밍 시 디버깅 목적으로 브라우저의 console.log 메서드를 자주 사용할 것이다.물론 콘솔 로그는 간편한 디버깅 도구이긴 하지만,보안 이슈가 발생할 우려가 있기에 실제로 배포되는 웹 어플리케이션에는 포함되지 않는 것이 좋다. ESLintESLint는 자바스크립트 코드에서 에러가 있는 부분에 표시를 해주는 정적 코드 분석 도구이다.일반적으로 Typescript, Prettier과 함께 웹 프로그래밍을 할 때 함께 설치되며, 코드의 퀄리티를 보장해준다.ESLint는 하나의 규칙으로 no-console 룰을 가지고 있는데,빌드(npm run build) 시 콘솔 로그가 포함되어 있을 경우 규칙 위반으로 처리하여 빌드가 정상적으로 완료되지 않는다. n..
-
[Next.js 14] .env 파일 생성 및 환경변수 설정 [AWS Amplify]Nextjs 14 2024.05.08 16:22
코드를 작성하다보면,API Key나 Client Token과 같이 소스코드에 포함시키기 민감한 정보를 다뤄야 하거나개발 환경마다 다른 변수를 사용해야 할 때가 존재한다. 이럴 때 사용하는 것이 환경변수이다.기존에 Node.js에서 이 환경변수를 이용하기 위해서는 dotenv 패키지를 사용해야 했는데,Next.js에서는 별도의 패키지 없이 환경변수를 사용할 수 있다. (React도 마찬가지)살짝 주제엔 벗어나지만 혹시나 싶어, 환경변수는 빌드 파일에 포함되므로 누구나 볼 수 있다는 사실을 한번 짚고 넘어가겠다. 암튼 이번 포스팅에서는 Next.js 프로젝트에서 환경변수를 생성하고,이를 AWS Amplify로 배포할 때 적용하는 방법을 정리해보고자 한다..evn 파일 생성 및 환경변수 할당프로젝트의 바로 아..