Frontend/Javascript 26

json 응답값 표로 쉽게 정리하기

JSON 데이터 복사 코드 // 예제 JSON 데이터 const jsonData = { item_id: 6520, model_no: "DD1391-100", category_name: "신발", release_date_info: { release_date: "2021-04-02 10:30:00", release_date_type_text: "출시일" }, product_info: { name_kor: "나이키 덩크 로우 레트로 화이트 블랙", colors: "블랙", details: { material: "leather", sizes: [7, 8, 9, 10] } } }; let fields = []; function extractFields(obj, depth = 1) { for (const key i..

Frontend/Javascript 2024.04.12

PWA - 서비스 워커 웹 캐싱(service worker)

* 서비스워커는 백그라운드에서 실행하는 스크립트 * 클라이언트에 설치되는 프록시 => Request를 가로채 Proxy Server와 비슷하게 동작 브라우저 백그라운드에서 네트워크를 가로채는 Thread 웹 캐싱은 CacheStorage를 사용. Sqlite 같은 클라이언트 데이터베이스인데, Key:value 로 구성된 데이터베이스 ServiceWorker 적용 전 알아두어야할 점은 서비스워커는 보안상의 이유로 HTTPS에서만 실행 사용방법 public폴더(index.html이 있는)에 생성 메인 script파일에 다음과 같이 service-worker를 불러오는 구문을 추가 // navigator (브라우저)에 serviceWorker 기능이 있는지 확인 if ("serviceWorker" in nav..

Frontend/Javascript 2023.04.25

[monorepo] nx를 이용하여 App 생성하기

npx create-nx-workspace [만들고 싶은 APP 이름] --preset=react nx는 npx 를 이용하여 workspace를 생성할 수 있고, 참고 : https://nx.dev/generators/workspace-generators https://medium.com/@trustyoo86/nx%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-react-monorepo-%EB%A7%8C%EB%93%A4%EA%B8%B0-workspace-%EB%A7%8C%EB%93%A4%EA%B8%B0-a53cd5374bcd nx를 이용한 react monorepo 만들기 — workspace 만들기 monorepo란, 다양한 모듈을 여러개의 repository로 관리하지 않고, 하나..

Frontend/Javascript 2022.08.05

[monorepo] 모노레포 nx 설치

모노레포 환경 설치 sudo npm install -g nx npm create-nx-workspace * workspace name : 작업공간에 일반적으로 조직 이름인 이름을 지정한다. 우리 조직의 모든 프로젝트를 포함하는 모델 리포지토리이므로 회사의 이름을 지정하거나 이름을 넣는다. * What to create in the new workspace : 내부에 단일 응용프로그램을 생성하게된다. 단일 저장소는 여러개의 서로 다른 프로젝트를 포함하는 저장소일 뿐이고 잠재적으로 전체 조직의 모든 단일 프로젝트 일 수 도 있다. 모두 같은 유형일 필요는 없고 프로젝트 환경을 새로 만들 수도 있다. react, angular, vue, express, next.js 등 설정할 수 있다. app폴더 안에 여러..

Frontend/Javascript 2022.07.20

in 연산자

in 연산자는 명시된 속성이 명시된 객체에 존재하면 true를 반환 속성 in 객체명 - 배열의 내용이 아닌, 인덱스 값을 명시 - length는 Array(배열) 객체의 속성 - 반드시 in 연산자의 오른쪽에 객체를 명시하여야 한다. - in 연산자는 프로토타입 체인에 의하여 접근할 수 있는 속성에 대하여 true를 반환 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/in

Frontend/Javascript 2021.12.25