연습 또 연습/js 연습문제

패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프_JS과제 후기 (CRUD, Firebase DB 활용한 이미지 등록관리앱)

furaha 2023. 8. 27. 18:18
반응형

이번 2차 과제는 약 2주라는 시간 동안 javascript로 사진 관리자 서비스를 만드는 것이었다

프로필 등록 / 수정 / 삭제를 해야하는데

 

여기서 필수는 

첫째, 이미지를 등록 관리 할 수 있어야 했고

둘째, AWS S3 / Firebase 같은 서비스를 이용하는 것이 필수 조건이었다

 

AWS S3와 Firebase 둘 다 한 번쯤은 사용해 본 적이 있긴 했지만

그 당시에는 말 그대로 따라친 수준이어서 습득된 상태가 아니었다

그래서 이번에 세팅하는 첫 시작부터 많이 헤맸다

 

 

 

 

우선, 과제를 시작하고 진행하는 과정에서 부딪혔던 점들을 먼저 적어보고자 한다.

 

1. class 모듈화

현재 인강으로 듣고 있는 주제가 class 모듈화이기 때문에 그 방식을 활용해서 과제를 하고 싶었다

그런데 인강으로 그 개념을 활용한 프젝을 겨우 이해하며 따라갔다 보니

나중에 리팩토링을 하면 모를까,, 처음부터 쪼개고 게다가 CRUD에 필요한 데이터까지 다루려고 하니까

시작이 너무 어렵게 느껴져서 한 이틀정도 고민하다가 포기했다,,

일단 페이지별로 파일만 나눠서 스크립트를 작성하고 함수별로 최대한 기능을 묶어보자 싶었다

 

2. firebase 설치부터 난관

npm install -g firebase-tools

 

firebase-tools를 먼저 설치하는데 계속 설치가 안되었다

검색해 보니 설치가 안되면 거의 95%의 확률로 Nodejs 설치 문제라는데

역시나 나 같은 경우는 Nodejs 최신버전으로 업그레이드를 해야 했었다

 

16.x.x 에서 18.x.x 로 업데이트!

 

Nodejs 업데이트하니까 firebase-tools 설치 완료되었다!

 

Nodejs 버전 업데이트 하는 방법 (자꾸 까먹어서 기록해 놓기)

 

// 강제로 캐시 삭제
$ sudo npm cache clean -f

// n 모듈 설치
$ sudo npm install -g n

// n 모듈을 사용하여 Nodejs 설치
// 다른 버전의 Node.js 를 설치하려면 sudo n 5.11.0 이런식으로 입력
$ sudo n stable

 

그리고 firebase 관련 어이없는 또 하나의 오류!

미리 보기를 띄우기 위해 firebase serve를 터미널에 입력하고 localhost:5000으로 열었는데

assets 폴더에 넣어둔 css 파일이 먹혀있지 않았다

 

이유는???

public 폴더에 안 넣어줘서ㅎㅎ public 밖에 assets 폴더가 있었는데

firebase가 public 폴더 안에 있는 파일들을 호스팅 하기 때문에 루트 디렉토리에 public 폴더를 꼭 넣어주어야 한다!

그래서 아래 구조처럼 내가 작성할 파일들을 모조리 public 폴더 안에 넣어주었다

 

 

 

이렇게 하나하나 오류를 맞이하며 걸음마부터 터득하는 중..........

 

3. 프로필 상세페이지

프로필 상세페이지를 구현하기 위해

url에 해당 프로필의 id 값을 쿼리 정보로 담아서 

프로필 클릭 시에 해당하는 정보들을 출력되게 구현했다

 

이제는 수정 버튼을 누르면 출력된 정보들이 다시 정보를 수정할 수 있는 input으로 바뀌게 하고 싶었다

DOM 조작은 어렵지 않았으나 데이터를 Input에 어떻게 넣어줄까 고민했다

 

value 값

 

input의 value 값!

사실 너무 간단한 방법인데 그 value 가 생각나지 않았다,,

value에 값을 넣어주고 사용자가 값을 변경하게 된다면 firestore DB에 데이터를 업데이트하도록!! 코드를 작성해서

아래 화면과 같이 완성했다.

 

 

그리고 사용자 입장에서 본인이 이미지를 선택하면 파일명이 뜨는데 

파일명보다 이미지 미리 보기를 구현하면 훨씬 편할 것 같아서

이미지 미리보기를 구현했다.

 

구현한 코드

 

imageInput.addEventListener('change', function (event) {

  // 미리보기 영역 보이게
  previewWrap.style.display = 'block';

  // 선택한 이미지 파일 변수에 담기
  const selectedImage = event.target.files[0];

  if (selectedImage) {
  
  // FileReader 객체 생성
    const reader = new FileReader();

  // 파일 읽기가 완료되었을 때 실행
    reader.onload = function (e) {
      imagePreview.src = e.target.result;
    };
    
  // 선택된 파일의 데이터를 url로 변환
    reader.readAsDataURL(selectedImage);
    
  } else {
    imagePreview.src = '';
  }
  
});

 

4. firebase 규칙

firebase에 규칙이라는 것이 있다

 

누구나 데이터를 수정하는 것을 막기 위해서는

프론트보다 백엔드에서 막는 것이 제일 안전하다

그러기 위해서 규칙을 firebase에서 정해줄 수 있다

 

기본 문법은 다음과 같다

 

경로 = /collection/document
경로 = /collection/{아무런이름} --> 모든 문서

match 경로 {
  allow read : if true ;
  allow write : if request.auth != null && request.auth.uid == resource.data.uid ;
  // 로그인이 되어있고, 로그인한 사람의 uid 와 게시글의 uid 가 일치한다면
}

// write 란? update & create & delete 다 포함

 

 

5. 검색어 기능 구현!

 

 

 

'firebase 검색어 필터링'이라고 검색한 결과

where() 함수를 알게 되었다

where() 메서드는 필터링할 필드, 비교 연산, 값의 3가지 매개변수를 사용한다

나는 inputValue라는 입력한 값과 같거나 큰 혹은 입력값 뒤에 이어서 입력한 문자열

즉 입력값으로 '시작하는' 검색어를 필터링 되게 구현했다.

 

그러나 문제가 있었다.

'김까칠'이라는 이름이 '김' 혹은 '김까'라고 입력하면 검색이 되지만

뒤에서부터 '까칠'이라는 단어는 검색이 되지 않았다.

그래서 이 부분을 리팩토링 시간에 개선했고 그 결과는 다음 포스팅에!! https://furaha.tistory.com/30

 

function searchList() {
  const inputValue = searchInput.value;

  db.collection('person')
    .where('name', '>=', inputValue)
    .where('name', '<=', inputValue + '\uf8ff')
    .get()
    .then((result) => {
      // 검색한 결과 렌더링
    });
}

 

 

 

반응형