PracticeArrays & Hashing  ✅ 체크포인트1. Map 객체를 사용할 수 있는가?2. Map 객체 이외의 빈 객체 사용이 가능한가?3. forEach, split, sort, join 의 사용법을 알고 있는가?이 문제는 해시 맵(Hash Map) 자료구조를 활용하여 해결할 수 있습니다. 해시 맵은 키-값 쌍을 저장하고, 키를 사용하여 값을 빠르게 검색할 수 있는 자료구조입니다. 이 문제에서의 키는 각 문자열의 정렬된 형태이고, 값은 같은 정렬된 형태를 가지는 문자열들의 배열입니다.자료구조해시 맵 (Hash Map)- 키-값 쌍을 저장하는 자료구조입니다. 이 문제에서는 객체({})를 해시 맵 사용- 해시 맵을 사용하면 특정 키에 해당하는 값을 빠르게 삽입하고 검색할 수 있습니다.알고리즘해시..

작업개요component에 흩어져 있는 공통 기능을app.component 전역에서 한 번에 처리하도록 수정하는 가운데 각 component에 조건에 맞는 속성이 있는지 확인하기 위해 in 연산자를 사용했다.그러다 코드 리뷰 시간에 in보다는 hasOwnProperty가 더 많이 쓰이고이 경우에 적합한 방법이라는 피드백을 들어 조사하던 중얼핏 보고 지나갔을 때는 이게 뭐가 달라? 라고 생각하고 넘어갔지만 다시 확인해 보니 차이점이 있어 기록에 남긴다.  'in' Operator연산자 in는 객체의 프로토타입 체인 어딘가에 속성이 존재하는지 확인이는 자신의 속성과 상속된 속성을 모두 찾을 수 있음을 의미hasOwnProperty와의 차이점은prototype chain을 따라 올라가 객체가 가지는 프러..

프론트엔드로 전향 후 기존 UI 리뉴얼 및 개선 이라는 담당 업무가 생겼다.약 세달의 시간 동안 이쁘지도 않은 회색 화면을 깔끔하고 이쁘게 변경하였다. "나비효과" 의 시작영화제목인줄 알았지만나의 작은(?) 세달의 코딩이 예상치 못한 엄청난 결과를 불러일으킨 최근이었다. [우당탕탕]이슈1. 기능과 상관없이 화면에서 무한대로 polling 되는 API 호출을 막았더니 검색이 안된다이슈2. 컴포넌트의 통합이라는 명목하에 버튼의 위치를 통일 시켰더니 active panel / 잘되던 Save기능 등이 안된다이슈3. 기존에 되던 기능이 안된다 [원인분석]문제1. 앵귤러를 사용하면서도 의존성을 파악하지 않고 컴포넌트를 살피지 않았다문제2. 버튼이 이쁘지 않아 왜 그렇게 만들었는지..

UI 화면을 만들면서 제일 많이 쓰는 것 중 하나가 바로 이다. 그중에서도 파일을 업로드하고 다운로드하는 기능 등을 많이 구현하는데 input 중에서도 input[type="file"]은 원하는 UI 형태로 만들려면 조금 공수가 들고 은근히 신경 쓰인다. 또! input box 안에다가 button을 넣고 싶은데 이게 여간 까다로운 일이 아니다. 이참에 정리해서 완전히 끝내버리자 :O - file 기본 형태 (html) 이렇게 type="file" 만 쓰면 기본 형식인 파일선택과 잘렸지만(아래 이미지 참고) 선택하된 파일 없음 이라는 text가 옆에 나온다. 태그의 for 속성으로 묶기 (html) Upload 이것을 이제 그냥 input으로 쓰는 게 아니라 태그의 for 속성을 이용해서 묶어서 사용하면..

너무 무서운 에러를 만났다. SyntaxError: "undefined' is not valid JSON 문자열을 JSON.parse로 파싱할 때 흔하지는 않지만 그래도 누군가에게도 발생했던 에러였다. 특히 refresh 같은 기능을 사용해서 데이터를 받아 올 때 저렇게... 끊임없이 콘솔을 도배하는.... 아주 무시무시한 현상이기에 얼른 에러를 해결해 보기로 하자!!! - JSON.parse() 에러 해결 try { ... } catch { ... } 사용 보통 많이 사용하는 방법이다. JSON.parse() 호출을 try catch문으로 감싸 실패한 경우 발생할 일들을 지정해 놓을 수 있는 방법 try { // 에러 발생이 예상되는 코드 } catch (error) { // try에서 발생한 예외 코..

Angular Setting 글에도 올렸다시피 npm install (혹은 yarn install)의 오류가 계속되는 나날이었다 install이 성공해도 node 모듈이 없다든지, 뭐가 맞지 않는다든지 알 수 없는 에러 메시지의 향연 가까스로 위의 문제를 해결하면 ng serve, npm run start 등 실행 명령어가 먹질 않았다 대체 무엇이 문제길래 방황하던 가운데 nvm을 알게 되며 한가지 해결방안을 터득!! ( !!참고: 이 방법이 무조건이라기엔 다른 변수도 너무 많고 다른 해결 방법도 사용했었다. 이건 nvm을 이용한 방법일 뿐 ) _ nvm 사용법 (nvm 명령어) 먼저 nvm이 없다면 설치부터 ! [mac M1] M1 맥북 에어 homebrew로 nvm 설치 (노드버전관리) 무엇이 문제일..