Peter's hardware & software

이것 저것 하려다 보니 기본적으로 들어가야 하는 것들이 더 필요한 것 같아. 1. 기본 Layout 설정해두는 거랑 2. Mui appbar랑 footer정도 만들어서 스토리북에 넣어두고(나중에 지우더라도) 3. storybook에 mui addon이 있네? 그것도 설치해볼거야. 해봤는데 뭐가 문제인지 잘 안되는 거 같더라구 ㅎㅎ next.js하려면 기본적으로 layout이 있어야겠지? 그치? 아닌가? ㅎㅎ 몰라 난 처음해보는 거라 ㅎ 그런데 뭐 세상에 정답이 어디있겠어? ㅋㅋㅋ next.js 문서 정독했는데 졸면서 읽었으니 다 까먹었겠지? ㅎ 그래서 layout 파트를 다시 읽어봤어. next.js 문서에서 소개하는 layout 방식은 두 가지가 있네. 하나는 _app.tsx에서 header foote..

next.js 기본 템플릿 만들기 계속해봅시당 2022.06.14 - [Next.js] - Next.JS 프로젝트 기본 템플릿 만들기#1 Next.JS 프로젝트 기본 템플릿 만들기#1 nextjs 말고도 이런 저런 것들이 많이 필요한 것 같아. 기본적으로 ui framwork도 하나 있어야 할 것 같고 tailwindcss도 사용하고 싶고 storybook도 사용하면 좋을 것 같고 .env.local, .npmrc, .nvmrc 파일도 만.. engschool.tistory.com 저번에 .nvmrc, .npmrc 만들고 package.json 수정했어. 그리고 mui 설치하고 SSR을 위한 _app.tsx, _document.tsx 도 생성/수정 했고 이제 tailwindcss 설치만 하면 내가 원하는..

nextjs 말고도 이런 저런 것들이 많이 필요한 것 같아. 기본적으로 ui framwork도 하나 있어야 할 것 같고 tailwindcss도 사용하고 싶고 storybook도 사용하면 좋을 것 같고 .env.local, .npmrc, .nvmrc 파일도 만들어놔야 하잖아. 또 package.json도 이리저리 만져놔야 하고.. next.js 프로젝트 할 때마다 하기 귀찮으니까 나님용 기본 템플릿 하나 만들어서 github repository 하나 파놔야겠다~ 싶더라고 ㅋㅋ 먼저 스토리북 설정은 끝냈고 👇 2022.06.10 - [Next.js] - Next.js에 StoryBook 설정하기! Next.js에 StoryBook 설정하기! 아니 이게 뭐야! 이것저것 검색하다보니... 현업에서 스토리북이라는..

이전 Storybook 설정하기에서 대부분 다 했는데 👇 2022.06.10 - [Next.js] - Next.js에 StoryBook 설정하기! Next.js에 StoryBook 설정하기! 아니 이게 뭐야! 이것저것 검색하다보니... 현업에서 스토리북이라는 걸 사용하고 있네.. 역시 등신 에휴.. 또 나만 몰랐네. 역시 사람은 다른 사람들이랑 어울려야 해 ㅋㅋ 혼자 이러고 있으니 engschool.tistory.com 아직 server side props는 설정하지 않았어. getServerSideProps 사용하면 서버에서 컴포넌트의 props를 준비하는데 ui 툴인 스토리북에서 될리가 없지. 그렇다고 그냥 놔두면 완벽한 기능 테스트가 안되고 팀원간에 miscommunication이 발생하게 되겠지!..

아니 이게 뭐야! 이것저것 검색하다보니... 현업에서 스토리북이라는 걸 사용하고 있네.. 역시 등신 에휴.. 또 나만 몰랐네. 역시 사람은 다른 사람들이랑 어울려야 해 ㅋㅋ 혼자 이러고 있으니 참. 스토리북은 ui 컴포넌트랑 page 빌드 툴인데 앱(웹)이랑 분리해서 따로 따로 개발할 수 있도록 돕는 아이래. 결국 ui 컴포넌트 빌딩, 테스트, documentaion의 기능을 제공해준다~ 하는 것이지. 홈페이지 슬로건에 다 나와 있는 말! 컴포넌트 드리븐이 뭐시여!? https://www.componentdriven.org/ 에 설명이 잘 나와 있어. 간단히 설명하자면 버튼이나 아바타 툴팁 같은 매우 작은 컴포넌트들 독립적으로 만들고 그 조합으로 form, header, list, table 같은 조금..

next.js 전용 ui framework이 있나? 궁금해서 검색해보니 ㅋㅋ 있네? 물론 회사 다니면서 실무 진행하는 개발자들은 디자인 팀이나 담당이 별도로 있으니까 큰 의미 없겠지만 난 혼자니깐 ㅋ 사실은 혼자 프론트 앤드, 벡엔드, 디자인까지 몽땅 다 해버리고 싶어 욕심을 부리고 있는데 ㅋㅋㅋ 대중이 좋아할만한 디자인 감각은 없으니까 ㅋㅋ 이런 건 framework! 링크는 아래에 https://nextui.org/ 👇 NextUI - Beautiful, fast and modern React UI Library Make beautiful websites regardless of your design experience. nextui.org 사실 nextui.org 말고도 mui라던지 react-bo..

web page도 트렌드가 변할 것 같아서 미리 좀 공부해두는 건데.. 미리인건지는 잘 몰름 ㅋ 암튼 next.js 같은 웹 프레임워크 위에 three.js 사용하는 걸 좀 해보고 싶어서 시도해봤어. 물론 시작하기 전에 검색을 좀 해보니 내가 좋아하는 유튜브 채널 애플코딩에서는 쌩 자바스크립트로 코드를 짜고 있었고 👇👇 https://www.youtube.com/watch?v=CojyGfCMvuU 아니면 @react-three/fiber ? 라는 모듈을 사용해서 하는 것도 있었는데 -_- 모듈 이름이 별로야~ 짝퉁같은 느낌이 들어서 안쓰고 해볼라고. ( 근데 검색해보니까 한 주에 다운로드가 10만이나 되네ㅋ 관리도 잘되는 거 같고 ㅎㅎㅎ 다음엔 이걸 써봐야겠어!) 암튼 그래서 애플 코딩에서 하는 걸 ne..

2022.06.02 - [Next.js] - nextauth + firebase authentication #1 nextauth + firebase authentication #1 nextjs에 next-auth를 넣고 firebase authentication이랑 연동하는 걸 해봤는데 되긴 하더라구. 그래서 블로그를 남기는데 이것 저것 테스트하던 프로젝트 위에 하니까 지저분하고 그래서 새로 nextjs 프로젝 engschool.tistory.com 이전 글에 이어서 계속할게. nextjs에다가 nextauth로 google 로그인 하는 것까지 했어. GCP 설정도 했고. 이제 firebase authentication 활성화하고 연결해 붙이는 것까지 해보자구. 이전까지 구글 로그인은 됐는데 해당 로그인..

nextjs에 next-auth를 넣고 firebase authentication이랑 연동하는 걸 해봤는데 되긴 하더라구. 그래서 블로그를 남기는데 이것 저것 테스트하던 프로젝트 위에 하니까 지저분하고 그래서 새로 nextjs 프로젝트 만드는 것부터 nextauth 설정, GCP, firebase 설정까지 차근차근 가보는 글이야. github에도 깔끔하게 남겨두고 하려고 👇👇👇👇👇👇 Github: https://github.com/peter-bang/nextauth-fb-authentication GitHub - peter-bang/nextauth-fb-authentication: Next.JS example project for nextauth and firebase authentication Next..

미친짓을 많이 하는 편이긴 한데 -_-;; 굳이 nextauth를 사용하면서 firebase authentication에 붙여봤어 무쓸모인가? ㅋㅋ 아 몰라 ㅋㅋ 뭔가 잘 정리되어 있고 nextjs에 최적화 되어 있는 nextauth를 사용하면서 일반 DB사용하면서 개고생하는게 아니라 firebase authentication 같은 기능으로 관리받고 싶었어! ㅋ 내용을 먼저 간단하게 설명하자면 1. firebase 프로젝트 새로 만들기, gcp 사용자 인증정보 새로 만들기(client id랑 client secret 받아야 구글 로그인 가능) 2. next.js에 nextauth설치 후 google login example 작성해서 테스트 해본 다음에 3. firebase 설치 후 init 했고 4. ..