프로그래밍/클론 코딩
-
[React MUI 5] 인스타그램 클론코딩 - PostModal 구현 | 게시물 생성 모달프로그래밍/클론 코딩 2022. 8. 29. 23:50
결과물 1. src/components/Modal.js 를 생성 (MUI Modal) import * as React from 'react'; import Modal from '@mui/material/Modal'; import Box from '@mui/material/Box'; const style = { position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', width: '100%', maxWidth: '500px', height: '500px', bgcolor: 'background.paper', boxShadow: 24, paddingBottom: '2rem', borderRadius: '12px', }..
-
[React MUI 5] 인스타그램 클론코딩 - Login Page 소셜 로그인 버튼 | google, apple, facebook프로그래밍/클론 코딩 2022. 8. 27. 23:23
결과물 1. Header.js 에 테스트용 user 추가 const [user, setUser] = React.useState(false); 2. 3항 연산자로 user 변수에 따라 헤더 오른쪽 상단 다르게 보이도록 수정 {/* profile */} {user ? ( {/* desktop icon group */} ...... ) : ( 로그인 )} 3. 로고 및 로그인 버튼 클릭시 이동 처리 위해 next router 사용하기 import { useRouter } from 'next/router'; // ...... const router = useRouter(); const MoveHomePage = () => { router.push('/'); }; const MoveLoginPage = () =>..
-
[React MUI 5] 인스타그램 클론코딩 - 피드 오른쪽 프로필(MiniProfile, Suggestions) with Faker.js | Avatar, List프로그래밍/클론 코딩 2022. 8. 25. 23:59
결과물 1. MiniProfile.js 에 사용할 mockProfile 생성 import * as React from 'react'; import { faker } from '@faker-js/faker'; function MiniProfile() { const [profile, setProfile] = React.useState(); React.useEffect(() => { const mockProfile = { email: faker.internet.email(), username: faker.name.findName(), avatar: faker.internet.avatar(), id: faker.datatype.uuid(), }; setProfile(mockProfile); }, []); ret..
-
[React MUI 5] 인스타그램 클론코딩 - 게시물(Posts) 영역 만들기 with Faker.js | caption, comment, TextField프로그래밍/클론 코딩 2022. 8. 22. 23:57
결과물 1. CardContent와 Typography로 caption 채우기 import CardContent from '@mui/material/CardContent'; ...... {/* Caption */} {username} {caption} 2. 글자가 넘치므로 한 줄로 줄이기 {/* Caption */} ...... 3. Post.js 파일에 mockComments 생성 (with faker.js) import { useEffect, useState } from 'react'; import { faker } from '@faker-js/faker'; ...... function Post({ id, username, userImg, img, caption }) { const [comments,..
-
[React MUI 5] 인스타그램 클론코딩 - 게시물(Posts) 영역 만들기 with Faker.js | CardHeader, CardMedia, CardActions프로그래밍/클론 코딩 2022. 8. 21. 23:59
결과물 1. src/components/Post.js 생성 function Post({ id, username, userImg, img, caption }) { return ( {/* Header */} {username} {/* Media */} {/* Buttons */} {/* Caption */} {/* Comments */} {/* TextField */} ); } export default Post; 2. src/components/Posts.js 생성 및 Faker.js로 mock import { faker } from '@faker-js/faker'; import { useEffect, useState } from 'react'; import Post from './Post'; functi..
-
[React MUI 5] 인스타그램 클론코딩 - 상단 스토리(Stories) 만들기 with Faker.js프로그래밍/클론 코딩 2022. 8. 20. 20:00
결과물 1. Faker.js 설치 npm install @faker-js/faker@^7 --save-dev 2. Stories에 faker.js를 사용하여 mockStories(가짜 데이터) 만들기 import { faker } from '@faker-js/faker'; import { Box } from '@mui/material'; import { useEffect, useState } from 'react'; function Stories() { const [stories, setStories] = useState(); useEffect(() => { const mockStories = [...Array(20)].map((_, i) => ({ username: faker.name.findName(..
-
[React MUI 5] 인스타그램 클론코딩 - Feed Layout 구성프로그래밍/클론 코딩 2022. 8. 19. 20:00
결과물 구현 1. src/components 폴더 아래에 Feed.js, Stories.js, MiniProfile.js 추가 import Box from '@mui/material/Box'; import MiniProfile from './MiniProfile'; import Stories from './Stories'; function Feed() { return ( {/* posts */} {/* sugestions */} ); } export default Feed; 2. Feed.js의 main 컴포넌트에 display: grid 및 grid-template-columns 설정 function Feed() { return ( ...... ) } 3. 왼쪽 Stories가 포함된 section은 ..
-
[React MUI 5] 인스타그램 클론코딩 - Header 오른쪽 상단 네비게이션 아이콘들 넣기프로그래밍/클론 코딩 2022. 8. 18. 13:58
결과물 1. Header.js 오른쪽 상단에 네비게이션 아이콘들 넣기 - material-icons에서 Home, Send, AddCircle, Group, Favorit 아이콘을 가져옴 import HomeIcon from '@mui/icons-material/Home'; import SendIcon from '@mui/icons-material/Send'; import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; import GroupIcon from '@mui/icons-material/Group'; import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'; - ..