취업 준비를 하면서 2개의 프로젝트를 포트폴리오에 포함했는데 처음으로 혼자서 진행했던 프로젝트여서 그런지 코드를 다시 보니 고칠점들이 많이 보였다. 또한, 더 공부한 지금 시점에서 리팩토링을 진행하면서 얼마나 성장 했는지 확인할 수 있을 것 같아 시간을 내서 리팩토링을 진행해보려 한다. 1. 문제점 => 목표 1. 코드 가독성 - Emotion을 사용하면서 스타일 컴포넌트들을 너무 무분별하게 사용했고, 컴포넌트명도 연관성이 떨어지는 등 이해하기 어려워 가독성이 떨어짐 => 컴포넌트명을 이해할 수 있도록 쉽게 변경하고, 불필요한 컴포넌트 수를 줄인다! - 같은 결과값을 가지는 로직을 컴포넌트 별로 중복해서 사용한 함수들이 있어 코드의 길이가 길어짐 => 훅을 통해 같은 결과값을 가지는 로직들을 간결하게 사..
이전 게시물에도 있지만 부트캠프 과정 중에 React를 활용해 CINEBANK라는 영화 정보 검색 및 리뷰 커뮤니티 서비스를 개인 프로젝트 과제로 진행한 적이 있었다. CINEBANK 프로젝트를 제출했을 때는 부족한 부분들도 많았고, 매우 만족스럽지 못했다. 그런데 이번에 Next.js와 Sanity를 공부하면서 배운 내용을 적용해 개인 프로젝트를 진행해보고 싶었고, 부족했던 이전 영화 커뮤니티 서비스를 기획했던 것을 토대로 새로 만들어 보고자 했다. * 기술스택: Next.js, Typescript, Tailwind CSS, Sanity, SWR 1. 기능 이전 프로젝트와 기능적인 부분에서는 큰 차이는 없다. 1. 로그인/회원가입 - 구글 계정을 통해 로그인/회원가입 (회원가입 시 유저 데이터베이스 생..
개인 프로젝트를 진행하면서 Firebase를 사용해 사용자 계정, 데이터베이스를 구현했는데 이 글에서는 내가 구현한 회원가입/로그인 기능에 대해서 기록하고 공유해보려한다. Firebase Authentication 1. Firebase 메인페이지에서 콘솔로 이동해 프로젝트를 추가 2. 프로젝트 관리 페이지 빌드 메뉴에서 Authentication 탭으로 들어가 시작하기 버튼 클릭해 준다. 3. 로그인 제공 방법 설정 : 다양한 로그인 제공 업체를 설정할 수 있는데 업체를 선택 후 사용 설정으로 체크해주면 된다. 나는 해당 프로젝트를 통해 가입된 이메일과 본인의 구글 계정을 통해 로그인할 수 있도록 선택했다. 추가를 하고나면 아래 이미지와 같이 나온다. 4. 앱 생성 : 프로젝트 메인 화면으로 돌아가면 앱..
이전에 부트캠프 과정으로 React 프레임워크 활용 과제를 진행했었다. 과제를 통해서 부족한 부분이 있었지만 제출 기한때문에 보완하지 못했던 것이 있었고, 3월 13일 ~ 4월 2일 약 3주간 이러한 부분들을 새로운 토이프로젝트를 통해 공부하면서 배포까지 진행보았다. ※ 기술스택: Typescript, React, Emotion, Firebase Auth, Firestore Database, Context api 1. 개요 및 기능 자주 이용하는 쇼핑몰 중 무신사스토어, 솔드아웃이 있는데 비슷한 컨셉을 목표로 웹사이트로 프로젝트를 진행했다. 상품 데이터는 하드코딩으로 JSON 데이터를 만든 후 JSON Server로 사용하다가 Glitch로 배포해 사용했다. 로그인/회원가입부터 쇼핑몰의 기본적인 기능에 ..
HTML/CSS 과제, Javascript 과제, React 과제를 매달 진행해왔지만 만들어진 가이드라인이 있었다. 처음으로 기획부터 개발까지 진행할 수 있는 과제였고, 설레는 마음으로 1월 23일 ~ 2월 17일간 프로젝트를 진행했다. ※ 기술스택: Typescript, React, Tailwind css, Firebase Auth, Firestore Database 1. 개요 및 기능 나는 영화를 많이 보는 편인데 영화를 보기 전에 리뷰나 후기들을 찾아보곤 했다. 하지만 리뷰는 네이버 이외에는 찾기 힘들었고 그마저도 신뢰성이 떨어지는 리뷰들도 많았다. 후기는 블로그 리뷰들이 많았다. 그래서 영화에 대한 정보들을 쉽게 볼 수 있고, 리뷰나 후기들을 서로 공유하고 작성자의 신뢰도까지 평가할 수 있는 웹사..
