TIL

2023/09/25(네이버 블로그에서 넘어옴)CSSbackground-size: cover; background-position: center;background-image: url("url");배경을 이미지로 심고 이미지를 센터에 맞게 맞춰줌

jQuery를 사용하면 간단하게 html 끌어올 수 있음. let result = <li>${구}: ${도}</li>;element.remove()요소 지우기document.getElementById("ul");HTML에서 ul을 선택하고 그 자식들로

git hub에 (간단하게)배포하는 법창구이름 적고 > public중간에 uploading an existing file 클릭파일 올린 후 commit changessettings 셋팅에 가서 page 가서 branch(none>save)

CSS​em - 부모 요소의 배수rem - root em % - 크기의 몇 퍼센트를 지정하는지 여백은 20%라면 사진은 80%calc(10% / 6) 10%을 6으로 나눠서 계산해줌​NODE.JS​npm init - (모듈다운 가능)내가 모듈을 다운받은 것은 packa

JS​classList.add("class") 클래스를 추가함.classList.remove("class") 클래스를 삭제함.classList.toggle("class") 클래스를 추가 또는 삭제함.​isGameOver = false;if(!isGameOver) {so

GIT저장을 하면 git에서 changes를 통해 파일이 심어지는 데 history에서 확인 가능컴퓨터에 심어놓지 않아도 gibhub에 백업이 돼있음.permission deiner 뜨면 관리자로 실행​git bashgit config --global core.edit

https://dbeaver.io/download/show tables = 테이블 보여달라select \*(filed) from orders = orders(테이블)부터 모든 걸 보여달라select \* from orders where payment_metho

git push가 안 된다면 add/commit/push 전에 pull해서 댕겨오기현재 시간 구하기let now = new Date();let year = now.getFullYear();let month = now.getMonth();let day = now.getD

getMonth()는 0부터 세기 때문에 +1을 해줘야 한다.

MySQL - 컴퓨터 언어를 통해서 제어 가능(엑셀과 차이점 - 사람이 직접 클릭해서 제어 가능)bitnami wamp(windows, apache, mysql, php) 다운로드 해줌MySQL 컴퓨터에 다운하지 않고 사용하는 법(CODEANYWHERE)표(table)

input.value를 받아와 더하는 법const default = 0;let currentResult = default;처음엔 0으로 지정하고 값을 얻을 때마다 바꿔줌const enteredNum = parseInt(input.value);const currentRe

$(document).ready(funtion (){}) // document가 시작되면 바로 해라!

npm i pm2 -g // pm2를 전체에 설치하겠다.pm2 start main.js // main.js를 실행하겠다. pm2 start main.js --watch // 코드 수정해도 재시작 안 해도 됨.pm2 list // 뭐를 실행하고 있는 지pm2 stop m

Number.isInteger // 정수체크하는 법 BOOLEAN반환

npm i axios해서 사용하려 했으나 밑에 에러가 발생하여 cdn으로 axios를 가져왔더니 실행됐다.

카드를 페이지당 3개씩 나오게 할려고 했다.카드가 들어간 container 박스에grid-template-columns: repeat(3, 30%);을 하면 3번씩 30%크기로 반복한다.

js로 append로 html을 넣어줄려 했는데 jquery는 가능한데 js로는 문자열로 들어갔다.찾아본 결과insertAdjacentHTML 메서드로 사용하면 가능했다.append와 다르게 position을 작성하고, html 변수를 넣어주면 된다.

API를 페이지에 뿌렸을 때 0번째가 밑으로 간다.페이지 1번째에 나와있는 카드를 클릭하면 ID가 맨 밑에 있는 ID로 나와서 순서가 다르다는 걸 알았다.몇 시간 동안 헤맸었는데 API를 페이지에 뿌리고 난 후 API를 reverse해서 결과를 얻어냈다.

searchInput.focus();// input 태그.focus();

어쩔 땐 되고 어쩔 땐 안 된다....

navigator.geolocation.getCurrentPosition(function (pos) { console.log(pos); var latitude = pos.coords.latitude; var longitude = pos.coords.longitud

.modalContainer { display: none; position: fixed; // 스크롤에 따라 움직이지 않기 top: 50%; left: 50%; transform: translate(-50%, -50%); // 정중앙 위치 background

카드 페이지 부분신기한 기능을 배웠다. 페이지 이동시 movieCardLine 자식요소가 있다면삭제후 함수를 다시 실행한다.그럼 새로운 카드들이 나온다.카드 모달 부분모달 부분도 비슷한데 여기는 HTML을 아예 빈 값으로 만들었다.

JSON 형식으로 클라이언트한테 전달백엔드 API 제공프론트엔드 페이지 전달클라이언트와 서버와의 약속된 규약(method + url)서버는 그에 맞는 요청을 제공한다.웹 서비스에서 사용하느 API 설계 방법자원(resource)을 URL로 표현 + 처리 종류를 HTTP

const strAge = String(age); const arrayAge = Array.from(strAge); // 숫자를 문자로 변환 후, // Array.from()을 통해 배열로 만든 후 변수에 담았다

return은 함수 실행을 종료하고, 함수를 빠져나온다.break는 루프문을 종료하고, 루프문을 빠져나온다.

db.createConnection 객체에multipleStatements: true,을 사용하게 되면 query문을 이용하여 sql 명령어를 여러개 실행가능하므로 설정을 해두면 안 된다.첫번째 방법: 쿼리문을 이용한 공격을 막기 위해서는,쿼리문 인자에 ?을 설정하고

window.location.href = '링크';// 현 페이지에서 이동window.open(링크)// 다른 페이지에서 이동

\\main 브랜치는 배포용/merge 합친다.git branch login // login이라는 branch 생성git branch // branch 보여주기git checkout(switch) login // git login으로 branch바꿔줌.git switc

데이터베이스사용하는 이유: 잘 찾으려고관계형 데이터베이스: SQL정리된 정보를 다룰 때 사용(은행, 대기업)틀이 짜져있고 실수가 없어야 됨비관계형 데이터베이스: NoSQL, Mongodb복잡하거나 유연한 정보를 다룰 때 사용(스타트업)아직 틀을 잡지 않은 곳파이어베이스

header // body 보다 z-index를 주면된다. 더 높게

Node.js 에는 npm과 yarn이 있는데두 가지를 사용할 시 에러가 발생할 수도 있으므로, 특별한 일이 아닌 이상 한 가지만 사용하도록 한다.

?! 갑자기 사라졌다.검색해보니 나오질 않는다.익스텐션 열리는 단축키인 ctrl + shift + x를 누르면 열린다..

백엔드 개발자 로드맵 살펴보기SI 도망쵸!!파이썬 좋다(DBA는 필수)Basic Terminal Commands 알아두자.(grep, awk, sed, lsof, curl, wget, tail, head, less, find, ssh, kill, dig 등?)os 지식

npm i env.env 파일에 db_user = 아이디이런식으로 저장해두고,사용할 파일에서 require("dotenv").config();후에 변수에 const db_user = process.env.db_user를 저장해둔다.사용할 곳에 변수를 사용한다.

컴퓨터를 만드는 최소 단위 - 트랜지스터트랜지스터 1 = 켜짐 on / 0 = 꺼짐 offBool 대수전기로 흐른다.. 저항이 쎈 곳은 못 간다.AND둘다 참이어야 참OR하나 참은 참NOT반대NOR다른 거 들어오면 1 같은 거 들어오면 0

EC2에서 도메인 이름 호스팅 영역에서 작성 후레코드 생성

코딩 컨벤션(가독성 높이기) 1.버그가 많아지고, 2.코드 리뷰가 안 좋아지고, 3.코드가 중복되고, 4.충돌이 일어난다. 용어 규칙 camelCase 첫 글자를 제외한 모든 단어의 시작을 대문자로 쓴다. js를 이용해 백엔드 개발 시, 변수,객체의 속성, 클래스의

미들웨어란?미들웨어 기본 개념

NODEJS에서 sequelize를 사용할 수 있게 한다, mysql2는 sequelize를 쉽게 사용하도록 도와준다.config.json에서 password와 host교체(엔드포인트)npx sequelize db:create를 실행하면 conpig.json에 있는 d

트랜잭션트랜잭션은 데이터베이스의 상태를 변환시키는 하나의 논리적 기능을 수행하기 위한 작업의 단위 또는 한꺼번에 모두 수행되어야 할 일련의 연산들을 의미한다.트랜잭션의 성질 === ACIDA(Atomicity) 원자성수행이 되던지 혹은 안 되던지C(Consistency

ERD CLOUD 에 접속해서만들면 된다.

aws - 엔드포인트를 DBeaver 데이터베이스 호스트에 넣고 아이디 비번 적어주자

회원가입 시 데이터베이스 안에 해쉬 된 비밀번호를 넣어준다.로그인 시 bcrypt 해쉬와 유저 해쉬를 비교해준다.

아아 과제 중에 accessToken을 갖고 있으면 내 정보로 들어갈 수 있는 미들웨어를 만들어야했따.. 과제 조건은 authorization에 있는 token과 Bearer을 가져와야 하는데 나는... req.headers을 아무리 찾아봐도 authorization을

외래키를 설정하는 법을 찾아보겠습니다람쥐

Products와 Sings조인하기Products id와 같은 것은 찾는다 where절로그리고 Signs와 조인한다.

API 명세서https://docs.google.com/spreadsheets/d/1AW1vY9lEvHGgsVGShAcZAmengdxGH0syrQYde49L6Fs/editERD CLOUDhttps://www.erdcloud.com/d/DrmC7Cfoc

HTTP란?데이터를 주고 받는 양식을 정의한 '통신 규약'중 하나이다.HTTPS란?https://www.cloudflare.com/ko-kr/learning/ssl/what-is-https/HTTP를 기반으로 데이터 통신의 안전성을 높이기 위해 암호화 기능이

Header란?개발자 도구에서 Network 탭에서 Headers를 확인할 수 있다.브라우저가 어떤 페이지를 원하는지요청 받은 페이지를 찾았는지성공적으로 찾았는지 외에도 다양한 의사 표현을 위한 데이터를 Header에 넣고 주고 받고 있다.

Payload란?데이터 또는 실질적인 데이터를 뜻한다.서버가 응답을 보낼 때에는 항상 Payload를 통해 보낼 수 있다.클라이언트가 요청을 할 때에도 Payload를 보낼 수 있다. 그리고 "GET method'를 제외하곤 모두 Payload를 보낼 수 있다는 게 H

웹 서버는 정적으로 만든 파일을 클라이언트에게 제공을 해주는 것이다.WAS는 웹 서버와 협력하여 동적인 컨텐츠를 제공을 해주는 것이다.주로 데이터베이스를 조회하거나, 복잡한 계산과 같은 비즈니스 로직을 처리한다.순서는Client -> Web Server -> WAS -

2023/11/21 챌린지반 수업배움의 끝은 설명할 수 있는 실력이다.서비스 분석(슬랙)기능들을 나열해보자기능 해부하기

MYSQL - 플러스 누르고엔드포인트 HOSTUSERNAMEPASSWORD추가하자

// 이유는 차차 알아가자..// 내 생각에는 index.cjs에서 데이터 모델을 받아와서 model에 담아두고 const {Posts} = model; 을 통해서 알맞는 모델을 가져오는 거 같다.이게 안 되는 이유는 뭘까

VoIp(Voice over Internet Protocol)1) 인터넷을 통해 음성 정보를 전손하는 기술. 실시간 오디오/비디오 커뮤니케이션 기능을 구현할 수 있다.WebRTC(Web Real-Time Communication)1) P2P(Peer to Peer)연결

코드 피드백을 받았는데, 얼리 리턴 패턴을 사용하라는 피드백을 받았다.무슨 말인지 몰라 검색을 해봤는데,얼리 리턴 패턴이란?특정 조건에 부합하지 않으면 바로 return을 하도록 하는 것이다.

git fetch -allgit reset --hard origin/dev후에 git status로 확인하고 conflict 해결됐으면 push

게시글을 생성하면 DB에 들어가고 프론트엔드로 나오게 만들었다.게시글 생성을 누르면 모달을 띄우고, 생성 버튼을 누르면 게시글이 생성되었습니다. 얼럿이 뜬다.

게시글 삭제상세 게시글에 들어가면 게시글 삭제 버튼과 수정 버튼을 만들어뒀다. 삭제를 누르면 뜨고 새로고침을 해줘서 원래 페이지로 돌아가게 한다. 그러면 삭제된 건 사라진다.게시글 수정상세 게시글에서 수정 버튼을 누르면 요런 모달이 뜨는데, 제목과 내용과 장르 VALU

내 브랜치에서 dev로 머지할 거면 내 브랜치에서 실행한다.

그 이유는 우리가 설계할 때 localhost:3000 api에서 사용했는데,이제는 배포를 했으니 서버 주소로 바꿔줘야한다.localhost:3000 > 배포 주소로 바꾼다.

오늘의 수업은 ERD 설계

PrismaORM으로써 자바스크립트 객에와 데이터베이스의 관계를 연결해주는 도구이다.

https://www.typescripttutorial.net/typescript-tutorial/typescript-optional-parameters/ model 사용법 prisma 공식문서

// 앱에서 sql에 접근할 수 있다. // 그런데, sql은 여러 라우터에 밑 함수를 사용하면 모두 다 받기 떄문에, 느려진다.// 한 군데에서 사용할 수 있게 리팩토링을 해야한다.const prisma = new PrismaClient();vsCode에서 utils

yarn add cookie-parsercookie를 객체로 만들어준다. req.headers.cookie를 req.cookie로 만들어줌.app.use(cookieParser());하면된다.

접근 제어인증(Authentication)서비스를 이용하려는 사용자가 인증된 신분을 가진 사람이 맞는지 검증하는 작업(로그인 기능)내가 누구인지, 회원 인증인가(Authorization)이미 인증된 사용자가 특정 리소스에 접근하거나 특정 작업을 수행할 수 있는 권한이

추천의 세계 - 베이지안 추론 & 랭킹 시스템redis?? 개인데이터 누적?유저의 활동 내역이 가장 중요한 기준이다. 유저의 활동 내역안에는 정말 수많은 신호들이 숨어있다.게시글 추천 시 특정 유저의 게시물이 너무 많이 나오지 않아야 한다.개인 데이터 대신 명백한 키워

로그 미들웨어란 클라이언트의 모든 요청 사항을 기록하여 서버의 상태를 모니터링하기 위한 미들웨어이다. 문제가 발생할 때 빠르게 진단할 수 있다. 또한, 로그 데이터는 사용자의 행동 분석하는 등 데이터 분석 작업에도 활용할 수 있다. 로그 기능을 지원하는 morgan

게시글 상세 조회 API 내부에서 댓글 목록도 함께 반환한다.장점: 한 번의 API호출로 모든 정보를 가져올 수 있으므로 효율적일 수 있습니다. 다만, 이 방법은 게시글과 댓글이라는 서로 다른 도메인이 하나의 API에서 처리되어야 하므로, 코드가 복잡하다.게시글 조회

TCL(트랜잭션 컨트롤 랭귀지)트랜잭션이란? 작업의 완전성을 보장해주기 위해 사용되는 개념이다. 특정한 작업을 전부 처리하거나, 전부 실패하게 만들어 데이터의 일관성을 보장해준다.트랜잭션을 왜 사용하는가?1) A계좌에서 1000원을 차감한다.2) B계좌에 1000원이

PUT모두 수정/업데이트할 때 사용한다.PATCH각각 수정/업데이트할 때 사용한다.

한 유저당 한번만 작동된다.

express-mysql-session 모듈의 가장 큰 문제점은 세션 ID로 정보를 조회할 때마다 MySQL의 조회 쿼리를 매번 실행해야한다.문제해결방법1) JWT토큰2) 외부 세션 스토리지를 Redis로 변경

https://school.programmers.co.kr/learn/courses/30/lessons/147355// 다른 사람 코드는 t.length - p.length로 미리 뒤에 숫자가 안 나오게 빼줬다. 그리고 slice를 이용해 원하는 숫자만 도출

테스트 코드란?개발한 코드가 의도한대로 동작하는지 작성하는 코드테스트 코드의 종류1) 단위 테스트(Unit Test): 가장 작은 규모의 기능을 테스트한다.2) 통합 테스트(Integration Test): 다양한 기능을 합쳤을때 생기는 문제를 방지하기 위한 테스트3)

Mork Functions Mock은 특정 메서드나 함수를 Mocking하기 위해 사용된다. 테스트에서 시간 또는 비용이 많이 들거나, 의존성이 높은 코드를 직접 실행하지 않고 호출 여부, 입력한 값의 일치 여부와 같은 정보를 확인하기 위해 사용하는 가짜

로그인 시 토큰을 보내준다 header로 authorization라는 키 값으로 req.headers로 받아준다. 근데 cookie로 받아오는데 게시글 생성할 때 header를 임의로 지정해줘야된다.로그인 했을 때 생성되는 토큰과 토큰값을 임의로 정하자.

마이크로소프트와 다르게 Linux는 대소문자를 구분한다.마이크로소프트는 대소문잘르 구분하지 않는다.

제1 정규화중복이 되지 않아야한다.모든 컬럼은 원자값(더이상 나눌 수 없는 값)만을 가진다.제2 정규화컬럼들이 기본키에 완전 함수적 종속 되어야 한다.테이블을 나눈다. 학생ID 학생이름학생ID 수강과목

git merge --abort

자바스크립트의 동적 언어 약점을 보완하기 위해 생겼다.자바스크립트는 컴파일 전에 변수의 타입을 체크하는데 타입스크립트는 컴파일 할때 변수의 타입을 체크한다. 한 마디로 전체를 읽으면서 타입을 체크한다.

컴파일러란?컴파일러는 프로그래밍 언어로 작성된 소스 코드 > 다른 프로그래밍 언어로 변환하는 도구이다.이러한 변환 과정에서 컴파일러는 소스 코드의 구문과 구조를 검사하여 문제가 없는지 확인하고 코드에 오류가 있는 경우 알려주어 문제를 해결할 수 있다.tsc = Type

Partial(T) >T< 거꾸로기존 타입의 일부 속성만 제공하는 객체를 쉽게 생성한다.이 field라는 인자가 구성이 될 수 있는 경우의 수는 다음과 같아요.name이라는 속성만 있어도 됩니다.age라는 속성만 있어도 됩니다.name, age라는 속성이 둘 다

인터페이스는 객체가 가져야 하는 속성과 메서드를 정의한다.추상 클래스클래스의 기본 구현을 제공합니다.인터페이스객체의 구조만을 정의하고 기본 구현을 제공하지 않습니다.추상 클래스단일 상속만 지원합니다.인터페이스다중 상속을 지원합니다.즉, 하나의 클래스는 여러 인터페이스를

S(SRP. 단일 책임 원칙)1) 클래스는 하나의 책임만 가져야 한다.2) USER 클래스는 유저 관련된 액션만 해야된다.O(OCP. 개방 폐쇄 원칙) -> 인터페이스 혹은 상속을 잘 쓰자1) 클래스는 확장에 대해서는 열려 이어야 하고 수정에 대해서는 닫혀 있어야 한다

npm i joi내가 사용하고 싶은 타입의 형식이 맞는지 확인을 해준다.

AOP(Aspect-Oriented Programming)란?정의: 코드에서 여러 부분에 걸쳐서 반복되는 공통 관심사를 분리하여 중앙에서 관리할 수 있는 프로그래밍 기법이다.특징: 코드의 모듈성을 향상시키고 중복을 줄이고 유지보수에 좋다.

컨트롤러가 리턴한 것에 대해 한 번 더 점검을 하는 것

typeorm-model-generator을 검색하고 공식문서 참고 하면 사용하던 패키지 db를 typeorm에 맞게 수정해준다.?

npm i typeorm-extension

nest로 작업 중 머지를 하고 다른 팀원은 실행이 잘 되는데,나는 실행이 안 된다.. 무슨 이유인지 모르겠는데 팀원이 알아냈다그 이유는 한글 경로라 그렇다바탕 화면을 Desktop로 바꿔주니까 잘 된다.앞으로는 한글 이름으로 폴더를 생성하면 안 되겠다.

간단할 줄 알았는데,SSE라는 패키지를 사용한다..SSE와 또 Rxjs..? 처음 보는 것들을 사용한다..프로젝트에 넣으려고 하는데 2틀 째 전혀 감을 못잡고있다..

순서 이동??

CI/CDCI(지속적 통합)CD(지속적 배포)Githun Actions(툴을 설치하지 않아도 된다.)

네이버 소셜 로그인 세팅네이버 API는 생각보다 간단했다.네이버 개발자 센터에서 애플리케이션 등록을 해준다.3\.클라이언트 ID와 SECRET를 .env파일에 넣어준다.

문제: 이메일 인증을 하면 Query문으로 이메일을 확인해야된다. 하지만 url을 살펴보면 이메일은 인코딩 돼서 그대로 가져오면 이메일 확인을 할 수 없다.해결 시도: 처음에는 수동으로 인코딩된 이메일을 가져오면 잘 되지만, 이메일 만을 작성할 때 가져오지 못 함.해결

프로젝트에서 항상 스토리지나 세션에 저장하다가 쿠키에도 저장하는 법을 알기 위해 쿠키에 저장하고 읽어 오고 삭제하는 방법을 찾았다.쿠키 저장쿠키 읽기로그인에 성공하면 쿠키 저장로그아웃 버튼 누르면 쿠키 삭제

로그인 후 accessToken 저장 방법세션 저장:장점:세션 단위 저장: 세션 기간 동안만 데이터를 저장하며, 브라우저가 닫히면 데이터가 삭제됩니다.단점:용량 제한: Local Storage보다는 적은 양의 데이터만 저장할 수 있습니다.동일 출처 정책(Cross-Or

도커란?개발을 하다보면언어, 웹서버, 데이터베이스, 자동배패툴 등등여러가지 버전을 신경써서 다운받아서 서로 연결이 되도록 설정을 해주어야한다.그런데 서버를 운영하다보면 더 성능 좋은 서버로 옮겨가거나, 늘어난 접속량을 처리하기 위해 서버를 추가해야 할 수도 있다.그렇게

문제: 회원가입 후 메인페이지로 이동하게 되는데 뒤로가기를 누르면 같은 닉네임으로 회원가입을 진행할 수 있음. 그것을 막기 위해 뒤로가기를 막음

html에서 html코드를 주석을 하면 브라우저 상에서 페이지 소스 보기를 했을 때, html주석은 브라우저에서 던져서 주석이 보인다.하지만, php주석은 서버 사이드 스크립트이기 때문에 서버 사이드에서 처리가 이루어지고 던져서 주석이 보이지 않는다.

DB를 클라우드로 이전 작업을 하고 있어서 알아보고 싶었다.데이터베이스를 클라우드로 옮기는 이유클라우트 컴퓨팅을 도입하고 유지보수 비용을 낮게 나오게 할 수 있다.높은 신뢰성이 있다.규모를 신속하게 확장하고 축소할 수 있기 때문에 효과적으로 유지할 수 있다.(

데이터 테이블이란?다양한 데이터를 나열하여 표시하며, 사용자 개인에 맞게 한 화면에서 여러 테이블을 열람해 사용할 수 있는 것출처 http://61.107.76.13/Li/04_11.html

리눅스 서버란?Linux 오픈소스 운영 체제(OS)의 한 종류를 실행하는 서버로, 웹 서비스 및 데이터베이스와 같이 매우 까다로운 비즈니스 애플리케이션을 처리하도록 설계되었습니다. 리눅스 서버를 사용하는 이유무료 오픈소스 운영체제이다.우수한 보안성업데이트 이후에 OS를

MeekroDB란?PHP용 MySQL 라이브러리이다.

FTP란? 장점 동시에 여러 파일을 전송하고 연결이 끊긴 경우 전송을 재개할 수 있으며 전송 일정을 예약할 수있다. 단점 암호화되지 않아서 보안이 취약하다 (패킷 공격을 통해 비교적 쉽게 데이터를 읽을 수 있다) ex: Google chrome, firefox는 20

Apache란? 웹 서버 프로그램요청 당 스레드 또는 프로세스가 처리하는 구조CPU/메모리 자원 낭비 심함NginX보다 모듈이 다양PHP 모듈 등 직접 적재 가능안정성, 확장성, 호환성 우세동적 컨텐츠 단독 처리 가능NginX란?Apache의 C10K(1만개의 클라이언

IT 마이그레이션이란?데이터나 소프트웨어를 일반적으로 시스템을 더 나은 운영 체계로 이동시키는 것마이그레이션의 종류데이터 마이그레이션애플리케이션 마이그레이션운영 체제 마이그레이션클라우드 마이그레이션등 한 가지 이상의 이동이 진행될 수 있다.마이그레이션의 예시애플리케이션

구글 애널리틱스란?구글 애널리틱스(Google Analytics)란, 온라인 상에서 시간대별로 기록된 고객들의 로그 데이터(Log Data)를 인간이 보기 쉽게 시각화하여 리포팅을 해주는 도구입니다.쉽게 말해서, 데이터 분석 도구이다.로그 분석 툴의 일종이다.// 로그

saveBackupvscode에 있는 백업 기능 확장프로그램이다.확장프로그램 다운로드를 하고 백업 폴더를 .vscode경로에 만들어주면 된다.

SSL 인증서란?SSL 인증서는 웹 사이트의 소유권을 확인하고 안전한 암호화된 연결을 열 수 있게 해줍니다. SSL 인증서는 웹 서버에 설치된 텍스트 파일이다.SSL 인증서에 담긴 정보인증서 만료 날짜인증서를 발급 대상인 도메인 이름도메인을 소유한 사람, 조직, 장치인

HTTPS란?하이퍼텍스트 전송 프로토콜 보안(HTTPS)은 웹 브라우저와 웹 사이트 간에 데이터를 전송하는 데 사용되는 기본 프로토콜인 HTTP의 보안 버전, HTTPS는 데이터 전송의 보안을 강화하기 위해 암호화된다.HTTPS 사용해야하는 이유사용자의 은행 계좌, 이

Elastic Search란? http 프로토콜로 접근이 가능한 REST API를 통해 데이터 조작을 지원한다.

서버란? 클라이언트에게 네트워크를 통해 서비스를 제공하는 것 위에서 말하는 서비스는 하드웨어 뿐만 아니라 소프트웨어까지 포함한다. > 서버의 종류 웹 서버 : 웹사이트 서비스를 제공하기 위한 서버 도메인 서버 : 도메인을 관리하기 위한 서버 이미지 서버 :

Soucres에서 Breakpoints어디가 문제인지 확인 후 Breakpoints를 잡아주면 이때 밑에 오른쪽에 Scope를 확인을 한다. 여기서 Local은 함수 내에 접근할 수 있는 것들이고, Script는 스크립트 파일에서 접근할 수 있는 것들이다. 그런데 b는

오.. API Client를 사용할 수 있는 VScode에 익스텐션에 Thunder Client를 사용했다.일반적으로 API Client를 사용하지 않으면 GET으로 확인할 수 있는데 API Client를 사용하면 여러가지 메서드를 통해 확인할 수 있다.나는 GET과

API Client란?개발단계에서 우리가 작성한 qpi의 요청을 확인하거나 테스팅 할 때 도움을 주는 툴API Client를 사용함으로써 개발 속도를 높이거나 치명적인 에러를 예방하는데 도움을 받을 수 있다.ex) postman, insomnia, thunder cli

node, nodemon app.js는 cmd창을 닫으면 서버가 닫힌다.sudo -s슈퍼 계정으로 바꿈ㅋnpm i -g pm2 글로벌로 pm2를 설치한다.후에 exit로 -s를 빠져나가서 pm2 start app.js를 실행하면안 되면 우분투 계정에서 sudo pm2

자신의 언어에 맞는 것을 입력해주면.gitignore에 필요한 것들을 알려준다.

ubuntu(cmd)에서 git clone 주소ls 후 파일에 접근한다(cd).파일에 접근 후 sudo apt install npm 을 사용하여 npm을 다운로드 해준다.npm install 을 하려고 했는데 윗 커맨드가 나오고 후에 했따.node app.js로 실행을

window는 cmd창에서 ubuntu에 접속한 후 실행한다.ssh -i key.pem ubuntu@퍼블릭 키CURL 설치sudo apt-get install -y curlAPT 패키지 설치sudo apt update노드 JS 다운로드sudo apt install no

HTTP우리가 일반적으로 데이터를 주고 받을 때 사용되는 통신 규약쿠키 - 보안에 취약하다.웹 브라우저에 구현된 기술 중 하나. 보통 상태를 저장하기 위해서 사용한다.세션웹 브라우저에 구현된 기술 중 하나. 세션은 쿠키의 특성을 이용한 기술이다.npm i static정

숙련주차가 시작되었다. 팀원도 바뀌고 새로운 시작이다~

try / catch 함수 실행 중 에러 발생 시 서버의 종료를 막기 위해서 사용finally 성공, 에러 여부에 관계없이 무조건 실행

UX(USER EXPENIENCE) - 사용자 경험

구조분해할당 배열 구조분해할당하는 법 // let [value] = [1] - value라는 변수에 1이 들어간다. // let[value1, value2 = 2] = [1] - value1에 1이 들어가고 value2 변수에는 undefined가 나오는데 기본값(2)

변수 = 데이터식별자 = 변수명숫자 = 8byte 한글 = 2byte 영문 = 1byte

콜백 함수 콜백 함수를 실행할 때 제어권은 그 함수를 실행하는 자에게 제어권이 있다. // ex) setInterval, setTimeOut 인자에 대한 제어권 // ex) map, filter, find, forEach 콜백 함수 thisbinding 콜백 함수는

HTML파일을 JS가 알아먹을 수 있는 OBJECT형태로 modeling한 것API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할DOM은 브라우저 상에서만 돌아간다.HTML의 NODE(속성)// 객체를 쉽고 빠르게 만들 수 있다.클래스 함수에

JSON이란?원래는 자바스크립트에서 사용할 목적으로 만들어진 포맷이지만, 다른 언어에서도 사용이 가능하다. 보통 데이터 교환 목적으로 사용하는 경우가 많다.JSON 특징문자(객체)는 큰 따옴표만 사용 가능문자를 제외한 것들은 작은 따옴표로 사용 가능문자, 숫자, 불린,

HTTP Method란?수행할 작업의 종류를 나타내기 위해 서버에 보내는 메시지HTTP Method를 사용하면 브라우저와 서버 간의 더 풍부한 통신이 가능해진다.

Stateless란?첫 번쨰 요청에서 서버에 이미 사용자 123이라 말해도, 그 후 서버에게 다시 물어보면 서버는 내가 누군지 모른다.HTTP는 stateless protocol이다.서버가 여러 요청 기간 동안 각 사용자에 대한 정보나 상태를 유지할 필요가 없다.이렇게

Request의 구조

HTTP Status CodeHTTP 상태 코드는 브라우저 요청에 따라 서버에서 반환되는 코드이다. 요청이 성공했는지 실패했는지 나타낸다.코드 정리100 - 199 정보 코드요청에 대한 정보 메시지를 반환하는 상태 코드100 Continue Server: 요청 헤더를

ETag란?HTTP 응답 헤더는 리소스의 특정 버전에 대한 식별자이다. 콘텐츠가 변경되지 않은 경우 웹 서버에서 전체 응답을 보낼 필요가 없으므로 캐시를 보다 효율적으로 사용하고 대역폭을 절약할 수 있다.

포스트맨이란?개발한 API를 테스트하고, 테스트 결과를 공유하여 API 개발의 생산성을 높여주는 플랫폼포스트맨 설치포스트맨 다운로드 링크

간이 전자 우편 전송 프로토콜 SMTP(Simple Mail Transfer Protocol)인터넷에서 이메일을 보내기 위해 이용되는 프로토콜이다. 사용하는 TCP 포트번호는 25번이다.작동하는 순서Gmail을 이용해 작성해서 보내면 일단 그 메일은 SMTP 서버로 전

SQL(Structured Query Language)이란?관계형 데이터베이스(RDBMS)에서 사용하는 언어OracleMySQLPostgreSQLSQL과 RDBMS의 관계RDBMS는 데이터베이스 관리 시스템이고, SQL은 RDBMS의 데이터와 통신하는 데 사용되는 언어

데이터베이스(database)란?여러 사람이 공유하여 사용할 목적으로 체계화해 통합, 관리하는 데이터의 집합데이터베이스가 필요한 이유데이터베이스를 이용해서 영구적으로 데이터를 보관할 수 있다.DBMS(Database Management System)데이터베이스를 관리하

정규표현식이란? 프로그래밍에서 문자열을 다룰 때, 문자열의 일정한 패턴을 표현하는 일종의 형식 언어를 말한다. 정규식이라고도 부르며, 보통 RegEx 혹은 RegExp라 많이 쓴다. | 정규표현식 | 뜻 | | :- | -: | | /B/g | B 문자 | |

REST홍길동 컴퓨터에서 요청을 하면 페이지를 새로고침해야 데이터를 받아온다.단방향 통신만 가능하다.Websocket홍길통 컴퓨터에서 요청을 하면 즉시 데이터를 받아온다.양방향 통신이 가능하다.

Polling이란?클라이언트가 일정한 간격으로 서버에 요청을 보내서 결과를 전달받는 방식장점: 구현이 쉽다.단점1초마다 위치를 받아올 수 있다. 서버의 성능에 부담이 간다.주기가 길면 실시간성이 좋지 않다.서버에서 바뀐 데이터가 없어도 계속 요청을 하고 결과를 보낸다

Websocket이란?WebsocketWebsocket 사용법client에게 보여줄 폴더server에서 사용할 폴더server 폴더에 들어가서 npm init / npm i ws를 해준다.client에게는 필요없으니 server폴더에서만 사용하면 된다.client 폴더

socket IO이란?Node.js에서 WebSocket를 사용할 때 편하게 사용하도록 만든 모듈websocket을 이용하면 서로 다른 인터페이스를 갖고 사용해야한다. 그리고 websocket 객체는 모든 브라우저에서 사용하지 못한다.(현재는 대부분 사용 가능)sock

socket io 사용법client 폴더에 socket cdn 불러오기server 폴더에 socket 모듈 설치npm i socket.ioclient 폴더server 폴더새시크릿창과 기존 라이브 창과 소통을 해보자.

namespaceroom을 포함하고 있다.roomnamespace의 하위 개념으로 namespace안에 room이 있고 room 안에 여러 소켓들이 있다.소스 코드로 확인해 보자

슬러그란?페이지나 포스트를 설명하는 핵심 단어의 집합특수문자나 공백을 하이픈(-)으로 대체해서 만들며 URL에 사용된다. 슬러그를 URL에 사용함으로써, 검색 엔진에서 더 빨리 페이지를 찾아주고 검색엔진의 정확도를 높여준다.

Dropzone이란?이미지 파일을 드래그 하여 파일을 업로드 가능하게 해준다.

PortOne이란? PortOne결제시스템 연동해주는 서비스사용법PortOne 서비스에 가입사이드바에 콘솔 가이드 보기를 클릭인증 결제 연동하기 - 포트원 라이브러리 추가 클릭HTML 파일 header 부분에 붙여넣기인증 결제 연동하기 - 객체 초기화하기결제 페이지를

파일 이름 컨벤션kebab-case를 사용한다.ex) user-profile.controller.tsjavascript, typescript에서 권장되는 스타일파일 시스템에서 대소문자 구분 문제 회피URL에서 안전하게 사용할 수 있는 방식

Swagger란?API 설계, 구축, 문서화, 테스트 하는 과정을 돕는 프레임워크주로 API를 직관적인 문서화 할 수 있도록 하는데 활용한다.express.js에서 swagger 사용하기https://velog.io/@yongh8445/Node-Express-

ORM(Object Relational Mapping)객체와 관계형 데이터베이스의 데이터를 자동으로 변형 및 연결하는 작업ORM을 사용하지 않고 pure javasciprt를 사용했을 때의 차이점을 알아보자ORMconst boards = Board.find({title

문제: 프로세스에서 앱을 종료 했더니 앱을 실행할 수 없음해결: window에서 서비스 검색 후 앱 찾아서 시작

애플리케이션을 구축할 때 서버 관리의 복잡성을 줄여주는 클라우드 컴퓨팅 아키텍처를 의미, "서버리스"라는 용어는 실제로 서버가 없다는 뜻이 아니라, 서버 관리를 개발자가 아닌 클라우드 서비스 제공업체가 맡는다는 것자동 확장: 사용량에 따라 자동으로 리소스가 확장되거나

정적 웹 호스팅 및 웹 개발 서비스를 쉽고 빠르게 배포할 수 있도록 도와주는 플랫폼이다.정적 사이트 호스팅GitHub, GitLab, Bitbucket과 통합되어 코드 저장소에서 자동으로 사이트를 빌드하고 배포한다.CDN(콘텐츠 전송 네트워크)을 통해 빠르고 안정적인

Netlify 회원 가입 및 팀 생성깃허브 계정과 연동하여 가입한다.배포할 깃허브 레포지토리를 클릭한다.배포가 완료되면 필드를 적어준다.다 적고 배포를 하면 배포가 시작된다.배포가 완료되면 site configuration에서 env파일을 설정해준다.

ec2로 배포 중인 서버에 HTTPS를 설정하려고 한다.도메인을 구입한 후 사용해야한다.ssh 서버에 접속한다.Cerbot 설치sudo apt updatesudo apt install certbotNginx 설치sudo apt install -y nginx

Large Language Model의 약자로, 인간 언어를 자연적으로 이해하고 생성하는 모델을 의미한다. 텍스트 기반으로 번역,대화,요약 등 다양한 기능을 수행할 수 있다.수많은 데이터 학습: LLM은 인터넷과 동일한 데이터베이스에서 수집된 텍스트 데이터를 학습하여

OpenAI 사이트에 회원가입한다.왼쪽 상단에 PROJECTS를 클릭하여 Organization overview를 클릭한다. 왼쪽 사이드 바에 API keys를 눌러 키를 발급한다키를 발급하고 비용을 지불하기 위해 카드 결제를 해야한다.오른쪽 상단에 설정인 톱니바퀴 클

문제: 재배포 시 배포 중 서버가 잠깐 끊기는 현상해결방법: Nginx와 Docker 네트워크 연결

서비스를 중단 없이 새로운 버전의 소프트웨어를 배포하는 것이다. 예를 들어, 디자인을 바꾸고 배포를 했는데 중단 없이 디자인을 업데이트 하는 것이다.무중단 배포를 하지 않으면, DOWNTIME이라는 현상이 발생한다. DOENTIME이란 서버가 교체될 때 서버가 중단되는

캐시(Cacher)는 원본 저장소보다 빠르게 가져올 수 있는 임시 데이터 저장소를 의미한다.캐싱(Caching)이란 캐시에 접근해서 데이터를 빠르게 가져오는 방식을 의미한다.ex) 이 API는 응답 속도가 너무 느린데? 이 응답 데이터는 캐싱 해두고 쓰는 게 어때?AP

데이터 조회 성능을 개선하는 방법에는 많은 것들이 있다.SQL 튜닝캐싱 서버 활용(Redis 등)레플리케이션 (Master/Slave 구조)샤딩DB 스케일업(CPU,Memory,SSD 등 하드웨어 업그레이드)SQL 튜닝을 제외한 나머지 방법은 추가적인 시스템을 구축해야

URL이란? 웹에서 리소스(예: 웹 페이지, 이미지 파일 등)의 위치를 지정하는 주소 체계 > URL의 구성요소: https://www.naver.com/ 프로토콜(https://) 데이터를 암호화 하여 전송한다. 도메인(www.naver.com) 서브 도메인