분류 전체보기
-
[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'; - ..
-
[React MUI 5] 인스타그램 클론코딩 - Header 만들기 (mobile)프로그래밍/클론 코딩 2022. 8. 17. 15:51
결과물 Header.js 구현 과정 1. header.js 파일 다음과 같이 수정 ...... {/* logo */} ...... MUI 기본 breakpoints는 xs, sm, md, lg, xl 로 구성되 있음 display: { xs: 'none' } 은 display: 'none'과 같음 display: { sm: 'block' } 은 sm(600px) 이상이면 display: 'block'으로 해달라는 말 따라서 600px 보다 작으면 로고가 사라지게 해줌 2. 작은 인스타그램 로고 이미지 넣기 {/* logo */} ...... {/* mobile logo */} {/* search */} ...... 3. 검색바 길이 줄여주기 {/* search */} ......
-
[React MUI 5] 인스타그램 클론코딩 - Header 만들기 (desktop)프로그래밍/클론 코딩 2022. 8. 16. 12:00
결과물 Header.js 구현 과정 1. src/index.js 파일 다음과 같이 수정 import * as React from 'react'; import Box from '@mui/material/Box'; import Head from 'next/head'; import Header from '../components/Header'; export default function Index() { return ( {/* */} {/* */} ); } sx는 MUI 5에서 css와 theme 등의 스타일을 다룰 때 메인으로 사용하는 속성 2. src/components/Header.js 생성 후 AppBar, Toolbar, Box를 사용하여 구조 잡기 import AppBar from '@mui/mat..
-
[React MUI 5] 인스타그램 클론코딩 - NextJS, MUI 환경 설정프로그래밍/클론 코딩 2022. 8. 15. 12:00
MUI 5, NextJS 12, emotion 11, react 18 을 사용합니다. 1. NextJS & MUI 의 example project 다운로드 curl https://codeload.github.com/woosuk288/setup/tar.gz/main | tar -xz --strip=1 setup-main/nextjs12-mui5 2. 패키지들을 설치 cd nextjs12-mui5 && npm install 3. 실행 후 localhost:3000 에서 화면이 뜬다면 완료 npm run dev
-
엔젤투자 알아야 성공한다 - 한국과 미국의 생태계는 다르다문화/책 2022. 8. 14. 09:00
창업자가 엔젤투자를 원하는 이유는 모두 네 가지인데, 첫째가 돈이며, 둘째는 인맥이다. 그리고 셋째는 경영과 관련된 조언을 듣기 위한 것이고, 넷째는 투자회수(Exit)가 용이하기 때문이다. - 마이크 메이플스 | 엔젤투자자 이전에 정부지원사업 중 하나에 신청해보면서 엔젤투자매칭펀드라는 걸 처음 알게됐는데, 그 때 이 책을 받았다. 검색해보니 2012년에 초판이 발행되서 현재까지 개정이 이뤄지고 있는데 PDF로도 무료로 받을 수도 있게 되어있다. 이전에 분명 거의 받자마자 책을 읽었는데 지금 보니 아무 기억이나질 않았다. 그래서 메모할 겸 다시 읽었다. (읽을까말까 고민함) '엔젤'은 원래 미국 브로드웨이에서 유래되었다. 1920년대 미국을 중심으로 많은 오페라가 만들어져 공연되었으나 어떤 오페라는 작품..
-
firebase cloud functions 설치, 설정 with typescript | cors프로그래밍/흔적 2022. 8. 11. 17:25
여러번 설치 했었음에도 같은 실수를 반복하는거 같으니 메모. 1. firebase-tools 설치 후 터미널에서 폴더 하나를 만들어 들어간 후 아래 명렁어 입력. firebase init functions 2. project 선택 후 Typescript 선택 3. ESLint는 생략을 추천한다. (no) (이게 많은 번거로움과 문제들을 일으키곤 하니, 필요하다면 나중에 설정하도록 하자.) 4. 실행하면 로컬에서 테스트 할 수 있는 http 주소를 준다. 이를 브라우저 주소창에 입력 후 접속해본다. cd functions && npm run serve 5. server-side에서 요청시는 문제가 없지만, client-side에서 요청시 cors 에러가 나므로 cors를 추가해준다. import * as ..
-
cloud functions express cors error with typescript | 오류, 에러, 버그프로그래밍/버그(bug) 2022. 8. 11. 17:24
소스 코드 import * as express from "express"; import * as cors from "cors"; const app = express(); app.use(cors({ origin: true })); 기존의 express 설정시 사용하던 방법이랑 동일하다. cors 설정이 완료됐다. 그런데...... cloud functions 관련해서 아직도 cors 버그에 대한 질문과 답변이 계속 생긴다. 분명 예전에도 삽질을 했던 부분인데 또 보고 있었다. 알고보니 사실 cors 관련 버그가 아닌 경우도 많았다. (나도 그런 경우) cors 관련 소스를 넣고 분명 오류 없이 정상적으로 컴파일이 됐는데, cors 오류가 계속 발생해서 아주 미칠고 환장할뻔 했다. 오류 상황 typescri..