목록분류 전체보기 (123)
EtoC
1. BABEL 이란? Babel은 자바스크립트 컴파일러이다. 무슨말이냐면, ES6 코드(최신js문법)을 babel이 nodejs가 자바스크립트를 이해할수 있도록 구버전의 코드로 변환(transpile)해주는 도구이다. 즉, 자바스크립트 최신문법을 쓰고 싶다면 babel을 사용하면 된다. (위에는 스터디때 공부한거 설명하려고 쓰려고 만든이미지) 2. 설치방법 BABEL 공식사이트 1) 설치 명령어 입력 입력코드: npm install @babel/core @babel/node --save-dev 위 코드를 입력하고 package.json파일을 보면 devDependencies가 생긴것을 확인 할 수 있다. --save-dev 만약 명령어에서 --save-dev를 빼고 npm을 실행한다면 "dependen..
처음 공부했을때는 npm init을 치고 그냥 시키는대로만 만들고 말았는데 혼자서 공부하다보니 package.json의 중요성을 느껴서 좀 더 공부해보았다. 1. package.json이란? nodejs로 서버를 만들때 가장 처음으로 만들어보는 파일. 이라고만하면 면접은 탈락이겠지.. package.json은 node의 프로젝트 루트에 존재하는 파일로 프로젝트와 관련된 메타데이터를 보유하고있는 문서파일이라고 보면된다. 2. package.json 만들기 package.json을 만드는 방법에는 두가지가 있다. (1) npm init / yarn init 이 방법을 사용하려면 npm이 필요한데 node를 설치하면 npm은 자동적으로 설치되기때문에 node가 시스템에 설치되어 있어야 한다. 위 방법은 컴퓨터..
index.js까지 만들었다면 이제 express를 설치해보자. 1.npm i /npm i express 입력코드: npm i(또는 install) express 57개의 패키지를 받았으며, package-lock.json파일과 node_modules폴더가 자동적으로 만들어졌다. (.gitignore는 내가 DS_Store를 git에 자주 올려서 미리 만들어둔것이다.) node_modules 란? npm으로 설치한 모든 패키지들이 저장되는 장소(폴더) 로 용량이 굉장히 크기도하고 package.json파일만 있어도 모듈들을 설치할 수 있어 gitignore해야하는 파일이다. github에 푸쉬하지 않도록 조심하자. package-lock 이란? package-lock은 나의 패키지 파일들을 안전하게 관리..
1. 프로젝트를 진행 할 폴더를 만든다 맥북: mkdir 폴더명 윈도우: 새폴더 2. github에 연결하기 1. 폴더 경로에 git init 입력. 2. 깃허브로 이동하여 새 레포지토리를 만든다. 3.만들어진 레포의 url을 복사. 4. git remote add origin [레퍼지토리 URL] 잘연결됬는지 확인하고 싶다면 git remote -v를 입력하면된다. 처음 폴더를 만들었을때 위 명령어를 입력하면 비어있으나 복사한 url을 연결하였다면 아래의 사진처럼 뜰 것이다. 3. package.json을 만들기 touch package.json으로 만들수도 있지만 수동으로 만들면 에러가 날 가능성이 높으므로 npm을 써서 만들자. json(JavaScript Obnect Notation)이란? 제이슨..
학원에서 작업했던 프로젝트들을 리펙토링하기위해 프론트쪽 작업물을 클론해왔다. 프론트분들이 React를 사용하여서 react를 인스톨하고 npm start를 눌렀는데, 리엑트 스크립트 라이브러리를 못 찾는다고 한다. 이 에러는 다른 프론트분들도 같은 에러가 났었고 이유를 찾아보니 리엑트v17이상부터 나타나는 문제였다. 리엑트 17이상에서는 peerDependency로 추가하지 않은 모듈은 npm설치를 할때 오류가 발생한다고 한다. 그런데 조금더 구글링해보니 peerDependency문제는 NPM v3~v6까지는 경고만 뜨고 자동적으로 설치되었으나 npm7부터는 차단되었다고.. 때문에 npm7부터 발생하는 문제라고도 한다.(리엑트17이상이냐.. npm7이냐.. 둘다냐..) npm설치 전후의 peer deps..
1. 프로젝트 소개프로젝트 기간: 2022.12.08 ~ 2023.01.04팀명: MSG구성원: Front: 2명 /Back: 2명목적:정해진 기간동안 일정 시간마다 회사에 등록된 인플루언서의 광고를 키워드로 검색하여 순위권에있는지 확인하고, 그 스크린샷을 찍어 저장하는 API를 만들어 수동으로 하던 시스템을 자동화 하는것.2. 프로젝트 기획3. 프로젝트 결과물4. 맡은 역할1. 크롤링하고 스크린샷 찍기puppeteer를 사용하여 브라우저를 실행하고 새 페이지를 생성하기처음에는 cheerio를 사용한 단순한 크롤링을 만들어보았다.그런데 원하는 기능을 사용하려고하니 pupeteer를 사용해야했고 puppeteer 문서를 읽으면서 작성하였다.puppeteer로 간단한 뉴스를 크롤링해보고 회사에서 받은 js..
크롤링과 스크린샷이 작동하는것까지 확인하고 이제 원하는 정보가 있는곳에 박스를 그릴 차례가 왔다. 내가 선택한 툴은 canvas이다. 하지만 모듈이 없다고한다. canvas를 깔아보자. npm i canvas 즐 겁 다 첫번째 시도: node 버전 낮추기 버전을 낮추면 작동하는것들이 생각보다 많은것같다. 설치가 안되던 내 node 버전은 18.12였고 15로 낮추니 설치가 되었다. 근데 굳이 버전을 낮추고 싶지않아어서 이것 저것 시도해보았다. 두번째 시도: node-gyp 재설치 에러 메세지에 뜨는 가장 많은 단어가 node-gyp였다. 그래서 지우고 다시 깔아보았는데 변하는 것은 없었다. 세번째 시도 : 공식사이트 NPM canvas readme brew install pkg-config cario p..
오늘도 새로운 에러를 만났다.promise pending은 비동기함수가 처리 되지않고있는 상태라는것만 알고있는데 뭐가 문제인걸까?Promise는 3가지의 상태로 나뉜다.-pending(대기): 이행되지도 거부되지도 않은 상태-fulfilled(이행): 성공-rejected(거부): 실패 왜..왜 작동하지 않는거냐..const puppeteer = require("puppeteer");const cheerio = require("cheerio");let screenShotList = { tag: "", title: "", influencer: "",};const crawl = async (keyword) => { const browser = await puppeteer.launch({ headles..