Peter's hardware & software

Google I/O 2022에서 Firebae 쪽 변화를 한번 살펴봤는데 눈에 띄는 게 있더라고 원래 Firebase Hosting에서는 static 파일만 호스팅 해줬어. 그러니깐 Next.js 같이 SSR 지원해주는 애들은 단순히 Hosting 기능만으로는 서비스를 할 수가 없었지 그래서 Cloud function 쓰고 Hosting에서 연결하고 난리를 쳐줘야 Next.js를 돌릴 수 있었어. 그런데 이번에 업데이트를 했다고 하잖아? Next.js 폴더에서 Firebase deploy 한방만 때리면 자동으로 deploy해준다 그러네? 오~ 원래 AWS amplify는 100만년 전부터 되던 기능을 GCP Firebase는 이제서야 지원하다니... 2022.02.28 - [Next.js] - Next...

Nextjs에 로그인 적용하는 방법은 두가지라고 되어 있어. 첫 번째는 클라이언트에서 유저 데이터 Fetch하고 Loading state 사용하는 거고 (대부분 이런 방식을 사용하겠지) 그리고 두 번째는 서버에서 유저 데이터 Fetch하고 클라이언트에 아예 인증된 페이지만 주는 거지. 당연하겠지만 첫 번째 방식은 빠르지만 인증되지 않는 페이지들도 노출되고 두 번째 방식은 인증되지 않은 페이지는 클라이언트는 아예 보지도 못하므로 보안성은 훌륭할거야. 대신 서버는 병목이 엄청날거야. 매 request마다 페이지 pre-rendering해서 클라이언트에 뿌려줘야 하니깐. 그래서 ㅎㅎ 보통 첫 번째 방식을 사용하겠지 ㅋㅋㅋ 우린 또 느린 건 못참잖아? ㅋ 뭐 이런건 중요하지 않지 ㅋㅋ 그래서 Next.JS에서 ..

자 하나씩 순서대로 가자고~ next.js에 styled-components을 적용하는 건 그다지 어렵지 않아. 그냥 설치하고 yarn add styled-components @types/styled-components import해서 사용하면 끝. import type { NextPage } from "next"; import styled from "styled-components"; const Title = styled.h1` color: yellowgreen;//글씨 색 yellow green으로! `; const Home: NextPage = () => { return ( Hello world ); }; export default Home; 그런데 이렇게만 하면 처음 페이지가 로딩될 때 css가 ..

주로 Firebase를 사용하다 보니 GCP위주로 쓰게 되네. Next.JS를 해야해서 시험 삼아 비어 있는 프로젝트를 GCP App engine에 올려봤더니 하루 만에 비용이 청구되서 깜놀! App engine은 무료 사용 구간이 없나봐. 암튼 그래서 결과 공유하려고~ App engine 원래 비용은 아래 캡쳐 가장 작은 B1 인스턴스 사용하면 시간당 $0.065가 청구된다고 되어 있네. 한화로 시간당 82원 정도. 24시간이면 1,977원이겠네. 실제로 그런지 봤어. 두 가지로 테스트 해봤는데 첫 번째는 가변 인스턴스, 두 번째는 가장 저렴한 B1 인스턴스야. 청구된 비용은 아래 표로 만들어 봤어 ㅋ 인스턴스 종류 사용량 실제 청구 비용 시간당 비용 Flex(가변) 22.88 hour 1,929원 +..

next.js 에서는 font optimazation이라는 기능을 제공해. 웹 폰트를 fetch할 때 extra round trip을 제거해준다고 되어 있는데 ㅋㅋ 참 영어를 한글로 바꾸기 힘드네.. 원래는 추가적으로 다운받고 하는 절차가 발생하나 봐? 어쨋든 뭐 그냥 헤더에서 넣어서 쓰면 되나보다 했는데 넣으라는 위치가 따로 있네? 넣으라는 위치는 pages 폴더에 _document.js(tsx) 파일의 ); } } _document.js(tsx)라는 파일은 next.js 프로젝트에 기본적으로 포함되어 있지 않아서 만들어야 하는데 위 코드랑 내용 똑같아. 주석하고 웹폰트 사용하기 위한 tag만 추가한거야. 그리고 나머지 css 파일에서 font-family 설정하면 해당 폰트를 사용할 수 있지. 문서에..

Next.JS 프로젝트를 GCP에 올려 봤어 GCP 계정 당연히 있어야 하고 난 mac 에서 vscode로 개발하니까 참고하고.. (한참 글쓰다가 알았는데 결제 설정 안해놨으면 안돼 ㅠㅠ 그러니까 결제 설정하고 따라하자.) 먼저 next.js 프로젝트를 만들자. 터미널에서 npx create-next-app test --typescript code . typescript 싫은 사람은 뒤에 --typescript 빼도 되고~ 해보나 마나 잘 돌겠지. ㅎㅎ 그래도 돌려봐 ㅎ npm run dev 역시 잘 돌지 ㅎㅎ 나는 3000번 포트에 하고 있는게 있어서 localhost:3001로 뜨는데 보통 3000번으로 뜨니까 헤깔리지 말고 니들은 localhost:3000으로 테스트햐. 그러면 흐미 지겨운거~ 허구..

GCP firebase firestore 작업하다보면 Collection 이름을 변경하고 싶을 때가 있다. Collection 이름을 뭔가 부끄럽게 만들었다던지.. 할 때.. ㅋㅋㅋㅋ 하지만 Firestore는 Collection 이름을 변경하는 기능을 지원하지 않는다. 그래서 새로운 이름의 Collection을 만들고 기존 Collection의 Document 전체를 복사해야 한다. 이런 기능을 하는 툴을 만드는 건 어렵지 않지만 혼자서 북치고 장구치는 1인 기업을 하는 상황에 이런 툴까지 만드는 것은 쉬운 일이 아니다. 그리고 해서도 안된다. '이럴 때 사용하는 툴들이 있을거 같은데?' 하고 검색해보니 몇개가 나오는데 그 중 Firefoo가 괜찮아 보여 사용중이다. Collection이나 Docume..

Next.JS 앱은 초기에 렌더링 된 HTML을 보낸다고 하는데 일반 React앱과는 어떻게 틀린지 확인해 보고자 합니다. 읽어보기만 하는 것보다 직접 테스트를 해봐야 직성이 풀립니다. 자 그럼 테스트해보겠습니다. 테스트 방식은 이렇습니다. create-react-app와 next.js의 테스트 앱을 각각 구동하고 Javascript이 비활성화 되어 있을 때와 활성화 되어 있을 때의 차이를 비교해 봅니다. 먼저 일반적인 react.js 앱(create-react-app) 아래 명령을 수행해서 테스트 진행 npx create-react-app my-app cd my-app npm start 그러면 다음과 같은 화면을 볼 수 있습니다. 그러면 Javascript를 비활성화하고 다시 페이지를 열어봅시다. 크롬..

Next.JS 부르는 React Framework이 있습니다. React Framework이니까 프론트 엔드... 그런데 서버 렌더링을 지원한다고? 음 ㅋㅋㅋ 뭔 소린지 모르겠습니다. 서버 렌더링 하려면 그냥 호스팅 가지고는 안되는거 아닌가? 처음에는 Firebase Function 이나 Lambda를 사용해야 하려나 하고 찾아봤는데 AWS Amplify Hosting에서 Next.JS 서버 측 렌더링 지원한다는 글을 보게 되었어요 느흐흐흐 못참지 새로 나온건 해봐야지 초간략하게 말씀드리자면 Next.js 로 코드 짜고 github에 올리면 Amplify Hosting이 알아서 배포합니다. 매우 쉽죠. 그럼 함 해보시지요~ 약 20-30분 정도면 따라하기가 완료될거에요. 시스템 요구사항 - Node.js..