24.01.17

현재는 다시 MYPAGE작업중이다

저번에 쓰던코드는 버리고 userSlice를 이용해 전역 상태관리를하고 로그인한 정보를 가져온다

리액트 쿼리를 이용해서 수파베이스 user데이터를 가져오고

params를 이용해 id값과 일치하는 데이터를 뿌린다

import { useDispatch } from 'react-redux';
import { useQuery } from '@tanstack/react-query';
import { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useState } from 'react';
import { UserInfo } from 'api/user';
import { setError, setLoading } from '../../redux/modules/userSlice';
import { setUser } from '../../redux/modules/userSlice';
import { useParams } from 'react-router-dom';
import { RootState } from 'redux/config/configStore';
import {
  StUserinfoBOx,
  Avatar,
  Username,
  UserDetails,
  UserDetail,
  UserWrapper,
  ProfileBox,
  ProfileTitle,
  ProfileInput,
  Textarea,
  CharacterCount,
  StUserinfoBOxTop,
  ManageButton,
  StBackground,
  StLabel,
  InputGroup
} from './styles';
import userimg from 'assets/img/userimg.png';

const MyPage = () => {
  const [profile, setProfile] = useState('');
  const { id } = useParams();
  const dispatch = useDispatch();

  // userSlice의 상태관리를 위해 상태 가져오기
  const user = useSelector((state: RootState) => state.userSlice.userInfo);
  console.log(user);

  // 리액트쿼리를 이용해서 supabase에서 user 데이터 가져오기
  const { data } = useQuery({
    queryKey: ['userInfo', id],
    queryFn: UserInfo
  });
  console.log(data);

  // params로 가져온 id값과 일치하는 데이터 찾기
  useEffect(() => {
    try {
      dispatch(setLoading(true));
      const userData = data?.find((userData) => userData.id === id) || null;
      console.log(userData);
      dispatch(setUser(userData));
    } catch (error) {
      dispatch(setError(true));
    }
  }, [dispatch, data, id]);

  const handleProfileChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setProfile(e.target.value);
  };

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {user && (
        <StBackground>
          <StUserinfoBOxTop>
            {/* <Avatar src={user.avatar_url} alt="User Avatar" /> */}
            {/* 아바타 부분은 예시를 위해 assets 폴더에 기본이미지 추가하였습니다 */}
            {/* userinfo테이블에 url을 담는 형식이나 dkslaus수파베이스 스토리지도 사용해야할듯싶네요 */}
            <Avatar src={userimg} alt="User Avatar" />

            <UserWrapper>
              <Username>{user.username}</Username>
              {user.Profile}
            </UserWrapper>
          </StUserinfoBOxTop>

          <StUserinfoBOx>
            <ProfileTitle>프로필 정보</ProfileTitle>
            <ProfileBox>
              <ProfileTitle>닉네임</ProfileTitle>
              <ProfileInput type="text" maxLength={30} placeholder={user.username || '닉네임 수정'} />
              <ProfileTitle>프로필 소개</ProfileTitle>
              <Textarea value={profile} onChange={handleProfileChange} placeholder="프로필 소개를 입력하세요." />
              <CharacterCount>{profile.length} / 200</CharacterCount>
            </ProfileBox>
          </StUserinfoBOx>
          <StUserinfoBOx>
            <ProfileTitle>계정 관리</ProfileTitle>
            <ProfileBox>
              {' '}
              <StLabel htmlFor="email">이메일</StLabel>
              <InputGroup>
                <ProfileInput id="email" type="email" placeholder={user.email} />
                <ManageButton>관리</ManageButton>
              </InputGroup>
              <StLabel htmlFor="password">비밀번호 변경</StLabel>
              <InputGroup>
                <ProfileInput id="password" type="password" />
                <ManageButton>전송</ManageButton>
              </InputGroup>
            </ProfileBox>
          </StUserinfoBOx>
        </StBackground>
      )}
    </div>
  );
};

export default MyPage;

 

---

25.이미지 최적화에 대해 설명해주시고 방법에 대해 설명해주세요.

• 답변

이미지 최적화는 웹 페이지 로딩 속도를 향상시키기 위해 중요하며, 적절한 형식을 선택하는 것이 필요하다.

이미지의 해상도를 실제 표시 크기에 맞게 조정하고, 불필요한 메타데이터를 제거한다.

손실 및 무손실 압축을 이용해 파일 크기를 줄이며 품질을 유지한다.

이미지 지연 로딩을 적용해 로딩 효율을 높인다.

CDN을 사용하여 전 세계 서버 네트워크로 빠른 로딩 시간을 제공한다.

자동 최적화 도구를 활용해 여러 최적화 단계를 간소화하고 웹사이트 성능을 향상시킨다.

 

26.프론트엔드 개발 시 개발자 도구를 활용한 경험이 있다면 설명해주세요.

• 답변

프론트 엔드 개발자로써 레이아웃 구성요소들을 주기적으로 체크하며 개발자 도구 내에서 동적으로 스타일을 변경해 가며 내가 원하는 레이아웃을 만들거나 css 적인 디버깅을 할때 굉장히 자주 활용하며

서버로부터 데이터를 주고 받는 과정에서 정상적인 신호를 보내고 기대하는 데이터가 기대하는 매개변수명을 들고 오는지 체크하는 것과 신호가 불필요하게 여러번 오고가지 않는 지를 체크할때,

서버와 쿠키와 헤더를 통해 토큰을 정상적으로 주고 받는지 ,

때때로 필요한 쿠키와 로컬스토리지 변수가 정상적으로 생성되고 조회가 되는지를 체크하기 위해 항상 사용합니다.