카테고리 없음
Fiesta Tour_14일차
juni_shin
2024. 8. 2. 23:11
return (
<div className="mx-[20px]">
<div className="mt-[56px] flex justify-between">
<button onClick={handleBack}>Go Back</button>
<p className="text-[18px] font-bold">My Page</p>
<button className="text-action-color text-[14px]" onClick={logout}>
Logout
</button>
</div>
<ProfileView userId={id} />
<div className="mb-2 mt-4 flex justify-around">
<button onClick={() => setSelectedComponent('Wishlist')}>Wishlist</button>
<button onClick={() => setSelectedComponent('Post')}>Post</button>
<button onClick={() => setSelectedComponent('Reservation')}>Reservation</button>
<button onClick={() => setSelectedComponent('Review')}>Review</button>
</div>
{selectedComponent === 'Wishlist' && <LikeList />}
{selectedComponent === 'Post' && <PostList />}
{selectedComponent === 'Reservation' && <ReservationList />}
{selectedComponent === 'Review' && <ReviewList userId={id} />}
</div>
); return (
<div className="mt-[20px]">
{profile ? (
<div className="flex">
{profile.avatar && (
<Image
src={`${profile.avatar}?${new Date().getTime()}`}
alt="Profile"
width={56}
height={56}
className="rounded-full"
/>
)}
<div className="ml-4">
<div className="flex items-center">
<p className="text-[18px] font-bold">{profile.name}</p>
{profile.region ? (
<p className="ml-2 text-[14px]">{profile.region}</p>
) : (
<p className="ml-2 text-[14px]">Please set the region</p>
)}
</div>
<button onClick={goToProfilePage} className="mt-2 text-[12px]">
Edit Profile
</button>
</div>
</div>
) : (
<div>Loading...</div>
)}
</div>
); return (
<div className="mt-[20px] max-w-[360px]">
{data.map((post) => (
<div key={post.id} className="relative mb-[16px]">
<Link href={`/detail/${post.id}`}>
<div className="flex">
<Image
src={post.image ?? '/icons/upload.png'}
alt={post.title ?? 'Default title'}
width={80}
height={100}
/>
<Like postId={post.id} userId={user.id} />
<div className="ml-[8px]">
<p className="overflow-hidden text-ellipsis whitespace-nowrap text-[14px] font-bold">{post.title}</p>
<p>
{post.startDate && post.endDate
? `${new Date(post.startDate).toLocaleDateString()} - ${new Date(post.endDate).toLocaleDateString()}`
: 'No date information'}
</p>
<p className="text-[13px]">{formatPrice(post.price)}/Person</p>
</div>
</div>
</Link>
</div>
))}
</div>
);
기술 면접 준비
- 클로저에 대해 설명해주세요.
- 답변)
- 의도: 어려운 개념인 클로저에 대한 지식을 가지고 있는지 확인하는 질문.
- 팁: 굳이 어려운 단어로 설명하지 않아도 됩니다.
- 모범 답안: 자바스크립트에서는 작업이 종료되어 호출 스택에서 빠져나오게 되면 참조가 사라져 가비지 컬렉터에 의해 메모리에서 사라지게 됩니다. 그런데 호출 스택에서 빠져나왔지만 특정 행동에 의해서 참조가 사라지지 않았다면 어떻게 될까요? 이 객체는 아무도 접근할 수는 없지만 메모리에 존재는 하는, 일종의 유령이 되는 겁니다. 이러한 특징을 활용하여 데이터 은닉화 및 캡슐화를 구현할 수 있습니다. 다만 남용할 경우 메모리의 누수를 피할 수 없다는 단점도 있습니다.
- 답변)
- 자바스크립트의 호이스팅에 대해 설명해주세요.
- 답변)
- 의도: 호이스팅에 대해 이해하고 있고, 어떤 오류가 호이스팅 때문인가 구분할 수 있는지 확인하는 질문.
- 모범 답안: 호이스팅의 영어 뜻은 바로 끌어올리다입니다. 그렇기에 자바스크립트의 호이스팅도 끌어올린다는 의미인데요. 바로 코드 실행 전에 변수 선언과 함수 선언을 스코프의 최상단으로 끌어올리는 것을 뜻합니다. 원래 C언어 같은 프로그래밍 언어를 사용했을 때는 변수나 함수가 무조건 상단에 선언이 되어 있어야 했습니다. 그래야 아래 줄에서 참조가 가능하니깐요. 하지만 자바스크립트는 실제로 선언된 위치와 상관 없이 최상단으로 선언부가 끌어올려지기에 선언 위치 앞에서도 호출이 가능해집니다. 다만 이게 함수, var, const/let의 경우에 따라 달라지는데요. 함수의 경우에는 어디서든 호출이 가능하고 제대로 작동도 합니다. 하지만 var의 경우에는 선언 전에 호출한다면 undefined를 반환하게 됩니다. 그러나 이게 오히려 오류를 안 내서 불편한 나머지 const/let은 선언 전에 호출하면 에러를 내보내게 되었습니다. 물론 에러는 내보내지만 호이스팅이 되지 않은 건 아니란 점에 주의해야 합니다.
- 답변)
- 리액트에서 가상 돔을 사용하는 이유에 대해 설명해주세요.
- 답변)
- 의도: 리액트의 기본 원리와 가상 돔의 핵심을 이해하고 있는지, 그리고 가능하면 useState와의 관계성도 설명할 수 있는지 확인하는 질문
- 모범 답안: 실제 돔은 HTML의 요소를 트리로서 가지고 있는 객체 기반의 모델이며, 브라우저는 실제 돔을 기반으로 화면을 렌더링합니다. 반면에 가상 돔은 실제 돔을 경량화한 복사본으로, 리액트의 최적화를 위해 사용됩니다. 실제 돔을 직접 조작하는 것은 성능 비용이 큰 작업이기 때문에, 리액트는 상태가 업데이트 될 때마다 우선 빠르고 가벼운 가상 돔을 업데이트하고, 결과를 실제 돔과 비교합니다. 이후 변경된 부분만 실제 돔에 반영함으로써 불필요한 리소스 사용을 최소화하고 성능을 향상시킵니다. 이 과정을 가장 쉽게 살펴볼 수 있는 리액트의 메서드는 바로 useState입니다. 이 상태관리 훅을 통해 상태를 업데이트하면 상태 값이 곧바로 반영되지 않습니다. 왜냐면 상태 업데이트는 그저 변수에 데이터를 담아내는 것이 아니라, 앞서 설명했던 가상 돔과 실제 돔의 비교 과정이 실행되기 때문입니다. 상태 값이 자기 자신을 참조하여 상태를 업데이트할 때 생기는 오류는 대부분 이 때문입니다. 이러한 문제를 해결하기 위해 useState 훅에 값이 아닌 콜백 함수의 참조를 인자로 전달할 수 있습니다.
- 답변)
- useEffect의 실행 순서를 컴포넌트 라이프 사이클에 관련지어 설명해주세요.
- 답변)
- 의도: 컴포넌트 라이프 사이클과 useEffect의 이해도를 가지고 있는지, 각 라이프 사이클에서 어떤 작업을 처리해야 하는지 설명할 수 있는지 확인하는 질문.
- 모범 답안: 컴포넌트 라이프 사이클을 간단하게 설명하자면 create-mount-update-unmount로 함축할 수 있습니다. create는 컴포넌트가 말 그대로 생성된 것입니다. 중요한 것은 이 다음부터입니다. mount는 컴포넌트가 생성된 후에 실제 돔에 렌더링 되는 순간을 뜻합니다. mount의 한글 뜻인 장착에서 유추할 수 있습니다. 그리고 이 순간이 바로 useEffect 내부의 코드가 실행되는 시기입니다. 컴포넌트가 화면에 렌더링 되었기 때문에 이때 HTML 태그를 가져와 이벤트를 등록하거나, 데이터를 fetching 해오는 등의 작업을 처리하게 됩니다. update는 컴포넌트에 변화가 생겼을 때를 뜻합니다. useEffect의 의존성 배열을 사용하면 특정 값이 변경될 때마다 내부의 작업을 실행할 수 있도록 조절할 수 있습니다. unmount는 컴포넌트가 실제 돔에서 사라지는 순간을 뜻합니다. mount의 반대라고 생각하시면 됩니다. useEffect에서는 내부의 return 값에 함수의 참조를 넘겨주어 unmount시 특정 작업이 실행되게 하는데, 이를 클린업 함수라고 합니다. 주로 mount시에 등록했던 이벤트를 제거하는 등 메모리 누수를 막기 위한 작업을 실행합니다.
- 답변)