[TIL] 240604 (React 뉴스피드 프로젝트 게시물 수정 / supabase 프로필 업로드)

솔·2024년 6월 4일

React TIL supabase

TIL

목록 보기

59/268

🥞 오늘 한 일

뉴스피드 프로젝트
- 게시물 수정 기능 제작
- supabase에 프로필 사진 및 자기 소개 업로드 기능 제작
알고리즘 코드카타
- week3 practice2 풀이
Supabase 가이드 영상
- 스토리지(Storage) 사용하기 시청

뉴스피드 프로젝트

우선 어제에 이어 게시물 수정 기능을 완료했다. 그리고 마이페이지에서 프로필 사진을 변경하기 위해서는 우선 회원가입 기능이 제작되어야 하기 때문에, 먼저 이미지를 내려받고 올리는 기능부터 제작했다. 그 다음으로는 회원가입 기능을 맡으신 팀원분이 어느 정도 완료되셔서, 처음에 가입 시 프로필 이미지 및 description을 supabase에 올리는 기능을 도와드렸다. 굵직한 기능들을 어느 정도 완료해서 다행인 날이었다.

// Description.jsx

function Description() {
	const currentUser = useSelector((state) => state.user.currentUserInfo);
	const [image, setImage] = useState(null);
	const [imageUrl, setImageUrl] = useState("");
	const [description, setDescription] = useState("");
	const fileInputRef = useRef(null);
	const navigate = useNavigate();

	const handleImageChange = async (event) => {
		const file = event.target.files[0];
		if (file) {
			const reader = new FileReader();
			reader.onloadend = () => {
				setImage(reader.result);
			};
			reader.readAsDataURL(file);
			// supabase에 이미지 등록 및 imageUrl 등록
			const { data } = await supabase.storage.from("avatars").upload(`avatar_${Date.now()}.png`, file);
			setImageUrl(`https://piuvdfomheejtudrutht.supabase.co/storage/v1/object/public/avatars/${data.path}`);
		}
	};

	const handleButtonClick = () => {
		fileInputRef.current.click();
	};

	const handleSubmit = async () => {
		await supabase.from("profiles").insert({
			image_url: imageUrl,
			description,
			userId: currentUser.id
		});
		navigate("/login");
	};

	return (
		<>
			<LoginJoinHeader />
			<div className="container">
				<StyledDescriptionBg>
					<StyledDesciptionText>본인을 소개해주세요!</StyledDesciptionText>
					<UploadButton
						onClick={handleButtonClick}
						style={{
							backgroundImage: image ? `url(${image})` : "#b4b9c9",
							backgroundSize: "cover"
						}}
					>
						사진을 업로드 해주세요
					</UploadButton>
					<input
						type="file"
						accept="image/*"
						ref={fileInputRef}
						style={{ display: "none" }}
						onChange={handleImageChange}
					/>

					<TextArea
						value={description}
						onChange={(e) => setDescription(e.target.value)}
						placeholder="당신이 좋아하는 것에 대해 적어보세요."
					/>
					<SubmitButton type="submit" onClick={handleSubmit}>
						가입하기
					</SubmitButton>
				</StyledDescriptionBg>
			</div>
		</>
	);
}

아직 정리가 덜 된 코드. 기존에 팀원분이 제작하신 코드에서 supabase로 데이터를 업로드하는 부분을 제작했다. 내일은 이 올라간 데이터를 마이페이지에서도 적용할 수 있도록 기능을 추가할 예정이다.

🍽️ 문제 해결

알고리즘 코드카타 - practice2

문제

주어진 정수 배열 nums에서 두 원소의 합이 특정 값 target에 가장 가까운 경우의 합을 반환하는 함수를 작성하세요.
정수 배열 nums와 정수 target이 주어집니다.
배열에서 두 원소의 합이 target에 가장 가까운 경우의 합을 반환합니다.
배열은 최소 두 개의 원소를 포함하고 있습니다.

다음의 조건을 만족해야 합니다:

가장 가까운 경우가 두가지 있을 경우, 작은 값을 반환합니다.
while 문을 사용하여 구현합니다.

문제에서 '가장 가까운 경우의 합'을 구하는 것은 목표값 target과 가장 가까운 값을 찾는 것을 의미합니다.
따라서 합이 target과 정확히 같은 경우는 이 문제의 의도에 맞지 않습니다.
즉, 두 원소의 합이 target과 같은 경우는 제외됩니다.

내 풀이

function closestSum(nums, target) {
  let result = null;
  let i = 0;
  while (i < nums.length - 1) {
    let j = i + 1;
    while (j < nums.length) {
      const absNum = Math.abs(target - (nums[i] + nums[j]));
      if (absNum !== 0) {
        if (result === null || Math.abs(target - result) > absNum) {
          result = nums[i] + nums[j];
        }
      }
      j++;
    }
    i++;
  }
  return result;
}

반복문을 통해 nums의 끝에서 두번째까지 만큼 반복해준다. (마지막 숫자는 뒤에 더해줄 숫자가 없기 때문에)
반복문 내에서 현재 nums의 다음 숫자부터 끝까지 반복해준다.
두 반복문을 통해, nums에서 나올 수 있는 두 숫자의 경우의 수를 전부 가져온다.
target에서 해당 두 수를 합한 값을 빼고, 해당 값을 양수로 변환했을 때 가장 작은 숫자가 target과 가장 가까운 숫자이다.
그러므로 현재의 두 수를 target에서 빼고 양수로 변환한 값을 새 상수 absNum에 넣는다.
만약 absNum이 0일 경우, target과 정확히 같으므로 제외한다.
result는 처음에 null이므로, 첫 두 수의 합을 result에 넣어준다.
그 다음부터는 target에서 result를 빼고 양수로 바꾼 값이 absNum보다 클 경우, 이번 두 숫자의 합이 target에 더 가깝다는 의미이므로 result를 이번 두 숫자의 합으로 바꾼다.
반복문이 다 돌면 target과 가장 가까운 두 숫자의 합이 result에 들어와 있으므로, 해당 result를 return한다.