개발 관련 기타/웹 (22) 썸네일형 리스트형 nodejs) getRandomItem - 임의로 1개 선택해서 반환하기 - 개발 기록 1 필요한 서비스 - db에서 random 으로 item 1개 선택- 관련 정보 응답 서비스 설계 - getRandomItem: 서비스 구현 - id list 받아옴- Math.floor 사용해서 list 중 하나 선- 해당 id 객체 받아옴 async function getRandomItem(req, res) { try { const itemIds = await Item.findAll({ attributes: ['id'] }); if (itemIds.length === 0) { res.status(404).send('No items'); } else { const randomIndex = Math.floor(Math.random() * itemIds.le.. [mui][nextjs][prisma] 게시판 만들기 - part 2 (reactjs를 nextjs로 포팅) 목적 기존 진행 사항: - part 1 에서 필요한 UI component 들 작성하였음 - 추가적으로, backend API 작성 시 필요한 database 및 schema를 prisma를 통해 구성하였음 진행 예정 사항: - 기존 작성한 react UI component 들을 새로운 nextjs 프로젝트로 포팅하는 과정 - UI component 들에 server-side rendering을 적용하는 과정 진행 과정 nextjs 프로젝트 생성 pages 사용 component 이동 server-side rendering 적용 nextjs 프로젝트 생성 npx create-next-app@latest pages 사용 component 이동 => 이동 완료 server-side rendering 적용 =.. [mui][prisma][express][mysql] 게시판 만들기 - part 1 진행 과정 기획 버튼 생성 틀 구성 table 작성 post 객체 정의 post 조회 post 작성 prisma-express 설정 editor에 title 넣는 곳 post 객체 재정의 REST API 설계 REST API 작성 frontend - backend 연결 - (part 2 에서 계속) 기획 이동 방법: - navbar 에 있는 햄버거 버튼 클릭 메뉴 중 게시판 주제 버튼 클릭 클릭 게시판 화면: - 다른 사이트 참고 버튼 생성 생성 방법: - 기존 mui 사용 (Menu 아래 MenuItem 하나 더 추가) 틀 구성 틀 위치: - 테이블이 보여질 와 사이 버튼 액션: - 분기에 사용할 boolean state 값 필요 const [news, setNews] = useState(false);.. react, figma 사용해서 webview 앱 용 icon.png 생성 icon 생성 size: 1024 x 1024 react 코드로 아이콘에 사용할 로고 작성 (기존 로고 변형해서 재사용) 관련코드: 나만 솔로 사이트 스크린샷 떠서 로고 이미지 획득 icon 제작용 피그마 템플릿 사용 템플릿 주소 https://www.figma.com/community/file/1155362909441341285 Expo App Icon & Splash | Figma Community www.figma.com 템플릿 원 안에 글자가 다 들어가게 해줌 figma 기능 사용해서 템플릿에서 png 파일 추출 [react-native] react 로 만든 web 사이트를 android / ios 앱으로 만들기 (webview 이용) 과정 소개 React Native 설치 새 프로젝트 생성 webview 추가 앱 아이콘 변경 앱 테스트 과정 1. React Native 설치 $ npx create-expo-app (프로젝트명) 위 과정으로 react native가 자동 설치됨 과정 2. 새 프로젝트 생성 위 과정으로 이미 프로젝트가 생성됨 과정 3. webview 추가 webview 설치: $ npx expo install react-native-webview webview 생성: App.js 수정 기존 App.js 내용 모두 삭제 관련 코드: import * as React from 'react'; import { WebView } from 'react-native-webview'; export default function App.. [ML][React] 카카오 애드핏 - 나는 솔로 테스트 를 통한 수익화 (Kakao Adfit 연동) 글 머리 진행 과정: 1. 카카오 배너 생성 2. 컴포넌트 생성 3. 컴포넌트 배치 4. 스크립트 삽입 진행 과정 1. 카카오 배너 생성 생성 방법: https://adfit.kakao.com 에서 생성 - 유형: 320x50 : 모바일용 얇은 띠배너형 진행 과정 2. 컴포넌트 생성 예제 코드: import React, { useEffect } from 'react'; function AdfitAd({ adUnit, width, height }) { const adRef = React.createRef(); useEffect(() => { if (window.kakao_ad_area) { window.kakao_ad_area.queue.push({ container: adRef.current, width.. 이전 1 2 3 다음
