분류 전체보기

타입캐스트 vs 일레븐랩스 vs 수퍼톤 vs Hailuo AI유튜브에서 다른 tts들과 비교하는 영상을 봤는데1) 개발자를 위한 api가 있으면서2) 한국어로 일상 대화가 가장 자연스럽게 표현 되면서3) 아이를 대상으로 하는 우리 서비스에 적절한 음성이 있는4) 게다가 저렴한 MiniMax사의 Hailuo tts를 적용하기로 했다. 근데 구글링 해도 공식 문서조차 바로바로 보기 힘들었고 한국어로 된 정보나 사용 후기를 찾아보기 힘들어서 이 글을 작성한다.API 사용을 위해서는 아래 링크로 접속해야한다. MiniMax-Intelligence with everyoneMiniMax is a leading global technology company and one of the pioneers of large ..

Layout.tsxnext.js는 상위폴더로 이동하여 레이아웃이 있는지 확인하고레이아웃이있는 경우에 그 레이아웃을 사용하여 하위 항목을 렌더링한다. 레이아웃은 중첩된다.레이아웃이 생성될 때는루트 레이아웃을 가져옴 -> url를 확인 -> 해당 폴더 안에 layout파일이 있는지 확인 -> 레이아웃이 있다면 그 레이아웃을 밖에 있는 다른 레이아웃 안에 렌더링 -> ... 이런 과정으로 반복된다.route groupsroute groups로 생성된 폴더는 URL을 생성하지 않는다. 소괄호() 안에 이름을 적고 폴더를 생성하면 된다.dynamic routes대괄호[]를 사용하면 dynamic routes를 구현할 수 있다.URL의 id 값을 받아오기 위한 코드를 짜고export default function ..

Library vs FameworkReact는 라이브러리(우리가 구조에 관한 결정을 내림. 폴더 구조, 파일의 이름 등)이고 Next.js는 프레임워크이다. 프레임워크가 우리의 코드를 호출해서 실행된다는 개념이다.라이브러리와 다르게 우리가 결정을 내리거나 import 하지 않는다. 그래서 우리는 코드를 올바른 위치에 배치하고 함수에 올바른 이름을 지정하는 등 프레임워크의 '규칙'을 따라야한다.Next.js 제공 파일명Next.js라는 프레임워크에서 제공하는 기본 파일명이 있다.page.tsxNextJS에게 Routes를 알려주는(url을 정하는) 방법은 app폴더 안에 원하는 경로 이름을 가진 폴더를 생성하기만 하면 된다. (react-router-dom처럼 하나하나 설정할 필요가 없다!) 그리고 pag..

.gitignore 파일이란?깃허브에 올라가면 안되는 파일(private key 파일 등)의 경우 .gitignore파일에 포함시켜야한다..gitignore파일의 경우 프로젝트 디렉토리 최상단에 위치해야한다..gitignore 파일이 적용되지 않을 때문제ec2환경에 배포하기 전 ec2 인스턴스의 ssh 키페어 파일(.pem)을 프로젝트 폴더에 추가했다. .pem 파일을 프로젝트 경로 최상단에 복사 후 .gitignore파일에 .pem확장자로 끝나는 모든 파일을 의미하는 *.pem을 추가하고 github에 push했는데, .gitignore파일이 적용되지 않고 key가 담겨있는 .pem 파일이 그대로 노출된 것이다.해결이 문제는 github의 캐시가 문제였다. 그래서 git에 있는 모든 캐시 파일을 지우고..

1. 개발 과정zustand 사용상태관리와 관련된 부분은 전부 store에. hook에는 상태관리와 별개로 로직을 처리함. (ex. 캐러셀의 로직)헤더1. styled components를 사용했다.React와 같은 JavaScript 기반의 UI 라이브러리에서 컴포넌트 스타일링을 위한 도구라고함특히 대규모 애플리케이션에서 CSS를 모듈화하고 유지보수성을 높이는 데 유리합니다. 이를 통해 스타일과 로직을 하나의 파일에 결합함으로써 더 직관적이고 간결한 코드를 작성할 수 있습니다. 이미지 불러오기헤더에 로고 이미지 추가로 연결 2. fixed position으로 헤더를 상단에 고정시킴. 스크롤을 내려도 헤더는 고정되어있음.메인페이지 - 개봉 예정 영화React.FC 대신 props로 처리 2. 용어 정리1..

1. CI/CD란?자동 배포 파이프라인코드의 통합, 테스트, 배포의 각 단계를 유지하면서 동시에 "자동화"하는 것이 필요하고 또한 지속적 모니터링도 필수이다.1. 코드 변경2. 지속적 통합(CI; Continuous Integration): 코드가 올바르게 빌드 및 통합되는지를 자동으로 확인.3. 자동 인수 테스트-인수 테스트 (UAT; User Acceptance Test): 구현한 기능이 고객 요구사항과 맞는지 확인.                                                                    제품이 릴리스할 준비가 되어있는가?                                                                    전통적으로 ..

1. 리액트 앱 설치CRA// book-store-c라는 이름의 프로젝트를 typescript 템플릿으로 생성npx create-react-app book-store-c --template typescript// 실행 명령어npm run startVite// book-store-v라는 이름의 프로젝트를 react-ts 템플릿으로 생성npm create vite@latest book-store-v -- --template react-ts// npm 설치npm i// 실행 명령어npm run dev2. 프로젝트 폴더 구조와 기본 설정폴더 구조pages- 라우트에 대응하는 페이지 컴포넌트(컨테이너)components- 공통 컴포넌트, 각 페이지에서 사용되는 컴포넌트utils- 유틸리티hooks- 리액트 훅mo..

1. 오픈 소스란?누구나 특별한 제한 없이 공개되어 있는 소스코드로, 검사(리뷰), 수정 등 개선사항을 마음껏 펼칠 수 있는 소스 코드이다. (유료 코드도 있음.) 다른 개발자의 시선으로 코드가 업그레이드 될 수 있다.ex. Node.js, 리액트, Apache, Bootstrap...2. 오픈 소스 라이선스란?오픈 소스로 배포/준비/공개된 소스 코드를 사용할 때 지켜야 하는 규칙 등을 명시하는 것ex. react is licensed under the MIT License라이선스 표기가 되어 있지 않은 깃허브 public 소스 코드를 임의로 사용하면 저작권 침해이다! (라이선스에 적히 조건 이행하기.)단순히 소스코드가 공개되어 있다고 해서 오픈소스인 것은 아니고 OSI가 정한 요건을 충족하여 오픈소스 ..

1. Create React App 환경 만들기CRA(Create React App)란?Single-page application(SPA)으로, 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JS와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. CRA 공식 홈페이지에서는 CRA에 대해 다음과 같이 설명하고 있다.Less to LearnOnly One DependencyNo Lock-InCRA는 개발자가 개발에만 집중할 수 있게 자동으로 최적화해주고, 하나의 빌드 종속성을 가지며, 다양한 패키지를 사용하여 프로젝트 개발을 할 수 있다.CRA 환경 세팅1) react 앱 환경을 먼저 만들고npx create-react-app my-appcd my-appnpm start 새로운 React 앱 만들기..

1. 타입스크립트란?타입스크립트=자바스크립트+타입체크타입스크립트가 자바스크립트보다 큰 집합이라고 생각하면 된다. 자바스크립트와 달리 컴파일이 필요하다.설치 방법npm i typescript실행 방법다음과 같은 app.js 파일을 vscode에서 실행할 때는function logName(name: string) { console.log(name);}logName("rin");vscode 터미널 창에서 다음 명령어를 실행하면 된다.tsc app.ts그러면 동일한 이름의 js 파일이 생성된 것을 확인할 수 있다. 그리고 그 js 파일은 다른 js파일과 마찬가지로 node 명령어로 실행하면 된다.node 파일 이름그런데 ts 파일을 수정한다고 해서 js파일이 자동으로 수정되는 것은 아니니, 수정 후에는 컴파일..