Frontend 44

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

nodemon

Nodemon이란? Nodemon은 Node.js 애플리케이션의 개발을 조금 더 발랄하게 만들어주는 유틸리티입니다. 코드에 변경이 생기면, 자동으로 애플리케이션을 재시작해줍니다. 설치 방법 npm install -g nodemon 프로젝트의 개발 의존성으로만 추가하고 싶다면(프로젝트 개발 시에만 사용하고 실제 운영 환경(production)에서는 사용X): npm install --save-dev nodemon 예시 사용법 nodemon app.js app.js는 메인 애플리케이션 파일입니다. 이제 Nodemon이 코드 변경을 감지하고, 애플리케이션을 자동으로 재시작해줍니다.

Frontend/Node.js 2024.04.03

node cors 해결하기

npm https://www.npmjs.com/package/cors cors Node.js CORS middleware. Latest version: 2.8.5, last published: 5 years ago. Start using cors in your project by running `npm i cors`. There are 14357 other projects in the npm registry using cors. www.npmjs.com cors 패키지를 설치해서 해결가능 npm i cors 미들웨어를 추가 const cors = require('cors') app.use(cors()) 옵션 설정하기 특정 도메인만 허용하거나, 특정 HTTP 메서드만 허용하는 등의 세밀한 제어가 필요할 때..

Frontend/Node.js 2024.03.23

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