분류 전체보기 (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, 비밀번호, 생체인증에 더해 사용자가 직접 답변해야하는 질문을 추가.. POST 요청에서 겪은 에러 1. Column 'name' cannot be null 분명히 어젯밤에 잘 작동하는걸 보고 잤는데 아침에 다시 해보니 에러가 났다. 칼럼의 이름에 입력한 값들이 전부 undefined가 되어있었다. 원인은 서버에 연결이 되어있었는데, query에서 에러가나서 끊어졌었고, 그 메세지를 보지 못한 나는 반나절을 헤맸다. 에러 메세지를 꼭 확인하자 2. httpconnectionpool(host='127.0.0.1', port=80) 분명 users의 post를 성공했는데 갑자기 또 에러가 났다. 서버는 연결이 되어있다고 뜨는데 안되길래 다껐다켜보았고 그러자 서버도 연결이 안되며 3000번 포트가 사용중이라고 떴다. '분명 다 껐는데..'라고 생각하며 사용중인 포트를 찾아봤다. 사용중인 PORT 조회 명령어.. 첫 개인페이지 만들기 : translate html과 css를 사용해서 직접 생각하고 만들어보는 첫 개인페이지라서 어떤 기능을 넣어야할지 고민했다. 일단 나열하고싶은 글들을 페이지에 써놓고보니 너무 밋밋했다. 나도 뭔가 움직이게하고 싶었는데 검색해보니 transform이라는 기능이 있었다. 아래는 transform의 translate를 적용해서 만들어본 페이지이다. HTML Hello! 안녕하세요! I'm SUJEONG. 자가지능김수정 입니다. Think from various perspectives and Communicate. I wanna be a BACK-END Developer who want to be with. 다양하게 생각하고 소통하여 [함께 하고싶은 개발자] 가 되고싶습니다. CSS .highlight0:hover{ font-f.. NVM download fail 프로그램을 개발할때 아예 기초부터 설정하는것이 아닌 다른사람이 작성하여 공유한 코드를 가져오거나 다운로드 받아서 사용하게된다.JAVA에는 Maven,Gradle(최근)이 있고 Python에는 PyPi가 있다.Node.js도 다른사람들이 작성한 라이브러리들을 모아둔 것이 있는데그게바로 NPM(Node Package Manager)이다.과거에는 npm도 다운 받아서 설치해야했지만 근래에는 node.js를 설치하면 npm도 자동적으로 설치되기때문에 따로 다운받을 필요가 없다.1.npm?- npm publish 기능명 : 내가만든 기능을 npm에 올리는 명령어- npm install 기능명 : 다른사람들이 만든 기능을 다운받는 명령어하지만 npm의 다운로드 속도가 느리다고 생각하여 더 빠르게 동작가능한 기술이 .. twilio로 문자 인증하기 팀원분이 email이아닌 핸드폰번호로 회원가입하는 기능을 만들어보고 싶어하셨다. 그래서 "한번 해보죠!"라고 자신있게 말했는데 생각보다 막히는 구간이 많았다. 핸드폰 번호 인증하기가 그 첫번째 구간이였다. 일단 문자 인증서비스를 어디를 이용할까 찾아보았고 네이버와 twilio를 고민했는데 횟수(무료)도 많고 저렴한 twilio를 선택했다. twilio Docs 들어가보면 원하는 서비스를 단계별로 잘 설명해두었다. Twilio 사용하기 1. 회원가입 후 로그인하기 로그인하면 아래의 이미지처럼 step(과정)과 사용언어별로 코드를 알려준다. 2. Account SID 로그인해서 들어온 콘솔화면의 아래쪽을 보면 account Sid와 auth Token 있다. 벌써 기억이 가물가물한데 핸드폰번호 인증을 하고 .. refresh Token 무한로딩 엑세스토큰과 리프레시 토큰을 공부하고 리프레시토큰을 사용한 로그인기능을 만들어보았다. 그런데 어떠한 에러메세지도 없고 포스트맨에서는 무한 로딩이떴다. 2일동안 리프레시토큰발급이안되었던 문제를 적어본다. 하나하나 다 콘솔을 찍어서 찾아보니 @Req @Res 를 지웠을때 로그인이 되는것을 확인하였다. 1번째 문제 import { Body, Controller, Post, Get, Res, Req, Request, Response, } from '@nestjs/common'; import { AuthService } from './auth.service'; import * as bcrypt from 'bcrypt'; import * as crypto from 'crypto'; import { AuthGuard.. MVC 패턴 1. MVC(Model View Controller)? 소프트웨어 개발에서 사용되는 소프트웨어 디자인 패턴으로, 이 패턴은 소프트웨어의 구성 요소를 세 가지 주요 부분으로 분리하여 응용 프로그램을 구조화한다. 각 부분은 특정한 역할과 책임을 가지며 서로 간에는 느슨한 결합을 유지한다. 과거 브라우저와 개발자만이 존재했을당시에 개발서버 히니러 json 통신과 html로 통신을 다하였다. 하지만 이 기능들이 분화되면서 json은 백엔드에서 html관련은 프론트엔드에서 전해주도록 분리되었다. mvc패턴은 3가지로 구성된다. M(models): database 생성 및 관리 V(views): 화면에 보여지는 부분으로 HTML 코드를 관리해주는 폴더 C(Controllers): API 부분으로 미들웨어 함수를 분.. TypeORM으로 DB연결 새로운 프로젝트를 시작하게되었다. (사실 아직 기획중이지만..) 초기설정만 해두는건 괜찮지않을까하고 초기설정을 해보았다. nest의 document가 굉장히 잘되어있어 생각보다 쉽게 연결하였다. NestJs Database Documentation 아래처럼 공식문서에서 나온대로 설정했을때 DB가 잘 연결되는것을 확인하였다. 그런데 env설정을 하고 연결하니 에러가 났다. 이미지에는 process.env.host라고 소문자로 되어있어서 저게 문제같지만 저때는 env에 소문자로 적어두어서 저게 문제가 아니다. 이게 무슨에러일까 검색해보았다. Error: connect ECONNREFUSED IP주소:3306 at TCPConnectWrap.afterConnect [as oncomplete] 지정된 IP주소나.. NestJS 초기설정 1. Nodejs 설치하기 nestjs는 nodejs를 기반으로하기때문에 우선 nodejs를 설치해야한다. NestJS 공식문서 NodeJs 공식문서 NodeJs 설치글 최신버전을다운받는게좋다고하는데 안정적인버전을 원한다면 LTS를 선택하면 된다. nodejs를 설치하면 기본적으로 npm(node package manager)가 함께 설치되기때문에 npm을 바로 사용할 수 있다. 2. Nestjs cli 설치하기 NestJS서버를 구성하기위해 @nestjs/cli를 설치해야한다. cli는 새 프로젝트를 생성할 수 있게 해준다. npm i -g @nestjs/cli설치를 하고 nest를 입력하면 기본적인 명령어들을 보여준다. 3. 프로젝트 폴더 만들기 nest new만 입력하면 프로젝트 명을 무엇으로 할지.. 함수에 타입 지정하기 function type 함수에 타입을 지정할때 파라미터와 return값, 2군데에 타입을 지정할 수 있다. 1. 파라미터에 타입 지정하기 위 이미지의 add(x)의 x부분에 ...표시를 해놓고 any타입을 임시적으로 주었으고 타입을 설정해주라고 한다. 함수의 매개변수에 타입을 지정하는 방법은 변수 타입을 선언할때와 같다. let a;라고 선언만 해두면 타입스크립트는 타입을 any로 자동할당해준다. function add(x: nember) { //매개변수에 타입을 지정 return x + 4; } 2. retrun 값의 타입 지정하기 function add(x): number { //return 값을 숫자타입으로 지정 return x + 4; } add(1); //5가 리턴 add("6"); //err.. TypeScript TypeScript란? TypeScript는 자바스크립트의 문법을 사용하는데 타입을 정하여 사용하는 언어이다. 그런데 새로운 언어로보기다는 애매하고 자바스크립트의 에디터로 부가기능으로 봐도될듯하다. 하지만 typescript에서만 지켜야할 규칙도있고 타입외의 문법도있어 따로 공부해본다. 자바스크립트의경우 Dynamic Typing을 지원하여 자유도가 높아 3 - '3'고 계산이 가능하다 무슨말이냐면 숫자형은 숫자형으로만 계산이 가능한데, 위는 숫자형 - 문자형을 js가 문자형을 숫자로 알아서 바꿔줘서 계산해준것이다. 프로젝트가 작을경우에는 좋은기능이지만 프로젝트가 클경우 이러햔 자유도는 독이 된다. 타입스크립트의경우 타입을 정해서 사용하기때문에 에러로 타입이 다르다고 알려주며 타입이 정해짐.. Class와 OOP 코테스터디때 팀원들이 설명하면서 class,class하는데 나는 아직도 class가 뭔지 모른다. 딥다이브를 읽다보면 알겠지했는데 딥다이브에서 만나기전에 nestjs에서 만났다. 정확히 class가 뭘까? 1. Class class 객체 지향 프로그래밍에서 객체를 정의하기 위한 상태와 함수로 구성된, 객체를 생성하기위해 변수와 함수를 정의하는 틀이다. tree 라고도하는데 객체를 만들기위한 설명서라고 생각하면된다. class를 사용하여 새로운 객체(인스턴스)를 만들 수 있다. 클래스를 사용하는 이유는 동일한 종류의 객체를 여러개 만들어야하는경우, 같은 기능들을 하나로 묶어서 호풀하면 편하게 사용할수 있기 때문이다. class name{설명}의 설명대로 만들면 new name()의 새로운 인스턴스(객체) .. 제어문 제어문은 조건식에따라 코드블록을 실행하거나 반복문을 실행할때 사용한다. 코드는 보통 위에서 아래로 실행되는데, 제어문을 사용하면 실행순서를 인위적으로 제어할 수 있다. 하지만 인위적으로 제어시 가독성이 나빠지고 오류가 발생 할 수 있다. 1. 블록문 블록문은 자바스크립트에서 하나의 실행단위로 중괄호로 묶인 블록(코드블록)이다. { //블록문 let a = 1; } 단독으로 쓰이거나 제어문, 함수정의로 사용된다. 블록문은 항상 문의 종료를 의미하기때문에 세미콜론을 붙이지 않는다. 2. 조건문(conditional statement) 조건문은 조건식의 평가결과에따라 실행할 코드브록을 결정한다. if (a % 5 == 0) { /*조건식*/ return a; } 조건문에는 if..else문과 switch문의 .. 이전 1 2 3 4 5 6 다음
