development/front-end 4

크롬에서 debugger 로 설정한 중단점이 작동하지 않을 때..

크롬으로 디버깅을 위해 코드 내 debugger로 중단점 설정 후 페이지 새로고침해서 개발자도구에서 디버깅을 잘 하고 있었는데, 언제부터 였는지, 중단점이 잡히지 않고 그냥 넘어가 버리는 현상이 발생. 크롬 업데이트 하면서 관련 설정이 변경된 것으로 보이는데, 대체 어디서 뭘 변경해야 되는거지??옆에 같이 일하는 돌아이 요원이 검색해서 해결책을 찾아줌. Chrome > DevTools > Settings > Ignore List > Enable Ignore Listing 체크 해제 Enable Ignore Listing이 체크되어 활성화되면 브레이크포인트를 무시하고 그냥 넘어가니, 체크를 해제 후 테스트 해보면 중단점이 아주 잘 걸림. 더 자세한 정보는 아래 링크 참조.https://developer.c..

[JS] forEach 사용시 async 함수 호출

최근에 업무중 forEach로 순회하며 api 호출 후 결과를 받아서 다음 작업을 수행해야하는 경우가 있었다.일단 api가 list형태로 파라미터를 던져서 한번에 조회 결과를 반환해주면 성능 면에서 더 좋을텐데, 굳이 단건 호출만 가능하도록 api를 제공하니 어쩔 수 없이 forEach로 순회하며 여러번 api를 호출할 수 밖에 없었다. 어쨋든 의도는 forEach로 순회하며, async 함수로 api를 호출 후 결과를 받아서 값을 셋팅해야 하는데, 돌려보니 비동기 호출 후 결과가 오기를 기다리지 않고 그냥 다음 순회를 돌아버리는 문제가 있었다.forEach() expects a synchronous function — it does not wait for promises. Make sure you ar..

javascript Object 내 key 존재여부 체크

{} 오브젝트 안에 특정키가 존재하는지 체크하려면??Object.keys()로 keyset을 추출해서 순회하면서 key name이 일치하는게 있는지 체크하려고 했으나.. 찾아보니 Object.hasOwnProperty를 제공하고 있어서, 바로 ObjectName.hasOwnProperty(key name)을 던져서 존재여부를 확인할 수 있었다. 다만 ESLint를 사용하는데 콘솔에 다음과 같은 메시지가 나온다.Do not access Object.prototype method 'hasOwnProperty' from target object. 찾아보니 Object.prototype의 builtin 제공 메서드를 바로 사용하지 않도록 하는 규칙 때문이라고 하여 , 다음과 같이 사용하면 된다. // 사용금지c..

Visual Studio Code 기본 터미널 변경

VSCode 실행 후 메뉴의 Terminal - New Terminal을 선택해서 터미널 창을 하나 열어주고, 열린 터미널의 우측 상단에서 다음 메뉴를 선택. 선호하는 기본 쉘 or 명령프롬프트를 선택하면 이후 새 터미널을 열면 해당 쉘로 터미널 열림. 위의 과정을 거치거나, VSCode의 settings.json에 아래와 같이 직접 편집하여 기본 쉘 변경 가능. "terminal.integrated.defaultProfile.windows": "Git Bash"