💡 실습 중심이라 확실히 체화할 수 있었던 내용 강의는 처음부터 끝까지 실습 위주로 진행되어, 배운 내용을 바로 코드로 확인하고 응용해볼 수 있었어요.

예를 들어:

Docker 환경 설정 및 컨테이너 빌드

API 서버(FastAPI) 구성 및 요청/응답 테스트

실시간 로그 확인 및 디버깅

AWS를 활용한 실제 배포까지

각 실습 단계에서 왜 이런 구조로 구현하는지, 각 도구와 프로세스가 어떤 역할을 하는지도 함께 설명해주셔서 단순한 따라하기가 아닌 진짜 이해와 응용이 가능했습니다.

🧰 실무에서 자주 쓰이는 툴을 직접 다뤄본 경험 MLOps 강의답게, 실무에서 널리 활용되는 주요 툴들을 폭넓게 다뤘습니다:

Docker: 이미지 빌드, 포트 매핑, 네트워크 구성 등 컨테이너 기반 환경을 구성하며, 서비스의 이식성과 확장성에 대해 체감할 수 있었어요.

FastAPI: 추론 서버를 직접 구축하고 RESTful API를 테스트하면서, 모델을 서비스화하는 흐름을 익힐 수 있었습니다.

AWS: EC2, S3, IAM 역할, 배포 파이프라인 구성 등을 실습하며 클라우드 인프라 운영의 기초도 함께 배웠습니다.

덕분에 단순한 모델 개발을 넘어서, 실제 서비스로 연결되는 전체 파이프라인을 이해하고 구성할 수 있게 되었습니다.

✍️ 마무리 MLOps를 이론과 실습을 함께 배우며, 모델을 만드는 과정과 실제 운영할 때 필요한 팁들을 익힐 수 있어 좋았습니다.

Git이란? Git은 버전 관리 시스템(VCS: Version Control System) 이다. 코드나 문서의 변경 이력을 기록하고 관리할 수 있도록 도와주는 도구다. 마치 게임에서 저장 기능이 있듯이, Git을 이용하면 이전 버전으로 되돌아갈 수 있다. 협업 중에도 누가 어떤 코드를 변경했는지 기록이 남기 때문에 실수를 방지하고, 충돌을 해결하는 데 큰 도움이 된다.

로컬(local) 환경에서 작동하며, git init, git add, git commit 같은 명령어로 변경 사항을 관리한다.

GitHub란? GitHub는 Git 저장소를 온라인으로 공유할 수 있게 만든 플랫폼이다. 클라우드 상에서 Git 저장소를 호스팅하여 여러 명이 함께 개발하고, 리뷰하고, 기여할 수 있도록 돕는다. 즉, GitHub는 Git을 기반으로 한 협업 플랫폼이라 할 수 있다.

GitHub를 사용하면 git push로 로컬에서 작업한 코드를 GitHub로 올리고, 다른 개발자는 git clone, git pull 등을 통해 받아와 함께 작업할 수 있다.

Git과 GitHub의 관계 Git: 버전 관리를 위한 도구 (개인 PC에서 사용 가능)

GitHub: Git 저장소를 공유하고 협업할 수 있는 웹 플랫폼

Git은 GitHub 없이도 사용 가능하지만, 협업이나 백업 측면에서 GitHub를 함께 사용하는 것이 일반적이다. 최근에는 GitHub 외에도 GitLab, Bitbucket 등의 서비스도 활용된다.

정리 항목 Git GitHub 정의 버전 관리 도구 Git 저장소 호스팅 플랫폼 용도 코드 변경 이력 추적 협업 및 코드 공유 작동 위치 로컬(PC) 온라인(웹) 대표 명령어 init, add, commit push, pull, clone

Git과 GitHub는 현대 개발자에게 필수적인 도구이다. 하나씩 익혀가며 자신의 개발 이력을 체계적으로 관리하고, 더 나아가 다른 사람과의 협업도 경험해보자.

원하는 스타일이나 내용이 있다면, 예를 들어 예제 코드나 이미지 설명 등을 추가해드릴 수 있어요. 수정이나 확장도 원하시면 말씀해 주세요!

🔹 컴퓨터 구조 & OS 운영체제는 하드웨어와 소프트웨어 사이에서 자원을 관리해주는 프로그램이다. 중앙에는 커널이 있어 메모리, CPU, 파일 시스템 등을 제어한다.

프로그램은 디스크에 저장된 상태이고, 프로세스는 실행 중인 프로그램을 의미한다.

메모리는 크게 4영역으로 나뉜다: 코드, 데이터, 힙, 스택.

스택: 함수 호출/반환 시 사용

힙: 동적 할당 영역

🔹 쉘 & Git Bash & EC2 쉘은 사용자가 명령어를 입력할 수 있는 환경.

Git Bash는 윈도우에서 리눅스 명령어를 사용할 수 있게 해준다.

EC2는 AWS에서 제공하는 가상 서버. SSH를 통해 접속한다.

🔹 리눅스 명령어 맛보기 ls: 디렉토리 목록 보기

cd: 디렉토리 이동

mkdir: 폴더 생성

|, grep: 파이프와 검색

vim: 파일 편집기

🌐 Day 2. 네트워크 & 데이터베이스 🔹 OSI 7계층 네트워크 구조를 이해하기 위한 모델로, 각 계층은 특정 기능을 담당한다.

물리 계층: 전기적 신호 (ex: 허브)

데이터링크 계층: MAC 주소, 프레임, 스위치, 랜카드

네트워크 계층: IP 주소, 라우팅, ping, public/private IP

전송 계층: TCP(신뢰성), UDP(속도), 포트 번호 5~7. 응용 계층: HTTP, FTP, SSH 등 응용 서비스

🔹 데이터베이스 개요 RDB (관계형 데이터베이스) vs NoSQL

PostgreSQL을 사용해 데이터베이스 실습 진행

설치, DB 및 테이블 생성

외부 접속을 위한 pg_hba.conf와 postgresql.conf 설정 변경

📚 Day 3. 자료구조 & 알고리즘 🔹 자료구조 포인터: 메모리 주소를 가리키는 변수

인코딩: 데이터를 특정 방식으로 변환 (ex: UTF-8)

주요 자료구조

스택 (LIFO): push/pop, ex: 함수 호출

큐 (FIFO): enqueue/dequeue, ex: 작업 큐

트리: 계층 구조, ex: 폴더 구조

그래프: 정점+간선, ex: 지도

해시: 키-값 쌍 저장, 검색 빠름

🔹 알고리즘 탐색

선형 탐색: 순차적으로 찾음

이진 탐색: 정렬된 데이터에서 절반씩 줄여감

BFS (큐), DFS (스택)

정렬

버블 정렬: 인접한 두 값을 비교

병합 정렬: 분할 후 정렬하며 합침

퀵 정렬: 피벗 중심 분할 정렬

동적 계획법 (DP)

중복 계산을 피하기 위해 메모이제이션 활용

피보나치, 배낭 문제 등 최적화 문제에 강함

1. 평균의 종류 산술평균: 가장 일반적인 평균. (총합 ÷ 개수)

기하평균: 곱의 평균. 비율 변화나 성장이 중요한 데이터에 적합.

조화평균: 속도, 비율 등에서 사용. (전체 평균 속도 계산 등)

2. 평균의 함정 극단값(outlier)에 의해 평균이 왜곡될 수 있음. 예: 한 명의 고소득자가 평균소득을 끌어올리는 경우.

3. 중앙값(Median) 데이터를 순서대로 정렬했을 때 가운데 값. 평균보다 극단값의 영향을 덜 받음.

4. 최빈값(Mode) 가장 자주 등장하는 값. 카테고리형 데이터 분석 시 유용.

5. Project: 파이썬으로 기초 통계량 계산 mean(), median(), mode() 등의 파이썬 라이브러리 활용 실습.

✅ CH02: 데이터의 분포와 변동성

1. 분산과 표준편차 분산: 평균으로부터 데이터가 얼마나 퍼져있는지 측정.

표준편차: 분산의 제곱근. 단위를 유지하면서 데이터의 흩어짐 측정.

2. 사분위 범위(IQR)와 이상치 탐지 IQR: Q3 - Q1 (상위 25%와 하위 25% 사이의 범위)

IQR을 기준으로 이상치(outlier) 탐지 가능.

3. 변동계수(CV) 표준편차를 평균으로 나눈 값. 단위와 무관하게 상대적 변동성 비교.

4. 왜도(Skewness)와 첨도(Kurtosis) 왜도: 데이터 분포의 비대칭 정도

첨도: 데이터가 중앙에 얼마나 몰려 있는지

5. Project: 상자 수염 그림(Boxplot) 그리기 matplotlib, seaborn을 이용해 데이터의 분포 시각화 실습.

처음에는 기대반 걱정반으로 지원했던 부트캠프가 벌써 시작되었고, 어느덧 2일차 (OT 및 마인드셋 특강 등)이 끝났다.

너무도 친절하고 착하신 매니저님들과 오늘 특강을 해주신 김남혁 강사님까지 앞으로 열심히 배우고 따라가는 과정에서 더 큰 동기를 얻게된거같아서 감회가 새롭습니다.

앞으로 많은 도전과 시행착오가 따르겠지만 시작한 만큼 최선을 다해서 마무리하고 AI에 대한 지식을 잘 습득해서

매일 바뀌는 시대의 트랜드를 따라감을 물론, 자기 계발 측면에서도 발전될 수 있도록 노력해야겠다는 생각을 했습니다~

제가 속한 7조 여러분과 함께 프로젝트 및 경연대회를 잘 마무리 할 수 있도록 열심히 해볼게요!!

14기 화이팅!!

ESlint 설정에 대해 살펴보자.

나름 next.js boilerplate 세팅 후 vscode상에서 문제 없던 prettier, eslint가 intelliJ 상에서 문제가 생겼고, 에러 처리하는 과정에서 eslint 설정의 디테일함에 궁금증이 생겨 글을 작성한다.

eslint에는 구성 할 수 있는 몇가지 옵션이있다.

• Environments : 스크립트 실행환경에 대한 설정, 각 환경에 미리 정의 된 전역 변수 설정 등
• Globals : 사용자가 추가하는 전역 변수
• Rules : 활성화 규칙 및 오류 수준
• Plugins : eslint가 사용할 추가 규칙, 환경 구성 등을 정의하는 곳(third-party)

module.exports = {
  key : value
}

object형식의 .eslintrc.js 파일에서 각 key가 무엇을 의미하는건지 살펴보자.

우선 ESlint는 기본적으로 모든 상위 폴더에서 root 디렉토리까지 구성파일을 찾고, .eslintrc 파일과 package.json 파일이 같은 디렉토리에 있는경우 .eslintrc가 우선 순위를 갖게 되며, package.json은 사용되지 않습니다. (이 부분에서 .eslintrc key에 해당하는 extends, plugins 부분 value로 작성한 모듈이 설치되어 있지 않을 경우 에러가 발생할 수도 있습니다.)

하나하나 차근차근 살펴보자.

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    ecmaVersion: 6,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },

root

앞선 설명처럼 .eslintrc가 우선 순위를 갖게 된다고 설명했듯이 ESlint를 특정 프로젝트로 제한하는 경우 선언할 수 있다. root의 default값은 true이다

parser

eslint는 기본적으로 Espree를 파서로 사용하지만, 파서가 다음 2가지 요구 사항을 충족하는 상황에서는 다른 파서를 선택적으로 사용할 수 있다.

1. 파서가 사용되는 구성 파일에서 로드 할 수 있는 node module이여야 한다 (일반적으로 npm에서 parser package를 별도로 설치해야함)
2. 파서 인터페이스를 준수해야한다.

기본적으로 Babel과 함께 사용되는 파서로는 "babel-eslint"가 있고 Typescript 구문 분석을 위해 사용되는 "@typescript-selint/parser"가 있다.

parserOptions

parserOptions은 eslint 사용을 위해 지원하려는 javascript 언어 옵션을 지정할 수 있다.

parserOptions: {
    ecmaVersion: 6,
      // 말 그대로 사용할 ECMAscript 버전 설정
    sourceType: 'module',
      // parser의 export 형태 설정
    ecmaFeatures: {
      jsx: true,
        // ECMAscript 규격의 JSX 사용여부
    },
      // ECMAscript의 언어 확장 기능을 설정

ecmaFeatures value안에 jsx외에도 globalReturn(전역 스코프의 사용여부 node, commonjs 환경에서 최상위 스코프는 module), impliedStric(stric mode 사용여부) 등이 있다.

env

  env: {
    browser: true,
    node: true,
    es6: true,
  },

env는 사전 정의된 전역 변수 사용을 정의합니다. 주로 사용되는 설정으로는 browser, node가 있습니다. env내에서 사용할 수 있는 전역변수는 여기에서 확인하실 수 있습니다.

  env: {
    ...
  },
  globals: {
    "$": true
  }

설정하지 않은 예외 전역 변수를 사용하는 경우에는 globals를 활용하여 추가할 수 있습니다.

module.exports = {
  ...,
  plugins: ['react', 'prettier', 'react-hooks'],
  extends: ['airbnb-base', 'eslint:recommended',
            'plugin:react/recommended', 
            'plugin:prettier/recommended',
            'plugin:react-hooks/recommended'],
  ignorePatterns: ['temp.js', 'node_modules/'],
  rules: {
    'prettier/prettier': 'error',
  }
}

plugins

eslint는 서드파티 플러그인을 지원함으로서, 플러그인 패키지를 설치한 뒤, 해당 플러그인을 위의 코드처럼 추가하여 사용할 수 있습니다. ex) npm -> eslint-plugin-react

extends

extends는 우리가 추가한 플러그인에서 사용할 규칙을 정합니다 플러그인은 일련의 규칙의 집합일뿐, 추가하여도 규칙은 적용되지 않습니다. 규칙을 적용하기 위해서는 추가한 플러그인 중에서 사용할 규칙들을 'plugin:react/recommended', 'plugin:prettier/recommended', 'plugin:react-hooks/recommended' 이런식으로 추가해주어야 적용이 된다.

추가적으로 작성예정

ignorePatterns

rules

function makeSound(user){
  const tasks = {
    승완: () => {
      console.log('안녕');
    },
    호익() {
      console.log('hello')
    },
    기열: function() {
      console.log('hi');
    }
  }
  const task = tasks[user];
  if(!task){
    console.log('...?!');
    return;
  }
  task()
}
makeSound('승완') // '안녕'
makeSound('호익') // 'hello'
makeSound('기열') // 'hi'
makeSound() // '...?!'

arrow function 과 일반적인 function형을 나타내 봤습니다.

## spread와 rest

### spread
> 
```javascript
const bear = {
  name: '곰탱이'
};
const fatBear = {
  name: '곰탱이',
  weight: '100kg'
};
const brownFatBear = {
  name: '곰탱이',
  weight: '100kg',
  color: 'brown'
};
console.log(bear);
console.log(fatBear);
console.log(brownFatBear);

이러한 객체가 있을 경우, spread 연산자를 사용해서 나타내 보면

const bear = {
  name: '곰탱이'
};
const fatBear = {
  ...bear,
  weight: '100kg'
};
const brownFatBear = {
  ...fatBear
  color: 'brown'
};
console.log(bear);
console.log(fatBear);
console.log(brownFatBear);

값이 같은걸 확인해 볼 수 있다. 객체가 아닌 배열에서도 사용할 수 있다.

const frontEndTeam = ['기열', '승완', '호익'];
const ProjectTeam = [...frontEndTeam, '지원'];
console.log(frontEndTeam);
console.log(ProjectTeam);

rest

rest는 생김새는 spread 랑 비슷한데, 역할은 다릅니다. rest는 spread 연산자와 마찬가지로 객체, 배열에서 사용할 수 있습니다. 그리고 rest는 함수의 파라미터에서도 사용이 가능합니다. 예를 들어보겠습니다.

1. 객체에서의 rest

   const brownFatBear = {
   name: '곰탱이',
   weight: '100kg',
   color: 'brown'
   };
   const { color, ...rest } = brownFatBear;
   console.log(color); // 'brown'
   console.log(rest); // {name: '곰탱이', weight: '100kg'}

2. 배열에서의 rest

   const numbers = [0, 1, 2, 3, 4, 5, 6];
   const [one, ...rest] = numbers;
   console.log(one); // '0'
   console.log(rest); // [1, 2, 3, 4, 5, 6]

3. 함수의 파라미터에서의 rest

   function sum(...rest) {
   return rest.reduce((acc, current) => acc + current, 0);
   }
   const result = sum(1, 2, 3, 4, 5, 6);
   console.log(result); // 21

Falsy : undefined, null, 0, "", NaN(Not a Number) Truthy : Falsy에 해당하는 값 이외의 값들.

단축평가 논리 계산법(&& , ||)

데이터를 불러와 map돌릴때 자주 사용하였던 &&에 대해 알아보고 ||에 대해 알아보도록 하겠습니다. 우선 자주 사용했던 양식을 살펴보면,

{data && data.map((element, index) => {
return (<li key={index}>
                  {element.text}
        </li>)})

에서 data에 대한 값이 true일때 map을 활용할 수 있었다. 그럴때 사용했던게 바로 && 만약 data에 대한 값이 true가 아닐경우 undefined error가 뜨는걸 확인 할 수 있었을 것이다.

기본적인 구조를 확인해보면

true && true // true
true && false // false
true || false // true
false || true // true

이렇고, 아래서 더 확인해보도록 하겠다.

&&

console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false
console.log('hello' && 'bye'); // bye
console.log(null && 'hello'); // null
console.log(undefined && 'hello'); // undefined
console.log('' && 'hello'); // ''
console.log(0 && 'hello'); // 0
console.log(1 && 'hello'); // hello
console.log(1 && 1); // 1

위에서 살펴 봤듯이 && 첫번째에 해당하는 값이 false일경우 false값이 출력되는걸 확인해 볼 수 있다.

||

function getSound(animal){
  const sounds = {
    개: '멍멍',
    고양이: '야옹',
    참새: '짹짹',
    비둘기: '구구구구'
  };
  return sounds[animal] || '…?';
}
console.log(getSound(''))

일경우 getSound('') 값은 인자가 false이기 때문에 ...? 값이 뜬다. 위의 &&와 다르게 ||에서 true일 경우 첫번째에 해당하는 값이 뜨는걸 볼 수 있다.

Wecode 1차 프로젝트로 공간 예약 서비스를 운영하는 Space Cloud 사이트를 클론코딩 하였습니다.

전체 동영상 링크

팀명 : 구름위로 둥둥 팀원 : Front-end ( 김승완 , 문규찬, 임진영)          Back-end ( PM:김준형, 윤정민)

사용된 기술 스택

Front-end React, Sass, HTML/CSS, JavaScript, Create-React-App, React-router-dom, RESTful API

구현한 페이지

• main page - 규찬님
• signUp page - 진영님
• signIn page - 진영님
• Detail Page - 승완

기억에 남은 코드

사실 대단한 코드가 있지않아 부끄럽지만 상세 페이지의 부분에 따라 컴포넌트를 분리하여 각각에 필요한 데이터를 받아왔다. 지금와서 보니 공통이 아닌 data에 있어서는 props로 내려주지 않고 각각의 컴포넌트에서 관리를 했어야 싶다.

느낀점

우선 코로나로 인해 온라인(zoom)으로만 동기들과 소통 할 수 밖에 없던 상황에서 팀 프로젝트 진행을 통해 오프라인으로 만나니 가까워질 수 있어서 너무 행복했다! 열악한 환경에서도 모두 열심히 해줬기 때문에 결과물이 나올 수 있었던거 같고 배우기만 하고 직접적으로 react를 사용해보니 재미도 있었고 머리도 많이 아팠다. git, slack, trello를 활용하여 각자의 목표 설정과 front-end & back-end의 소통을 원활하게 할 수 있었던 것 같다. 개인적으로 바라봤을때, 나 스스로 성장을 했다기 보다 팀 프로젝트를 진행하다 보니 스스로가 성장된 거같은 느낌이 든다. javascript에 대한 기본적인 문법에 대해 미흡함을 너무나도 느꼇고 이번 프로젝트를 통해 함수의 재활용과 .map 지옥에 대한 이해가 조금이나마 된 것 같아 기쁘다.

어디서 봤던 글을 하나 남기고 마무리 하겠습니다.

의지박약을 인정하고 환경을 변화시켜라. (스스로 의지박약인 나에게 공동체라는 환경속에서 더욱 더 열정적이고 끈기있게 활동할 수 있는 힘을 주신 팀원분들께 감사의 마음을 전합니다.)

2차 프로젝트 종료후 기업협업 전, 부족하고 궁금했던 부분에 대해 공부해보자!

typescript란

이름 그대로 타입을 가지고 있으며, 어떠한 함수에서 변수를 선언하거나 값을 반환하는 경우 해당하는 값의 타입을 명시합니다. 밑의 예시를 보겠습니다.

1. javascript:

2. typescript

만약 타입이 복잡한 경우 interface를 사용할 수 있습니다! 밑에서 간단한 예시를 만들어 보겠습니다.

interface User {
  name : string,
  age : number,
  addr : string
}

function getUser() : User {
  return {
    name: "완승",
    age: 30,
    addr: "서울시 노원구"
  };
}

let Person: person = getUser();

typescript를 왜 사용할까?

타입을 작성해야 되는 부분에서 코드량이 늘어나는건 분명하고, 타입에 대한 관리 이슈도 분명 있을거 같다는 생각이든다. 아직 애기개발자라 추측만 할 수 있지만, 더 큰 규모의 프로젝트에서 유지보수와 가독성 측면에서 더 유리할 것이라는 생각도 든다. 더 공부해보면서 자세하게 파악해보도록 해보자~

Wecode 2차 프로젝트 시작전, 지금까지 사용하고 활용했던 부분들에 대해 정리하는 시간을 갖도록 해보겠습니다!

항상 탐구하고 기억할 수 있도록 노력하자👊

이번 1차 프로젝트를 통해 회원가입,로그인 그리고 Detail Page에 필요한 데이터까지 필요로 하는 데이터를 불러오는 방법들에 대해 배워볼 수 있던 좋은 시간이였습니다. 프론트 엔드 개발자로서 아직은 생소한 데이터 호출에 대해 알아 보겠습니다.

fetch() 함수의 사용법

백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받습니다. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있습니다. 아직 필자는 axios 라이브러리는 사용해보지 못했습니다.
이번 기회를 통해 http 통신의 요청와 응답에 대한 이해에 대해 좀 더 다가갈 수 있었고, 앞으로 Promise에 대해서도 관심을 갖고 공부를 해보도록 하겠습니다.

Get

• fetch() 함수에서 default method는 get입니다. 이번 프로젝트에서 Detail Page부분의 데이터를 받아올 수 있었습니다.

  Post

• 이제는 method가 post인 경우를 보겠습니다. fetch() 기본은 get이기 때문에 아무것도 작성하지 않아도 get으로 호출했는데, post인 경우에는 fetch() 함수에 method 정보를 인자로 넘겨주어야 합니다.
• 호출해야할 api가 get인지 post인지 모를떄는 api를 개발한 백엔드 개발자에게 물어봐야 합니다!

우리가 post method를 사용할 경우 모든 코드에 then이 두 번 있고, 첫 번째 then에서 res => res.json() 이 도대체 뭘까 궁금하지 않으셨나요?
자세히 알아보자면 promise 개념을 알아야 하는데, 이 포스팅에서는 promise 얘기는 하지 않으려고 합니다. 어떤 뜻인지 내용만 집고 넘어가겠습니다.
첫 번째 then의 res가 어떤 값이 들어오길래 res.json()을 리턴하는가?? 궁금하면 어떻게 하라고요? 네! console.log를 찍어봐야죠.
위의 화살표 함수에서 console.log를 찍어보려면 어떻게 해야 하나요?? 네 바로 return 하는 화살표 함수에 바디를 다시 만들어줘야 합니다. 그래서 코드 가장 처음에 ES5의 함수 선언식으로 바꿔보라고 한 것입니다. 함수 선언식으로 바꾸지는 않지만 바디가 추가된 화살표 함수로 수정해보겠습니다.
첫 번째 then 함수에 전달된 인자 res는 http 통신 요청과 응답에서 응답의 정보를 담고 있는 객체입니다. Response Object 라고 합니다.
그런데 console을 확인해보시면 백앤드에서 넘겨주는 응답 body, 즉 실제 데이터는 보이지 않을 것입니다. 즉 { success: true } 라는 JSON 데이터는 위의 코드로는 console에 찍히지 않을 것이라는 말입니다.
응답으로 받는 JSON 데이터를 사용하기 위해서는 Response Object 의 json 함수를 호출하고, return 해야합니다. 그러면 두 번째 then 함수에서 응답 body의 데이터를 받을 수 있습니다.

이상입니다~😎

Wecode 2차 프로젝트 시작전, 지금까지 사용하고 활용했던 부분들에 대해 정리하는 시간을 갖도록 해보겠습니다!

항상 탐구하고 기억할 수 있도록 노력하자👊

이번 1차 프로젝트인 스페이스 클라우드 같은 경우에는 그러지 않았지만, UI를 구현하다 보면 API가 나오기 전에 페이지가 먼저 나오는 경우가 많습니다. 프론트엔드 개발자라면, API가 나오지 않더라도 mock data, 즉 가짜 데이터를 만들어서 미리 내가 만든 화면에서 데이터가 어떻게 나타나는지 테스트하며 개발을 진행할 수 있습니다. mock data를 잘 만들어 둔다면 백엔드와 실제 연결할 때도 수월하게 작업할 수 있을 뿐더러, 받기 원하는 자료의 형태가 구체적으로 특정되기 때문에 소통에도 도움이 됩니다. 이러한 소통은 시간을 단축해주고 데이터를 불러오는 방식에서의 오류 및 수정에 대한 리스크를 줄여줍니다.

Mock Data란?

정의

• 이름에서 알 수 있듯이 mock data 는 가짜 데이터, 샘플 데이터 정도로 해석할 수 있습니다.
• 즉, 실제 API 에서 받아온 데이터가 아닌 프론트앤드 개발자가 필요에 의해 샘플로 만들어본 데이터를 말합니다.

1-2. mock data가 필요한 이유

• API 가 아직 준비중인 경우 프로젝트 진행 시 API가 나오기 이전에 페이지 레이아웃이 먼저 나오는 경우가 많습니다. 이러한 경우에는 백엔드에서 API가 나올 때까지 무작정 기다리는 게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고 UI가 기획에 맞게 구현되는지 먼저 확인해야 합니다. 특히나 프로젝트를 진행하는 경우 Backend API 유무에 상관없이 화면에 데이터를 예쁘게 보여주는 것이 프론트엔드 개발자로서 가져야 할 책임감 입니다.

• Backend 와의 소통이 효율적으로 이루어질 수 있습니다 (예를들어, 주고 받는 데이터가 어떤 형태인지, key-value 값을 미리 맞춰볼 수 있습니다.)

Mock Data를 관리하는 방법

첫번째 방법 : .js파일로 데이터를 분리

• 첫번째 방법은 .js 파일로 데이터를 분리하는 방법입니다.

• js 파일은 어떤 데이터인지 알 수 있게 명명합니다.
• 배열 데이터를 변수에 담고 필요한 컴포넌트에서 import 해서 사용합니다.
• .js 파일은 데이터를 import 하는 컴포넌트 바로 옆으로 접근하기 쉬운 곳에 생성합니다.

두번째 방법 : JSON파일로 데이터를 분리

• 두 번째는 실제 API 에서 보내주는 데이터 형식에 맞게 json 파일에 데이터를 담아 fetch 함수를 사용해 데이터를 받아오는 방법입니다.
• 해당하는 데이터는 리액트 내에서 http://localhost:3000/(데이터주소)/ 를 통해서 확인할 수 있습니다.
• 해당 주소를 API 주소로 생각하고 fetch 함수와 http GET method 를 사용해 실제 API 에서 데이터를 받아오는 것처럼 코드를 작성합니다.

이번 프로젝트의 경우 두번째 방법을 활용하여 실제로 데이터를 받아왔을 때 좀 더 확실하게 문제없이 데이터가 들어오는걸 확인해 볼 수 있었습니다.

이상입니다~😎

웹개발자라면 프론트 백앤드 상관없이 반드시 이해하고 있어야하는 기본 소양으로서, 인증의 필수요소인 패스워드 암호화, 그리고 인가의 필수요소인 JWT에 대해 알아보도록 하겠습니다!

인증

인증은 유저의 identification을 확인하는 절차입니다 (유저의 아이디와 비번을 확인하는 절차).

로그인 절차

1. 유저 아이디와 비번 생성
2. 유저 비번 암호화 해서 DB에 저장.
3. 유저 로그인 -> 아이디와 비밀번호 입력
4. 유저가 입력한 비밀번호 암호화 한후 암호화되서 DB에 저정된 유저 비밀번호와 비교.
5. 일치하면 로그인 성공
6. 로그인 성공하면 access token을 클라이언트에게 전송.
7. 유저는 로그인 성공후 다음부터는 access token을 첨부해서 request를 서버에 전송함으로서 매번 로그인 해도 되지 않도록 한다.

유저 비밀번호 암호화

• 유저의 비밀번호는 절대 비밀번호 그대로 DB에 저장 하지 않는다.
  • DB가 해킹을 당하면 유저의 비밀번호도 그대로 노출 된다.
  • 외부 해킹이 아니더라도 내부 개발자나 인력이 유저들의 비밀번호를 볼 수 있다.

• 유저의 비밀번호는 꼭 암호화 해서 저장 해야 한다.

  • 그럼으로 DB가 해킹을 당해도 비밀번호가 그대로 노출되지 않으며
  • 내부 인력도 비밀번호를 알 수가 없음.

• 비밀번호 암호에는 단방향 해쉬 함수(one-way hash function)가 일반적으로 쓰인다.

  • 단방향 해시 함수는 원본 메시지를 변환하여 암호화된 메시지인 다이제스트(digest)를 생성한다. 원본 메시지를 알면 암호화된 메시지를 구하기는 쉽지만 암호화된 메시지로는 원본 메시지를 구할 수 없어서 단방향성(one-way) 이라고 한다.

  • 예를 들어, "test password"를 hash256이라는 해쉬 함수를 사용하면 0b47c69b1033498d5f33f5f7d97bb6a3126134751629f4d0185c115db44c094e 값이 나온다.

  • 만일 "test password2"를 hash256 해쉬 함수를 사용하면 d34b32af5c7bc7f54153e2fdddf251550e7011e846b465e64207e8ccda4c1aeb 값이 나온다. 실제 비밀번호는 비슷하지만 해쉬 함수 값은 완전히 틀린것을 볼 수 있다. 이러한 효과를 avalance라고 하는데 비밀번호 해쉬 값을 해킹을 어렵게 만드는 하나의 요소이다.

      In [21]: import hashlib
    
      In [22]: m = hashlib.sha256()
    
      In [23]: m.update(b"test password")
    
      In [24]: m.hexdigest()
      Out[24]: '0b47c69b1033498d5f33f5f7d97bb6a3126134751629f4d0185c115db44c094e'
    
      In [25]: m = hashlib.sha256()
    
      In [26]: m.update(b"test password2")
    
      In [27]: m.hexdigest()
      Out[27]: 'd34b32af5c7bc7f54153e2fdddf251550e7011e846b465e64207e8ccda4c1aeb'

JWT(Json Web Tokens)

앞서 언급했듯이 유저가 로그인에 성공한 후에는 access token이라고 하는 암호화된 유저 정보를 첨부해서 request를 보내게 된다.

• 앞서 언급했듯이 유저가 로그인에 성공한 후에는 access token이라고 하는 암호화된 유저 정보를 첨부해서 request를 보내게 된다.

• 복호화해서 얻은 유저 아이디를 통해 해당 유저가 누군지 알 수 있다.

• 이런 절차의 목적은 해당 유저가 매번 로그인 해도 되지 않도록 하는 것이다.

• access token을 생성하는 방법은 여러가지가 있는데, 그 중 가장 널리 사용되는 기술중 하가 바로 JWT(JSON Web Tokens)이다.

• JWT는 말 그대로 유저 정보를 담음 JSON 데이터를 암호화 해서 클라이언트와 서버간에 주고 받는 것이다.

  • 유저 로그인:

    POST /auth HTTP/1.1
    Host: localhost:5000
    Content-Type: application/json
    
    {
      "username": "joe",
      "password": "pass"
    }

  • access token:

    HTTP/1.1 200 OK
    Content-Type: application/json
    
    {
      "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGl0eSI6MSwiaWF0IjoxNDQ0OTE3NjQwLCJuYmYiOjE0NDQ5MTc2NDAsImV4cCI6MTQ0NDkxNzk0MH0.KPmI6WSjRjlpzecPvs3q_T3cJQvAgJvaQAPtk1abC_E"
    }

• 그러면 서버에서는 access token을 복호화 해서 해당 유저 정보를 얻게 된다.

  • 예를들어 access token eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZGVudGl0eSI6MSwiaWF0IjoxNDQ0OTE3NjQwLCJuYmYiOjE0NDQ5MTc2NDAsImV4cCI6MTQ0NDkxNzk0MH0.KPmI6WSjRjlpzecPvs3q_T3cJQvAgJvaQAPtk1abC_E 를 복호화 하면 다음과 같은 정보를 얻는다:

    {
      user_id = 1 
    }

인가

인가는 유저가 요청하는 request를 실행할 수 있는 권한이 있는 유저인가를 확인하는 절차 이다.

인가의 절차

1. Authentication 절차를 통해 access token을 생성한다. access token에는 유저 정보를 확인할 수 있는 정보가 들어가 있어야 한다 (예를 들어 user id).
2. 유저가 request를 보낼때 access token을 첨부해서 보낸다.
3. 서버에서는 유저가 보낸 access token을 복호화 한다.
4. 복호화된 데이터를 통해 user id를 얻는다.
5. user id를 사용해서 database에서 해당 유저의 권한(permission)을 확인하다.
6. 유저가 충분한 권한을 가지고 있으면 해당 요청을 처리한다.
7. 유저가 권한을 가지고 있지 않으면 Unauthorized Response(401) 혹은 다른 에러 코드를 보낸다.

웹 개발자로서 User Experience에 대해서 고민하고 사용자와 소통하는 웹페이지란 무엇인지에 대해 생각해보고 개선된 방향성에 대해 탐구하는 시간을 가져보겠습니다.

Wecode 1차 프로젝트 시작전, 지금까지 배워왔던 부분을 복습하는 느낌으로 정리해버리자 !!

다시 안 볼생각으로 정리해버리자😎

위의 이미지를 기억해주세요!!

Hosting (호스팅, Web hosting service)

인터넷에 띄운다는 것은 홈페이지의 구성파일(html, css, js)들이 인터넷에 “항상" 연결되고, “절대" 꺼지지 않는 호스트 컴퓨터(웹 서버)에 저장되어 있다가 사용자의 요청이 오면 언제든 응답하는 것이다! 서비스예) AWS ec2/S3, cafe24 호스팅센터 등

IP

IP 주소는 Internet으로 통신하는 각 device(컴퓨터, 통신장비)에 부여된 고유한 값. 스마트폰이나 노트북부터 대규모 소매 웹 사이트의 콘텐츠를 서비스하는 서버에 이르기까지 인터넷상의 모든 컴퓨터는 숫자를 사용하여 서로를 찾고 통신하며, 이러한 숫자를 IP 주소라고 한다.

Domain (Domain name)

문자(string)으로 된 고유 주소. 수많은 IP 주소를 사람이 외워서 접속할 수 없기 때문에 기억하기 쉽다. ex) www.wecode.com, www.google.com

DNS (Domain Name System)

DNS 또는 Domain Name System은 사람이 읽을 수 있는 도메인 이름(예: www.wecode .com)을 머신이 읽을 수 있는 IP 주소(예: 192.0.2.44)로 변환. DNS는 이름과 숫자 간의 매핑을 관리하여 마치 전화번호부와 같은 기능을 한다. DNS 서버는 이름에 대한 요청을 IP 주소로 변환하여 최종 사용자가 도메인 이름을 웹 브라우저에 입력할 때 해당 사용자를 어떤 서버에 연결할 것인지를 제어. 이 요청을 쿼리라고 부른다. 서비스 예) Amazon Route 53, Cafe24 도메인관리, 가비아 네임서버 관리
*DNS 서버란 도메인과 서버를 연결해주는 중간 서버로, 도메인 이름을 인터넷상의 주소(IP 주소)로 변환시켜 원하는 컴퓨터를 찾아갈 수 있도록 함.

배포(번외)

배포(deploy)한다. or 디플로이한다. 라는 말을 앞으로 자주 하고, 듣게 될 것. 배포란, 그동안 개발하던 것을 세상(인터넷상)에 드디어 공개하고 모든 사람들이 접근해서 볼 수 있게 하는 것을 의미.

Wecode 1차 프로젝트 시작전, 지금까지 배워왔던 부분을 복습하는 느낌으로 정리해버리자 !!

⭐️ 의미를 파악해 버리자!⭐️

이 세상 누구나 한번쯤은 봤을만한 단어 HTTP! 이번시간에는 HTTP에 대해 알아 보도록 하겠습니다!

HTTP란❓

HyperText Transfer Protocol의 약자로서, 약자 하나하나 짚어보는 시간을 가지도록 하겠다!

1. HyperText

우리는 사실 HyperText가 무엇인지 알고있다! HTTP에서 HyperText는 HTML(HyperText Markup Language)의 HyperText와 그 의미가 동일하며, 문서와 문서가 링크로 연결되도록 하는 태그로 구성된 언어란 뜻이다. 다시 말하면, HTML은 웹페이지를 만들기 위해서 웹브라우저 위에서 동작하는 언어를 뜻한다.

2. Transfer

우리는 우리가 만든 웹사이트를 널리 알리고 다른 사람들과 공유하기 위해서 다른 컴퓨터에게 전송해야 한다. 그리고 그러한 전송은 보내는 곳과 받는 곳이 있다는 것이 큰 특징이다. ex : Request, Response (요청과 응답)

3. Protocol

프로토콜은 협약, 통신 규약 이라는 의미를 가지며, 물리적으로 떨어진 컴퓨터 끼리 어떻게 HTML파일(HyperText)을 주고 받을지에 대한 약속으로 볼 수 있다.

우리는 한국인으로 태어난 이상 한국어를 사용해야 하는 사회에 살고 있다. 한국 사회의 소통방식(약속)인 한국어로 소통을 하듯 컴퓨터도 컴퓨터 끼리의 소통 방법이 필요하다. 이런 필요에 의해서 만들어진 소통하는 방식 또는 약속이 HTTP다. 우리가 사용하는 인터넷 상에서 일어나는 소통은 대부분 HTTP 규약을 따른다.

HTTP의 두가지 특징❗️

1. Request, Response (요청과 응답)

소통의 핵심은 요청과 응답

HTTP 통신의 핵심은 요청과 응답이다. 앞서 HTTP의 세번째 키워드인 Transfer 에 대해서 설명 할 때, 전송은 보내는 주체와 받는 주체가 있다고 했다. 보내는 주체는 받는 주체에게 요청을 보내고, 받는 주체는 요청을 보낸 주체에게 응답을 보낸다. 다시 편지로 예를 들어보면, 보내는 주체는 편지의 발신자고, 받는 주체는 수신자가 된다. 수신자는 잘 받았다는 응답을 다시 발신자에게 보낸다.

컴퓨터끼리의 소통도 마찬가지다. 결국 사람이 필요에 의해서 만든 소통 방식이기 때문에 우리의 소통 방식과 큰 차이점이 없다. 랩탑을 연다. 유튜브에 접속한다. 내가 평소 즐겨보던 유튜브 영상의 링크를 누른다. 그 순간 내 랩탑은 구글의 서버에게 요청을 보낸다. "골든 리트리버 영상 주세요." 구글의 서버는 이 요청을 처리해서 다시 요청을 보낸 나의 랩탑에 응답을 보낸다. "귀여운 골든 리트리버 영상 드립니다."

HTTP를 어렵게 생각할 필요 없다. 사실은 우리에게 친숙한 소통방식을 컴퓨터의 소통방식에도 적용한 것이다.

2. Stateless

HTTP에 대한 설명 중 절.대, N.E.V.E.R(강조) 잊어서는 안 될 HTTP의 특징이 바로 Stateless 다. 문자 그대로 번역하면 State(상태) + less(없음) 을 의미한다.

각각의 HTTP 통신(요청/응답)은 독립적 이기 때문에 과거의 통신(요청/응답)에 대한 내용을 전혀 알지 못 한다. 이전의 상태를 전혀 알지 못 한다는 것은 무엇을 의미할까?

매 통신마다 필요한 모든 정보를 담아서 요청을 보내야 한다. 비유를 하자면, 마치 이미 자기소개를 한 사람에게 계속해서 똑같은 내용으로 자기소개를 해야하는 것과 같다.

따라서, 만일 여러번의 통신(요청/응답)의 진행과정에서 연속된 데이터 처리가 필요한 경우(ex. 온라인 쇼핑몰에서 로그인 후 장바구니 기능)를 위해 로그인 토큰 또는 브라우저의 쿠키, 세션, 로컬스토리지 같은 기술이 필요에 의해 만들어졌다.

HTTP Request Methods❗️

HTTP 통신 메소드 세가지를 소개하겠습니다. 각각의 메소드(GET, POST, DELETE)가 가지는 의도에 대해 설명하겠습니다!

이러한 통신 메소드는 프론트엔드(클라이언트)의 입장에서 요청한 것임을 인지하셔야 합니다! 백엔드의 입장에서 생각하면 혼란이 옵니다!

1. GET

• 이름 그대로 어떤 데이터를 서버로 부터 받아(GET)올 때 주로 사용하는 메소드
• 데이터를 받아오기만 할 때 사용된다.
• 가장 간단하고 많이 사용되는 HTTP 메소드 (사실 우리가 웹페이지를 띄울 때 필요한 정보들을 모두 GET메소드로 요청을 보내서 받아온 응답을 화면에 띄우는 것이다)

2. POST

• 데이터를 생성 / 수정 할 때 주로 사용되는 메소드
• 데이터를 생성 및 수정 할 때 많이 사용되기 때문에 대부분의 경우 요청에 body가 포함되서 보내진다

3. DELETE

• 메소드의 이름에서 유추 가능하듯, 특정 데이터를 서버에서 삭제 요청을 보낼때 쓰는 메소드

HTTP Response Status Codes❗️

200: OK

• 가장 자주 보게되는 Status Code
• 문제없이 요청에 대한 처리가 백엔드 서버에서 이루어지고 나서 오는 응답코드
• 우리는 모두 200 OK 를 원한다

201: Created

• 무언가가 잘 생성되었을 때에(Successfully Created) 오는 Status Code
• 대게 POST 메소드의 요청에 따라 백엔드 서버에 데이터가 잘 생성 또는 수정 되었을 때에 보내는 코드

400: Bad Request

• 해당 요청이 잘못되었을 때 보내는 Status Code
• 주로 요청의 Body에 보내는 내용이 잘못되었을 때 사용되는 코드 ex) 전화번호를 보내야 하는데 숫자가 아닌 문자열의 주소가 대신 Body에 담겼을 경우

401: Unauthorized

• 유저가 해당 요청을 진행하려면 먼저 로그인을 하거나 회원가입이 필요하다는 의미 ex) wish list, 좋아요 기능은 회원이 아니면 요청을 보낼 수 없음

403: Forbidden

• 유저가 해당 요청에 대한 권한이 없다는 뜻
• 접근 불가능한 정보에 접근했을 경우 ex) 오직 유료회원만 접근할 수 있는 데이터를 요청 했을 때

404: Not Found

• 요청된 URI 가 존재하지 않는다는 의미

500: Internal Server Error

• 서버에서 에러가 났을 때의 Status Code
• API 개발을 하는 백엔드 개발자들이 싫어하는 코드

마지막 Review❗️

HTTP 는 컴퓨터 끼리의 소통을 위한 통신규약이다. HTTP 통신은 Request(요청)과 Response(응답)으로 이루어 진다. HTTP 통신의 매 요청과 응답은 이전 상태를 알지 못 한다. (Stateless)

Wecode 생활 4주차 시작전, 지금까지 배워왔던 부분을 복습하는 느낌으로 정리해버리자 !!

🌱 잔디밭을 자주 가꿔버리자!🌱

Git과 Github의 차이점과 어떻게 사용하면 되는지 간략하게 설명하는 시간을 가지도록 하겠습니다!

Git이란❓

Git의 공식 명칭은 분산 버전 관리 시스템 (VCS) 입니다.

쉽게 말해, 프로젝트 파일의 변경 사항을 추적하는 시스템입니다. 이를 통해 개발자들은 프로젝트의 변경 사항을 기록하고, 특정 시점의 버전으로 언제든 돌아갈 수 있습니다. 이런 버전 관리 시스템은 많은 사람들이 효율적으로 함께 작업하고, 프로젝트를 중심으로 협업할 때 사용할 수 있습니다. 각 개발자가 자신만의 프로젝트 버전을 본인 컴퓨터에 갖게됩니다. 나중에 이러한 개별 버전의 프로젝트를 병합하여 기준이 되는 버전의 프로젝트에 적용 할 수 있게 됩니다.

Git은 개인 혹은 팀 간의 프로젝트를 관리하는 데 가장 널리 사용되고 있는 툴입니다. 따라서 Git을 다룰 줄 아는 것은 요즘 모든 개발자들에게 가장 중요한 기술 중 하나입니다.

Github란❓

GitHub은 Git repository를 위한 호스팅 플랫폼입니다. GitHub (및 기타 유사한 플랫폼) 없이도 Git을 사용할 수 있지만 다른 개발자와 같은 프로젝트를 두고 협업하거나 내 코드를 공유하기는 어렵습니다.

GitHub은 Git을 사용하는 프로젝트를 위한 호스팅 서비스입니다.

기본 사용법!

위의 방식대로 사용되며 Local은 사용하는 유저의 위치, Remote는 권한을 가지고 있는 사람만 접근할 수 있으며 Local에서는 접근 할 수 없다.

Command-Line Interface (CLI)내에서 사용되는 명령어들에 대해서는 구글링 또는 유튜브를 참고해서 적용하다보면 위의 그림에 대해 이해하기가 훨씬 쉬울 것이다!

Wecode 생활 4주차 시작전, 지금까지 배워왔던 부분을 복습하는 느낌으로 정리해보자 !! 이건 2021년 첫 글!

👏 면접 준비로 써먹어버리자!👏

Database 정의

데이터 베이스는 일반적으로 컴퓨터 시스템에 저장된 정보 또는 데이터의 집합을 의미합니다!!

이러한 정보와 데이터의 집합인 데이터 베이스를 그럼 어떻게 관리할까요..? 바로 관리 시스템인 데이터베이스 시스템(DBMS)로 제어합니다!

우리가 흔히 말하는 데이터 베이스는 데이터 베이스와 DBMS를 일컬어 통칭하는 거죠!

데이터 베이스에 대한 더 자세한 설명은 여기 오라클 사이트를 참고하시고 우리 데이터 베이스에 대해 좀 더 알아볼까요?!

관계형 데이터베이스(RDBMS)

기존 데이터 베이스에 관계형(Relational)이라는 단어를 붙였는데요! 그 이유는 이름 그대로 관계형 데이터 모델을 기반으로 한 데이터 시스템을 말합니다 현재 대표적인 RDBMS로는 MySQL, Postgres, Oracle DB 등이 있습니다.

그럼 관계형 데이터베이스(RDBMS)에 대해 좀 더 알아 보겠습니다!

1. 관계형 데이터

우선 관계형 데이터에 대해 알아보겠습니다! 관계형 데이터란 상호 연관성을 가진 데이터로서 그것을 형태로 표현해 놓은 것입니다. 모든 데이터들은 2차원 테이블로 표현할 수 있습니다! 아래처럼 말이죠!

각각의 테이블은 컬럼(column)과 row(로우)로 구성되어 있으며, 컬럼은 테이블의 각 항목을 ,로우는 각 항목들의 실제 값들을 정의 합니다. 그리고 각 로우에는 고유 키(Primary Key)가 있습니다. 이 primary key를 통해서 해당 로우를 찾거나 인용(reference)하게 됩니다.

위에서 말씀드렸던 것처럼 각각의 테이블들은 서로 상호 관련성을 가지고 연결될 수 있는데 그 종류를 우리는 3가지로 나눌 수 있습니다!

첫번째 : one to one 두번째 : one to many 세번째 : many to many

1. one to one

위의 이미지 처럼 첫번째 테이블의 로우와 두번째 테이블 B의 로우가 정확히 일대일 매칭이 되는 관계를 one to one 관계라고 부릅니다.

예를 들어, 필자가 커머스 사이트에 로그인을 했을경우 필자의 아이디와 로그인후 필자의 프로필은 one to one 관계라고 볼 수 있습니다!

one to many

one to one과 많이 헷갈려 하는 부분입니다. 그러나 위의 이미지를 보시면 첫번째 테이블의 로우가 두번째 테이블의 여러 로우와 연결이 되는 관계를 one to many 관계라고 부릅니다.

예를 들어, 로그인을 마친 필자가 사이트에서 축구공을 주문하려고 합니다. 여러 축구공중에 어떠한 하나를 골라서 주문을 했다고 가정했을때, 여러제품이 many이고 골라서 주문한 제품의 주인은 오직 필자 뿐인거죠!

many to many

마지막으로 many to many입니다. 첫번째 테이블의 여러 로우가 두번째 테이블의 여러 로우와 연결이 되는 관계를 many to many 라고 합니다.

위의 이미지로 예를들면, 책은 여러 작가에 의해 쓰일 수 있고, 작가들은 여러책을 쓸 수 있다고 보시면 됩니다!

2. 관계형 데이터의 연결성

위에서 본 세가지 연결성을 그럼 어떻게 연결할까요?

연결은 Foreign key(외부키)라는 개념을 사용하여 주로 연결합니다

앞서 본 one to one에서 user_profiles 테이블의 user_id 컬럼은 users 테이블에 걸려있는 외부 키라고 지정합니다.

즉 데이터 베이스에게 user_id값은 users 테이블의 id 값이며 그러므로 users테이블에는 id 컬럼에 존재하는 값만이 생성될 수 있는거죠!

만약 테이블에 없는 값이 지정되면 에러가 발생합니다!!

3. 마무리

우리는 위의 관계형 데이터의 연결성들을 보며 궁금증을 가져봐야 합니다. 왜 정보를 여러 테이블에서 저장하는 것일까?

필자가 생각하는 정답은 데이터의 효과적인 배치와 활용이라고 생각합니다. CS적인 학문이 부족한 필자가 전해 들은 바로 이것을 normalization(정규화) 라고 지칭하더라구요!

그 외에도 ACID(Atomicity, Consistency, Isolation, Durability), Transaction, SQL 그리고 NoSQL까지 다양한 개념들이 있습니다!

다양한 개념들은 구글링을 통해 각자의 스타일로 이해해보는건 어떨까요?!

그럼 이만 가보겠습니다!

새해복 많이받으세요🎂!

Wecode 생활 3주차 시작전, 부족한 부분을 짚고 넘어가고자 한다. 아직도 부족한 JavaScript.. 힘내서 적어보자!!

👏 다시 볼 생각으로 적어버리자!👏

JavaScript 정의와 기능

• 웹페이지의 구조를 정의하는 것이 HTML이지만, HTML만 있다고 해서 웹페이지가 돌아가지는 않는다. 물론 돌아갈 수 있지만.. 이처럼 정적이다 못해 구리다.. 이러한 과거의 웹사이트가 아닌 현재 우리가 알고 있는 거의 모든 페이지에는 JavaScript코드가 들어가 있습니다.

• JavaScript는 웹 페이지와 상호작용 하도록 만들어진 언어로서, 브라우저를 사용하는 User의 행동을 처리하고, 데이터도 저장하고, 네트워크에 대한 respond과 request를 처리하는 역할을 합니다.

• 필자와 같이 프론트앤드 개발자라면 이러한 JavaScript를 사용하여 웹페이지를 dynamic하고 interactive하게 만드는 것이 주된 목적입니다!

들어가기 앞서, 두가지 유튜브를 시청하고 조금이나마 JavaScript에 대한 이해와 흥미가 생겼으면 좋겠다.

자바스크립트를 배우기전에 꼭 봐야할 영상 interactive Developer

JavaScript 시작!

JavaScript를 들어가기 앞서

1. 필자는 Js코드를 작성하고나서 스스로를 못 믿기 때문에 항상 하는게 있다. 바로 console.log이다. 위의 그림처럼 개발자도구 > console 창으로 작동이 가능하며, console.log()가 중요한 이유는 개발자가 확인하고 싶은 내용을 출력하는 함수로서, 코드가 복잡해지고 특정 함수를 만들었을 때 잘 작동하는지 확인할 때 도움이 많이된다.

   그 외에도 콘솔창에 alert("hello JavaScript"); 라고 쳐보자!

   재밌지 아니한가? **(사실 필자는 재밌다가 재미없어졌다😭)

**
2. 주석 : html에서 주석처리와는 달라졌다 위의 이미지 처럼 한 줄 주석은 // , 여러 줄 주석은

/* 코~~~드 */

이렇게 적으면 되겠다!

JavaScript 변수

수정중