웹 (7) 썸네일형 리스트형 [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.. [web][hosting] 웹호스팅 퍼블리싱 hosting.kr cpanel 사용 (react 프로젝트 업로드) 말머리 진행 과정: 1. git repository clone 2. 파일 교체 3. 결과 확인 과정 1. git repository clone - 전제조건: npm run build 결과물을 하나의 git repo에 저장 - cpanel 기능 중 git 사용: - Clone URL 입력 후 생성 버튼 클릭 과정 2. 파일 교체 - cpanel 기능 중 파일 관리자 사용: - /public_html/ 디렉토리 아래로 파일들 복사 과정 3. 결과 확인 - 스크린샷: [web][https] 저렴하게 domain 구매, web hosting 구매 및 HTTPS 인증서 설정 (react, 웹서비스) 말머리 작업 과정: 1. domain 구매 2. web hosting 구매 3. https 인증서 설정 과정 1. domain 구매 구매 방법: - hosting.kr 이 제공하는 page.place 의 subdomain 이용 (free) 구매 내역: (web hosting과 같이 구매) 과정 2. web hosting 구매 구매 방법: - slim plan 이용 (1개월 단위, 1000원) 구매 내역: 과정 3. https 인증서 설정 인증서 설정: - web hosting 구매 시 subdomain (*.page.place) 이용 하기로 하여 https 인증서 자동 설정 됨 [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 다음
