본문 바로가기

전체 글

 (135)
초기설정(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)이란? 제이슨..
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 ..
Git SubModule 오늘 오전 미팅에서 우리가 해야할 업무와 협업툴에대해 알려주셨다. git 서브모듈을 사용해야하는것은 알았지만 막상 사용하려니 굉장히 헷갈렸고 팀원과 서로 다른얘기하고 "에..?" 했다. 그래서 오전시간에는 git 서브모듈에 대해 각자 공부해보기로했다. 공식문서에 git submodule을 시작하는 방법이 잘 정리되어있었다. Git - 서브모듈 gitmodules 파일에 있는 URL은 조건에 맞는 사람이면 누구든지 Clone 하고 Fetch 할 수 있도록 접근할 수 있어야 한다. 예를 들어 다른 사람이 Pull을 하는 URL과 라이브러리의 작업을 Push 하는 URL이 서로 git-scm.com 서브모듈을 사용하는 이유는 프로젝트를 수행하다 보면 다른 프로젝트를 함께 사용해야 하는 경우가 발생하는데, 함께..
wemong - 2차 프로젝트 작성일: 2022-12-11 새롭게 팀이 바뀌고 2차 프로젝트를 시작한게 저번주인것 같은데 벌써 프로젝트가 끝났다.이번 프로젝트는 기존의 사이트를 단순히 클론하는 것이아닌 팀원들과 다른 서비스의 사이트를 만들려고 처음부터 기획을하였으나,어그러지면서 일어난 사건들덕에 느낀점도 배운점도 많은 프로젝트였다. 프로젝트 기간:2022.11.28~2022.12.09모델링 사이트: https://kmong.com/팀명: Wemong개발인원: 프론트엔드 4명, 백엔드 2명 wemong은 메인페이지와 상세페이지,예약페이지, 로그인페이지로 구성되었다.내가맡은 역할은 상세페이지와 예약페이지로 상세페이지에서 판매하는 강의의 기본정보와 리뷰 및 별점과 예약하기를 맡았으며,예약페이지에는 판매하는 강의의 기본정보와 예약정보를 보내..
DCS - 1차 프로젝트 작성일 : 2022-11-26  어느새 1차 프로젝트가 끝났는데 배운것도 많고 부족한것도 참 많은 첫프로젝트였다.1. 기획과 ERD우리팀이 모델링하게된 사이트는 술담화로 카테고리가 굉장히 많았다. 그래서 초반에 백엔드와 프론트가 함께 의논하여 어떤 기능을 넣을지 의논하였고 기획안을 통과하여 ERD 설계를 하였다.ERD 설계는 백엔드셋이 만들어와서 공유하고 함께 만들었다. 여기까지 4일이 걸렸다.2. 내가 맡은 역할ERD 설계를 끝내고 각자 구현할 기능을 나누었는데,내가 맡은 구현기능은 초기환경세팅과 로그인,회원가입API, 제품상세페이지API였다.코로나때문에 시큐리티와 통신을 배우는 주를 날렸는데 감사하게도 백엔드팀원분들이 초기세팅과 로그인회원가입을 권해주셨다또한 레이어드패턴이 이해가 가지않아 질문하자 한..
API Documentation (+ postman) API Docs에대해 처음 알았을때 swagger를 사용해서 만들었다. 그런데 최근에 Postman으로도 가능하다는걸 알았다. 어떻게 하는지 궁금해서 해봤다. Postman API 개발 및 테스트를 위한 협업 도구로서, 주로 개발자들이 API를 효과적으로 테스트하고 관리하는 데 사용되는 도구이다. Postman을 사용하여 API 엔드포인트에 요청을 보내고 응답을 검사하여 API를 효과적으로 테스트할 수 있다. API Documentation API Documentation이란 백엔드에서 생성한 API의 구성요소들을 개발자들끼리 어떻게 주고받을지를 문서화한것을 말한다. API를 문서화하면 정보들을 효율적으로 공유할 수 있어 개발자가 직접적으로 소통해야하는 빈도를 줄이고, 일의 능률을 높일 수 있다. API..
httpie 와 express nodejs를 사용하는 이유는 express를 통한 다양한 프레임워크를 사용할 수 있는점, HTTP 서버를 쉽게 설정하고 관리할 수 있어서이다. 근데 express를 사용하지않고 순수 Node HTTP 모듈만을 사용해서 HTTP API를 만든다면 어떻길래? 궁금한건 못참지! express를 사용하지않은 HTTP API 일단 폴더를 생성하고 npm init -y를 하여 패키지 제이슨을 만들었다. const http = require("http"); const server = http.createServer((req, res) => { console.log("request received"); res.setHeader("Content-Type", "application/json"); res.end( JSON..
인증과 인가 1. 인증(Authentication) 1. 인증이란? 인증은 사용자가 누구인지를 결정하는 과정으로, 사용자의 자격을 증명하는 정보가 데이터 인증서버의 자격증명정보와 일치하는지 확인하고, 그 인증절차를 통과하는 사용자에게 시스템에대한 접근권한을 주는것을 말한다. 2. 인증의 유형 1) SFA 인증 SFA(단일요소인증)은 자격증명 정보로서 사용자 ID와 암호만을 요구하는 방식이다. SFA는 ID와 비밀번호만 알아도 쉽게 보안에 문제가 발생한다. 2) 2FA 인증 로그인 요청시 모바일 기기를 통해 사용자에게 고유코드를 부여하거나 지문인식같은 추가적인 인증 요소를 요구해 SFA인증 보다 인증을 강화한 방식이다. 3) MFA 인증 사용자의 ID, 비밀번호, 생체인증에 더해 사용자가 직접 답변해야하는 질문을 추가..

티스토리툴바