그린그린티라떼

npm outdated​npm prune npm prune을 사용하면 프로젝트에서 사용되지 않는 패키지를 제거할 수 있다.package.json파일에 명시되지 않은 패키지들을 삭제해준다. npm prune --production--production 또는 -P 옵션을 사용하면 devDependencies에 있는 패키지들을 제거해준다. npm prune --dry-run--dry-run 또는 -d 옵션을 사용하면 패키지를 제거하지 않고 제거되야 하는 패키지 목록을 알려준다. npm prune 명령어를 주면 package-lock.json 파일도 같이 업데이트 된다는 점을 잊지 않기!오래된 패키지 정리 및 프로젝트 경량화에 도움을 주기 위한 명령어이다.위의 명령어를 사용해서 의존성 충돌을 줄여보자 npm o..

npm init 을 하고 모든 옵션에 엔터를 쳐주면 기본 값으로 package.json이 생성된다.이 과정 전에 nodeJS 설치를 해줘야 한다.npm init -y 로 -y 옵션을 주면 바로 기본 옵션으로 파일이 생성된다.npm view uuiduuid 패키지에 대한 정보를 얻을 수 있음 더 많은 npm package에 대한 정보를 얻으려면 https://www.npmjs.com/ npm | HomeBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript developmen..

모든 파일 확장명을 바꿔야될 때가 있다.그럴 때 아래 코드 사용하면 된다! WINDOWS 코드cd 폴더경로for %i in (*.png) do ren "%i" "%~ni_ADULT.png" MAC 코드cd 폴더경로for file in *.png; do mv "$file" "${file%.png}_ADULT.png"; done

이커머스 사이트를 구현하던 도중 결제시스템까지 넣어서 프로젝트를 완성해보고 싶어졌다. 그래서 PortOne이라는 서비스가 있음을 알게되었고 인증결제 연동하기를 따라하던 도중 iframe 결제창 결과처리를 위해서는 웹훅을 사용해야 안정적으로 처리할 수 있다는 것을 알게되었다. 두둥..! 근데 웹훅이 뭐야?? 너무 익숙한 단어라서 순간 아는 개념인줄 알았다. ✅ Webhook이란? 웹훅은 웹 애플리케이션 간에 실시간으로 데이터를 전송하고 통신하기 위한 매커니즘이다. 이벤트가 발생하면 해당 이벤트에 대한 정보가 담긴 HTTP요청이 특정 URL(웹훅 endpoint)로 전송된다. REST API로 구축된 웹 서비스는 하나의 요청에 따라 하나의 응답을 제공한다. 응답을 받기 위해서 클라 쪽의 요청이 선행되어야한다..

firebaseAuth.js:89 Error: Permission denied at Repo.ts:534:1 at async Object.readProductData [as queryFn] (firebaseAuth.js:80:1) 포트폴리오 만드려고 예전에 만들어둔 프로젝트 다시 띄웠는데 다음과 같은 에러가 발생함 realtime database의 규칙이 다음과 같이 설정되어 있었음 { "rules": { ".read": true, ".write": true } } 누구나 읽고 쓸 수 있게 변경해줌 보안 사항에 따라 규칙 설정을 변경해주어야 함! 그리고 배포해줄 때는 꼭 firebase console authentication에 가서 승인된 도메인 클릭하고 '도메인 추가'해주어야 됩니다. 저 같은 경우엔..

너무 신기해!!! 신기해신기해!! 이런 크롬 익스텐션 어떻게 만들었지!!?! Next.js는 12.3.4 버전을 사용해서 만들어졌다 https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg

brew upgrade yarn yarn set version latest yarn set version stable

DOM과 Virtual DOM을 설명해주세요. 우선 DOM은 Document Object Model의 약자로 HTML문서의 구조적인 표현이다. 웹페이지의 실제 구조이다. 반면 Virtual DOM은 react와 같은 JS 라이브러리가 관리하는 Real DOM의 가상 표현이다. React는 Vurtual DOM의 상태 변경을 업데이트한 다음 React DOM과 동기화한다. Virtual DOM의 성능이 더 빠른 것은 처리 속도 자체가 빨라지는 것이 아니라 변경된 정보의 양이 적기 때문이다. 전체 페이지를 업데이트하는 데 시간을 낭비하지 않고 필요한 업데이트가 필요한 부분만을 상호 작용한다. 리액트의 특징을 설명해주세요. react는 UI를 만들기 위한 js library(재사용이 용이한 컴포넌트 단위로 U..

"Objects are not valid as a React child (found: [object Promise])" 위와 같은 에러가 발생했다. 이 에러는 비동기 작업이 완료되기 전에 프로미스 객체가 렌더링되어 발생하는 문제다. 주로 useEffect 내에서 비동기 작업을 수행하고 해당 작업이 완료되기 전에 컴포넌트가 렌더링되면서 에러가 발생한다. 1. 'useEffect' 내에서 비동기 작업을 수행한다. 2. 해당 작업이 완료되기 전에 컴포넌트가 렌더링된다. 3. 렌더링 시점에넌 아직 프로미스가 해결되지 않아 `[object Promise]`가 렌더링되어 오류가 발생한다. 해결방법은 비동기 작업이 완료된 후에 상태를 업데이트하고, 그 상태를 렌더링하면 된다. 예를 들어 다음과 같이 고쳐보자. imp..

# 1 개발하고 있는 쇼핑 웹 사이트가 있다. 현재 기능 firebase google login, cloudinary image 올리기 기능까지 완성이 되어 있다. 전반적인 UI작업을 이번 주 내내 할 것 같다. 금방 완성할 듯! 여기에 카카오톡 로그인, 네이버 로그인, firebase adbmob까지 연동시켜보는 것이 이 프로젝트의 최종적인 마무리이다. 물론 배포도 깔끔하게 할 것이다. 이렇게 기록해두는 이유는 이 프로젝트를 정성들여서 마무리하라는 스스로에 대한 공개적인 압박이다. #2 그리고 openAI를 이용한 웹 사이트를 하나 개발하고 배포하는 게 목표다. prompt 엔지니어링으로 시간복잡도를 계산해주는 사이트를 하나 만들어보려 한다. 이 사이트는 꼼꼼하게 배포하고 admob까지 붙여서 출시하는..