본문 바로가기

전체 글

 (139)
통합 쇼핑 플랫폼 - 12st 회원가입 본인인증, 사용자 입력 정보 저장(Feat. Firebase 적용기) 기존에는 백엔드 코드를 직접 작성하여 사용자 데이터를 서버에 저장하였으나, 별도의 백엔드 코드를 작성하지 않아도 되는 Firebase를 이용하여 사용자 정보를 저장하고 관리하는 방식으로 수정하고자 했다. 백엔드 코드를 별도로 작성하지 않고 api 사용만으로 사용자 정보를 관리할 수 있어 빠르게 진행될 거라 예상했지만 사용법도 정확히 모르는 상황에서 Firebase 적용하는 과정이 너무 어려웠다. 이번 게시글에서는 next.js 프로젝트에 Firebase 적용했던 과정을 기록하고자 한다. Firebase App 초기화 및 환경 설정 Firebase를 사용하기 위해서는 먼저 Firebase App을 초기화해야 하며 초기화를 통해 Firebase 프로젝트와 App의 연결이 설정이 된다. 이를 통해 App의 설..
통합 쇼핑 플랫폼 - 12st Troubleshooting 🚀 (이벤트 버블링) 구현하고자 했던 기능은 다음과 같다. 쇼핑 카트 버튼을 클릭하면 장바구니 모달이 나타난다. 해당 모달을 사라지게 하는 방법은 '닫기'와 모달의 바깥 영역을 클릭하는 방법이 있다. 간단한 기능이지만, 기존과는 다른 모달 구현 방법으로 인해 어려움을 겪었다. 이번 게시글에서는 모달 구현을 위한 과정을 기록하고자 한다. 🤔 이렇게 하면 되지 않을까..? // cartModal.tsx useEffect(() => { window.addEventListener("click", onhideCartModal); return () => { window.removeEventListener("click", onhideCartModal); }; }, []); CartModal 컴포넌트가 마운트 되었을 때 window의 cl..
[프리온보딩 프론트엔드 챌린지 3월] - ROUTE 수정 (feat. Route Object) 프리온보딩 3월 사전 과제였던 로그인 구현. 과제의 세부 사항으로 여러 개의 페이지가 언제든 추가될 수 있다고 가정하고 페이지 별로 로그인 여부를 판단하고 구조를 확장이 있었다. 이번 게시글에서는 멘토님의 1회 차 강의를 기반으로 사전 과제를 리팩터링 하고자 한다. 로그인 구현을 위한 개념 코드 리팩토링 전 로그인 구현을 위한 개념을 살펴보자. 로그인의 간략한 정의는 사용자가 시스템에 접근하거나 동작을 수행하는 것을 제어하고 기록하기 위한 컴퓨터 보안 절차이다. 이러한 정의를 서비스 관점에서 살펴보면 어떨까? 쇼핑몰 애플리케이션을 이용하는 사용자가 있다 가정해 보자. 이 사용자는 상품을 사고 상품이 너무 마음에 들어 리뷰를 남기고 싶어 한다. 이 경우 사용자를 식별하지 않고 상품에 대한 리뷰를 남기게 해..
통합 쇼핑 플랫폼 - 12st Refactor 👨🏻‍🔧 (Library) 이전에 진행했던 쇼핑몰 프로젝트를 리팩터링 하고자 한다. 초기 프론트엔드 skill을 배운 지 얼마 되지 않았을 시점에 팀원들과 함께 구축한 프로젝트이기 때문에 다양한 라이브러리를 사용하지 못했다. 이번 게시글은 적절한 라이브러리 선택과 그 이유에 대해 정리하고자 한다. TypeScript JavaScript의 경우 동적 타입으로 런타임(동작 환경)에서 동작할 때 오류를 발견할 수 있으며, 이는 큰 문제로 이어질 가능성 있다. TypeScript의 경우 코드를 작성할 때 타입을 정해서 작성하기 때문에 코드 작성 단계에서 타입에 대한 오류를 확인할 수 있다. 때문에 코드를 작성할 때 발생하는 오류를 JavaScript보다 줄일 수 있게 된다. 위의 간단한 이유만으로도 TypeScript의 사용 이유는 충분..
Next.js 간단한 웹사이트 만들기 앞서 정리한 Next.js의 기본 정리를 기반으로 직접 사용해 간단한 웹사이트를 만들어 보자 첫 페이지 만들기 웹사이트는 세 페이지로 구성되어 있으며 시작 페이지 하나와 뉴스 목록을 보여주는 뉴스 페이지, 뉴스의 세부 정보를 보여주는 페이지로 구성되어 있다. 뉴스를 클릭하면 해당 뉴스의 내용이 전체 페이지에 뜨게 된다. 이런 구조를 만들려면 pages 폴더에서 세 개의 파일을 만들어야 한다. index.js : 루트 경로의 페이지 news.js : domain/news 요청에 해당하는 페이지 something.js : 하나의 뉴스를 클릭하면 보이는 뉴스 상세 페이지 여기서 파일 이름이 중요하다. index의 경우 특수해서 / 뒤에 아무것도 없을 때 해당 파일을 불러오지만, 다른 파일 이름은 경로의 이름으..
Next.js Data fetching Next.js에서 Data fetching Next.js에서 데이터를 가져오는 방법은 여러 가지가 있으며, 애플리케이션 사용 용도에 따라 방법을 선택해 사용하면 된다. 보통 리액트에서는 데이터를 가져올 때 useEffect 안에서 가져온다. 하지만 Next.js에서는 다른 방법을 사용해 가져온다. getStaticProps : Static Generation으로 빌드(build)할 때 데이터를 불러온다. (미리 만들어 준다.) getStaticPaths : Static Generation으로 데이터에 기반하여 pre-render 시 특정한 동적 라우팅을 구현한다. (예 : pages/post/[id].js) getServerSideProps : Server Side Rendering으로 요청이 있을 때 ..
Next.js 기본 정리 Next.js 란 ? 리액트의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크이다. CSR의 경우 브라우저가 서버에 요청을 보내고 응답으로 들어온 JS를 다운로드한다. 그다음 브라우저는 리액트를 실행시켜 로딩이 끝나면 화면에 렌더링이 된다. 또한 로딩 도중에는 크롤링이 불가능하기 때문에 검색 엔진에 최적화되지 못한다. 반면 SSR의 경우 서버에서 렌더링 준비된 HTML 파일을 브라우저로 보내준다. 때문에 브라우저에서는 별도의 로딩 없이 바로 렌더링이 가능하다. HTML을 바로 렌더링 한 뒤 JS를 다운로드하고 리액트를 실행시킨다. 일반적으로 리액트로 개발할 때 SPA(Sing Page Application)을 이용하며 CSR(Client Side Rend..
MobX 톺아보기 4 - MobX core - Reactions MobX 공식 문서의 MobX core Reations를 톺아보자. [ 부수효과와 함께 reaction 실행 ] reaction은 MobX의 모든 것이 모이는 곳이기 때문에 이해해야 할 중요한 개념이다. reaction이 목표는 자동으로 발생하는 부수효과를 모델링하는 것이다. 관찰 가능한 상태에 대한 consumer를 생성하고 관련 사항이 변경될 때마다 자동으로 부수효과를 실행하는 데 그 중요성이 있다. 하지만 이 점을 염두에 두고 여기서 설명하는 API는 거의 사용되지 않는다는 점을 인식하는 것이 중요하다. 이들은 종종 다른 라이브러리(예 : mobx-react)나 애플리케이션에 특정한 추상화에서 추상화되어 있다., 하지만 MobX를 이해하기 위해 reaction이 어떻게 생성되는지 살펴보자. 가장 간..

티스토리툴바