분류 전체보기
-
20대에 꼭 해야 할 일 46가지 - 매년 한 개라도 한다면문화/책 2022. 8. 28. 09:00
“성공은 행동이라는 두 글자로 이루어진다” - 괴테 이미 절판된 책이고 언제 샀던 것인지 기억나지 않는다. 물론 책 내용도. 책이 처음 출판 된지는 약 20년이 다되가지만 난 10년 전쯤 읽지 않았을까 예상해본다. 그저 다시 읽어보는 이유는 과거와 현재의 나를 알고싶고 미래에 어떻게 변했을지 다시 확인해보기 위해서다. 책의 시작은 소설같은 이야기로 시작된다. 역사 속 이덕유라는 사람이 생전 모르는 사람의 목숨이 날아가는 순간에, 인품만을 보고 큰 돈을 빚 진채 살려주고 자신은 20년간 빚 때문에 힘들게 살다가 나중에 그 사람이 더 크게 보답한다는 내용이다. 이야기의 진위여부 같은 것은 전혀 와닿지 않았지만, 신용이라는 말의 무게를 느껴봐서 그런지 그냥 지나치기 힘들었다. 코칭에 대해 언급할 때 제갈공명의..
-
[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..
-
관계로부터 편안해지는 법 - '연습'을 하는 수밖에문화/책 2022. 8. 21. 09:00
사람은 마음의 여유를 가져야 비로소 또 새로운 무언가를 생각하고 창조할 수 있습니다. 과거에 읽은 책들 중 정리하지 않고 남겨두었던 책인데, 역시나 아무런 기억이 나질 않았다. 그래도 읽어보니 잘 했다는 생각이 든다. 세상에는 우리에게 ‘스트레스를 주는 사람'도 많지만 ‘편안하게 해주는 사람'도 있다. 책을 읽다보면 다양한 사례가 있어서 그런지 공감할 만한 내용들이 많아 심리적 안정감을 받게되는 것 같다. 또한 책 두께가 200페이지가 안되고 2페이지 씩 짧은 사례들로 구성돼서 그런지 부담없이 읽을 수 있어 상당히 좋았다. 과거에는 대학교를 입학할 때 쯤에는 안 그랬던 것 같은데, 성격이 조금씩 변하면서 지금의 나는 인간관계에 참 노력을 안하고 있다는 걸 책으로부터 많이 느낀다. 첫 장부터 컴퓨터 기계에..
-
[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은 ..