현대캐피탈 코딩테스트에 합격하고 인적성 안내 연락을 받았다. 인적성은 LG, 기업은행 이후로 처음으로 보는 데 너무 싫다. 개발자인 내가 왜!! 인적성을 봐야하는가?
여튼, 안내문을 보아하니 10 ~ 12:20분 사이에 적성, 인성 순서로 본다고 한다. 근데 적성 문제는 "눈" 으로 "손" 도 못대고 풀어야 한다는점?! 그 흔한 계산기도 주어지지 않는다. 아니 이럴수가 눈으로 수학문제 추리문제를 풀어야한다니.. 추리에 너무나도 약한 나에게 이건 천벌이었다.
부랴부랴 후기를 찾아보니 뭔 후기가 2개밖에 없다. 그래도 이 후기가 없었다면 나는 준비조차 제대로 하지 못했을 것이다.
후기에 나온대로 skct 와 개별적으로 hmat 기출을 풀기로했다. 온라인으로 눈으로 푸는것을 고려해 ebook으로 구매해 공부를 하기로 했다.
SKCT 는 후기에서 나온 것 처럼 온라인으로 보는 시험으로 현대캐피탈과 비슷한 느낌을 받았다고 나와 풀게 되었다. 20문제를 15분내로 풀어야하는데 속도가 중요한게 그래도 도움이 되었던 것 같다.
HMAT 기출은 중간에 현대캐피탈 기출이 나온다. 시험 본 후기로는 전개도 유형과 수열, 수리 쪽이 도움이 됐다. 확실히 전개도 유형 문제가 많이 없다보니 도움이 되었던 것 같다.
특히 두번째 후기 작성자 분이 말한대로 거의 똑같이 유형이 나왔다. 유형은 총 6가지로 구성되어서 나왔다.
적성
언어 추리(어휘)
응용 수리
전개도
글자 찾기
수열
추리 문제
언어추리
언어 추리는 단어를 좀 많이 알면 좋았을 것 같다. 이해는 되는데 단어를 몰라서 애매하게 풀었던 것 같다.
응용 수리
확실히 방정식 문제나 등산로 문제를 눈으로 보고 풀어보는 연습이 부족했다. 나는 수리 문제를 풀면서 한 번 멘탈이 나가니 그 이후문제들을 거의 못풀었다. 하하;; 머릿속으로 분수 꼴 방정식을 풀려고하니 유독 준비를 적게 했던 파트라 그런지 머리가 안돌아가서 꼬여버렸다. ㅠ
전개도
전개도는 내가 자신있는 문제여서 그런지 다 풀 수 있었다.
글자 찾기
한 5 * 12 정도되는 테이블에서 똑같은 글자를 찾거나 없는 글자를 찾아야하는데 속독이 느린 나에게 너무 힘들었다. 2/3 정도만 풀었다.
수열
가장 쉬웠던 수열 문제
추리
추리는 정말 쥐약이다. 문제를 보고 상상하며 풀어야 하는데 기법을 잘모르는 탓인지 머릿속으로 상상하며 풀기가 어려웠다. 그놈의 거짓말하는 애들은 왜그러는거야 증말
인성
인성은 전에 현대 오토에버에서 본 기억을 토대로 보긴했는데.. 오픈채팅방에서는 현대가 인성으로도 많이 거른다고 하더라.. 그래도 '난 소신있게 하겠어!' 하면서 따로 연습은 안하고 바로 봤다. ㅋㅋㅋ
필자는 열정도 쭈꾸미 음식점에서 일하고 있다. 일을 하면서 외국인 손님이 하루에 한 팀은 꼭 오는 것을 알게 되었다. 일본인 비중이 많아 일본인 전용 메뉴판을 하나 만들어 두었다. 하지만, 가끔, 중국, 대만, 태국, 등 다양한 국적의 사람들이 오고 쭈꾸미라는 상상하기 어려운 음식을 사진없이 메뉴판만으로는 어렵다는 생각이 들었다. 메뉴판을 일일이 만들기 어려워 웹 사이트로 간단히 QR 코드 한방에 확인가능 하면 좋을 것 같아. 계획했다.
개발환경
프론트엔드 개발자를 목표로 하고 있기에 왠만하면 서버없이 구동을 하려고 한다. 혹시나, 서버를 사용할 수도 있기에 요새 배우고 있는 NextJS 를 이용하고자 한다. 배포 서버는 역시 무료 업체인 Vercel에 배포를 하려고 한다.
사용 프레임워크 : NextJS 배포 환경 : Vercel
요구사항
우선, 요구사항을 분석해보겠다.
외국인 손님을 위한 언어변환이 가능한 메뉴판
이해하기 쉬운 메뉴와 사진 제공
당장에 구현해야할 요구사항은 다음과 같다고 생각한다.
1. 언어변환
처음에는 실시간 변환을 하는게 어떨까 생각이 들었는데 Next에 대한 이해가 부족해서 그런지 Next i18 을 사용하기엔 조금 개발이 걸릴 것 같아 노가다로 진행하기로 했다.
Dropdown Button
한국어, 영어, 일본어, 중국어, 태국어 총 5가지 언어를 지원하기로 했다. 일해본 결과 5개언어면 될 것 같다.
사진은 아직 직원친구가 이쁜 사진들을 안보내줘서 대체사진을 사용중이다. 이정도면 쓸만하겠지?
3. 메뉴별 이동버튼
개발을 하고나니 스크롤이 너무 길다는 불편함이 있었다. 그래서 버튼 두개를 만들어 하나는 맨위로 올라가는 버튼과 하나는 누를 때 마다 다음 메뉴 카테고리로 이동하는 버튼을 구현했다.
현재 위치 확인
useEffect를 통해 현재 위치와 가장가까운 title id를 찾는다.
useEffect(() => {
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
const handleScroll = () => {
const offsets = titles.map(title => {
const element = document.getElementById(title);
// 요소가 존재하지 않는 경우, 매우 큰 값을 반환하여 화면 밖으로 간주하도록 합니다.
return element ? window.pageYOffset + element.getBoundingClientRect().top : Number.MAX_VALUE;
});
const closest = offsets.reduce((prev, curr, index) => {
if (curr !== Number.MAX_VALUE && (Math.abs(curr - window.pageYOffset) < Math.abs(offsets[prev] - window.pageYOffset))) {
return index;
}
return prev;
}, 0);
setCurrentIndex(closest);
};
titles 배열에서 각 타이틀의 ID를 사용하여 해당하는 DOM 요소를 찾는다. document.getElementById(title)는 ID가 title인 요소를 반환한다.
각 요소의 위치는 element.getBoundingClientRect().top + window.pageYOffset을 통해 계산된다. 여기서 getBoundingClientRect().top은 요소의 상단 경계로부터 뷰포트 상단까지의 거리를 제공하고, window.pageYOffset은 문서가 수직으로 얼마나 스크롤 되었는지를 나타낸다. 이 두 값을 더하면 페이지 최상단으로부터의 절대적인 거리가 된다.
만약 특정 타이틀의 요소가 없다면(element가 null인 경우), Number.MAX_VALUE를 반환하여, 해당 타이틀을 스크롤 위치 계산에서 제외시킨다.
reduce 함수는 offsets 배열을 순회하면서 각 요소와 현재 스크롤 위치와의 차이가 가장 작은 요소의 인덱스를 찾는다. 이 인덱스는 현재 뷰포트에 가장 가까운 요소를 나타낸다.
계산된 closest 인덱스는 setCurrentIndex를 통해 상태로 저장되어, 다른 부분의 렌더링이나 로직에서 사용될 수 있다.
