ISA
3k
2020-09-09 15:52:10
24
1541

프로그래머스 데브 매칭 과제 결과


하반기 결과가 오늘 나왔네요. 참여하신 분들은 한번 확인해보세요. 저 같은 경우는 지메일로 받았는데 일반으로는 안보이고 중요 메일함에 들어가 있었습니다. 코드 리뷰 내용 공개합니다.


안녕하세요, 프로그래머스입니다.

'2020 Dev-Matching: 웹 프론트엔드 개발자(하반기)'에 관심을 가지고 참여해주셔서 감사합니다. 

수행하신 과제는 시니어 개발자들이 소스 코드를 하나하나 보면서 검토하였습니다. 리뷰 결과는 프로그래머스 로그인 후 아래 URL에 접속하여 확인할 수 있습니다.

과제 리뷰로 평소 코드에 가지고 있던 고민에 조금이나마 도움이 되기를 바랍니다.

축하합니다! 테스트에서 좋은 점수를 받아 지원하신 기업에 이력서가 전달되었습니다. 전달된 이력서는 각 기업에서 검토 후 개별로 연락드릴 예정입니다. 지원 이력과 채용 진행 상황은 프로그래머스 대시보드를 통해 확인할 수 있습니다.

이번 데브 매칭에서 좋은 결과 있길 바랍니다.

275.0점(440만점), 상위 5%
점수는 아슬아슬하게 중위 값은 넘겼네요. 440만점이니 220점이 절반이고 그걸 가까스로 넘긴거 같습니다. 저보다 잘하신 분들이 5프로나 되신다니 역시 아직 배울게 많구나 느낍니다.


좋은점:

  • let과 const를 의도에 맞게 잘 사용한 것 같습니다.
  • window.onload를 덮어쓰지 않고 load 이벤트 리스너를 등록해서 잘 처리하였습니다.

아쉬운점:

  • active 엘리먼트의 index를 매번 loop를 돌면서 찾는 것보다 변수로 관리했으면 더 좋았을 것 같습니다.
  • 빈 검색어에 대한 처리가 없습니다. (백스페이스를 누르면 검색을 해서 400에러가 발생합니다.)
  • API 호출 함수를 만들어서 처리했으면 더 좋았을 것 같습니다.
  • show/hide 함수를 만들어서 display를 제어 했으면 코드를 보고 이해하기 좀 더 수월했을 것 같습니다.
  • 마지막 검색어를 history.replaceState가 아닌 pushState로 했으면, 이전 검색어로 돌아갈 수 있어서 사용자 경험 측면에서 더 좋았을 것 같습니다.

총평:

  • ES6 문법을 잘 사용하는 것 같습니다.
  • API 에러코드에 대해서 사용자에게 명확한 피드백을 주었으면 더 좋았을 것 같습니다.
  • 컴포넌트 클래스를 만들어서 데이터를 관리하였으면 더 좋았을 것 같습니다.


피드백 받은 내용들
사실 그 동안 혼자 다 해서 코드 리뷰는 처음 받아보는데 한번 곱씹어 보아야겠어요.
0
  • 댓글 24

  • 헬로우미
    134
    2020-09-09 16:13:41
    오! 대단하십니다. 혹시 어떤 과제를 수행하셨는지 저장해두셨나요? 시간날때 한번 해보려구요. 소스코드 말고 어떤 요구사항이 있었는지 궁금합니다.
  • ISA
    3k
    2020-09-09 16:26:07

    헬로우미 //

    저도 자세히 기억은 안나지만 대략적으로 알려드리면

    바닐라 자바스크립트로 

    리액트 나 뷰 같은 SPA 싱글페이지 어플리케이션 프레임워크 구성 비슷하게 컴포넌트 형태로  class 나 functional로  구조를 설계하고

    history api 이용해서 라우터 api 기능 구현하고

    rest api url 제공받는거 이용해서 ajax 방식의 http통신을 통해서 원하는 검색 결과를 받아와서 이리 저리 가공하는 거랑

    event 리스닝을 통해서 프론트에서 필요한 기능 구현 글고

    + store 상태관리 시스템 구현 같은 것 정도 있었다고 들었습니다.

  • 정교니
    1k
    2020-09-09 16:39:01

    와우 멋지십니다!

  • ISA
    3k
    2020-09-09 16:53:57

    정교니 //

    감사합니다! 상반기때는 코드 리뷰 같은 게 없어서 내가 잘했는지 못했는지 테스트 수준이 어땠는지 알길이 없었는데 이번에 새로 리뷰 해주는게 생겨서 좋아진거 같네요 ㅎㅎ

  • 헬로우미
    134
    2020-09-09 16:59:40

    테스트 코드도 작성하셨나요? 전 상반기에 과제 통과해서 했었는데 하반기에는 한시간 가량 삽질을 한 나머지.. 탈락을... 하,,,,,

  • ISA
    3k
    2020-09-09 17:03:55 작성 2020-09-09 17:04:25 수정됨

    헬로우미 //

    그런 요구 사항을 못본거 같습니다.

    그래서 그런 부분은 아예 한적도 없네요.

    저도 상반기는 통과했었는데 이력서에 게으른 개발자라고 자기소개 한줄 대충 써둔게 다라 그런가;

    서류 불합만 받았습니다. 화이팅하시고 


    카카오 코테와 네이버 코테에 도전하시죠! 저도 준비 중입니다. 전 코테에는 약해서 힘들겠지만 도전은 해봐야죠!

  • Jay Lee
    27
    2020-09-09 18:03:59

    오 축하드립니다.

    저도 통과했습니다.

    그런데, 이력서에 자세한 내용이 없어서

    별도로 메일로 전달을 해야하나 고민하고 있습니다ㅜ

  • ISA
    3k
    2020-09-09 18:16:48

    Jay lee //

    오 축하드립니다.

    별도의 메일이라도 전달해보시죠; 제 경험상 이력서 내용에 따라서 서류불합격이 날라오기도 하는지라

    혹시 리뷰 받은 내용 보여주실 수 있나요?

    궁금해서

  • Jay Lee
    27
    2020-09-09 18:23:52

    ISA 그렇게 하는게 낫겠죠?ㅎㅎ
    제가 받은 리뷰는 아래 내용입니다.

    좋은점

    • 추천 검색어 부분과 검색 결과를 나타내는 부분을 컴포넌트화 했습니다.
    • Abort controller를 이용해 불필요해진 ajax 요청을 끊는 처리를 했습니다.
    아쉬운점
    • RecommendList 컴포넌트와 CatImageList 컴포넌트의 경우, 상태를 기반으로 render에서 처리하는 방식이 아니라 각 상황에 맞게 렌더링 되는 함수로 구현이 되어있습니다. 컴포넌트를 렌더링하는 건 render의 역할로 통일시킬 경우 컴포넌트가 늘어나도 일관성이 있어 뷰 로직을 파악하기 더욱 쉬워집니다.
    총평
    • 컴포넌트의 역할과 구조, 그리고 전체적으로 데이터의 흐름에 대해 고민해보신다면 더 좋은 결과물을 만드실 수 있을 것이라 생각합니다.
  • ISA
    3k
    2020-09-09 18:29:16 작성 2020-09-09 18:29:41 수정됨

    Jay lee //

    엄청 잘하신건가 보네요. Abort control 이라는 단어보니 해당 과제에 그런 요구 사항이 있었다는게 생각났어요 ㅋㅋㅋ 전 고려도 못해본 내용인데 3시간안에 store구현까지 하셨나보네요 렌더링에 상태관리 얘기 나오는거보면 컴포넌트 구조 잡고 기본적인거 다 구현하신듯

    상위 1프로 정도 되실듯 혹시 점수 도 알려주실수 있나요?

  • Jay Lee
    27
    2020-09-09 18:32:47


    ISA 아 아닙니다;;ㅎㅎ

    점수는 ISA님과 크게 차이는 나지 않습니다. 305점인데, 상위 1%라고 나오긴하네요;;

  • ISA
    3k
    2020-09-09 18:35:35

    Jay lee//

    오 감사합니다. 이번 테스트가 난이도 조금 있는 편 이였나보네요.

    440만점인데 300점 대가 1프로면 

    축하드립니다. 꼭 좋은 곳 가세요. ㅎㅎ

    만점 가깝게 맞으신 분도 있으실려나?

  • Jay Lee
    27
    2020-09-09 18:37:31

    ISA 확실히 시간이 촉박하더라고요.

    하면서 정신없었던것 같아요ㅋㅋ

    함께 좋은 곳으로 이직 성공해요~!ㅎㅎ

  • Frudy
    6k
    2020-09-09 19:32:51

    세상은 저ㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅓㅇ말 넓군요.

    잘하는사람은 많은거같습니다.

  • ISA
    3k
    2020-09-09 19:56:54

    Frudy //

    오랜만이에요. 혹시 이번 챌린지 참가하셨나요?

  • Frudy
    6k
    2020-09-09 19:59:08

    저는 레벨이 한~~~~~~~~~~~~~~참 밑이에요

    아직 멀었습니다. 어디가서 FE개발자라고 말못해요

    다른거 공부할게 많아서요 ㅜㅜ

  • ISA
    3k
    2020-09-09 20:09:57

    Frudy //

    아쉽네요. 이런거 있을때 마다 참석해보세요. ㅎㅎ

    어차피 주말에 주로 해서 경험삼아 해볼만해요.

    글고 뭘 한참 밑이에요. ㅋㅋㅋ 리액트로 실무 하시는 분이 리네까지 하시고

  • cat11
    428
    2020-09-09 20:49:04

    저도 통과는 했습니다만 .. 이력서를 하나도 정리안하고 냈었네요

    프론트엔드 지원인데 spring java 만 기술스택에 쓰여있고 내용도 성의없고 ㅎㅎ

    제이쿼리로만 개발하다 최근에 강의하나 봤던게 도움이 되어 통과한듯합니다

  • ISA
    3k
    2020-09-09 21:26:04

    Cat11 //

    저도 첨에 그랬어요! 상반기때 실무 경험 없으니 안될줄알고 그냥 아는 것들만 하고 제출 했는데 과제 통과 되더군요. 사실 저도 프론트 개발은 하고 싶은데 정작 하는 일들은 다 벡엔드라 과제에서 말하는 내용중 절반은 뭔지 아직도 이해가 잘안됩니다...;

    혹시 리뷰나 점수 공유 가능하나요?

    대략적인 난이도에 대한 정보 수집중이라 해주시면 감사할거 같아요. ㅎㅎ

  • aabbccddee
    15
    2020-09-09 21:47:36

    와 잘하시네요.


    혹시 모듈은 어떻게 적용하셨나요?

    전 항상 웹팩 세팅해놓고 편하게 es6 모듈 방식으로 개발하는데,


    이번 하반기 테스트 환경같은 상황에서는

    어떤 식으로 해야 하는지 헷갈리더라구요.


    commonjs 방식도 안되고, 이것 것 다 해보다가 그냥 한 파일에다가 다 넣어뒀네요.

    혹시 어떤식으로 하셨는지 여쭤봐도 될까요?

  • cat11
    428
    2020-09-09 22:37:32 작성 2020-09-09 22:37:58 수정됨
    290.0점(440만점), 상위 2%
      • 좋았던 점

        • 모듈이 파일로 적절히 분리되었습니다.
        • 결합도를 낮추기 위해 이벤트를 이용하고 있습니다.
        • let, const 사용에 대한 기준이 명확합니다.
        • async, await, try, catch 를 이해하고 있습니다.
        • API 호출을 함수와 파일로 적절히 분리하였습니다.

        아쉬운 점

        • debouce 처리가 빠졌습니다.
        • 스토리지를 통한 캐싱 처리가 되지 않았습니다.
        • 에러 처리 UI 누락 및 에러코드 별 세밀한 에러 처리가 아쉽습니다.

        총평

        • 디바운스, 캐싱 처리에 대한 학습이 필요합니다.
        • 추상화와 구조적 프로그래밍에 대한 이해가 있습니다.


  • cat11
    428
    2020-09-09 22:39:29

    프로그래머스에서 제공한 vscode 에서 바로 코딩해서 코드는 남겨두지 않았네요 

    당연히 떨어질줄 알고;; 코드 좀 다시 보고 싶은데 ㅎㅎ;

  • ISA
    3k
    2020-09-09 23:34:34

    Aabbccddee //

    커먼 방식이 안된다는건 css나 html 때문이신거겠죠?

    Js자체는 그낭 import하면 되셨을텐데

    애초에 전 시험 내부에서는 컴포넌트로 쪼개라는 지문을 발견하지 못한지라 해당 부분에 대하서 난제를 겪지 못했습니다. 아마 그것이 점수를 많이 깍아 먹은 요인같네요.

    문제 보기가 너무 불편해서 필수라고 적힌 부분 제외하고 다 무시했습니다.

  • ISA
    3k
    2020-09-09 23:37:01

    Cat11 //

    275 ~ 290 15점 차이에 3프로가 갈리네요

    290 ~ 305 15점 차이에 1프로가 갈리고 감사합니다. 도움 많이 되었어요. 

     축하드립니다. 시험 잘보셨네요. ㅎㅎ

  • 로그인을 하시면 댓글 을 등록할 수 있습니다.