믹아의 개발일기

이번 6일에 프로그래머스에서 데브매칭 과제 테스트를 진행했다.

저번에 친 카카오커머스 과제 테스트과 똑같은 조건으로 바닐라 자바스크립트로, 다른 모듈은 사용 불가다.

그리고 처음으로 캠을 켜고 진행했는데 스마트폰을 옆에 두고 무릎쪽과 모니터가 보이게 찍어야했다. 그리고 듀얼모니터라도 하나의 모니터만 사용해서 진행해야 했다.

대략 과제 테스트의 후기를 작성하자면..

요구 기능은 쉽게말해서 우리가 흔히 쓰는 파일 탐색기의 기능을 구현하는 것이었다.

주어진 API를 호출하면 현재 디렉토리의 파일 리스트를 가져오고 그 파일 리스트들로 폴더인지, 파일(이미지)인지 렌더링하고, 폴더면 해당 폴더의 id를 이용하여 API 를 호출하여 또 폴더의 내용을 렌더링 하는 방식..

로딩 모달을 이용하여 API 호출간 로딩모달 띄우기,

이미지 파일을 클릭하면 이미지 모달을 띄우고 모달 외부(검은색 부분... 명칭이 기억이 안남)를 누르거나 ESC 버튼을 누르면 모달창이 꺼지게 하기.

root 디렉토리가 아니면 뒤로 돌아가기 버튼 생성.

그 외에 가산점 문제도 있었는데.

위의 사진과 같이 바탕 화면을 누르면 바탕 화면의 경로로 돌아가는 기능,

해당 디렉토리의 정보를 캐싱하여 다시 해당 폴더에 접근할 때 api를 다시 호출을 안하도록 하는 것들이 있었다.

이번 테스트는 그럭저럭 만족스럽게 쳤다. 저번 카카오커머스 테스트와는 달리 일단 파일 탐색기라는 우리에게 익숙한 기능을 구현하는 것 이었고, 2번째 과제테스트니깐 더 수월하게 진행 할 수 있었다.

다만 모달 클래스를 2개(이미지, 로딩) 따로 나눠서 모달창을 켜고 끄는 코드가 중복 작성 되었는데 하나의 모달 클래스를 이용하여 상속받아서 2개의 모달창을 만들었다면 더 좋지 않았을까...하는 후회가 남는다. 15분 정도 남았었는데 Javascript 에서 상속을 써본적이 없어서 괜히 상속해보려다가 기능도 완성 못할 것 같은 두려움 때문에 그냥 안전하게 제출하기로 했다..

아무튼 재밌는 과제 테스트였다. 과제 테스트에 참여하지 못했다면 한번 쯤은 만들어 보는게 어떨까 생각이 든다.

21.04.16 추가

programmers.co.kr/skill_check_assignments/100

프로그래머스에서 해당 과제를 공개했다. 여기서 풀어볼 수 있다

programmers.co.kr/competitions/779/2021-kakaocommerce-fe-recruitment

얼마 전에 프로그래머스에서 있었던 카카오 커머스 프론트엔드 개발 챌린지.. 테스트가 끝났다.

1. 코딩 테스트

01.23 (토) 14시~16시30분

코딩 테스트는 Only 자바스크립트 언어로 진행하였고, 3개의 문제가 주어졌다. 저번에 카카오 블라인드 테스트는 정말 너무 어렵게 나와서 좀 긴장했었는데 생각보다 훨씬 쉬웠다.

1,2 번 문제는 거의 2~30분 정도 걸린 것 같다. 프로그래머스 레벨 기준으로 2..? 1.5 정도? 

3번째 문제는 레벨 3을 풀던 사람이라면 누구든지 풀 수 있을 정도.

근데 난 레벨 3 풀던 사람이 아니라서 문제 자체는 풀었는데 시간 초과가 나서 만점은 못 받았다.. ㅜ

그래서 별 기대는 안 하고 있었는데 합격했다고 메일이 오더라.

시험 중간에 서버가 터졌는지 30분 늘려줬다. 나는 딱히 서버 터진 거 못 느꼈음.

2. 과제 테스트

01.30 (토) 13시 10분~17시 10분

13시 시작이었는데 10분 연기되었다. 과제 테스트는 바닐라 자바스크립트로, 다른 모듈은 사용 불가다.

웹에 vscode 를 띄워서 거기서 코딩하고 실행하면 바로 웹에서 확인하는 방식으로 진행됐다. 신기하더라.

html, css, js 파일이 기본적으로 있었는데 js 파일을 열어보니 빈칸이더라.. 완전 처음부터 짜야할 줄이야..

처음 문제를 보자마자 딱 드는 생각은 "도대체 뭘 해야 하지?"라는 생각이었다...

진짜 한 20분 동안 문제만 읽은 것 같다. 

과제가 대충 쇼핑몰 비슷하게 만드는 과제였는데

급하게 아무 쇼핑몰 들어가서 물건 구매 방식이 어떻게 돌아가는지 확인하고 문제를 읽으니 그나마 좀 이해가 되더라.

주 내용은 api 콜 해서 데이터 받아와서 정보 뿌리고, 클래스끼리와의 데이터 전달이 주된 내용이었다.

그렇게 막 어려운 내용은 없었으나... 

일단 시간이 너무 부족했다. 진짜 너무 부족하더라.. 물론 내 실력의 문제겠지만 문제 읽는데 20분이나 날려버리니깐 마음이 더 급해져서 생각이 더 잘 안되니깐 구조를 어떻게 짜야할지 눈앞이 하얘지더라. 그래서 결국 필수 요구 사항들은 다 끝냈는데 가산점 문제 2~3개는 못했다 ㅜ

혹시 나올 에러 사항 대응하기. api 호출 시 값이 잘못 오거나 했을 때 try catch 등으로 에러를 잡아야 했을 듯한데.. 이런 건 하나도 못했다. 시간도 부족하고.. 최대한 에러가 안 나도록 짰기때문? ^^..ㅜ

api 호출 시 같은 api를 호출하면 이전 호출 중단하기. 가산점 문제 중 하나였는데 api 호출을

XMLHttpRequest 와 Promise 를 사용해서 구현했었다. 그래서 api 호출을 하면 해당 Promise 를 저장해놓고 해당 호출이 한번 더 들어오면 마지막 Promise 를 확인해서 아직 응답이 안온 상태라면 Promise 를 중단시키는 방식으로 하려고 했는데... Promise 의 현재 상태를 확인하는 방법 찾다가 시간이 부족해서 그냥 제출...

아무튼 시험 끝나고.. 당일 자는데 내가 부족했던 부분, 코드를 왜 그딴 식으로 짰을까 하는 후회... 많은 생각을 했다.

코딩, 과제 테스트 유출 금지라 최대한 조심해서 썼는데 이 정도는 괜찮겠지?

3. 결과

3월 2일 결과가 나왔다.

점수와 미리 공지된 코드리뷰.

역시나 걱정했던 error 처리가 아쉬운 점..

XMLHttpRequest 는 사실 내가 fetch 를 몰랐었다... 처음에 공부할때 저걸로 배우다가 axios 모듈을 알게되고 axios 만 쓰다보니 fetch도 듣기만 하고 axios 와 똑같이 모듈을 설치해야 하는 줄 알았다... ㅎ;;; 암튼 에러 처리하는 부분에 더 힘써봐야겠다.