게으른개발너D

FRAMER(프레이머)는 코드기반의 디자인툴이다. 프레이머로 디자이너가 디자인을 하게 되면 React 샘플 코드로 생성이 된다. 이걸 Front end developer가 조금 수정을 해서 사용을 하면 되는 구조이다.토스(Toss)와 같이 요즘 서비스 운용하는 기업들은 디자인 시스템(design system)에 흠뻑 빠져있다. 디자인 시스템이란?서비스를 제공하는 자가 운용하는 각 브랜딩, UI등의 상세 구조들을 규격화하여 어느누가 그 자리에 배치되더라도 규격화된걸 그대로 사용해서 유지보수를 하면 아무런 문제가 발생되지 않도록 하는 일종의 정책서와 같은 것이다.  세일즈포스 닷컴의 라이트닝 디자인 시스템https://www.lightningdesignsystem.com/ Lightning Design Sy..

1. Log Out 앞의 게시물에서 작성한 firebase 코드로, 가입한 계정이 로그인이 되었으니깐 이제 로그아웃을 하자. 일단 Home으로 가서 그냥 확인용으로 로그아웃 버튼을 만들자. 로그아웃은 firebase 파일에서 생성한 auth 인스턴스를 호출한 다음 signOut만 하면 된다. // home.tsx import { auth } from '../firebase'; export default function Home() { const logOut = () => { auth.signOut(); }; return ( Log Out ); } 2. Firebase Error createAccount.tsx에서 try-catch 블록을 이용한 에러를 다루어보자. 가입을 할 때 이미 존재하는 이메일이거나..

1. Setup 파이어베이스 안에 있는 기능들은 너무 많아서 처음엔 그 제품 기능들이 다 비활성화 되어있다. 그래서 우리가 필요한 것들을 직접 선택해서 활성화 시켜줘야한다. 먼저 firebase 콘솔과 우리 코드 양쪽에서 Authentication을 활성화 시켜주자. 방법은 항상 같다. 먼저 firebase 콘솔에서 필요한 기능을 활성화한 다음 프로젝트 코드에서 initialize하면 된다. 1.1 firebase 콘솔 설정 project overview (프로젝트 개요)로 이동해서 authentication을 선택하자. get started (시작하기)를 누르자. 사용자가 어떻게 로그인하기를 원하는지 우리에게 묻고있다. 익명도 있지만 스팸 사용자가 많이 생길 수도 있어서 추천하지는 않는다. 우리는 일단..

1. Installation 매우 사용하기 쉬운 개발 환경을 제공하는 Vite를 사용할 것이다. https://vitejs.dev/ Vite Next Generation Frontend Tooling vitejs.dev $ npm create vite@latest 입력해서 vite 프로젝트를 만든다. 최신 버전으로 설치할거냐는 물음을 받을텐데, y를 누른다. 다음엔 프로젝트 이름을 적는다. 나는 glee_paw라고 정했다. 다음엔 js 라이브러리는 선택하는데, 나는 당연 react를 선택! 그리고 typescript를 사용할지, javascript를 사용할지 선택한다. 나는 typescript + SWC를 선택했다. 이제 프로젝트가 만들어 졌고, code glee_paw를 입력해서 vscode를 연다. ..

https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 1. What is Firebase firebase는 백엔드 서버 서비스 혹은 앱 개발 플랫폼이다. 기본적으로 의미하는 바는 애플리케이션을 만들거나 웹사이트를 만들 때 시간을 절약하는 데 사용할 수 있는 서비스이다. 많은 플랫폼을 지원하며 다양한 플랫폼에서 각각 필요한 많은 서비스를 제공한다. 서비스는 크게 세 가지 카테고리로 분류된다. Build, Relea..

1. Catch All 이제 catch-all URL을 만들어보자. catch-all URL은 뭐든 캐치하는 URL이다. 우리가 이걸 쓰는 이유는 SEO에 좋게하기 위해서다. 영화제목을 url에 넣으려고 하는데, 한글이나 띄어쓰기같은 문자는 알파벳이 아닌 다른 문자열로 나오기 때문에 보기에도, SEO에도 별로 좋지 않다. 예를들어 'Spider-Man No Way Home'을 url에서 'Spider-Man+No+Way+Home'처럼 나오게 하려고 한다. 현재 [id].js 라고 설정해 놓은 파일 이름을 바꿀 것이다. 지금은 id라는 하나의 변수만 받고있다. 앞에 ...을 넣어서 [...id].js로 파일명을 변경해보자. 그럼 Spider-Man: No Way Home' 제목이 들어간 url로도 상세페이..

1. Dynamic Routes Dynamic URL을 어떻게 다루는지 알아보자, 지금까지는 Home과 About 페이지인, / 와 /about 두가지 url이 있다. 영화 상세보기 페이지처럼 url에 변수를 넣는 방법에 대해 알아보려고한다. create-react-app의 react-router-dom에서는 해당 url은 예를들어 이런식으로 작성한다, /movies/:id 이렇게 하면 reate-router-dom은 :id 부분이 변수라는 걸 인식한다. 1.1 next.js pages url next.js에는 router가 없으므로 이런걸 하는 다른 방법이 당연히 존재한다. pages 디렉토리에서 오직 폴더와 이름가지고만 만들 것이다, /movies/all 이라는 url을 만들고싶다면 pages 폴더에..

1. Server Side Rendering next.js 의 한 기능에 대해 공부할 것이다. 이건 우리가 페이지가 오직 server side render만 할지 선택할 수 있게 한다. 우리가 reload 할 때 next.js가 해당 page를 html 형태로 export 하던지 pre render 하는 걸 알고 있다. 우리는 html이 우리 app 의 initial state(초기 상태)라는 것도 안다. 그래서 html에서 loading화면 같은 걸 기대할 수도 있다. 그래서 페이지를 inspect (개발자 도구)하면 어딘가에 loading같은 게 있을 것이다. 하지만 어떤 회사나 개발자들은 pre-rendering 된 이 loading을 유저에게 보여주기 싫을 수도 있다. fetch라던지 server..