데브매칭 연습 - 프로그래밍 언어 검색기

🔗 프로그래밍 언어 검색

 

 

요즘 계속 react만 하다가 vanilla js로 구현하는 데브매칭 연습문제를 처음 풀어봤다.

오랜만에 하다보니 이거 어떻게 했더라..? 했던 부분들이 조금 있었다,,ㅎ

 

3시간이 참 짧게 느껴졌다 ㅠ_ㅠ

기본 구현사항은 이해가 잘 안돼서 구현을 못했던 한 부분 빼고는 다 했고

보너스 구현사항 부분은 3개를 구현하지 못했다.😅

 

해보고 나니 이거 보너스 구현사항까지 전부 풀려면 고민없이 술술 풀어야 할 듯..?

 

 

💡 깨달은 점

 

⦁ 요구사항에는 alert처리를 하라고 했지만 구현 예시 끝부분 gif에는 alert이 나타나지 않아서

마지막 쯤 alert부분을 주석처리 했는데 생각해보니 요구사항대로 alert를 하는게 맞는 듯 하다.

 

 

⦁ 주어진 html 파일을 아예 건들면 안되는 줄 알고 js로 덮어쓰는 식으로 구현 했는데

ㅎㅎ 팀원들 코드를 보니 지워도 되는거였다.

 

 

⦁ vscode로 코드를 작성하다 마지막에 테스트 환경에 붙여넣기를 했는데

<script type="module" />로 작성한 부분에 에러가 나타났다..

시간이 없어서 바로 제출해버렸는데 테스트라 망정이지 실전이였으면 끔찍..

 

팀원들도 같은 현상을 겪었는지 물어보니 복붙하면 에러가 나고

파일을 직접 업로드하면 에러가 안나온다고 하는데,

테스트를 종료하고 다시 테스트 환경에서 천천히 복붙해보니 에러가 안난다..?!😱

어찌 됐든 혹시 모르니 마지막에 확인하지 않고 중간 중간 제대로 되는지 확인하면서 해야할 듯 하다.

 

 

⦁ 보너스 구현사항에서 Text Highlight를 구현하다가 잘 안돼서 다음 구현사항으로 넘어갔는데

팀원 한 분의 코드를 보니 내가 return을 안했다는 것을 깨달았다.. 바보😭

const textHighlight = (text) => {
    const reg = new RegExp(this.state.keyword, 'g');
    return text.replace(reg, `<span class="Suggestion__item--matched">${this.state.keyword}</span>`);
};