게으른개발너D

React에서 자주 사용되는 디자인 패턴들은 상태 관리, 컴포넌트 구조, 코드 재사용성 등과 관련되어 있다.디자인 패턴들은 상황에 맞게 선택하여 사용할 수 있으며, 복잡한 애플리케이션에서는 상태 관리나 컴포넌트 구조를 명확히 하는 데 큰 도움이 된다.대표적인 몇 가지 패턴을 간단한 예시와 함께 소개하겠다.    Container-Presenter Pattern 이 패턴은 컴포넌트의 역할을 명확히 분리하기 위해 자주 사용된다. Container 컴포넌트는 상태와 비즈니스 로직을 관리를, Presenter 컴포넌트는 UI를 담당한다.// Presenter: UI를 담당const UserProfile = ({ user }) => ( {user.name} {user.email} );// Cont..

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

1. RESTful API RESTful API는 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스이다. 1.1 API API (Application Programming Interface)는 다른 소프트웨어 시스템과 통신하기 위해 따라야하는 규칙을 정의한다. 개발자는 다른 애플리케이션이 프로그래밍 방식으로 애플리케이션과 통신할 수 있도록 API를 표시하거나 생성한다. 웹 API는 클라이언트와 웹 리소스 사이의 gateway(출입구, 통로)라고 할 수 있다. 1.1.1 클라이언트 클라이언트는 웹에서 정보에 접근하려는 사용자이다. 클라이언트는 API를 사용하는 사람이거나 소프트웨어 시스템일 수 있다. 1.1.2 리소스 리소스는 다양한 애플리케이션이 클라이언트에게 제공하는 ..

Client(browser)에서 서버에 Request를 하면 서버는 Response를 보낸다. 적절한 처리가 이루어져서 성공 응답과 함께 결과 값을 보내주기도 하고, 정상적인 처리가 되지 않은 경우에는 실패 응답과 함께 에러 정보를 보내주기도 한다. HTTP 서버 응답 코드는 100번대 단위로 구분되어 있다. 세자리 숫자의 첫번째 숫자(Response Class)만 보고도 어떤 종류의 응답인지 알 수 있다. Response Class Response Class Code Response Class 의미 설명 1 Informational Request를 받고 처리중에 있음 2 Success Request를 정상적으로 처리함 3 Redirection Request 완료를 위해 추가 동작이 필요함 4 Clien..

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 폴더에..