문제 설명

나의 풀이

function solution(arr, divisor) {
    var answer = arr.filter( arr => arr % divisor == 0 );
    return answer.length == 0 ? [-1] : answer.sort((a, b)=>{ return a - b })
}

filter() : 메서드로 나머지가 0이 되는값만 answer 변수에 넣고
삼항 연산자 : 조건 ? 참일때리턴 : 거짓일때 리턴 을사용해서

나누어 떨어지는게 없으면(answer.length == 0) ? [-1]리턴

나누어 떨어지는게 있으면 sort()메서드를 사용해서 오름차순으로 리턴

문제 설명

나의 풀이

function solution(arr, divisor) {
    var answer = arr.filter( arr => arr % divisor == 0 );
    return answer.length == 0 ? [-1] : answer.sort((a, b)=>{ return a - b })
}

filter() : 메서드로 나머지가 0이 되는값만 answer 변수에 넣고
삼항 연산자 : 조건 ? 참일때리턴 : 거짓일때 리턴 을사용해서

나누어 떨어지는게 없으면(answer.length == 0) ? [-1]리턴

나누어 떨어지는게 있으면 sort()메서드를 사용해서 오름차순으로 리턴

문제 설명

function solution(seoul) {
    return `김서방은 ${seoul.indexOf("Kim", 0)}에 있다`;
}

indexOf() 를 사용하면 배열의 특정 값을 찾을 수 있음

indexOf('찾을값', 인덱스번호)

여기서 인덱스 번호는 찾기 시작 할 위치의 인덱스 번호임 

1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다.

1-1. 입력된 수가 짝수라면 2로 나눕니다. 
1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 
2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 

예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야 하는지 반환하는 함수, solution을 완성해 주세요. 단, 주어진 수가 1인 경우에는 0을, 작업을 500번 반복할 때까지 1이 되지 않는다면 –1을 반환해 주세요.

제한 사항

• 입력된 수, num은 1 이상 8,000,000 미만인 정수입니다.

입출력 예

nresult

입출력 예 설명

입출력 예 #1
문제의 설명과 같습니다.

입출력 예 #2
16 → 8 → 4 → 2 → 1 이 되어 총 4번 만에 1이 됩니다.

입출력 예 #3
626331은 500번을 시도해도 1이 되지 못하므로 -1을 리턴해야 합니다.

function solution(num) {
    if (num === 1) {
        return 0;
    }

    let 카운터 = 0;
    let 넘 = num;

    while (넘 !== 1 && 카운터 < 500) {
        if (넘 % 2 === 0) {
            넘 = 넘 / 2;
        } else {
            넘 = 넘 * 3 + 1;
        }
        카운터 += 1;
    }

    // 만약 500번의 반복 후에도 1이 되지 않았다면 -1을 반환
    return 넘 === 1 ? 카운터 : -1;
}

문제 설명

function solution(a, b) {
    var answer = 0;
    if(a<=b){
        for (let i=a; i<=b; i++){
        answer += i
        };
    } else { 
        for (let i=b; i<=a; i++){
        answer += i
        };
    }
    return answer;
}

웹서버와 게임서버의 차이점을 보기전에

서버가 무엇인지 전 포스팅에서 다뤘음

[1]<서버>와 <클라이언트> 개념정리

우선 공통점을 보면

그럼 차이점을 보겠음

게임 서버에서 중요한 내용은

상황에따라 낮은 지연시간의 실시간 통신과 동기화를 지원해야한다는 점이 있음

문제 설명

나의 문제 풀이

function solution(x) {
    // x의 각각의 자리수 합구하기
    // 자리수의 합과 x가 놔누어 떨어지는지 검사
    let xStr = String(x);
    let 합 = 0;
    for (let i = 0; i < xStr.length; i++){
        합 += Number(xStr[i]);
    };
    let 나누기 = x / 합;
    return answer = Number.isInteger(나누기);
}

함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다.

제한 조건

• n은 1이상 8000000000 이하인 자연수입니다.

입출력 예

nreturn

나의 풀이

function solution(n) {
    return String(n).split('').map(Number).sort((a, b) => b - a).join('')-'';
}

메서드 함수를 적극 사용해볼려고 함

숫자형인 n을 문자형으로 변경. split로 하나씩 잘라냄. map으로 숫자로 만들어서 sort로 클것부터 정렬한 후 . join으로 배열을 벗겨내기 위해 ' ' 안에 담음 마지막에 ' ' 을 없애고 순수한 숫자열로 만들기위해 -마이너스 연산자로 ' ' 를 뺌

문제 설명

나의 풀이

function solution(n) {
    // 디폴트값을 -1로 해서 정수제곱이 아닐경우 -1리턴
    var answer = -1;
    
    // 제곱근계산기
    let s = Math.sqrt(n)
    // 만약 제곱근계산기가 정수이면 x+1의 제곱 리턴
    if(Number.isInteger(s)){
        let x = s+1
        answer = x*x
    }
    return answer;
}

오늘의 교훈 : 자바스크립트 메서드를 잘 활용하면 복잡하지않고 빠르게 동작하는 코드를 만들 수 있다

1. 기본 문법

• 변수 선언
  • let, const: 변수를 선언합니다. const는 재할당할 수 없는 상수입니다.
• 데이터 타입
  • Number, String, Boolean, Object, Array: 자바스크립트의 기본 데이터 타입들입니다.
• 조건문
  • if, else if, else: 조건에 따라 코드 블록을 실행합니다.
  • switch: 여러 가능한 경우에 대해 코드를 실행합니다.
• 반복문
  • for: 특정 횟수만큼 코드를 반복 실행합니다.
  • while, do...while: 조건이 참인 동안 코드를 반복 실행합니다.
  • for...of: 배열과 같은 반복 가능한 객체의 각 요소에 대해 반복합니다.
  • for...in: 객체의 열거 가능한 속성들을 반복합니다.
• 연산자
  • 산술 연산자: +, -, *, /, %, ++, --: 기본적인 수학 연산을 수행합니다.
  • 비교 연산자: ==, ===, !=, !==, >, <, >=, <=: 두 값을 비교합니다.
  • 논리 연산자: &&, ||, !: 논리 연산을 수행합니다.

2. 함수

• 함수 선언
  • function() {}: 함수의 이름과 내용을 정의합니다.
• 함수 표현식
  • const func = function() {};: 익명 함수로 변수를 초기화합니다.
• 화살표 함수
  • const func = () => {};: 짧은 구문의 익명 함수입니다.

3. 객체와 클래스

• 객체 리터럴
  • { key: value }: 키-값 쌍의 집합체를 정의합니다.
• 객체 메서드
  • Object.keys(): 객체의 모든 키를 배열로 반환합니다.
  • Object.values(): 객체의 모든 값을 배열로 반환합니다.
  • Object.assign(): 하나 이상의 객체를 결합해 새 객체를 만듭니다.
• 클래스 선언
  • class MyClass {}: 객체의 설계를 정의합니다.
• 클래스 상속
  • extends: 기존 클래스를 확장해 새로운 클래스를 정의합니다.

4. 배열 메서드

• push(): 배열 끝에 요소를 추가합니다.
• pop(): 배열 끝의 요소를 제거하고 반환합니다.
• shift(): 배열의 첫 번째 요소를 제거하고 반환합니다.
• unshift(): 배열의 처음에 요소를 추가합니다.
• splice(): 배열에서 요소를 추가, 삭제, 또는 교체합니다.
• slice(): 배열의 일부분을 새 배열로 반환합니다.
• concat(): 두 개 이상의 배열을 결합합니다.
• forEach(): 배열의 각 요소에 대해 함수를 실행합니다.
• map(): 배열의 각 요소를 변환해 새 배열을 만듭니다.
• filter(): 조건을 만족하는 배열의 요소들로 새 배열을 만듭니다.
• reduce(): 배열을 누적해서 단일 값으로 만듭니다.
• find(): 조건을 만족하는 첫 번째 요소를 반환합니다.
• includes(): 배열이 특정 요소를 포함하는지 확인합니다.

5. 문자열 메서드

• charAt(): 문자열의 특정 인덱스의 문자를 반환합니다.
• concat(): 두 개 이상의 문자열을 결합합니다.
• includes(): 문자열이 특정 문자열을 포함하는지 확인합니다.
• indexOf(): 특정 문자가 처음 나타나는 위치를 반환합니다.
• slice(): 문자열의 일부분을 추출합니다.
• split(): 문자열을 배열로 분할합니다.
• replace(): 특정 문자열을 다른 문자열로 대체합니다.
• toLowerCase(): 문자열을 소문자로 변환합니다.
• toUpperCase(): 문자열을 대문자로 변환합니다.
• trim(): 문자열의 양쪽 공백을 제거합니다.

6. 비동기 프로그래밍

• Promise
  • Promise: 비동기 작업의 완료를 처리하는 객체입니다.
  • then(): Promise가 이행될 때 실행할 코드를 정의합니다.
  • catch(): Promise가 거부될 때 실행할 코드를 정의합니다.
  • finally(): Promise가 완료된 후 항상 실행할 코드를 정의합니다.
• async/await
  • async: 비동기 함수를 정의합니다.
  • await: Promise가 해결될 때까지 기다립니다.

7. 이벤트 핸들링

• addEventListener(): 이벤트를 감지하고 처리하는 함수를 연결합니다.
• removeEventListener(): 이벤트 핸들러를 제거합니다.
• preventDefault(): 기본 이벤트 동작을 막습니다.
• stopPropagation(): 이벤트가 상위 요소로 전파되는 것을 막습니다.

8. DOM 조작

• 선택자
  • document.getElementById(): 특정 ID를 가진 요소를 선택합니다.
  • document.querySelector(): CSS 선택자를 사용해 첫 번째 요소를 선택합니다.
  • document.querySelectorAll(): CSS 선택자를 사용해 모든 일치하는 요소를 선택합니다.
• DOM 조작 메서드
  • innerHTML: 요소의 HTML 내용을 가져오거나 설정합니다.
  • style: 요소의 스타일을 변경합니다.
  • setAttribute(), getAttribute(), removeAttribute(): 요소의 속성을 조작합니다.
  • appendChild(), removeChild(): 요소를 추가하거나 제거합니다.

문제 설명

나의해석

// 1. n의 숫자 순서 뒤집기
// 2. n의 숫자 배열로 감싸기
function solution(n) {
    var answer = [];

    let str = String(n) //n의 length를 구하기위해 문자타입으로 변환
    
    for ( let i = str.length-1; i >= 0; i-- ){
        //마이너스 반복문으로 역순 구함
        
        let num = Number(str[i])
        //문자타입에서 다시 숫자타입으로 변경
        
        answer.push(num)
        //하나씩 집어넣음
    };
    return answer;
}

자바스크립트는 코드가 실행될 때 데이터 타입이 결정되는 동적 타입 언어입니다. 따라서 변수에 할당된 값에 따라 그 변수의 타입이 정해집니다. 자바스크립트에서 데이터 타입을 확인하려면 typeof 연산자를 사용합니다.

console.log(typeof 변수명);

typeof 연산자는 변수의 데이터 타입을 반환합니다.

1. 숫자 (Number)

자바스크립트에서는 모든 숫자가 number 타입으로 처리됩니다. 여기에는 정수, 실수, 지수형 표현 등이 포함됩니다.

1-1. 정수 (Integer)

정수는 소수점이 없는 숫자입니다.

let integer = 10;
console.log(typeof integer); // number

1-2. 실수 (Float)

실수는 소수점이 포함된 숫자입니다.

let float = 3.14;
console.log(typeof float); // number

1-3. 지수형 (Exponential)

지수형은 e 표기법을 사용해 표현된 숫자입니다. 이는 주로 큰 수나 작은 수를 표현할 때 사용됩니다.

let exp = 2.5e5;
console.log(typeof exp); // number

1-4. NaN (Not a Number)

NaN은 "숫자가 아님"을 의미합니다. 일반적으로 숫자가 아닌 값을 숫자 연산에 사용했을 때 발생합니다.

let notANumber = "Hello" / 2;
console.log(notANumber); // NaN
console.log(typeof notANumber); // number

1-5. Infinity (무한대)

Infinity는 무한대를 의미하며, 0으로 숫자를 나누는 등의 연산에서 발생합니다.

let infinity = 1 / 0;
console.log(infinity); // Infinity
console.log(typeof infinity); // number

let negativeInfinity = -1 / 0;
console.log(negativeInfinity); // -Infinity
console.log(typeof negativeInfinity); // number

문제 설명

 //문제 조건
 //n은 배열의 갯수, n만큼
 //x를 시작, 시작값x
 //x씩 증가, +x
 //n의 수만큼 x + x값
function solution(x, n) {
    var answer = [];
    for (let i = 1; i <= n; i++) {
        answer.push(x*i)
    }
    return answer;
}

문제 설명

나의 풀이

function solution(n) {
    var answer = 0;
    
    //어떠한 숫자가 들어와도 나머지가 1이 되는 숫자찾기
    //반복문안에 if문으로 나머지가 1이 되는 숫자 찾기
    for( let i = 1; i <= n; i++ ){
        if (n % i == 1){
        return i;
        }
    }
};

어느날...

컴퓨터를 키고 아무것도 안해도

램 사용률이 90%이이다??

인터넷창 몇개 키면 컴터가 살려달라고 비명을 지르며 버벅거림

그래서 오늘인 이 사태의 해결 방법을 알려줌

이건

코딩하는 사람들만 해당하는 해결법임

인터넷에 메모리 관련해서 검색도 이것저것 하겠지만 그 방법들을 따라 해서는

절대 메모리의 사용률을 안정화하지 못할 거임

왜냐하면

거기 나와 있는 원인과 코딩하는 사람들의 컴터에서 나오는 원인은 완전 다르기 때문임

왜 이런 일이 생기는지 알아야 다음엔 대처 할 거 아님

그니깐 원인이랑 해결법 빠르게 알려줌

원인은 램 카드의 구성을 보면 알 수 있음

위 이미지에 보듯이 램카드에는 Code를 저장해놓는 저장공간이있음

님들 바탕화면에 이미 끝난 프로젝트의 코드들을 계속 놔두면 어떻게 되겠음?

쓸때없이 램카드 메모리에 계속 저장되서 램사용률이 올라가지 않겠음?

그래서 해결 방법은?

컴터에 저장되어 있는 쓸때없는 코드파일들은 깃허브에 올리든 드라이브에 올리든

컴터 램카드 메모리에 저장안되게 하면 끝임

코드를 내컴퓨터가 아닌 다른 곳에 저장한뒤 재부팅을 해보면

이렇게 메모리가 안정된걸 확인할 수 있음

팀 소개페이지 만들기 협업진행 후기

이번에 개발자 공부를 함께하는 정x희님, 정x훈님과 협업팀을 만들어 웹페이지를 소개하는 프로젝트를 진행했습니다.

사용한 협업 툴

• 노션 (Notion)
  팀명을 정하고 프로젝트에 사용할 기술들, API 명세서, DB에 공용으로 사용할 키값들을 정리했습니다.
  서로 다른 키값으로 DB에 접근하거나 다른 API를 사용하면 코드의 재사용성이 떨어질 수 있기 때문에, 공통된 키값을 설정했습니다.

• 깃허브 (GitHub)
  버전 관리뿐만 아니라 브랜치를 만들어 각자 기능을 개발하고, 각자의 코드를 합치는 작업을 했습니다.

• 슬랙 (Slack)
  메시지를 주고받거나 공지를 할 수 있는 플랫폼으로, 자주 사용했습니다.

• 젭 (ZEP)
  메타버스 사무실에서 화상 회의를 진행하며 프로젝트를 진행했습니다.

프로젝트 진행

프론트엔드적인 부분의 간략한 틀을 잡기 위해 와이어프레임을 작성했습니다.

• 사이트 제작
  와이어프레임을 토대로 사이트를 제작했습니다. 이번 프로젝트는 백엔드 협업에 중점을 두었기 때문에 프론트엔드 부분은 간단하게 구현했습니다.
• 역할 분담
  홈 화면: 제가 담당한 부분으로, DB에 저장된 멤버 정보를 가져와 멤버 카드가 자동으로 생성되게 했습니다. 네브바를 만들어 각종 페이지로 이동할 수 있는 기능과 오픈 API를 활용해 날씨 정보를 표시하는 기능, 간단한 게임을 구현했습니다.
  상세 페이지, 글 작성 페이지, 수정 페이지: 다른 팀원들이 각각 분업하여 담당했습니다.
• 느낀 점
  협업하면서 다른 사람들과 체계적인 계획을 세우고 API 명세서를 만들어 공용화된 서버를 구축하는 과정이 인상 깊었고, 가장 재미있고 좋았습니다.

KPT 회고

KPT회고는 팀이나 회사에서 더 발전해 나아가기위해 한가지 주제를 정하고 그것에 관해서 
좋았던점을 Keep해서 가져가고
문제점은 Problem에 적어서 그것에 대한 개결 방안을 Try에 적는것입니다.

아래 내용은 저를 포함 한 정x희님 전x훈님 과 협업을 하면 느낀점을 회고 하기 위해 작성한 KPT 내용입니다.

회고 내용을 누가 작성한지에 대해서는 익명임으로 내용 옆에 작성자를 별도 표시하지는 않았습니다.

Keep - 현재 만족하고 있는 부분

• 서로 영상 강의를 추천해준 점
• 모르는 것을 질문을 할 수 있는 점
• 팀원분들과 커뮤니케이션을 통해 협업을 할 수 있었던 점

Problem - 불편하게 느끼는 부분

• 깃허브 올릴 때 수정한 것과 관련되지 않은 제목으로 올림
• 팀원 중 낙오자 발생
• 기초 지식이 너무 부족해서 1인분을 못한점

Try - Problem에 대한 해결책, 당장 실행 가능한 것

• 팀원 중 낙오자 발생 해결 방안으로 비적응자 팀원을 다같이 챙겨주고 적응을다
• 다음부터는 깃허브에 올릴 때 관련된 제목으로 올린다.
• 기초 지식을 열심히 공부해서 다음 프로젝트때는 1인분 이상을 한다 !

서버라는걸 만들었으면

그게 24시간 작동하게 해야할꺼 아님?

내컴퓨터에 서버 시작해놓고 24시간 켜놓을꺼임?

그러다가 컴터 다운되거나 서버 먹통 되는지 24시간 감시하고있다가

먹통되면 재시작하고 평생 컴터앞에 그렇게 앉아 있을거임?

현실적으로 불가능 하기때문에 클라우드 서비스를 사용함

클라우드 서비스는 다른 큰 회사의 서버실에 있는 컴터 한대를 돈주고 빌려서

내서버 띄어 놓는거임

유명한 클라우드 서비스 중에 하나가 AWS임

이건 주소임

https://aws.amazon.com/ko/?nc2=h_lg

AWS에서 여러가지 상품형태로 컴터를 팔고있는데

그중에 가장유명한게

EC2임

이게 뭐냐면 컴터 한데 빌리는 상품인데

거기에 서버에 필요한 라이브러리 이것저것깔고 서버 키면 끝임

단점이 터미널로 서버띄우고 이것저것하는게 오래걸리고

서버 맛가면 자동 재시작 해야하니 PM2 이런 라이브러리 세팅해야하고

문제생기면 해결도 알아서 해야함

그래서 더좋은 상품이 있는데

AWS Elastic Beanstalk 임

얘는 코드만 올리면 알아서 EC2 인스턴스 하나빌려서

npm install 눌러주고 서버띄어주고

무료도메인도 하나 연결해주고

Nginx로 reverse proxy도 넣어주고

유저 많아지면 확장도 쉽게 가능하고
버전관리도 해주고 서버다운시
자동으로 재시작 여러번 시도해주고
그냥 업로드만 하면 끝임
가격도 그냥EC2 요금이랑 같음

AWS는 새계정생성 + 새 카드 등록하면
1년간 무료로 저사양 컴 한대 빌려줌

- 경쟁업체들의 비슷한 상품은
구글의 App Engine,
마이크로소프트 Azure의 App Service
가 있음

문제 설명

나의 풀이

깃허브에 내가 만든 사이트를 배포했다.

문제없이 잘 배포되는 헤피엔딩일 줄 알았다.

페이지 상단에 날씨 정보를 구현했다

이렇게 잘나왔는데 깃허브를 통해서 배포를 했더니

????

날씨 정보가 표시되지 않는다

당황하지 말고 콘솔창에 에러메세지를 확인한다

문제는

배포한 페이지가 HTTPS보안 주소인데

날씨정보를 불러오는 API주소가 HTTP라서

대충 보안상 위험하니 내가 차단했어^^ 라는 에러메세지다

기존에 날씨정보API주소에 HTTP를 HTTPS로 수정해도 작동하지않는다

왜냐면 날씨정보를 제공해주는 쪽의 서버에서 그렇게 해줘야하기때문이다

그럼 HTTPS로 주소를 제공하는 다른 API로 변경해주면 된다

검색을 통해 다른 날씨제공 사이트에서

AIP를 받았다

결과는 어떻게 되었을까?

배포된 주소로 접속해도 이렇게 정상 작동한다

쉽구만

git의 branch만들기 

코딩하다가 새로운 기능 넣고싶을때

원본파일로 작업하다가 망가지면 어떻할꺼임?

파일 복사본 만들어서 거기에 먼저 코드짜보면 안전하지 않겠음?

branch = 복사본임

터미널에서는

그럼 서본명의 브렌치로 이동 해서 파일수정가능

git add 나 git commit 을 사용해서 변경한파일 저장하면 됌

이렇게 사본브랜치를 main브랜치에 합치고싶을땐?

git switch main 으로 메인브랜치로 이동을 먼저함

main브랜치에서 git merge 합칠파일명

입력하면 됌 이 합치는걸 깃머지 라고 함

근데 메인브랜치랑 사본브랜치가 같은 파일을 수정하면 어떻게될까?

둘중에 뭘 메인브랜치에 적용해야할지 우선순위는 개발자가 직접 정해야하지 않을까?

이런경우에는 행복하지 않은 엔딩 즉 충돌엔딩이 생김

이럴땐 충돌된 코드중에 뭘남길지 정해서 코드수정하고

깃애드 깃커밋하면 해결 끝

컴플릿트발생하면 수동으로 해결해야함

깃머지 말고도 다양한방법으로 브랜치들을 합칠수 있음

각 브랜치마다 신규내용이 있는경우를 쓰리웨이 머지라고 함

메인브랜치는 수정이 안되고 사이드브랜치만 수정한경우는?

그냥 사이드브랜치를 메인브랜치로 지칭해버림 왜냐면

메인브렌치에다가 합칠때 없는상태에서 코드가 추가되었기때문임
이걸 페스트 포워드 머지라고함

만약 머지를 완료한 브랜치가 삭제하고 싶어지면
git branch -d 브랜치명 을 입력하면 지워

머지를 안한 브랜치 삭제는

git branch -D로 대문자D를 입력해야함

깃로그로 메인브랜치 내역마 보고싶은데

사이드 브랜치들까지 로그가 다출력되는게 싫을땐

squash and merge를 하면 됌

git merge --squash 새브랜치

선으로 이어지는게 아니고

메인브랜치앞에 순간이동으로 합쳐짐

이렇게하면 사이드 브랜치에서 개발했던 짜잘한 로그까지 출력되지않음

1.깃허브 다운로드

윈도우 : 구글에 git windows 검색해서 다운로드

맥 : 맥은 설치방법이 약간 길어서 구글에

맥 깃허브 설치방법 검색해서 설치

2.기록해보기

작업할폴더를 vs코드같은 에디터로 열고

뉴터미널을 열어 git init해주면 작업사항을 깃이 감시해준다

이제 작성한 코드를 저장하려면

터미널에 git add 파일명(예:git add index.html)을 입력한 후

git cimmit -m '커밋메세지' 입력

이렇게 해놓으면 몇날몇일에 작성했는지 아니면 이때로 코드를 되돌리던지가 가능함

위 코드의 구조를 잘 외우셈

git add 를 하면 스테이징 에리어로 이동함

그후 git commit을 하면 레포지토리(저장소)로 이동함

명령어를 간단하게 정리해보면

3. 코드에디터에서 제공해주는 깃기능 사용하기

하지만 사실 요즘은 터미널에서 깃명령어로 하는게 뻘짓일수있음

코드 에디터에서 제공해주는 깃기능을 사용하면 편리하게 깃할수있음

vs코드기준 왼쪽바에 "소스제어"에서 깃을 사용할수있음

+ 버튼 누르는게 git add임

스테이징 에리어에 잡아넣는다는 뜻이지

"체크"버튼 누르면 git commit 임

아래 Message 창에 메세지 입력해서 체크하면

레포지토리에 메세지달아서 최종적으로 저장하겠단 뜻이지

이 커밋을 하기전에는 항상 현재파일 vs 최근commit한 파일 차이점을 확인하는게 좋은 습관임

차이점 확인하는 방법

git diff 를 터미널에 입력하면 바로 전 커밋이랑 지금 파일이랑 차이점을 볼수있음

 j키랑 k키 누르면 스크롤하면서 차이점을 볼수있음 종료는 q키임

깃 디프의 단점이 있는데 코드가 길면 보기힘

보기에도 쓰래기임

그래서 더좋은 명령어를 쓰는게 있음

git difftool인데 비주얼적으로도 이쁨

y/n 선택란 나오면 y 누르면 가능

h j k l 로 방향조절 q로 종료가능

근데 사실 코드에디터에서 깃그레프같은거 다운 받아 쓰면 더 깔끔함..

파이어베이스 세팅코드

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


// Firebase 구성 정보 설정
const firebaseConfig = {
        본인 설정 내용 채우기 
};


// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Firebase 구성 정보 설정은 파이어베이스 에서 만든 데이스 페이지에서

왼쪽상단 메뉴버튼 > 프로젝트 개요톱니바퀴 > 프로젝트설정 >

SDK 설정 및 구성

에서 구성 클릭 > 보드 복사해서 붙혀넣기

데이터 저장하기

$("#id").click(async function () {
    let doc = {};//<저장할 데이터
    await addDoc(collection(db, "콜렉션이름"), doc);//<db의 컬렉션명 입력
    alert('저장완료'); //알럿알림
    window.location.reload(); //윈도우 새로고침
})

데이터 불러오기

      //데이터 불러오기
      let docs = await getDocs(collection(db, "albums"));
      docs.forEach((doc) => {
        let row = doc.data();
        console.log(row);//가져온데이터 콘솔창에 표시
        /**  이곳에 메이크카드를 넣으세요   */
      });

개념정리
Express와 가장 많이 사용하는 웹소켓 라이브러리인 Socket.IO

서버와 실시간 양방향 통신을 할수있음

설치 방법

터미널에 npm install socket.io 입력

사용 세팅법

1 . 서버파일 상단에  세팅코드 입력

const { createServer } = require('http')
const { Server } = require('socket.io')
const server = createServer(app)
const io = new Server(server)

2 . app.listen(어쩌구) 라고 써은던 코드를 server.listen(어쩌구)으로 바꿔셈

app.listen(생략)
server.listen(생략)

3 . 웹소켓 사용을 원하는 html 파일에 이걸 넣어서 socket.io 라이브러리 설치

<script src="https://cdn.jsdelivr.net/npm/socket.io@4.7.2/client-dist/socket.io.min.js"></script>
<script>
  const socket = io() 
</script>

사용법 정리

io.on [ 이벤트리스너 ]

서버는 누가 웹소켓 연결시 특정 코드를 실행하고 싶으면 위처럼 작성해두면 됩니다.

io.on('connection', (socket) => {
  console.log('websocket 연결됨')
})

서버에 뭔가 요청하려면 정확히 URL과 method를 기입해야함
<form> 태그에 URL과 method 기입란이 있음

<form action="/URL~" method="post">
	<butten>버튼</butten>
</form>

이런식으로 <form>태그 안에 action="/URL~" 과 method="POST" 를 쓰면 끝

이제 폼태그안에있던 전송버튼누르면 /어쩌구 URL로 POST요청이 갑니다.

첫째 . html이나 ejs파일에 글작성 란을 만든다

<form action="/add" method="POST"> //add라는 url로 post요청 보낸다는뜻
   <h4>글쓰기</h4>
    <input name="title"> //name="작명" 속성에 DB에 저장할 이름 작명
    <input name="content"> //name="작명" 속성에 DB에 저장할 이름 작명
    <button type="submit">전송</button>
</form>

서버로 전달하고 싶으면 <input>에다가 전부 name = "  " 속성을 열어서 아무거나 영어로 작명해주면 됩니다. 

<form class="form-box" action="/posting" method="POST">
   <h4>인풋박스제목</h4>
   <input name="title">
   <input name="text">
   <button type="submit">전송</button>
</form>

<form> : 폼태그는 html에서 인풋박스 만들때 쓰는거임

form(폼)안에다 인풋박스 만들어야 서버에 전송하기 편함

action="/ULR~~" : URL내용은 서버파일 에서 사용할 URL

name="이름" : input박스에는 DB에 어떤이름 으로 저장할지 name을 지정해줘야함

 method="POST" : 서버에 post 요청 할꺼란 뜻임

위 내용 에서 인풋태그에 유저가 적어서 전송한 내용을 보고싶으면

app.use(express.json())
app.use(express.urlencoded({extended:true}))

//서버파일 상단 쯤에 이런거 추가합시다. 
//원래 유저가 데이터를 보내면 그걸 꺼내쓰는 코드가 좀 귀찮게 되어있는데
//그걸 요청.body로 쉽게 꺼내쓸 수 있게 도와주는 코드입니다.

둘째 . 서버파일.js에서 post요청을받을 API를 만들어야함

html이나 ejs파일에 /URL과 서버파일의 /URL이 일치하게 해야함

app.post('/URL', async (요청, 응답) => {
  await db.collection('post').insertOne({ title : 요청.body.title, content : 요청.body.content })
  응답.redirect('/list')
})

해석해보면

/add 라는 url로 post요청이 오면 DB에 컬랙션리스트중에 POST라는 이름 가진 컬렉션에 하나 삽입하라
그리고 /list 라는 페이지로 이동하게끔 응답을 줘라 이런뜻임

셋째 . 글을 잘썼는지 검열하거나 걸러내는 기능

유저가 제목을 안적고 글을 전송하는 이런상황을 검열할려면

자바스크립트의 if문 을 사용하면 됩니다.

app.post('/add', async (요청, 응답) => {
  if (요청.body.title == '') {
    응답.send('제목안적었는데')
  } else {
    await db.collection('post').insertOne({ title : 요청.body.title, content : 요청.body.content })
    응답.redirect('/list') 
  }
})

해석해보면

if 만약에 요청 >>요청.body.title == ' ' << 이게 빈칸으란뜻

else 아니면 정상실행 하라 원래코드를

누가 /detail/??? 으로 접속하면 그 글번호를 가진 글의 상세페이지를 보여줍시다.

app.get('/post/:id', async (요청, 응답) => {
  let result1 = await db.collection('js').findOne( {_id: new ObjectId(요청.params.id) })
  응답.render('post.ejs', { data : result1 })
})

해석

여기까지 하면 데이터를 id값으로 가져다가 파일에 보내주기까지는 완료

이제 보내준 데이터를 가져다가 쓸려면

<div class="white-bg">
      <% for ( let i = 0; i < data.length; i++ ) { %>
      <div class="list-box">
        <a href="/post<%= data[i]._id %>">
          <h4><%= data[i].title %></h4>
        </a>
      </div>
      <% } %>
    </div>

<div class="white-bg">
      <% for ( let i = 0; i < data.length; i++ ) { %>
      <div class="list-box">
        <a href="/post/<%= data[i]._id %>">
          <h4><%= data[i].title %></h4>
        </a>
      </div>
      <% } %>
    </div>

해석

<% %> : ejs문법으로 자바스크립트 문법을 ejs파일 에서 바로 쓸수있게 해주는거

for : 자바스크립트의 반복문

data.length : 서버에서 data라고 이름 붙혀서 가져온거의 갯수만큼

 <a></a> : a테그를 쓰면 href="" 를 사용해서 링크를 걸수있음

post : 서버파일에서 주소 정한한거 이름임 post라고 대충 정한거임

data[i]._id : for문을 활용해 data의 갯수만큼 id를 저자리에 반복하라는뜻

data[i].title : h4태그안에 데이터 타이틀이라는 이름 가지 데이터 갯수만큼 만들라는거임

우리가 만약에 아래사진 처럼 폼태그 안에 인풋박스 2개를 만들었다고 쳤을때

제목,내용에 아무것도 입력안하거나 이런걸 검열하고싶을때 아래태그를 씀

//유저가 작성한 글을 db에 저장해주기
app.post('/URL작명', async (요청, 응답) => {
  try {
  if(요청.body.인웃name == ''){
    응답.send('제목없음')
  } else if (요청.body.text == '') {
    응답.send('내용없음')
  } else {
    await db.collection('js').insertOne({ title : 요청.body.title, text : 요청.body.text })
    응답.redirect('/')
  }
  } catch(e){
  console.log(e)
  응답.status(500).send('서버에러남')
  }
})

코드 해석

app.post('/URL작명', async (요청, 응답) => {
  try {
  if(요청.body.제목인풋name == ' '){
    응답.send('제목없음') //여기는 알러트박스같은걸로 띠워주는게 좋음
     } else if (요청. 내용인풋name == ' ' ) {
    응답.send('내용없음')  //여기는 알러트박스같은걸로 띠워주는게 좋음
     } else {
    await db.collection('js').insertOne({ title : 요청.body.title, text : 요청.body.text })
    응답.redirect('/')
     }
  } catch(e){
  console.log(e)
  응답.status(500).send('서버에러남')
  }
})

 if , else if , else : 이것도 모르면 이거 볼때가 아니고 자바스크립트 기본문법공부하셈

요청.body.제목인풋name == ' ' : 입력한 인풋제목 칸이 빈칸으면 이란뜻

try { } catch(e) { } : 작성한코드에서 DB가 다운된다던지 하는 에러사항이 생겼을때

catch(e) { } 를 실행해서 서버에러남이라고 가르쳐줌

- 기능이 어떻게 동작하는지 한글로 상세히 정리부터 하고
- 그걸 코드로 번역하기  
이렇게 하면 처음보는 기능도 알아서 잘 만들 수 있습니다. 
숙련된 프로그래머들도 다들 이렇게 합니다.

<form class="form-box" action="/posting" method="POST">
  <h4>인풋박스제목</h4>
  <input name="title">
  <input name="text">
  <button type="submit">전송</button>
</form>

해석

<form class="form-box" action="/posting" method="POST">
   <h4>인풋박스제목</h4>
   <input name="title">
   <input name="text">
   <button type="submit">전송</button>
</form>

<form> : 폼태그는 html에서 인풋박스 만들때 쓰는거임

form(폼)안에다 인풋박스 만들어야 서버에 전송하기 편함

action="/ULR~~" : URL내용은 서버파일 에서 사용할 URL

name="이름" : input박스에는 DB에 어떤이름 으로 저장할지 name을 지정해줘야함

 method="POST" : 서버에 post 요청 할꺼란 뜻임

//유저가 데이터를 보내면 그걸 꺼내쓰는 코드가 원래 귀찮은데
//그걸 쉽게 요청.body에 넣는걸 도와주는 코드
//위쯤에 넣어두고 시작한다 생각하면 편함
app.use(express.json)
app.use(express.urlencoded({extended:true}))

이제 서버파일에서

//유저가 작성한 글을 db에 저장해주기
app.post('/URL작명', async (요청, 응답) => {
   await db.collection('js').insertOne({ DB에넣을 이름 : 요청.body.인풋박스name })
   응답.redirect('/')
});

해석

app.post('/URL작명', async (요청, 응답) => {
   await db.collection('js').insertOne({ DB에넣을 이름 : 요청.body.인풋박스name })

   응답.redirect('/')
});

app.post() : 포스트요청 메소드임

'/URL작명' : 요청할 url작명해서 적는곳 대충 '/posting' 이런거

db.collection('컬렉션명') : 대충 주소임 DB의 컬렉션('컬렉션이름') 라는뜻

insertOne : 삽입한다는뜻

DB에넣을 이름 : 몽고DB는 데이터를{ 이름 : 내용 } 이렇게 저장함 그중 제목 부분

요청.body. : 인풋박스에 입력한 내용

요청.body.인풋박스에서 설정한name

응답.redirect('/') : 이건 인풋을누르면 홈화면으로 이동한다는 뜻

서버 기능이 끝나면 항상 응답을 해줘야 무한대기에 안빠짐

DB데이터 불러오기

app.get('/list', async (요청, 응답) => {
  let result = await db.collection('컬렉션명').find().toArray()
  console.log(result) //콘솔에 가져온 데이터 모두 표시
  응답.send(result[0].title) //응답해주세요. 0번째 개시물의 title이라는 데이터를
})

해석

app.get('/list', async (요청, 응답) => {

app.get : 겟요청

async : await 을 쓰기위한 문법(그냥 만든사람이 어웨잇쓸려면 에이싱크 적으래)

=> : function과 같은뜻

let result = await db.collection('컬렉션명').find().toArray()

await : 다음줄을 실행하기 전에 잠깐 대기 await를 쓰기위해서는 async를 써야함

db.collection('컬렉션명') : DB.의 ' 아무게'컬렉션 에서

find() : 찾아라

toArray() : 모든 배열을

(참고로 자바스크립트문법 중에 대괄호[ ] 안에 여러가지 데이터를 넣는게 Array(배열)임)

(자바스크립트 문법 중에 중괄호{ } 안에 이름 : 내용 이런식으로 여러가지 데이터를 넣는게 object임)