아웃소싱 프로젝트
Keep - 현재 만족하고 있는 부분
- 팀원들과 지속적으로 소통하고 자주 pr하며 공지한 부분
- 자기가 맡은 부분 뿐만 아니라 전체 프로젝트에 관심을 가지며, 문제를 같이 해결해 나갔다.
- 사전에 구현한 기능뿐만이 아니라 프로젝트 진행 중 즉흥적으로 추가 기능을 설계 하고 구현 하였다.
- 팀원들과 먼저 레이아웃을 정해 전체적인 틀을 잡아 구현한 점이 좋았다. 또한 의사소통을 통해 변경된 사항이 있으면 바로바로 커밋했다.
Problem - 불편하게 느끼는 부분
- 사전에 전역에서 사용할 state에 대한 논의 과정이 없어서 작업을 하면서 다른 컴포넌트에서 사용된 state를 불러와서 사용하기가 힘들었다.
- 서로가 짠 코드가 겹치는 부분이 있어서 부분적으로 생긴 오류로 인해 프로젝트 진행 과정이 더뎌졌다.
- 기한 설정을 하지 못하여 시간적으로 많이 촉박했고, 디테일한 부분에 신경을 못 썼다.
- 프로필 이미지를 변경할 때 변경된 이미지가 바로 파이어스토어에 주소를 저장할 수 없어 변경 기능 구현이 오래 걸렸다.
Try - Problem에 대한 해결책, 당장 실행 가능한 것
- S.A. 작성 시 필수 구현 사항을 결정한 후 전역 상태 관리 및 공용 컴포넌트에 대한 추가 논의를 진행하여 반복되는 state 및 컴포넌트 사용을 최소화하여 효율적인 코드를 구현할 수 있다.
- 이미지 파일 업로드 시 UI에 즉시 업로드될수 있도록 구현이 가능하다.
- 파이어베이스 이용시 서버가 필요한 작업중인 동료와 주기적으로 협의 하여 작업이 겹치는 부분에 오류를 최소화 할수 있다.
- 프리뷰는 blob 객체 형태로 이미지를 보여주며 스토리지에 저장하는 방식 외에 또 다른 방식이 있는지 찾아봐야겠다.
추가 학습
🔎 프로필 프리뷰 방법
- 데이터 URL
- Blob URL
이미지 파일을 URL로 변경하는 방법
1. 데이터 URL
데이터 URL은 데이터를 URL 내에서 base64로 인코딩된 문자열로 나타낸다. 데이터 URL을 변경하려면 일반적으로 base64로 인코딩된 문자열을 새 데이터로 바꾼다.
<img src="data:image/png;base64,iVBORw0KG..." alt="Image">2. blob URL
Blob URL은 일반적으로 XMLHttpRequest, FileReader 또는 Canvas API를 통해 얻은 이진 데이터에 대한 개체 URL을 만드는 데 사용된다.
URL.createObjectURL은 JavaScript에서 제공하는 함수로, Blob 또는 File 객체를 메모리에서 URL로 변환해주는 역할을 한다. Blob URL을 변경하려면 업데이트된 데이터나 콘텐츠로 새 Blob을 만들 수 있다.
// 이미지 파일 가져오기
const imageInput = document.querySelector("#image-file");
const imageFile = imageInput.files[0];
if (imageFile) {
// blob으로 이미지 파일 생성
const blob = new Blob([imageFile], { type: "image/jpeg" });
// blob을 URL로 변환
const url = URL.createObjectURL(blob);
// 이미지를 표시할 img 엘리먼트 생성
const img = document.createElement("img");
// src 속성 설정
img.src = url;
// 웹 페이지에 이미지 추가
document.body.appendChild(img)
} else {
console.error("No file selected")
}## 오늘의 회고 --- 오늘 팀 프로젝트 발표를 하고 KTP 회고까지 마쳤다. 다른 팀들이 구현한 기능들을 보니 신기한 기능들도 많았다. 이 짧은 시간 내에 저걸 다 어떻게 구현한걸까? 그래도 우리팀이 최고다. 오늘 밤을 꼴딱 새면서 잘 마무리 한 것 같다.
일단 내가 공들였던 UI와 다중 필터링 부분에서 칭찬을 들어서 좋았다. 물론 다른 팀원분이 한 것들도 칭찬을 들었다. 아쉬운 부분들에 대해서 피드백도 받았는데, 다 알고 있던 부분이었다. 디테일적으로 더 섬세하게 구현하지 못해서 조금 아쉽기는 했지만 열심히 해서 만족스럽다.
Frontend Engineers