1.회사 계정으로 repository 만든다 2. 내 깃허브 계정의 repository에서 회사 repository 를 fork 한다 3. 내 vscode 에서 내 git hub 를 clone 한다 4. api 들 만든후에 내 repository에 push를 한다 5. 그 후 회사 repository 에 pull request 요청한다! 6. 내 repository => origin // 회사 repository => upstream

주의

1.서로 겹치는 기능은 같이 만들지 않기 2. 잘하는 사람이 공통 모듈 만들기 3. merge 가 완료 되지도 않았는데 그걸 활용해서 만들지 않기

실습

1.회사 repository 에 들어가서 내 repository에 fork 한다 2.내 repository 에 git clone 을 한다 3.issue 에 무슨 일을 할지 규칙에 따라 적어 놓기 4.git branch 로 어느 브랜치인지 확인 하기 5.git checkout -b '만들 브랜치 이름' => 브랜치 만들기 => 꼭 메인에서 새로운 브랜치 따야한다 6.내용 수정하기 7.git remote -v => 내 repository에 저장 되어 있는지 확인 8.git push origin ‘push할 branch 이름’ 9.git add. 10.git commit -m”이름” 11.git push origin ‘push할 branch이름’ 12.1.git remote add upstream ‘회사 repository 주소’ 13.pull request 요청(develop branch에다가)

DAO

데이터베이스의 data에 접근하기 위한 객체입니다. MVC 패턴의 MODEL에서 이와 같은 일을 수행합니다.

DTO

계층 간 데이터 교환을 하기 위해 사용하는 객체로, 로직을 가지지 않는 순수한 데이터 객체 입니다.

VO

값 오브젝트 로서 값을 위해 쓰입니다. read-only(오직 읽기만 가능) 특징을 가집니다.

시스템의 엔티티들이 무엇이 있는지 어떤 관계가 있는지를 나타내는 다이어그램입니다.

ERD 사용법

1. 관계형 DB에서 주로 사용됩니다. 엔티티와 속성들을 테이블과 컬럼들로 변환할 수 있습니다. 테이블들과 관계들을 시각화할 수 있기 때문에 설계 문제점을 파악할 수 있습니다.
2. 소프트웨어 계획 단계에서 사용됩니다. 서로 다른 시스템 요소와 서로 간의 관계를 식별하는게 도움 됩니다.

ERD 작성법

1. 모든 엔티티들을 정의합니다.
2. 엔티티 간 관계들을 정의합니다.
3. 속성들을 추가합니다.

자바스크립트는 동적 분석을 하기 때문에 에러를 찾기 위해서는 직접 코드를 실행해서 확인 해봐야 합니다. 이를 도와주는 것이 정적으로 분석 해주는 eslint입니다. 프로그램을 실행하지 않아도 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동으로 검출 해줍니다.

Prettier 란

eslint처럼 '코드 구현 방식'이 아닌, 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것입니다.

차이

esling는 주로 코드 에러를 잡아내고 코드 문법을 강제하는 등 코드 품질을 개선에 중점을 두었습니다. prettier은 코드의 최대 길이, 함수에서, 작은따옴표(')를 사용할 것인지 아니면 큰 따옴표(")를 사용할 것인지 등 코드가 예쁘게 보이도록 하는지에 중점을 두었습니다. 하지만 코드의 에러를 잡아내진 못합니다.

조직적, 자동화된 방법으로 웹을 탐색 및 수집하는 프로그램입니다. 크롤러는 여러 사이트를 돌아다니면서 필요한 데이터를 가지고 옵니다.

스크래퍼

웹사이트 상에서 원하는 정보를 추출하는 기술입니다. 스크래핑을 수행하기 위해서는 먼저 필요한 정보를 찾기 위해 크롤링 작업을 수행해야 합니다.

차이점

1. 웹의 다양한 소스에서 특정 데이터를 추출하는게 스크래핑이고 웹페이지에 있는 데이터를 단순하게 긁어 와서 분류기를 통해 유효데이터를 분류하는 것은 크롤링입니다.
2. 지속적으로 혼자 동작할 수 있으면 크롤링, 멈추면 스크래핑입니다.

객체 지향 프로그래밍은 클래스를 사용하고, 관계형 데이터베이스는 테이블을 사용하기레 객체 모델과 관계형 모델 단에 불일치가 존재합니다. ORM은 객체 관의 관계를 바탕으로 SQL을 자동으로 생성하여 불일치를 해결 해줍니다. 즉, 코드에 있는 "객체"와 DB에 있는 "데이터"를 편하게 일치시켜주는 도구입니다.

장점

1. 재사용성 및 유지보수의 편리성이 증가합니다. ORM은 독립적으로 작성되어있고, 해당 객체들을 재활용할 수 있습니다.
2. 객체 지향적인 코드로 인해 더 직관적입니다. 선언문, 할당, 종료 같은 부수적인 코드가 없거나 급격히 줄고 각종 객체에 대한 코드를 별도록 작성하기 때문에 코드의 가독성을 올려줍니다.

단점

완벽한 ORM으로만 서비스를 구현하기가 어렵습니다. ORM이 사용하기는 편하지만 프로젝트의 복장성이 커질 경우 난이도 또한 올라가고 만약 잘못 구현된 경우에 속도 저하 및 심각할 경우 일관성이 무너지는 문제점이 생길수 있습니다.

프로젝트의 정보를 정의하고, 의존하는 패키지 정보를 명시하는 파일 입니다. 크게 프로젝트 정보 , 패키지 정보로 이루어져 있습니다.

프로젝트 정보(name, version 영역)

1. name : 소문자 한 단어로 이루어져야합니다. 그리고 하이픈( - )과 언더스코어( _ )가 포함될 수 있습니다.
2. version : '시맨틱 버저닝' 의 작성 규칙에 따라 형식을 구성합니다.

패키지 정보(dependencies, devDependencies 영역)

1. dependencies : 프로덕션 환경에서 응용 프로그램에 필요한 패키지 입니다.
2. devDependencies : 로컬 개발 및 테스트에만 필요한 패키지 입니다.

   패키지와 모듈

3. 패키지는 package.json 으로 설명되는 파일 또는 디렉토리 입니다. npm 레지스트리에 공개되기 위해 반드시 package.json 파일을 가지고 있어야합니다.
4. 모듈은 node.js의 require() 함수로 로드될 수 있는 node_modules 디렉토리안의 파일 또는 디렉토리입니다

*(모듈은 package.json 파일을 가질 필요가 없습니다. 모든 모듈들이 패키지는 아닙니다. package.json을 가진 모듈만이 패키지입니다.)

마이크로 소프트에서 개발한 오픈소스 프로그래밍 언어이며, 자바스크립트의 단점을 보완하기 위해 만들어 졌습니다.

TYPE SCRIPT 특징

1. 정적 타입 언어

코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠릅니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸릴 수 있습니다.

2. 자바스크립트 슈퍼셋

타입스크립트는 자바스크립트의 슈퍼셋, 즉 자바스크립트 기본 문법에 타입스크립트의 문법을 추가한 언어입니다. 따라서 유효한 자바스크립트로 작성한 코드는 확장자를 .js에서 .ts로 변경하고 타입스크립트로 컴파일해 변환할 수 있습니다.

3.객체 지향 프로그래밍 지원

타입스크립트는 ES6(ECMAScript 6)에서 새롭게 사용된 문법을 포함하고 있으며 클래스, 인터페이스, 상속, 모듈 등과 같은 객체 지향 프로그래밍 패턴을 제공합니다.

TYPE SCRIPT를 쓰는 이유

1.에러의 사전 방지

// math.js
function sum( a, b ){
  return a + b;
}

sum(10,"20") //"1020"

///math.ts
function sum( a : number, b : number ){
  return a + b;

 sum("10","20")//error "10"은 number에 할당될 수 없습니다.

위처럼 타입스크립트는 자바스크립트에서 처럼 의도하지 않은 코드의 동작을 예방할 수 있습니다.

2.코드 자동 완성과 가이드

타입스크립트의 또 다른 장점은 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다는 것입니다. 요즘에 프런트엔드 개발을 할 때 가장 많이 사용되는 Visual Studio Code는 툴의 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화 되어 있습니다.

자바스크립트 에서 함수의 특징 중 매개 변수로 전달 할 수 있다는 점을 활용한 함수입니다.

간단하게 다른 함수에 매개변수로 넘겨준 함수를 말합니다. 매개 변수로 넘겨 받은 함수는 일단 넘겨 받고, 때가 되면 나중에 호출(CALL BACK)한다는 것이 콜백 함수의 개념입니다.

비동기적 프로그래밍

콜백함수를 사용하는 이유에는 비동기적 프로그래밍을 사용함으로써 소중한 싱글 스레드의 멈춤을 방지합니다. 즉, 블로킹을 방지하여 싱글 스레드가 논 블록킹으로 동작하게 합니다.

비동기적 프로그래밍이 필요한 이유

1.사용자 이벤트 처리

브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능합니다. 따라서 이런 화면이벤트를 관리담당하는 녀석에게 우리는 특정이벤트가 발생할 때 호출을 원하는 내용을 callback 함수에 전달하게 됩니다.

2.네트워크 응답 처리

화면단에서 서버에게 요청을 보냈을 때, 그 응답이 언제 올지 알 수 없습니다. 따라서 이런 서버에 대한 응답처리 등도 비동기적으로 처리해야 합니다.

3.파일을 읽고 쓰는 등의 파일 시스템 작업

4.의도적으로 시간 지연을 사용하는 기능(알람 등)

위와 같이 이벤트 등을 기다리는데 하나뿐인 소중한 스레드를 사용한다면, 또 서버의 응답을 기다리기 위해 하나뿐인 소중한 스레드를 사용한다면 사용자는 멈춰져 있는 화면을 보게되는 것입니다. 위와 같이 스레드의 블록킹을 야기하는 작업은 필수적으로 비동기적 프로그래밍을 해야 한다.

예시

1.SETTIMEOUT

function fn_newCallBack(){
  console.log("비동기적으로 호출되고 싶다."); 
}

console.log("-------  호출 직전 -------");

setTimeout(fn_newCallBack, 3 * 1000); // 3초 뒤 콜백 호출

console.log("-------  호출 이후 -------")

//-----  호출 직전  -----
//----- 호출이후 -----
//비동기적으로 호출되고 싶다

2. SETINTERVAL

let i = 0;
const intervalId = setInterval(function(){

  if(i === 3) return clearInterval(interbalId);

  console.log(`${i++}: 인터벌로 호출 되는 콜백입니다.`);

}
, 5 * 1000);

//0: 인터벌로 호출되는 콜백입니다.
//1: 인터벌로 호출되는 콜백입니다.
//3: 인터벌로 호출되는 콜백입니다.

server.api란,

적절한 요청을 하였을 때 그에 맞는 응답을 되돌려 주는 창구를 웹을 통에 노출한 것 입니다.

이러한 server.api를 만드는 방법론 중 하나로 REST 라는 것이 있는 것 입니다.

rest.api란,

모든 Resource (자료, User, …) 들을 하나의 Endpoint 에 연결해놓고, 각 Endpoint 는 그 Resource 와 관련된 내용만 관리하게 하자는 방법론 입니다.

장점

1. 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있습니다.

2. rest.api 메세지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있습니다.

단점

1. 표준이 존재하지 않습니다.

2. 사용할 수 있는 메소드가 4가지 밖에 없습니다.

3. 구형의 브라우저가 아직 지원하지 못하는 부분이 존재 합니다.

이러한 rest.api를 두고 새로운 graphql.api 가 등장하게 된 이유는,

graphql은 요청할 때 사용한 query 문에 따라 응답의 구조가 달라지기에 필요한 것만 꺼내 쓸 수 있기 때문입니다.

하지만 이러한 graphql에도 단점이 있는데,

1) File 전송 등 Text 만으로 하기 힘든 내용들을 처리하기 복잡합니다.

2) 고정된 요청과 응답만 필요할 경우에는 Query 로 인해 요청의 크기가 RESTful API 의 경우보다 더 커집니다.

그렇다면 GraphQL 과 RESTful 중 어떤 것을 선택해서 사용해야하는가는 다음과 같은 기준으로 선택하면 될 것입니다.

GraphQL

1. 서로 다른 모양의 다양한 요청들에 대해 응답할 수 있어야 할 때 대부분의 요청이 CRUD(Create-Read-Update-Delete) 에 해당할 때

RESTful

1. HTTP 와 HTTPs 에 의한 Caching 을 잘 사용하고 싶을 때
2. File 전송 등 단순한 Text 로 처리되지 않는 요청들이 있을 때 요청의 구조가 정해져 있을 때

문제를 하나 해결하고 나니 개발자로서 한걸음 더 다가간 것 같다...

객체 데이터의 내용을 구조 분해해서 내가 원하는 속성들만 꺼내서 사용 할 수 있는 개념입니다.

필요한 부분만 꺼내서 이용할 수 있다는 점에서 변수.(키값)을 사용하는 것보다 효율적 입니다.

예시

const id = {
    name: "선종현",
    age: 25,
    email: "lynx8@naver.com"
}

const = { name, age, email } = id

//만약 여기서 없는 데이터를 넣고 싶다면
const = { name, age, email, address = "korea"} = id

//그럼 id 는
const id = {
    name: "선종현",
    age: 25,
    email: "lynx8@naver.com"
    address: "korea"
}

배열데이터

배열데이터 역시 구조분해할당을 이용할 수 있습니다. 객체 데이터의 경우 {}을 사용했다면 배열 데이터의 경우 꺼내올 때 []를 사용하고, 이름이 아닌 인덱스를 이용해 구조분해할당을 합니다.

예시

const fruits = ["apple", "banana", "cherry"]
const [ a, b, c ] = fruits
console.log( a, b, c ) //apple banana cherry

/*_*(만약 구조분해를 통해 banana만 꺼내오고 싶다면,
a 없이 ,만 적어서 순서를 명확하게 해 출력하면 됩니다)_*/

const [ ,b ] = fruits
console.log(b) //banana

하지만 그후에 어제의 과제를 선생님과 함께 리뷰하고 다른 분들은 발표도 했는데 초라한 나의 코드와 비교해보니 기분이 다운됬다.

생각도 할 겸 민트차를 한잔 마셨는데 숨 쉴때마다 입이 시원해지는데 기분이 다시 좋아졌다.

이 기분이라면 하루종일 코딩도 할 수 있을 것 같다..

오늘은 기분이 오르락 내리락이 심했는데 내일은 멘탈 관리에 더 힘 써 봐야 겠다...

하지만 다들 존댓말을 써주셨는데 그러다보니 마음 한켠에 무언가 어색한 기분이 들었다. 더욱 가까워지기 위해서 내일 밥먹을 때는 말 편하게 하셔도 된다는 말을 슬쩍 해봐야겠다...

TEMPLATE LIETERAL이란,

우선 템플릿 리터럴은 변수를 이용해 동적으로 문자를 생성할 수 있는 문법입니다.

이것이 왜 필요하냐면, 이전에는 아래와 같은 코드를 썼습니다.

var name = "선종현"
var age = "25"
var intro ="이름: " + name + " ," + "age: " + age;

이 방식은 코드를 작성하는데 시간도 오래 걸릴 뿐만 아니라 코드를 읽는 입장에서 가독성이 떨어집니다.

위의 코드를 template lierals로 변경한다면

let name = "var name = "선종현"
let age = "25"
let intro = `이름: ${name}, age: ${age}`
_(템플릿 리터럴은 백틱 문자(` `)를 이용합니다.
  표현식을 사용할 때는 ${expreesion} 형식으로 입력합니다.)_

뿐만 아니라 여러 줄의 문자열을 생성하기도 쉽습니다.

그전에는 개행하려는 줄의 끝에 \n 기호를 입력해야만 줄 바꿈이 되었습니다.

하지만 리터럴을 이용하면 줄 바꿈을 하고 싶은 곳에 엔터를 치면 됩니다.

이전의 코드와 비교해 보면 코드 입력 속도와 가독성 면에서 template literal이 우수하다는 것을 알 수 있습니다.

오늘 블로깅 해볼 내용은 터미널을 이용하여 깃허브와 연동하는 방법에 대해 써보려고 합니다.

아직 터미널과 깃허브에 대해 미숙해서 깊이 있게 쓰지는 못하겠지만 제가 아는 선에서 적어 내려가 보겠습니다.

<초기설정>

우선 git config --list 를 터미널에 입력하여 기존에 설정한 초기설정의 여부를 확인합니다

만약 없다면, git config --global user.name "본인 id" 와

git config --global user.email "본인 email" 을 입력하니다

그 후 git config --gloval color.ui "auto" 를 입력합니다.

여기까지 완료했다면 초기설정은 끝났습니다. 이제 깃허브에 저장해 보겠습니다.

<깃허브에 PUSH>

순서대로

1. 터미널의 원하는 디렉토리에 가서 git init 입력합니다.

2. git add . 로 커밋할 변경사항 업데이트 합니다.

3. git status 로 현재 커밋할 변경사항이 제대로 유지되고있는지 확인합니다.

4. git commit -m "원하는 제목" 입력합니다

5. git log를 통해 commit history가 정상적으로 남았는지를 확인할 수 있습니다.

6. git remote add origin 'repsitory url'을 입력합니다.

7. git push origin master

지금까지 터미널을 이용하여 깃허브에 저장하는 법을 써봤습니다. 깃허브를 난생 처음 써봐서 아직은 많이 어색하지만 잔디를 키위기 위해서라도 계속 반복해 봐야겠습니다.