취업 준비를 하면서 2개의 프로젝트를 포트폴리오에 포함했는데 처음으로 혼자서 진행했던 프로젝트여서 그런지 코드를 다시 보니 고칠점들이 많이 보였다.또한, 더 공부한 지금 시점에서 리팩토링을 진행하면서 얼마나 성장 했는지 확인할 수 있을 것 같아 시간을 내서 리팩토링을 진행해보려 한다. 1. 문제점 => 목표1. 코드 가독성- Emotion을 사용하면서 스타일 컴포넌트들을 너무 무분별하게 사용했고, 컴포넌트명도 연관성이 떨어지는 등 이해하기 어려워 가독성이 떨어짐=> 컴포넌트명을 이해할 수 있도록 쉽게 변경하고, 불필요한 컴포넌트 수를 줄인다! - 같은 결과값을 가지는 로직을 컴포넌트 별로 중복해서 사용한 함수들이 있어 코드의 길이가 길어짐=> 훅을 통해 같은 결과값을 가지는 로직들을 간결하게 사용할 수..
이전 게시물에도 있지만 부트캠프 과정 중에 React를 활용해 CINEBANK라는 영화 정보 검색 및 리뷰 커뮤니티 서비스를 개인 프로젝트 과제로 진행한 적이 있었다.CINEBANK 프로젝트를 제출했을 때는 부족한 부분들도 많았고, 매우 만족스럽지 못했다.그런데 이번에 Next.js와 Sanity를 공부하면서 배운 내용을 적용해 개인 프로젝트를 진행해보고 싶었고, 부족했던 이전 영화 커뮤니티 서비스를 기획했던 것을 토대로 새로 만들어 보고자 했다. * 기술스택: Next.js, Typescript, Tailwind CSS, Sanity, SWR 1. 기능이전 프로젝트와 기능적인 부분에서는 큰 차이는 없다. 1. 로그인/회원가입- 구글 계정을 통해 로그인/회원가입 (회원가입 시 유저 데이터베이스 생성) ..
오늘은 Next.js를 공부하기 시작한지 몇 일이 지난 시점에서 기본적으로 Next.js가 무엇인지, 장/단점 등 공부를 하며 기록해보려한다. 우선 Next.js는 React 라이브러리의 프레임워크이다.React를 사용하면서 이 프레임워크를 사용하는 가장 큰 이유는 SEO(검색 엔진 최적화)를 위한 SSR(Server Side Rendering)이 가능하기 때문이다.또 다른 몇 가지 이유들에는 다양한 기능들을 제공하는 것인데 타입스크립트 기본 지원, 코드 분할 (Code Splitting), 파일 기반 구조, 이미지 최적화 등이 있다.성능 향상, SEO, 개발자 편의 등 여러 가지 장점을 가져오기 때문에 많은 기업들에서도 사용되고 있다. 아래 글은 이전에 작성한 게시글인데 Next.js 를 사용하..
오늘은 JavaScript를 공부할 때 정리해두었던 객체 복사와 관련된 내용을 기록해보려한다. 1. 객체 복사 문제점객체 변수는 메모리 어딘가에 저장되어 있는 객체를 참조할 수 있는 주소값이 저장된다.아래 코드와 같이 A = B 와 같은 방식으로 객체 복사를 할 경우, 동일한 객체를 참조하는 주소 값을 복사하게 되어 각 객체 변수의 값을 변경할 경우 서로 영향을 주게되는 문제점이 발생한다.이러한 문제점은 얕은 복사(Shallow copy), 깊은 복사(Deep Copy)를 통해 해결할 수 있다. const user = { name: "sally", age: 23};const clone = user;clone.name = "park";console.log(clone.name); // output: "..
지난 글에 이어서 프로젝트 내의 설정과 코드에 대해서 기록해보려 한다. 1. Firebase 패키지 설치# npm i firebase 2. Firebase initialize인증 기능을 사용하기 위해서 먼저 initializeApp 함수를 실행하여 Firebase를 초기화해야 하는데 index 파일 내에 작성해도 되지만, 나는 별도로 firebase.ts 파일에 작성해 import 해서 사용했다.앱 생성 시 나왔던 SDK를 그대로 복사해서 사용해주면 되는데, firebaseConfig 내의 키값들은 외부에 노출되는 것을 막기 위해 환경변수로 설정해두었다.import { initializeApp } from "firebase/app";const firebaseConfig = { apiKey: impo..
개인 프로젝트를 진행하면서 Firebase를 사용해 사용자 계정, 데이터베이스를 구현했는데 이 글에서는 내가 구현한 회원가입/로그인 기능에 대해서 기록하고 공유해보려한다. 1. Firebase Authentication1. Firebase 메인페이지에서 콘솔로 이동해 프로젝트를 추가 2. 프로젝트 관리 페이지 빌드 메뉴에서 Authentication 탭으로 들어가 시작하기 버튼 클릭해 준다. 3. 로그인 제공 방법 설정 : 다양한 로그인 제공 업체를 설정할 수 있는데 업체를 선택 후 사용 설정으로 체크해주면 된다. 나는 해당 프로젝트를 통해 가입된 이메일과 본인의 구글 계정을 통해 로그인할 수 있도록 선택했다. 추가를 하고나면 아래 이미지와 같이 나온다. 4. 앱 생성 : 프로젝트 메인 화면으로 돌아..
쇼핑몰 프로젝트를 진행하면서 스타일 공유 커뮤니티 페이지에서 이미지 업로드 / 미리보기를 처음으로 구현해보았다.이미지 업로드 / 미리보기는 프로필, 게시글 등 다양한 곳에서 사용될 수 있기에 라이브러리도 있지만 직접 구현해보고 공부한 내용을 기록해보려 한다. 1. FileReaderWeb API로 FileReader는 File, Blob 객체가 저장하고 있는 바이너리 데이터를 '비동기적'으로 읽어주는 객체이다.기본동작은 read - load Event - result 의 과정을 거친다. FileReader 객체를 생성한 후에 readAsDataURL()은 File 또는 Blob을 읽은 뒤 base64로 인코딩된 문자열을 result 라는 속성에 담는다.onload()는 성공적으로 파일을 읽었을 때 실..
거의 모든 웹사이트나 앱에서 사용자의 편의를 위해 검색어 자동완성 기능이 구현되어 있다고 생각한다.부트캠프 과제에서 모두 검색어 자동완성 기능은 구현을 했었기 때문에 기록을 해두려한다.최근 진행했던 토이프로젝트 검색어 자동완성 Code가독성을 위해 css 코드나 불필요한 코드들은 정리한 코드. 1. Input에 입력되는 데이터를 searchValue 상태값에 업데이트2. showDropDown 함수를 searchValue(검색어)가 바뀔때마다 실행하기 위해 useEffect() 처리3. 상품데이터에서 filter() 를 통해 상품명에 검색어가 포함된 데이터들만 필터링해주고 dropDownList 상태값에 업데이트4. 필터링된 데이터인 dropDownList를 map 함수를 이용해 렌더링export de..
