본문 바로가기

전체 글

 (137)
초기설정(1) npm i 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은 나의 패키지 파일들을 안전하게 관리..
초기설정(0) 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)이란? 제이슨..
clone후 npm i 안되는 문제 학원에서 작업했던 프로젝트들을 리펙토링하기위해 프론트쪽 작업물을 클론해왔다. 프론트분들이 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..
npm i canvas ERR:1 크롤링과 스크린샷이 작동하는것까지 확인하고 이제 원하는 정보가 있는곳에 박스를 그릴 차례가 왔다. 내가 선택한 툴은 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 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..
axios와 cheerio 로 간단한 크롤링 만들어보기 회사에서 크롤링해서 원하는 데이터를 찾아 스크린샷을 찍고 원하는 데이터에 빨간 박스를 그려주고 저장하는 API를 만들어달라고 요청이 들어왔다. 일단 크롤링이 정확히 뭔지 몰라서 크롤링이 뭔지부터 찾아봤다. 웹 크롤링이란? 웹 크롤링(Web Crawling)은 웹 페이지를 주기적으로 탐색하고, 웹 페이지의 내용을 수집하는 자동화된 프로세스를 말한다. 크롤러 또는 스파이더라고 불리는 소프트웨어가 웹사이트를 방문하고 데이터를 수집하는데, 목적은 웹 페이지의 정보를 수집하여 분석하거나 저장하는 것이다. 이를 통해 특정 웹사이트의 콘텐츠, 가격 정보, 뉴스, 이미지 등 다양한 데이터를 수집할 수 있으며, 크롤링된 데이터는 후속 분석, 기계 학습 모델 학습, 비즈니스 인텔리전스 등에 활용될 수 있다. 크롤링 과정 ..
ProseMirror- 버튼 세분화하기 저녁부터 임시로 브랜치를파서  코드를 치며 어떻게 변하는지를 찾아보았다. 근데 모르겠다.하루종일해서 알아낸게 개발자도구에서 p태그가 타이틀버튼을 누르면h2로 변하는정도..? 일단 어디서 바뀌는지부터 알아야할것같아서h2를 어떻게 사용했는지 찾아보았는데schema폴더의 heading에서 밖에 찾지 못했다. 2로 바뀌는것을 보면 어딘가에서 분명 사용중일텐데..이파일 저파일 다찾아보다가 다시 처음부터 생각해보기로했다. 일단 schem에 heading이 정의되어있다.schema 파일을 다시 읽어보니 level 값으로 표현된다고한다./** * Heading 노드는 Paragraph 노드와 유사하기 때문에 Attributes 를 공유합니다. * level 값에 따라 h1 ~ h3 으로 표현됩니다. (아래 toDOM ..

티스토리툴바