Next.js 14 프로젝트 규모에 따른 디렉토리 구조
FE/Next.js2024. 2. 13. 22:01Next.js 14 프로젝트 규모에 따른 디렉토리 구조

프로젝트를 시작하다보면 어떤 프로젝트 구조로 개발을 할지 고민을 하게 됩니다. 정해진 규칙은 없기 때문에 정답은 없지만, 본 글에서는 제가 개발하면서 유지보수하기 편했던 디렉토리 구조를 설명합니다. 소규모 & 중간규모 프로젝트 작은 규모의 프로젝트일 수록 디렉토리 구조는 단순하게 가져가는 것이 좋았습니다. 그래서 depth는 최대한으로 줄이고 컴포넌트, api, hook, 유틸리티 함수 등으로 디렉토리를 구분하였습니다. my-app/ │ ├── src/ │ ├── components/ # 재사용 가능한 컴포넌트 │ │ ├── common/ # 전역적으로 사용되는 컴포넌트 (버튼, 헤더, 푸터 등) │ │ └── BlogContainer # 블로그 컨테이너 컴포넌트 │ │ ├── index.tsx │ │ ..

Kohya_ss를 이용하여 LoRA 트레이닝 (Stable Diffusion)
IT2024. 2. 12. 14:18Kohya_ss를 이용하여 LoRA 트레이닝 (Stable Diffusion)

학습할 이미지 수집 LoRA 트레이닝을 위한 이미지를 20장 수집합니다. 본 글에서는 시바이누 강아지 사진을 준비했습니다 이미지 tagger 생성 Tagger 플러그인 설치 수집한 이미지에 맞는 tagger 파일을 만들어야 하는데, stable diffusion의 extension으로 tagger를 생성할 수 있습니다. Extensions > Available 에서 Load from 버튼을 클릭합니다. 저는 이미 설치를 했지만, 아래 사진과 같이 stable-diffusion-webui-wd14-tagger를 Install 합니다. Extensions > Installed > Apply and restartUI 버튼을 눌러서 재시작합니다. stable diffusion이 재실행되면, 이전에는 없던 Tag..

vercel에 Next.js 웹 앱 프로젝트 무료 호스팅하기
FE/Next.js2024. 2. 9. 11:55vercel에 Next.js 웹 앱 프로젝트 무료 호스팅하기

vercel vercel은 AWS처럼 클라우드 시스템 위에서 Next.js(SSR, SSG 모두 가능) 혹은 React 프로젝트를 무료로 호스팅할 수 있게 도와주는 서비스 입니다. 그리고, Next.js도 같이 개발을 하고 있어서 어떤 클라우드 서비스보다 원활한 Next.js 호스팅이 가능합니다. 직접 사용해본 결과 AWS Amplify와 비교했을때, 훨씬 지원되는 기능도 많고 안정적입니다. Next.js 프로젝트를 한다면 vercel을 사용하는게 좋을거 같습니다. Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel Vercel's Frontend Cloud gives developers the framewo..

Next.js 14 버전 설치 및 프로젝트 생성하기
FE/Next.js2024. 2. 9. 11:34Next.js 14 버전 설치 및 프로젝트 생성하기

실행 환경 설정 Next.js 14버전은 node버전이 18.17 이상이어야 합니다. 따라서, n 패키지 또는 nvm을 통해 node 버전을 18.17로 설치 및 변경해줍니다. node 버전을 어떻게 변경해야 하는지 모르시는 분은 아래 글을 참고해주세요. macos에 nodejs 설치하기 (쉽게 node 버전 변경하기) nodejs 설치 nodejs를 설치하는 방법은 brew를 사용한 방법이 있고, nodejs 공식사이트에서 직접 설치하는 방법이 있습니다. 본 글에서는 brew를 사용하여 설치하는 방법에 대해 소개합니다. brew로 설치 bluemiv.tistory.com n 패키지를 이용하여 node 버전을 변경합니다. 그리고 버전이 제대로 변경됐는지 확인해봅시다. sudo n 18.19.0 node ..

알아두면 좋은 차트 패턴 (주식/코인 Trading)
일상2024. 2. 2. 22:59알아두면 좋은 차트 패턴 (주식/코인 Trading)

머리어깨형(Head & Shoulders)헤드앤숄더 패턴은 반전형 패턴으로 세개의 봉이 형성되며 두번째 봉이 가장 높습니다. 주가가 세번째 봉을 형성한 후 세봉들 사이의 골짜기를 이은 목선(넥라인)을 하향 관통하는 순간 패턴이 완성됩니다. 2번째 골짜기의 높이만큼 주가 하락이 예상됩니다. 역머리어깨형(Inverse Head & Shoulders)헤드앤숄더(Head and shoulders) 패턴을 뒤집어 놓은 형태로 3개의 골짜기 모양을 가지고, 2번째 골짜기가 가장 깊습니다. 주가가 세번째 골짜기를 형성한 후 골짜기 사이의 두 봉을 이은 선을(목선) 상향 관통할 때 패턴이 완성됩니다. 2번째 골짜기 만큼의 주가 상승이 예상됩니다. 쌍봉형(Double Top)두개의 봉 모양을 가지고 있습니다. 일반적으로..

EUC-KR와 CP949 인코딩 (한글 인코딩)
IT2024. 2. 2. 21:50EUC-KR와 CP949 인코딩 (한글 인코딩)

인코딩 컴퓨터는 숫자들의 조합을 이용하여 문자를 표현합니다. 다들 많이 알고있는 인코딩이 ASCII(아스키)가 있고 영문자를 표현하기 위해 사용하는 대표적인 문자 인코딩이라고 할 수 있습니다. 인코딩은 사람이 인지할 수 있는 문자를 '약속된 규칙'에 따라 컴퓨터가 이해할 수 있는 0또는 1과 같이 코드로 변환해주는 작업을 말합니다. 여기서 약속된 규칙은 ASCII, EUC-KR, UTF-8, UTF-16 등 여러가지 인코딩 방식을 말합니다. EUC-KR (한글 인코딩) 국가마다 독립적인 인코딩 방식을 가지고 있는데, 한국에서는 EUC-KR이라는 인코딩 방식을 사용하고 있습니다. (한글을 표현할 때 사용하는 인코딩 방식 중 하나) EUC-KR 특징 EUC-KR은 한국어를 표현할때는 2Bytes를 사용합니다..

Javascript 배열의 every(), some() 함수
Language/Javascript2024. 2. 2. 21:16Javascript 배열의 every(), some() 함수

Javascript 배열(Array)에는 every 메소드와 some 메소드가 있습니다. 개인적으로 평상시에는 find, map, filter, reduce 만큼 자주 사용하진 않지만 종종 사용하는 경우가 있습니다. every() every는 모든 배열의 항목이 조건을 만족해야만 true를 반환하고, 아닌 경우 false를 반환합니다. 예를들어, 어떤 배열의 원소들이 모두 짝수인지 확인하고 싶은 경우, every()를 사용하면 간단하게 구현할 수 있습니다. const isEven = (num) => num % 2 === 0; const nums = [2, 4, 6, 8, 10, 12, 14]; console.log(nums.every(isEven)); // true 다른 예시로 하나라도 홀수인 원소가 있..

MacOS에서 brew 젠킨스(jenkins) 서비스 포트 변경하기
DevOps2024. 1. 1. 18:06MacOS에서 brew 젠킨스(jenkins) 서비스 포트 변경하기

Jenkins 설치 Jenkins가 설치되어 있지 않은 경우, 아래 명령어 및 사이트를 참고하여 jenkins-lts 를 설치합니다. (본 글에서는 brew를 이용하여 jenkins를 설치하는 방법을 소개합니다) brew install jenkins-lts macOS Installers for Jenkins LTS Jenkins – an open source automation server which enables developers around the world to reliably build, test, and deploy their software www.jenkins.io 서비스 실행/중지하는 방법은 아래 명령어를 참고해주세요. # Start the Jenkins service brew servi..

MacOS에 쉽게 여러 버전의 JDK 관리하는 방법
IT2024. 1. 1. 17:54MacOS에 쉽게 여러 버전의 JDK 관리하는 방법

로컬 환경에 여러개의 JDK 버전이 설치되어 있는 경우, 환경 설정 파일에 JAVA_HOME 변수 값에 사용할 버전의 JDK 경로를 매번 수정해주기 번거롭습니다. 본 글에서는 편리하게 JDK 버전을 변경 할 수 있는 방법을 소개합니다. JAVA_HOME 경로 확인 우선 각 버전의 JDK에 해당하는 JAVA_HOME 경로를 확인해야 합니다. 아래 명령어를 사용하여 JDK 홈 디렉토리 경로를 확인할 수 있습니다. /usr/libexec/java_home -V 특정 JDK 버전의 JAVA_HOME 경로만 알고 싶으면, -v{버전} 을 옵션으로 넣어주면 됩니다. (단, 당연히 로컬에 해당 버전의 JDK가 설치되어 있어야 함) 예를들어, /usr/libexec/java_home -v11 /usr/libexec/j..

Named Routing을 사용한 라우팅(화면전환) 방법 (Flutter)
FE/Flutter2023. 12. 3. 13:50Named Routing을 사용한 라우팅(화면전환) 방법 (Flutter)

Name Routing Name Routing은 web과 같이, 경로를 이용하여 라우팅 될 위젯(widget)을 정의하는 routing 방법입니다. 예시를 들면 아래와 같습니다. @override Widget build(BuildContext context) { return MaterialApp( routes: { '/': (context) => HomeScreen(), '/details': (context) => DetailScreen(), }, ); } 실제로 간단하게 구현을 해보겠습니다. 우선 flutter 프로젝트를 만들고, HomeScreen과 SettingScreen 2개의 스크린 위젯을 생성하겠습니다. // home_screen.dart import 'package:flutter/materi..

반응형
image