본문 바로가기

전체 글376

package-lock.json 프로젝트를 구성하는 외부 package들이 어떤 의존성을 가지고 있는지 기록해 놓은 파일 같은 버전의 외부 package를 사용하더라도 시간에 따라 내부 의존성이 달라질 수 있다. 이유는 보통 내부 의존성을 호환되는 버전으로 설정되어 있기 때문에 언제 설치하냐에 따라 내부 의존성의 버전이 달라지게 되므로, 정상작동이 안될 수 도 있다. 그렇기에 package 수정사항이 있으면 package-lock.json도 같이 업데이트 되어야 한다. 2024. 5. 3.
npx 개념 pacakge를 조금 더 쉽게 실행-> 기존 방식대로 package를 실행 하려 한다면 2가지 방법이 있었다.프로젝트 내에 /node_modules/.bin에 접근 후 원하는 페키지를 실행npm i -g {package_name} 으로 로컬 전역에서 실행하게끔 조치첫번째 방법은 매번 디렉토리를 이동해야 해서 번거럽고, 두번째 방법은 프로젝트마다 버전이 다를 경우 난감하다. npx 명령어를 이용하면 편리하게 사용할 수 있다. 동작과정packacge root (path)에서 Package 존재 여부 확인있으면 실행없으면 npx가 최신 버전을 npm registry에서 받아서 바로 실행실행 후 전역에 남겨지지 않으며 설치 기록에 남지 않음❯ npm install -D uglify-js❯ which uglify.. 2024. 5. 3.
[JS] prototype 코딩애플 - 이거보고 prototype 이해 못하면 강의접음 영상을 보고 요점만 정리한 글입니다.  개념부모로 받은 유전자라고 생각하는 것이 편하다.내가 직접 선언하지 않았지만, 부모로 부터 물려받아 사용이 가능하다. 코드객체를 생성하여 prop을 확인해보니 mouse와 eye는 존재하지만 handsome은 존재하지 않는다.하지만 handsome을 선언하면 유전자(prototype)를 검사하여 존재 여부를 판단한다.function human() { this.mouse= 1, this.eye = 2}human.prototype.handsome = '50%'const a = new human()console.log(a) // human: { "mouse": 1, "eye": 2 } console... 2024. 4. 30.
[JS] if else 리팩토링 (중첩 조건문 처리하기) > 코드 변환 스냅샷 아래의 스크린샷은 Youtube 영상에서 리팩토링 과정을 단계별로 스냅샷을 찍어놨습니다.추후 비슷한 상황에서 최대한 빠르게 리마인드하고 적용해보려 합니다.이 글을 본다고 이해되진 않습니다. 위의 링크를 꼭 시청하시길 바랍니다. 지극히 시청한 사람을 위한 글입니다.  초기 버전 단계 1: 객체로 변환  단계2: move에 Parameter를 추가하여 select와 Parameter 규격을 맞춘다. 단계3: 규격에 맞는 파라미터 값들만 남기고 배열로 감싼다.  단계4: ArrowUp과 Down은 부호만 다르니 더욱더 추상화가 가능 단계 5: 코드를 보니 direction 값을 굳이 객체에서 안가져와도 되네? 최종: 코드를 보니 객체가 필요가 없네? 2024. 4. 29.
[JS] if else 리펙토링 (객체 + 함수) 아래 Youtube 영상의 내용을 거의 그대로 가져온 페이지입니다.문제가 될 경우 삭제하겠습니다.  결론if else가 중복되면 switch case로 변경해보자.나름의 규칙성을 발견하기 쉬워진다.규칙을 발견하면 이를 바탕으로 객체로 추출 가능하다 객체를 함수 외부로 분리하면 공통로직 / 분기별 실제 동작 정의가 분리되어 읽기도 수월해지고, 수정사항이 생겨도 공통로직은 건드리지 않아도 되어 편리하다. 리펙토링할 소재를 발견할 수 있고, 소재가 발견되지 않더라도 객체형태로 전환한 그 자체로 이미 꽤 깔끔하다 분기가 함수일 경우 구조 분해 할당 (destructured assignment)을 이용해 상황별 필요한 데이터 파악이 한결 용이해짐 # if else 로직const naverLogin = (id) =.. 2024. 4. 29.
[FE] async / await 아래 Youtube 영상의 내용을 거의 그대로 가져온 페이지입니다.문제가 될 경우 삭제하겠습니다.async항상 promise 를 반환promise가 아닌 값을 반환하더라도 promise로 감싸여서 반환 awaitasync 함수안에서 promise가 처리될 때까지 기다린 후 값을 받아온다.promise가 저리 되는 동안 엔진이 다른일(다른 스크립트 실행, 이벤트 처리 등)을 할 수 있기 때문에 cpu 리소스가 낭비되지 않는다. 개발 팁 중간 과정에서는 async/await가 없어도 괜찮다.간단하게 then으로 처리할 수 있는 경우에도 없앨 수 있다. async/await는 기존 비동기처리가 주는 불편함을 해소하기 위해 등장한 만큼, 어디선가 최소 한번은 async/await를 쓰는게 좋다.그렇지만 중간 과.. 2024. 4. 29.

티스토리툴바