호이스팅

호이스팅이란?

• 변수의 선언문이 해당 스코프의 최상단으로 끌어올려지는 것처럼 보이는 현상
• 호이스팅에서 var, let, const의 차이점
  • var는 호이스팅이 되지만 let, const는 TDZ로 인해 되지 않는 것처럼 보임
  • TDZ: Temporal Dead Zone(임시 접근 불가 구역)의 약자이며 let과 const는 TDZ에 배치되어 호이스팅이 발생하지 않는 것처럼 보임

객체

객체란?

• 여러 개의 데이터를 한 변수에 저장할 수 있는 자료형
• 여러개의 키와 값의 쌍으로 이루어짐
• 이 쌍을 프로퍼티라고 함

객체 생성방법

• 생성예시

  const user = {
    name: "성훈",
    age: 21,
    from: "Dongtan",
  };

• 객체에서 메서드 생성예시

  const user = {
    textHim : function () {
        console.log("I like cookie")
    },
  };
  

// 혹은 const user = { textHim() { console.log("I like cookie") }, };

### 객체 접근방법
- 객체['키']
- 객체.키

### 객체 속성 추가/제거 방법
- 추가방법
    - 객체['키'] = '값';
    - 객체['키'] = ['값2','값2'];
    - 객체.키 = '값';
- 삭제방법
    - delete 객체.키;

## 연산
### 산술 연산

- 더하기 연산을 제외한 나머지 산술연산은 숫자형이 아닌 경우 자동으로 타입을 변환하여 연산을 수행

#### 산술 할당 연산

- 산술연산과 동시에 변수에 값을 할당하는 연산자

#### 증감 연산자

```js
let x = 1;
console.log(x++); // 1, x = 2
console.log(++x); // 3

let y = 10;
console.log(y--); // 10, y = 9
console.log(--y); // 8

비교 연산

• 결과값은 항상 true 또는 false가 됩니다.

대소관계 연산자

let x = 10;
let y = 30;

console.log(x > y); // false
console.log(x < y); // true

console.log(x >= y); // false
console.log(x <= y); // true

동등 / 부등

• 값을 비교
• 타입이 다른경우: 타입 변환을 수행한 후 비교. 원시타입은 값이 같을 때, 객체 타입은 동일한 객체를 참조할 때만 true를 반환

자동 형 변환

• 연산과 비교를 위하여 JS 엔진이 데이터 형을 자동으로 변환하는 것
  • 원시값끼리 비교할 때는 숫자로 변환
  • null과 undefined는 각자와 서로끼리 비교할 경우에는 true를 반환
  • 객체와 원시타입 비교할때는 객체를 원시타입에 맞춰 변환
• NaN의 경우: false로 변환

일치 / 불일치

• 값과 타입이 일치하는지 비교
• 타입변환을 하지 않고 엄격한 비교를 수행

논리연산

논리곱 AND(&&) / 논리합 OR(||) 의 비교

• 논리곱 연산자: 두 개의 피연산자가 모두 true일 때만 true를 반환. 모든 값이 true라면 가장 마지막 값을, false 값이 있다면 가장 처음 만나는 false값을 반환하며 나머지 평가를 생략(단축 평가)
• 논리합 연산자: 두 개의 피연산자 중 적어도 한 개 이상이 true면 true를 반환. 즉 모두 false일 때만 false를 반환. 모든 피연산자가 false라면 마지막 값을, true값이 있으면 가장 처음 만나는 true값을 반환(단축 평가)

논리부정 NOT(!)

• true ⇒ false
• false ⇒ true

nullish 연산자(??)

• 왼쪽 피 연산자를 먼저 만나서 null도 아니고 undefined도 아니면 왼쪽, null이거나 undefined라면 오른쪽을 반환함. 즉, undefined나 null이 아닌 값을 반환
• OR연산자와의 차이: OR 연산자는 첫 번째 true 값을 반환하고, nullish 연산자는 첫 번째로 값이 할당된 피연산자를 반환

옵셔널 체이닝(?.)

• 객체의 속성값에 접근할 때 속성이 존재하지 않아도 오류가 발생하지 않게 해줌
• 객체의 속성값에 접근할 때 프로퍼티가 존재하지 않으면 undefined로 반환되며 오류를 발생함.
• 단축 평가를 이용해 오류가 나지 않고 undefined를 출력함.
• 그러한 단축 평가를 간결하게 표현하는 것이 옵셔널체이닝(?.)
• ex. console.log(user?.address?.city)

형변환

문자로 변환 예시

// String 함수
String(2);
String(true)

// .toString() 메서드 사용
(2).toString();
(10).toString(8); // 숫자형 변환 시 진법을 지정하여 변환 가능
null.toString(); // TypeError = undefined

// 문자열 연결 연산자 +
// 빈 문자열과 더하기 연산을 수행하면 자동 타입 변환이 발생
3 + ''; // '3'
NaN + '';

숫자로 변환 예시

// Number 함수
Number('1');
Number('hello');

// 더하기 연산자 사용
+'1';
+'hello';

// 곱하기 연산자 사용
'1' * 1;
'hello' * 1;

불리언으로 변환 예시

// Boolean 생성자 함수 사용
Boolean('x');

// 부정 논리 연산을 2번 사용(부정의 부정은 원상태)
!!'false';
!!20;

조건문

if문

if () {
    // 실행코드
}

else문

if () {
    // 실행코드
} else () {
     // 조건이 거짓일 때 실행코드 
}

else if문

if () {
    // 실행코드
} else if () {
     // 조건이 여러 개일 때 실행 코드
} else if () {
     // 조건이 여러 개일 때 실행 코드
} else if () {
     // 조건이 여러 개일 때 실행 코드
} else if () {
     // 조건이 여러 개일 때 실행 코드
} else () {
     // 어떠한 조건도 거짓일 때 실행 코드
}

삼항연산자

• 간단한 if-else문을 한 줄로 표현 가능한 연산자

  조건식 ? (조건이 참일 때 실행되는 코드) : (조건이 거짓일 때 실행되는 코드)

• 너무 많이 중첩하면 가독성이 떨어질 수 있으므로 주의

switch문

switch (표현식) {
    case 값1:
        // 실행코드
    case 값2:
        // 실행코드
    ...
    default:
        // 모든 case에 해당하지 않을 때 실행되는 코드
}

fall through현상

• case 문의 끝에 break 문이 생략된 경우 값이 일치하는 case문 이후의 모든 case문이 실행되는 현상

반복문

• 언제사용할까?: 동일한 작업을 여러번 반복해야 할 때

for

• for문의 구조:

  for (초기화식; 조건식; 증감식) {
    // 반복 실행할 코드
  }

• for문으로 2차원 배열을 만들 수 있을까?: 이중 for문을 사용해서 만들 수 있음.

  for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        console.log(`${i}, ${j}`)
    }
  }

while

• while문의 구조:

  while (조건식) {
     // 조건식이 참일 때 실행될 코드
  }

do-while

• 조건식의 평가 전 코드를 실행하는 반복문.
• 최소 1번의 실행이 보장됨
• do-while문의 구조:

  do {
    // 무조건 한 번 실행되는 코드
  } while (조건식) {
    // 조건식이 참일 때 실행될 코드
  }

break와 continue

• 반복문의 흐름을 제어함
• 특정조건에 따라서 반복문을 중단, 건너뛰게 하는 역할

break

• 반복문 즉시 종료

continue

• 반복문의 다음 반복으로 이동

label

• 특정한 코드블록에 이름을 지정함
• 사용예시:

  outer: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (i + j === 3) {
            break outer;
        }
        console.log(i, j);
    }
  }

전개 구문과 구조분해할당

전개구문(Spread syntax)

• 배열이나 객체와 같은 데이터 구조를 확장하기 위해 사용하는 문법 == 전개식

배열의 전개구문

• 대괄호 안에서 세 개의 점(…)을 사용하여 배열을 확장
• 배열의 전개구문 사용한 예시:

  const text1 = ['a', 'b', 'c'];
  const text = [...text1];
  

console.log(text); // a, b, c

#### 객체의 전개구문

- 중괄호 안에서 세 개의 점(…)을 사용하여 객체를 확장
- 객체의 전개구문 사용한 예시:
```js
const test = {name: "apple", color: "red"};

const cloneTest = {...test};

cloneTest.category = "fruit";

console.log(cloneTest);

구조분해할당(destructuring)

• 배열이나 객체와 같은 데이터 구조를 분해하여 변수에 할당하는 표현식
• 구조분해할당 사용시의 장점: 반복과 불필요한 변수 생성을 줄여 코드를 깔끔하게 작성 가능
• 구조분해할당의 기본 구조:

  const obj = {food1 : '과일', food2 : '채소', food3 : '육류'};
  

function objReturn(){ return obj }

const {food1, food2, food3} = objReturn();

console.log(food1, food2, food3);

#### 배열의 구조분해할당

- 배열의 구조분해할당의 예시:
```js
const [a, , c] = [1, 2, 3, 4, 5];

console.log(a);
console.log(c);

함수의 구조분해할당

• 함수의 구조분해할당의 예시:

  function func1({ a, b }) {
    console.log(a, b);
  }
  

func1({ a: "hello", b: "world" });

func1({ b: 20, a: 10 }); // 10 20

function func2([a, b, c]) { console.log(a, b, c); } func2([10, 20, 30]);

## this

- this는 객체를 가리키는 참조 변수
- 호출되는 위치에 따라 다른 값을 출력함

### 호출되는 위치에 따른 this

#### 전역 컨텍스트

- 전역컨텍스트에서 this는 전역객체, 브라우저에서는 window를 가리킵니다.

#### 함수 호출

- 일반 함수 내부에서 this는 전역 객체를 가리킵니다.

#### 메서드 호출

- 객체의 메서드 내에서 this는 그 메서드를 호출한 객체를 가리킵니다.

#### 이벤트 핸들러

- 이벤트 핸들러 내에서 this는 이벤트가 발생한 DOM 요소를 가리킵니다.

### this를 사용자 의도대로 값 조작하기

#### call()

- call메서드의 인수에 this로 사용할 값을 전달할 수 있습니다.
- 예시
```js
var peter = {
    name : 'Peter Parker',
    sayName : function(){    
        console.log(this.name);
    }
}

var bruce = {
    name : 'Bruce Wayne',
}

peter.sayName.call(bruce);
// Bruce Wayne

apply()

• apply() 메서드의 인수에 this 로 사용할 값을 전달할 수 있습니다.
• 배열의 형태로 전달할 수 있습니다.
• 예시

  var peter = {
    name : 'Peter Parker',
    sayName : function(is, is2){    
        console.log(this.name+ ' is '+ is + ' or ' + is2);
    }
  }
  

var bruce = { name : 'Bruce Wayne', }

peter.sayName.apply(bruce, ['batman', 'richman']); // Bruce Wayne is batman or richman

#### bind()

- bind()는 this가 고정된 새 함수를 반환
- 예시
```js
function sayName(){
    console.log(this.name);
}

var bruce = {
    name: 'bruce',
    sayName : sayName
}

var peter = {
    name : 'peter',
    sayName : sayName.bind(bruce)
}

peter.sayName();
bruce.sayName();

// bruce
// bruce

월요일(1일) ~ 목요일(5일)까지 Html, css, 아주 간단한 JS로만 구현하는 웹페이지 실습을 진행하였습니다.

1만 시간의 법칙 실습

GitHub URL

https://github.com/Jung-sunghoon/frontend_test/tree/main/testFolder/10000hours

실행 URL

https://jung-sunghoon.github.io/frontend_test/testFolder/10000hours/10000hours.html

스크린샷

PC 화면

모바일 화면

랜딩페이지 실습

GitHub URL

https://github.com/Jung-sunghoon/frontend_test/tree/main/testFolder/landingPage

실행 URL

https://jung-sunghoon.github.io/frontend_test/testFolder/landingPage/landing.html

스크린샷

JS가 필요한 부분은 스크린 샷이 없습니다(모달, 모바일 메뉴 등)

PC 화면

모바일 화면

JavaScript

자바스크립트 기초

자바스크립트란?

웹페이지에서 보조 기능을 위해 개발된 프로그래밍 언어

• 실행 주체: 웹 브라우저
• 점차 서버, 모바일 앱, 게임 프로그래밍 등에서 사용됨

자바스크립트로 할 수 있는 기능

• 데이터 처리
• 사용자와 상호작용
• 화면 조작
• 다른 컴퓨터와 통신

자바스크립트 실행

• 개발자 도구 콘솔 창에서 입력
• VSCode를 통해 작성
• 코드 작성
  • HTML 태그 내에 삽입
  • script 태그 사용
  • 외부 js 파일 저장 후 로드

변수

변수 선언과 사용

• 변수란?: 변할 수 있는 수 혹은 정보
• 변수선언에 쓰이는 키워드는?: var, let, const

변수명 작성 규칙

• 변수 이름에 사용할 수 있는 문자의 종류는?: 문자, 숫자, 언더스코어(_), 달러($)
• 사용 불가 법칙의 예시: 숫자로 시작 X, 예약어 사용 X
• 대소문자 구분, 한글이나 일본어도 변수명에 사용 가능(권장 X)
• 네이밍 규칙의 종류:
  • 카멜 케이스
    • 첫글자는 소문자, 이후 각 단어의 첫 글자는 대문자
    • useName
  • 스네이크 케이스
    • 각 단어를 언더스코어(_)로 연결
    • user_name
  • 파스칼 케이스
    • 단어의 첫 글자를 대문자
    • UserName
  • 헝가리안 케이스
    • 변수명에 타입 종류를 함께 작성
    • strUserName

변수 키워드와 특징

• var: 재선언, 재할당 가능
• let: 재선언 불가능, 재할당 가능
• const: 재선언, 재할당 불가능

스코프 (scope)

• 스코프란: 변수의 접근성과 생존 기간을 제어하는 생존 범위
• 선언 키워드별로 각각 다른/같은 스코프를 가진다.

1. 전역 스코프: 어디서든 접근 가능한 변수 영역
2. 함수 스코프: 함수 내에서만 접근 가능한 변수 영역. var로 선언한 변수는 함수 스코프를 가짐
3. 블록 스코프: 중괄호로 감싸진 코드 블록 단위로 접근 가능한 변수 영역을 나타냄. let과 const로 선언한 변수는 블록 스코프를 가짐.

CSS

Animation

animaion-fill-mode

• 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정
• normal: 기본값
• forwards: 요소의 기존 스타일로 시작하며 애니메이션 마지막 속성값 유지
• backwards: 첫 번째 정의된 애니메이션 값으로 시작하며 요소의 기존 스타일로 돌아감
• both: 첫번째 정의된 값으로 시작하며 마지막 값 유지

animation-play-state

• 애니메이션 재생 여부
• paused / running : 정지 / 재생

animation

• 단축속성
• 포함하는 속성: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

3d 관련 속성들

perspective

• 3D 요소에 원근감을 주기위해 z축의 위치를 정함
• 값이 크면 변형이 작고 값이 작으면 변형이 큼
• 부모에게 사용하며 적용 범위는 직계자식만
• 음수 값 사용 X

perspective-origin

• 소실점
• 사용자가 보고있는 위치(x,y)를 결정
• 부모에게 사용하며 기본값은 정 중앙

transform

• 요소에 2D or 3D 변형을 적용
• translate(), scale(), rotata()...

transform-style

• 요소에 변형을 적용할 때 그 변환이 자식에게도 적용될지를 설정
• 부모요소에 작용
• flat / preserved-3d: 평면 배치(기본값) / 3D 공간 배치

backface-visibility

• 요소의 뒷면이 사용자를 향할 때 보이게 할지 설정
• 변형을 통해 3D 공간에서 회전되면 노출 될수 있습니다.
• visible / hidden: (기본값) 뒷면을 보임 / 뒷면이 보이지 않음

미디어쿼리

미디어 유형

• all: 모든 장치를 대상으로 함(기본값)
• print: 인쇄 결과물 및 출력 미리보기 화면에 표시하는 경후
• screen: 모니터나 스크린이 있는 디바이스를 의미
• speech: 텍스트를 음성으로 변환하는 음성 합성장치 대상

미디어 특성

• width: 스크롤바를 포함한 뷰포트의 너비
  • min-width, max-width : 최소 / 최대 너비
• height: 뷰포트의 높이
  • min-height, max-height : 최소 / 최대 높이
• orientation: 뷰포트의 방향
  • portrait / landscape: 세로 / 가로
• aspect-ratio: 뷰포트의 가로세로비
• resolution: 출력장치의 픽셀 밀도 - 단위 dppx(Device pixel ratio).

min-, max-

• min- / max-: 최소 조건 / 최대 조건

논리연산자

• and : 조건을 모두 만족하는 경우에만 스타일을 적용
• not: 조건을 반전하는 경우 스타일을 적용
  • 주의: 미디어 유형(all, screen, print..)을 지정한 경우에는 해당 미디어 유형일 경우를 의미하며 부정의 의미에 미디어 유형은 포함되지 않음
• ,(쉼표): 조건중 하나라도 만족하는 경우 스타일을 적용
• only: 미디어쿼리를 지원 하는 브라우저에서만 작동

반응형 이미지

반응형 이미지가 필요한 이유

• 현재 다양한 디바이스가 있기 때문에 각 디바이스 환경을 고려하여 적절한 이미지를 제공해야하기 때문

해상도 전환

• 사용할 때의 장점: 디바이스의 해상도 및 크기에 따라 적절한 이미지를 효율적으로 보여주는 방법

srcset

• 브라우저가 네트워크, 메모리, 성능, 시간 등을 고려하여 최적의 이미지를 선택
• w, x서술자를 사용
• 사용예시
  • w
    • 이미지의 원본 넓이를 브라우저에게 알려줌
    • 이미지의 크기는 기본적으로 뷰포트의 100%를 차지(width, sizes 등의 속성으로 변경 가능)
    • src 속성을 무시함
  • x
    • 화소의 밀도. 디바이스 화소 밀도에 따른 이미지를 로딩하도록 브라우저에게 알려줌
    • 화소밀도: 동일한 면적에 들어가는 화소의 수. 개발자 도구 콘솔창에서 window.devicePixelRatio 명령어를 입력하면 알 수 있음
    • 서술자를 포함하지 않은 경우 기본값인 1x로 간주
• 디바이스의 넓이 - w(반응형 O) / 디바이스 화면의 픽셀 밀도 - x(디바이스 별 따로 앱 제작)

sizes

• 이미지가 차지하게 될 사이즈를 브라우저에게 알려줌
• sizes와 width를 같이 작성할 경우 ⇒ width를 우선시 함

아트디렉션

• 필요한 경우: 반응형 이미지에서 이미지의 의도가 제대로 전달되도록 기기에 따라 사진의 핵심을 확대해서 보여줌. 다른 비율, 다양한 크기의 이미지를 사용하고 싶을 때 사용.
• picture 태그 사용

Figma

피그마란?

• UI/UX 디자인을 위한 클라우드 기반 협업 웹 어플리케이션
• 쉽게 말해 웹을 기반으로 디자인 편집 작업을 하고 웹 링크 공유를 통해 편리하게 협업하는 디자인 툴

주요기능

• 협업
• 디자인 시스템
• 프로토타이핑
• 버전 관리
• 플러그인
• 내보내기 및 공유
• 레퍼런스

Figma 심화

오토레이아웃

• 오토레이아웃이란?: 자동으로 레이아웃을 잡아주는 기능(ex. 내부 텍스트의 크기에 따라 버튼의 크기가 달라짐)

안경 꾸며주기 실습

명함만들기 실습

컴포넌트

• 컴포넌트란?: 재사용 가능한 UI 요소. 일관성 유지, 효율성, 협업 용이 등의 장점이 있음

컴포넌트 용어

• 메인 컴포넌트: 컴포넌트의 원본이자 ‘마스터’ 버전. 메인 컴포넌트를 수정하면 해당 컴포넌트를 기반으로 하는 모든 인스턴스 컴포넌트가 자동으로 업데이트 됨.
• 인스턴스 컴포넌트: 메인 컴포넌트의 복사본 여러 군데에 배치하여 일관된 디자인 유지 가능
• 오버라이드: 특정 인스턴스 컴포넌트에서 메인 컴포넌트와는 다른 속성이나 스타일을 적용하는 것. 개별 인스턴스를 메인 컴포넌트와 다르게 커스터마이징 하는 것을 의미

프로토타입

• 프로토타입: 디자인한 UI를 실제로 작동하는 것처럼 시뮬레이션할 수 있게 해줌
• 프로토타입의 시작점을 만드는 방법: 프로토타입의 시작이 되는 지점을 Flow Starting Point로 설정

이스트소프트 프론트엔드 오르미를 시작하면서 기본부터 다시 배우게 되었습니다. 본 게시물은 수업하면서 중요하다고 생각했던 내용들을 정리하는 게시물입니다.

Box Model

border-radius

• 단축속성
• 모서리를 설정하며 설정값이 높을수록 둥글어짐

background

• color: 배경 색상 설정
• image: 배경 이미지 설정
• repeat: 배경 이미지 반복 여부 및 방식 설정
• position: 배경 위치 설정
• size: 배경 이미지 사이즈 설정
• attachment: 고정 설정
• clip: 요소의 배경이 어디까지 차지할지 지정
• origin: 배경 위치 시작점 설정

box-shadow

• 그림자 효과 추가
• offset-x offset-y blur-radius spread-radius color

opacity

• 0 ~ 1 사이의 숫자로 불투명도 설정

display

• 박스의 유형을 지정하여 다른 박스들과 어떻게 배치될 지 레이아웃 설정

• 주의: CSS 속성으로 시각적인 부분이 바뀌었을 뿐 태그 자체의 요소가 블록 레벨로 바뀐 것은 아님

• block

• inline

• inline-block

• flex

• grid

• none

reset.css

• 각 브라우저마다 기본적으로 제공하는 스타일이 있으며 조금씩 다름
• 크로스 브라우징을 대비하여 CSS를 리셋시키는 것

크로스 브라우징

• 어느 한 쪽 브라우저에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법
• 다른 브라우저로 접속해도 거의 비슷한 사용자 경험을 할 수 있게 함

Position

• static(기본값)
• relative
• absolute
• fixed
• sticky

flex

flex-container

• flex가 적용된 부모요소를 flex-container, 자식요소를 flex-item이라고 부름
• 1차원적 레이아웃을 위해 주로 사용 됨

flex-direction

• 컨테이너 내 아이템을 배치할 때 주축 및 방향 지정

justify-content

• 주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 설정 가능

align-items

• 교차 축을 기준으로 정렬

align-content

• 컨테이너의 교차 축의 아이템들이 여러 줄일 때 사용 가능(flex-wrap: wrap) 상태에서만 사용 가능

flex-basis

• flex-item의 초기 크기를 설정(축마다 달라지며 내부 콘텐츠에 따라 유연한 크기를 가짐)

flex-grow

• 아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도 지정
• 0을 줄 경우 늘어나지 않으며 2 이상의 수를 줄 경우 다른 자식요소보다 2배 이상의 여백 공간을 할당 받음

grid

• 웹 페이지를 위한 2차원 레이아웃

grid-container 속성

grid-template-columns

• 열 방향 그리드 트랙의 사이즈를 설정

grid-template-rows

• 행 방향 그리드 트랙의 사이즈를 설정

fr?

• fraction(분수)의 약자
• 컨테이너 분할
• 트랙의 비율을 지정해주는 유연한 길이 단위
• 1fr 1fr 1fr은 1:1:1의 비율 의미

함수

1. repeat()

• grid-track의 사이즈를 더 간단한 형태로 표현하도록 도와줌
• repeat(반복 횟수, 반복할 값)으로 사용

2. minmax()

• 그리드에서 최소와 최대 사이의 범위를 설정하는 함수이며 최소값과 최대값을 의미하는 두 가지 인자를 가짐

align-content

• 그리드 콘텐츠의 수직 정렬
• 아이템의 세로 높이가 컨테이너 안에서 움직일 공간이 있어야 함

justify-content

• 그리드 콘텐츠의 수평 정렬
• 아이템의 가로 높이가 컨테이너 안에서 움직일 공간이 있어야 함.

align-items

• 직계 자식에 대한 수직 정렬을 동일하게 해줌

justify-items

• 직계 자식에 대한 수평 정렬을 모두 동일하게 해줌

grid-item 속성

grid-area

grid-column-start, grid-column-end / grid-row-start, grid-row-end

• 그리드 열방향 시작, 끝 / 그리드 행방향 시작, 끝

align-self

• 아이템 개별로 수직 (열) 정렬을 지정

justify-self

• 아이템 개별로 수평(행) 정렬을 지정

place-self

• align-self, justify-self 를 함께 적는 단축 속성

order

• (flex와 마찬가지로) 아이템의 배치 순서를 지정

transform

• 요소에 다양한 변형을 줄 수 있음

scale

• 요소의 크기 조절
• 자신의 가운데를 중심으로 크기 변경
• transform-origin을 통해 기준점 변경 가능
• scale(1.5) => 1.5배 커짐

rotate

• 요소 회전
• transform: rotate(180deg) / transform: rotate(0.5turn) 으로 사용
• 자신의 가운데를 중심으로 회전
• transform-origin을 통해 기준점 변경 가능

translate

• 자신의 위치에서 x, y축 이동
• 기준점: 왼쪽 상단
• 음수값 지정 가능

skew

• 요소 왜곡
• 각도 단위 사용

transition

• CSS 속성값이 변할 때 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것
• 단축 속성
  • property: 전환 효과 속성 설정
  • duration: 완료까지 걸리는 시간
  • timing-function: 진행 속도 설정

animation

• 스타일 전환
• 구성요소: CSS 스타일과 키프레임들

transition VS animation

• transition: 요소의 상태가 변경되어야 가능
• animation: 요소의 상태 변화 관계 X

@keyframes

• 두 개 이상의 애니메이션 중간 상태 설정
• 0%, from: 시작시점 / 100%, to: 종료시점

animation 속성

name

@keyframes **animation-name** {}

• animation-name의 시작에는 영문 소문자,문자열, 언더바(_), 하이픈(-)을 사용
• 사용할 수 없는 것: 영문 대문자, 숫자, 특수문자
• 여러 개의 animation-name을 동시에 나열할 경우: 쉼표(,)를 통해 구분

duration

• 애니메이션 한 사이클 완료 시간
• 음수값이면 실행 X

timing-function

• 애니메이션 진행 방식 설정
• ease(기본값)
• linear
• steps(n)

delay

• 애니메이션이 언제 시작할지 설정
• 음수값이면 도중에 시작

iteration-count

• 재생 횟수 설정
• infinite: 무한 반복
• 1: 한 사이클 재생

direction

• 앞으로 뒤로 또는 앞뒤로 번갈아 재생 여부 설정
• normal(기본값)
• reverse
• alternate
• alternate-reverse

이스트소프트 프론트엔드 오르미를 시작하면서 기본부터 다시 배우게 되었습니다. 본 게시물은 수업하면서 중요하다고 생각했던 내용들을 정리하는 게시물입니다.

HTML

form

action

method

GET vs POST

<tr>
  <td>
  캐시
</td>
  <td>
  O
</td>
  <td>
  X
</td>
</tr>

<tr>
  <td>
  길이 제한
</td>
  <td>
  O
</td>
  <td>
  X
</td>
</tr>

<tr>
  <td>
  보안
</td>
  <td>
  취약
</td>
  <td>
  GET 방식보다 높음
</td>
</tr>

</th>
<th>
    GET  
</th>
  <th>
    Post  
</th>

input

공통 속성

SEO란?

CSS

CSS란?

작성방법

가상 클래스 선택자

가상 요소

CSS 선택자 우선순위

이스트소프트 프론트엔드 오르미를 시작하면서 기본부터 다시 배우게 되었습니다. 본 게시물은 수업하면서 중요하다고 생각했던 내용들을 정리하는 게시물입니다.

block / inline / inline-block

block

inline

inline-block

div / span

div

span

실습

스크린샷

코드

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</title>
    <style>
      a {
        color: #767676;
        text-decoration: none;
      }
      #wrapper {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        max-width: 314px;
      }
      section {
        max-width: 350px;
        height: 140px;
        border-radius: 4px;
        border: 1px solid;
        padding-left: 30px;
        padding-right: 25px;
      }
      button {
        background-color: #711bff;
        color: white;
        height: 40px;
        width: 318px;
        text-align: center;
        border-radius: 4px;
        border-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #icon-lock,
      #icon-user {
        width: 16px;
        height: 16px;
      }
      #weniv-logo {
        height: 18px;
        width: 64px;
      }
    </style>
  </head>
  <body>
    <h1>로그인 페이지</h1>
    <section>
      <p>더 편리해진 위니브에 오신 것을 환영합니다.</p>
      <!-- 로그인 모달 버튼 -->
      <button>
        <img src="./src/weniv-logo.png" alt="위니브 로고" id="weniv-logo" />
        <span>로그인</span>
      </button>
      <div id="wrapper">
        <div>
          <img src="./src/icon-lock.png" alt="" id="icon-lock" />
          <a href="#"><span>아이디</span></a>
          <span style="color: #767676"> | </span>
          <a href="#">비밀번호찾기</a>
        </div>
        <div>
          <img src="./src/icon-user.png" alt="" id="icon-user" />
          <a href="#"><span>회원가입</span></a>
        </div>
      </div>
    </section>
  </body>
</html>

게시물 수정 시 작성 날짜가 현재 날짜로 바뀌는 것...! 처음에는 프론트 쪽에 문제가 있는 줄 알고 날짜 포맷을 바꿔보거나 했지만 여전히 같은 문제가 지속되었고

개발자 도구의 Network 탭을 통해 블로그 게시물 리스트를 불러오는 API의 Response를 확인한 결과 리스트를 불러올 때 애초에 현재 날짜로 바뀌어 있었습니다.

프론트엔드 쪽의 문제가 아니었던 것..

그렇게 백엔드 코드도 뒤져보고 문제가 없다는 것을 깨닫고 난 뒤 오류가 난 곳을 찾게 되었는데....

데이터베이스에서 이미 날짜가 현재 시각으로 설정되어있었습니다.

왜 이렇게 되었나 살펴보았더니

ON UPDATE CURRENT_TIMESTAMP가 붙어있었습니다 짜잔...?

분명 로컬에서 할 때는 ON UPDATE CURRENT_TIMESTAMP는 넣지 않았는데 어째서 이런 일이 일어났나 했더니

서버로 올리기 위해 서버 쪽 컴퓨터로 데이터베이스를 복사하는 과정에서 자동으로 추가된 것이었습니다..

결국 ON UPDATE CURRENT_TIMESTAMP는 지우고 원래 날짜로 업데이트 해준 뒤에

정상적으로 돌아왔답니다..

다행히 날짜가 정상 처리되고 수정해도 작성한 날짜 그대로 나오게 되었습니다. DB 무료 Tool 사용하면 가끔 이런 일이 일어난다고 하네요....

DB 무료 Tool 사용할 때는 다들 조심하시길 바라며 이만 포스팅 마칩니다.

지난번 Restful API에 대해 알아보면서 HTTP Method에 대해 배워보았습니다. 이러한 API 통신을 위해 클라이언트에 많은 라이브러리가 있는데, 그 중 Axios에 대해 알아보고자 합니다.

Axios에 대해 배우기 전에 우선 AJAX에 대해 알아볼 필요가 있습니다.

AJAX

AJAX란 Asynchronous Javascript And XML(비동기식 Javascript와 XML)의 약자로 Javascript의 라이브러리 중 하나입니다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이며, JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술입니다. 간단히 말해보자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것입니다.

비동기 방식이란?

비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며, Ajax를 통해서 요청을 한 후 멈춰 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있습니다.

비동기 방식의 장점

페이지 리로드의 경우 전체 리소스를 다시 불러와야 하는데 이미지, 스크립트, 기타 코드 등을 모두 재요청할 경우 불필요한 리소스 낭비가 발생하게 되지만, 비동기 방식을 이용할 경우 필요한 부분만 불러와 사용할 수 있어 이러한 낭비를 줄일 수 있다는 장점이 있습니다.

Axios의 특징

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리입니다.

Axios의 특징은 아래와 같습니다.

운영 환경에 따라 브라우저의 SMLHttpRequest 객체 또는 Node.js의 HTTP API 사용 Promise(ES6) 사용 요청과 응답 데이터의 변형 HTTP 요청 취소 및 요청과 응답을 JSON형태로 자동 변경

Axios 사용법

Axios 다운로드

yarn add axios npm i axios #자신의 프로젝트 상위에 import import axios from ‘axios’

HTTP Methods 활용해보기

1. GET

GET: 입력한 URL에 존재하는 자원에 요청한다.

문법

axios.get(URL, [,config]);



import axios from ‘axios’;

axios.get(‘https://localhost:3000/api/user-list’)

          .then((Response) => {console.log(Response.data)})

          .catch((Error) => { console.log(Error)})
[

{ id: 1, pw: '1234', name: 'sunghoon' },

{ id: 2, pw: '1234', name: 'dahyeon' },

{ id: 3, pw: '1234', name: 'yongdae' }

]

응답은 json 형태로 넘어온다.

2. POST

POST: 새로운 리소스를 생성(create)할 때 사용한다.

문법

axios.post(URL , {

          data객체

          }, [ , config]);

POST Method의 두 번째 인자는 본문으로 보낼 데이터를 설정한 객체 리터럴을 전달한다.

POST를 사용하면 주소창에 쿼리스트링이 남지 않아 GET보다 안전하다.

axios.post( 'url',

  {

   contact: ‘Sunghoon’,

   email: 'jsh0218131@gmail.com'

   },

  {

   headers:{

    'Content-type': 'application/json',

    'Accept': 'application/json'

      }

    }

)

  .then((response) => { console.log(response.data); })

  .catch((response) => { console.log('Error!) });

3. DELETE

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제하는 목적으로 사용한다.

문법

axios.delete(URL , [ , config]);

Delete메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

Delete메서드는 서버에 있는 데이터베이스의 내용을 삭제하는 것을 주 목적으로 하기에 두 번째 인자를 아예 전달하지 않는다.

axios.delete("/api/post/30")

    .then(function(response){

    }).catch(function(ex){

      throw new Error(ex)

}

4. PUT

REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신하는 목적으로 사용된다.

문법

axios.put(url[, data[, config]])

PUT메서드는 HTML Form 태그에서 기본적으로 지원하는 HTTP 메서드가 아니다.

PUT메서드는 서버에 있는 데이터베이스의 내용을 변경하는 것을 주 목적으로 하고 있다.

axios.put("url", {

    username: "",

    password: ""

    }) .then(function (response) {

    }).catch(function (error) {

    }) {

      throw new Error(ex)

}

오늘은 axios 라이브러리에 대해 알아보았습니다.

Reference

https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API#-axios-%ED%8A%B9%EC%A7%95

React로 개발을 시작했지만 React가 무엇인지, 왜 사람들이 React를 가장 많이 사용하는지에 대해 알지 못 한 상태로 하다 보니 React가 무엇이고 사람들이 왜 사용하는지는 알고 사용해야겠다는 생각이 들어서 찾아보았습니다.

따라서 이번 블로그 포스트에서는 React가 무엇인지 , 특징은 무엇인지 살펴보려고 합니다.

React는 UI Javascript 라이브러리로써 싱글 페이지 애플리케이션의 UI(User Interface)를 생성하는데 집중한 라이브러리입니다. React는 Javascript에 HTML을 포함하는 JSX(Javascript XML)라는 간단한 문법과 단방향 데이터 바인딩(One-way Data Binding)을 사용하고 있습니다. 그리고 가상 돔(Virtual DOM)이라는 개념을 사용하여 웹 어플리케이션의 퍼포먼스를 최적화한 라이브러리입니다.

React는 싱글 페이지 애플리케이션(Single Page Application이하 SPA)에서 UI를 만드는 Javascript 라이브러리이다 보니, SPA 제작을 하는 다른 프레임워크에 비해 부족한 부분이 있습니다. 예를 들어 React는 페이지 전환 기능을 제공하지 않기 때문에, React를 사용하여 페이지 전환을 해야한다면 react-router와 같은 추가적인 라이브러리를 사용해야 합니다.

React의 특징

가상 돔 단방향 데이터 바인딩 JSX Props 와 State Component 기반

가상 돔

React는 가상 돔을 사용하여 웹 어플리케이션의 성능을 극대화 시켰습니다. 가상 돔을 이해하기 전에 먼저 HTML과 CSS의 렌더링 과정을 이해할 필요가 있습니다.

HTML과 CSS의 렌더링 과정

웹 브라우저가 네트워크를 통해 HTML을 전달 받으면 브라우저의 렌더링 엔진은 HTML을 파싱하고 돔 노드로 이루어진 트리를 만듭니다. 또한 CSS파일과 HTML의 요소들의 인라인 스타일을 파싱하여 스타일 정보를 가진 스타일 트리도 같이 생성합니다.

이렇게 렌더 트리가 완성되면 브라우저는 Attachment라는 과정을 통해 스타일 정보를 계산합니다. 렌더 트리로 생성된 모든 노드들은 attach라는 함수를 가지고 있는데Attachment 과정에서이 메소드들이 호출되며 해당 메소드는 스타일 정보를 계산하고 결과값을 객체 형태로 반환하게 됩니다.

이 때 이 계산 과정은 모두 동기적으로 동작하게 되며, 만약 렌더 트리에 새로운 노드가 추가된다면 해당 노드의 attach 메소드가 실행되어 계산 과정을 거치게 됩니다.

렌더 트리는 Attachment 과정을 거친 후 레이아웃이라는 과정을 거치게 되는데, 이 과정에서는 브라우저가 렌더 트리의 각 노드들에게 좌표를 부여하고 정확히 어디에 어떻게 표시되는지를 결정합니다.

마지막으로 브라우저는 페인팅이라는 과정을 거치게 되는데 각 노드들에 paint 함수를 호출하여 렌더링된 요소들에 색상을 입히게 됩니다.

이런 과정을 거쳐 표시된 HTML을 Javascript를 사용하여 돔을 조작하게 되면 각 노드의 좌표를 계산하기 위해 레이아웃 과정이 다시 실행되고 그 이후 페인팅이 다시 진행되게 됩니다.이렇게 돔 조작으로 레이아웃 과정이 다시 진행되는 것을 Reflow, 페인팅 과정이 다시 진행되는 것을 Repaint라고 합니다. 리플로우와 리페인팅은 돔의 각 노드에 대한 연산 과정을 다시 수행하므로 이 과정이 많이 수행될수록 웹 서비스의 성능이 저하되는 문제가 발생하게 됩니다.

React는 이러한 문제를 가상 돔을 만듦으로써 해결했습니다. 화면에 표시한 돔과 동일한 돔을 메모리상에 만들고 돔 조작이 발생하면 가상 돔에 모든 연산을 수행한 후 실제 돔을 갱신하여 리플로우 및 리페인트의 연산을 최소화하였습니다.

만약 사용자가 Todo 리스트 앱을 사용한다고 가정했을 때, 가상 돔이 없는 경우 리스트에 할 일을 추가하려면 할 일을 하나 표시하기 위해 리플로우/리페인트가 한 번 발생하고, 전체 리스트를 표시하기 위해 리플로우/리페인트가 한 번 더 발생합니다. 그러나 React에서는 이 모든 과정을 가상 돔에서 수행하여 리플로우/리페인트를 한 번 만 수행하도록 합니다.

이렇게 React에서는 가상 돔을 활용해 SPA의 리플로우/리페인트를 최소화하여 성능을 최적화 시켰습니다.

단방향 데이터 바인딩

우선 양방향 데이터 바인딩부터 살펴보겠습니다. 양방향 데이터 바인딩은 사용자 UI의 데이터 변경을 감시하는 Watcher와 Javascript 데이터의 변경을 감시하는 Watcher가 UI와 자바 스크립트 데이터를 자동으로 동기화 시켜주는 방식을 말합니다. 이를 통해 개발자는 Javascript 내의 데이터 변경과 사용자 UI의 데이터 변경에 관한 동기화를 신경쓰지 않고 프로그램을 작성할 수 있습니다.

하지만 하나의 데이터 동기화에 두 개의 Watcher가 사용되고 데이터가 많아지게 되면 이 데이터의 동기화를 위한 수 많은 Watcher가 생성되므로 성능 저하가 발생할 수 있습니다.

이러한 이유로 React에서는 단방향 데이터 바인딩을 사용합니다.

단방향 데이터 바인딩은 단 하나의 Watcher가 Javascript의 데이터 갱신을 감지하여 사용자의 UI 데이터를 갱신합니다. 사용자가 UI를 통해 Javascript의 데이터를 갱신할 때는 이벤트를 통해 갱신하게 됩니다. 이처럼 단방향 데이터 바인딩은 하나의 Watcher를 사용하기 때문에 성능적인 이슈를 해결하고 확실하게 데이터를 추적할 수 있게 해줍니다.

JSX

JSX는 Javascript와 HTML을 동시에 사용하며 HTML에 Javascript의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어(Template Language)입니다.

Const App = () => {
       const hello = ‘Hello World!’;
       return <div>{hello}</div>;
};

React는 위와 같이 Javascript에서 HTML을 사용할 수 있으며 Javascript 변수를 HTML 태그에서 바로 호출하여 사용할 수 있습니다.

Props와 State

Props

부모 Component에서 자식 Component로 전달해 주는 데이터를 말합니다. 자식 Component에서 전달받은 Props는 변경이 불가능하고 Props를 전달해준 최상위 부모 Component만 Props를 변경할 수 있습니다.

State

State는 Component 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. State는 동적인 데이터를 다룰 때 사용하며 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다. 클래스형 Component에서만 사용할 수 있고, 각각의 State는 독립적입니다.

Component 기반

Component는 독립적인 단위의 소프트웨어 모듈을 말합니다.

React는 UI(View)를 여러 Component를 쪼개서 만듭니다.

한 페이지 내에서도 여러 각 부분들을 독립된 Component로 만들고, 이 Component를 조립해 화면을 구성합니다.

Component 단위로 쪼개져 있기 때문에 전체 코드를 파악하기가 상대적으로 쉽습니다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높습니다. 코드를 반복해서 입력할 필요 없이 Component를 import하여 사용하면 된다는 간편함이 있으며 코드의 유지 보수, 관리가 쉬워지는 장점이 있습니다.

Const App = () => {
       Return (
           <Layout>
               <Header />
               <Content />
               <Footer />
           <Layout />

    );
}

Layout, Header와 같은 구조를 Component로 만들고, 이를 조합해서 Root Component를 만드는 방식으로 구조를 이루고 있습니다.

오늘은 React는 무엇인지, React의 특징은 무엇인지 간단하게 알아보았습니다.

Reference

https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC#4-props-and-state

https://deku.posstree.com/ko/react/create-react-app/react/

이미지 출처 - https://deku.posstree.com/ko/react/create-react-app/react/

Rest API란?

Rest API에서 API란 Application Programming Interface의 약어로 애플리케이션이나 디바이스가 서로 간에 연결하여 통신할 수 있는 방법을 정의하는 규칙 세트입니다. Rest란 REpresentational State Transfer의 약어로 소프트웨어 프로그램 아키텍처의 한 형식입니다. Rest API는 이러한 Rest 아키텍처를 스타일의 디자인 원칙을 준수하는 API입니다. 따라서 Rest API를 Restful API라고도 부릅니다. Rest는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일입니다.

이미지 출처: https://www.codecademy.com/article/what-is-rest

Rest의 구체적인 개념

HTTP URI를 통해 자원을 명시하고 HTTP Method(GET, POST, PUT, DELETE 등)을 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다. 즉, REST는 자원 기반의 구조 설계의 중심에 Resource가 있고, HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍처를 의미한다. 웹의 모든 자원에 고유한 ID인 HTTP URI를 부여한다.

Rest의 구성

1. 자원(Resource) - URL

2. 행위(Verb) - HTTP Method

3. 표현(Representations)

   
   

1. 자원 (Resource) - URL

   모든 자원에 고유한 ID가 존재하고, 이 자원은 서버에 존재한다. 자원을 구별하는 ID는 /post/post_id/1 과 같은 HTTP URI이다.

2. 행위 (Verb) - HTTP Method

   HTTP 프로토콜의 Method를 사용한다. HTTP 프로토콜은 GET, POST, PUT, DELETE 등의 Method를 제공한다.

3. 표현(Representation of Resource)

   Client가 자원의 상태 (정보) 에 대한 조작을 요청하면 서버는 이에 적절한 응답(Representation)을 보낸다. Rest에서 하나의 자원은 JSON, XML, TEXT, RSS 등 여러 형태의 응답(Representation)으로 나타낼 수 있다. 현재는 JSON으로 주고받는 것이 대부분이다.

HTTP Method의 역할

Rest의 특징

1. 클라이언트 / 서버 구조

   클라이언트는 유저와 관련된 처리를, 서버는 Rest API를 제공함으로써 각자의 역할이 확실하게 구분되고 일괄적인 인터페이스로 분리되어 작동할 수 있게 한다. 클라이언트 - 사용자 인증이나 context(세션, 로그인 정보) 등을 직접 관리하고 책임진다. 서버 - API를 제공하고 비즈니스 로직 처리 및 저장을 책임진다. 서로 간의 의존성이 줄어든다.

2. 무상태성 (Stateless)

   Rest는 HTTP의 특성을 이용하기 때문에 무 상태성을 가진다. 서버에서 특정 작업을 하기 위해 상태 정보를 기억할 필요가 없고 들어온 요청에 대해 처리만 해주면 되기 때문에 구현이 쉽고 단순해진다.

3. 캐시 처리 기능 (Cacheable)

   HTTP라는 기존 웹 표준을 사용하는 특징 덕분에 기존 웹에서 사용하는 인프라를 그대로 사용 가능하다. 대량의 요청을 효율적으로 처리하기 위해 캐시가 요구된다. 캐시 사용을 통해 응답시간이 빨라지고 Rest 서버 트랜잭션이 발생하지 않기 때문에 전체 응답시간, 성능, 서버의 자원 이용률을 향상시킬 수 있다.

4. 자체 표현 구조

   JSON을 이용한 메시지 Format을 이용하여 직관적으로 이해할 수 있고 Rest API 메시지만으로 그 요청이 어떤 행위를 하는지 알 수 있다.

5. 계층화

   클라이언트와 서버가 분리되어 있기 때문에 중간에 프록시 서버, 암호화 계층 등 중간 매체를 사용할 수 있어 자유도가 높다.

6. 유니폼 인터페이스 (Uniform)

   Uniform Interface는 Http 표준에만 따른다면 모든 플랫폼에서 사용이 가능하며 URI로 지정한 리소스에 대한 조작을 가능하게 하는 아키텍처 스타일을 말한다. URI로 지정한 Resource에 대한 조작을 통일되고 한정적인 인터페이스로 수행한다. 즉, 특정 언어나 기술에 종속되지 않는다.

중심 규칙

Rest에서 가장 중요하며 기본적인 규칙은 두 가지가 있습니다.

URI는 정보의 자원을 표현해야 한다. 자원에 대한 행위는 HTTP Method (GET, POST, PUT, DELETE 등)으로 표현한다.

세부 규칙

1. 슬래시 구분자 ( / )(이하 슬래시) 는 계층 관계를 나타내는 데 사용한다.

2. URI 마지막 문자로 슬래시를 포함하지 않는다.

   URI에 포함되는 모든 글자는 리소스의 유일한 식별자로 사용되어야 하며 URI가 다르다는 것은 리소스가 다르다는 것. 역으로 리소스가 다르면 URI도 달라져야 한다.

3. 하이픈 ( - ) 은 URI 가독성을 높이는데 사용한다.

4. 밑줄 ( _ ) 은 URI에 사용하지 않는다.

5. URI 경로에는 소문자가 적합하다.

   URI 경로에 대문자 사용은 피하도록 한다.

6. 파일 확장자는 URI에 포함하지 않는다.

   Rest API에서는 메시지 마디 내용의 Format을 나타내기 위한 파일 확장자를 URI 안에 포함시키지 않는다. 대신 Accept Header를 사용한다. ex) GET : http://restapi.test.com/posts/2/Accept: images/jpg

7. 리소스 간에 연관 관계가 있는 경우

   /리소스명/리소스ID/관계가 있는 다른 리소스 명 ex) GET : /users/2/posts (일반적으로 소유의 관계를 표현할 때 사용)

예시 이미지

이미지 출처: https://hackernoon.com/build-restful-api-in-go-and-mongodb-5e7f2ec4be94

설계 목표

Rest의 핵심 설계 목표는 다음과 같습니다.

1. 컴포넌트들 간의 유연한 (쉽게 확장이 가능한) 상호 연동성 확보

2. 범용 인터페이스

3. 각 컴포넌트들의 독립적인 배포

4. 지연 감소, 보안 강화, 레거시 시스템을 인캡슐레이션하는 중간 컴포넌트로의 역할

인캡슐래이션: 데이터에 헤더가 추가되는 과정 즉 OS Lv7 => Lv1로 내려가는 과정을 뜻하며 간단하게 PC에서 다른 PC로 데이터를 전송할 때 데이터를 패키지하는 과정을 말한다.

1. 상호 연동성 확보

   상호 연동성은 서로 상이한 컴포넌트들을 쉽게 연결할 수 있는 성질을 의미한다. 상호 연동성은 두 개 이상의 컴포넌트들을 결합함으로써, 작업을 더 효율적으로 수행하도록 하는데 목적이 있다. Rest는 HTTP와 URI 기반인데, HTTP와 URI 모두 표준이며 직관적이고, 사용이 간단하며 어디에서든 동일하게 작동하는 것을 보장할 수 있다.

2. 범용 인터페이스

   상호 연동성과 비슷한 개념으로 Rest 모델을 위한 HTTP와 URI는 웹 표준으로 어디서든지 사용 가능한 범용 인터페이스를 제공한다. 따라서 개발자는 비즈니스 로직만 고민하면 된다.

3. 각 컴포넌트들의 독립적인 배포

   각 컴포넌트들과의 독립적인 배포의 의미는 다른 컴포넌트들과 독립적으로 개발할 수 있다는 것을 의미한다. 규격에 맞추어 개발이 되었다면 다른 컴포넌트가 추가되어도 연동에 걱정할 것이 없다.

4. 컴포넌트를 중계하는 역할

   클라이언트는 엔드 서버에 직접 연결할 필요 없이 서비스를 이용할 수 있다. 그 이유는 Rest 서버가 클라이언트와 엔드 서버 중간에서 중계 역할을 할 수 있기 때문이다. 이러한 중계 서버로 이용하면 로드 밸런싱, 공유 메모리 등을 이용해서 확장성 / 성능을 향상시킬 수 있으며 보안 정책을 적용하기도 용이하다.

   로드 밸런싱: 부하 분산이라고도 불리며 컴퓨터 네트워크 기술의 일종으로 둘 혹은 셋 이상의 중앙 처리 장치 혹은 저장 장치와 같은 컴퓨터 자원들에게 작업을 나누어 주는 것을 의미한다.

Restful API

Restful이란?

HTTP와 URI 기반으로 자원에 접근할 수 있도록 제공하는 애플리케이션 개발 인터페이스이다. 기본적으로 개발자는 HTTP Method와 URI만으로 인터넷에 자료를 CRUD 할 수 있다. Rest API를 제공하는 웹 서비스를 Restful하다고 할 수 있다. Restful은 Rest를 Rest답게 사용했다는 의미로 볼 수 있다.

Restful API 개발 원칙

1. 자원을 식별할 수 있어야 한다.

   URL (Uniform Resource Locator) 만으로 사용자가 어떤 자원을 제어하려고 하는지 알 수 있어야 한다. 자원을 제어하기 위해서 자원의 위치는 물론 자원의 종류까지 알 수 있어야 한다는 의미이다. 서버가 제공하는 정보는 JSON이나 XML 형태로 HTTP body에 포함하여 전송시킨다.

2. 행위는 명시적이어야 한다.

   Rest는 아키텍처 혹은 방법론과 비슷하다. 따라서 이런 방식을 사용해야한다고 강제적이지는 않다. 기존의 웹 서비스처럼 GET을 이용해서 UPDATE와 DELETE를 해도 된다. 다만 Rest 아키텍처에는 부합하지 않으므로 Rest를 따른다고 할 수 없다.

3. 자기 서술적이어야 한다.

   데이터에 대한 메타정보만 가지고도 어떤 종류의 데이터인지, 데이터를 위해서 어떤 어플리케이션을 실행해야 하는지를 알 수 있어야한다. 즉, 데이터 처리를 위한 정보를 얻기 위해서, 데이터 원본을 읽어야 한다면 자기 서술적이지 못하다.

4. HATEOS (Hypermedia as the Engine of Application State)

   클라이언트 요청에 대해 응답을 할 때 추가적인 정보를 제공하는 링크를 포함할 수 있어야한다. Rest는 독립적으로 컴포넌트들을 손쉽게 연결하기 위한 목적으로도 사용된다. 따라서 서로 다른 컴포넌트들을 유연하게 연결하기 위해서 느슨한 연결을 만들어줄 것이 필요하다. 이때 사용되는 것이 바로 링크이다. 서버는 클라이언트 응용 어플리케이션에 하이퍼링크를 제공한다. 클라이언트는 이 하이퍼링크를 통해서 전체 네트워크와 연결되며 HATEOS는 서버가 독립적으로 진화할 수 있도록 서버와 서버, 서버와 클라이언트를 분리할 수 있게 한다.

Rest의 단점들

1. Rest는 point-to-point 통신모델을 기본으로 하기 때문에 서버와 클라이언트가 연결을 맺고 상호작용해야하는 어플리케이션의 개발에는 적당하지 않다.

2. Rest는 URI, HTTP를 이용한 아키텍처링 방법에 대한 내용만을 담고 있다. 보안과 통신규약 정책같은 것은 전혀 다루지 않는다. 따라서 개발자는 통신과 정책에 대한 설계와 구현을 도맡아서 진행해야 한다.

3. HTTP에 상당히 의존적이다. Rest는 설계 원리이기 때문에 HTTP와는 상관없이 다른 프로토콜에서도 구현할 수 있기는 하지만 자연스러운 개발이 힘들다. 다만 Rest를 사용하는 이유가 대부분의 서비스가 웹으로 통합되는 상황이기 때문에 큰 단점이 아니게 되었다.

4. CRUD 4가지 메소드만 제공한다. 대부분의 일들을 처리할 수 있지만 4가지 메소드 만으로 처리하기에는 모호한 표현이 있다.

오늘은 Rest API에 대해서 알아보았습니다. 지금까지 이러한 개념 없이 Rest API를 사용하고 있었는데 왜 사용하는지, 규칙은 어떠한 것이 있는지 등을 알 수 있던 시간이었습니다. 이러한 규칙들을 잘 생각하면서 개발하도록 노력하고자 합니다.

Reference

https://velog.io/@somday/RESTful-API-%EC%9D%B4%EB%9E%80

프로젝트 소개

프로젝트 개요

한신대학교 컴퓨터공학부 캡스톤 디자인 팀 프로젝트입니다.

프로젝트 기간은 23.09 ~ 23.11 입니다. 대략 2개월 반 정도 걸린 것 같습니다.

토이 프로젝트 공유 웹사이트 Devfolioh! 와 사이드 프로젝트 및 스터디 팀원 모집 웹사이트 Hola!를 모티브로 하여 한신대학교 학생들을 위한 프로젝트 공유 및 팀원 구인 웹사이트를 개발하였습니다.

Devfolioh! - https://devfolio.kr/ Hola! - https://holaworld.io/

이 프로젝트에서 저는 백엔드와 웹 디자인을 제외한 전체적인 기획 및 프론트엔드를 맡았습니다.

프로젝트 아이템 선정 동기

학교 수업 특성 상 같이 수업을 듣는 친구들과 팀을 이루거나 랜덤으로 팀을 짜거나 둘 중 하나로 진행해야 되었으나 랜덤 팀의 경우 각자 잘하는 것이 무엇인지 모르고 프로젝트의 방향성도 잡기 어렵기 때문에 순조롭게 진행되지 않는 경우가 많은데, 졸업을 위해 필수로 들어야하는 수업에서 이러한 불편한 점이 있다는 것이 이해가 되지 않았습니다.

또한 어렵게 팀을 꾸린 후에도 프로젝트에 대한 아이템 선정 과정에서 아무것도 없이 그저 생각만 하려고 하니 마땅히 좋은 아이디어가 나오지 않아 아이템을 선정하는 것에만 시간을 꽤 할애해야만 했습니다.

그러던 와중에 Devfolioh!와 Hola!를 알게 되었고 제가 느꼈던 불편함들을 해결할 수 있는 웹사이트를 개발하게 되었습니다.

역할 분담

Front-end 1명, Back-end 2명, 웹 디자인 1명으로 진행했습니다.

PM

1. Devfolioh!와 Hola!는 한국 개발자 전체를 대상으로 운영되고 있는 서비스입니다. 개발 기간을 고려하고 대상을 집중하는 것이 맞다고 판단하여 사용자를 한신대학교 학생으로 한정했습니다.

2. 2개월 반이라는 기간 동안 해야하는 필수 구현 사항과 추가 구현 사항을 구분하고, 주 1일 구글 meet를 통해 회의를 진행했습니다.

Frontend

로그인 및 회원가입 페이지 프로젝트 게시판 페이지 프로젝트 작성 페이지 프로젝트 상세 페이지 프로필 페이지 랭킹 페이지 IT 정보 페이지

협업 Tool

Git / Github

버전 관리를 위해 Tool중 하나인 Git과 Github를 사용했습니다.

Git과 Github도 제대로 사용해본 것이 처음이라 Git 명령어를 공부하는 데에 큰 도움이 되었습니다.

Github 레퍼지토리는 다음과 같습니다.

Front-end 레퍼지토리 바로 가기 Back-end 레퍼지토리 바로 가기

기술 스택

Language	Framework	IDE

구현

1. 로그인 및 회원가입 페이지 구현

2. 프로젝트 게시판 페이지 구현

   1) 진행 중인 프로젝트와 완료된 프로젝트 구분

   2) 검색 컴포넌트를 통한 제목 검색 구현

   3) 페이지네이션 및 조회순, 좋아요순, 최신순 정렬 구현

3. 프로젝트 작성 페이지 구현

   1) SummerNote를 활용하여 텍스트 및 이미지, 꾸미기 가능

4. 프로젝트 상세 페이지 구현

   1) 댓글 작성 및 수정, 삭제 기능 구현

   2) 작성자의 경우 프로젝트 수정, 삭제 기능 구현

   3) 다른 사용자가 진행 중인 프로젝트에 프로젝트 참여 신청 기능 구현

   4) 작성자의 경우 프로젝트에 참여 신청한 사용자의 목록 및 프로필 보기/ 프로젝트 참여 신청 승인 or 취소 기능 구현

5. 프로필 페이지 구현

   1) 회원가입 시 적었던 사용자의 정보 보기 기능 구현

   2) 로그인 시 본인의 프로필을 보면 비밀번호가 보이고 다른 사용자의 프로필은 비밀번호가 보이지 않는 기능 구현

   3) 자신이 올린 프로젝트 목록을 볼 수 있는 기능 구현

   4) 자신이 프로젝트 참여 신청한 프로젝트 목록을 보고, 신청 취소 할 수 있는 기능 구현

6. 랭킹 페이지 구현

   1) 활동으로 얻은 포인트에 따라 랭킹 순위 적용 기능 구현

7. IT 정보 페이지 구현

   1) 오직 관리자만이 게시물을 작성 및 수정, 삭제 할 수 있는 기능 구현

   2) 일반 사용자는 게시물을 보기만 할 수 있음

후기

좋았던 점

1. 팀 프로젝트 경험을 해 볼 기회가 많이 없었는데 좋은 경험이 되었습니다.

2. 프론트엔드 개발이 재밌었습니다.

배운 점

1. 프로젝트 진행에 있어서 개발자 뿐 만 아니라 다른 직군도 있다는 것을 배우고 프론트엔드 개발자와 PM의 역할을 해 볼 수 있게 되었습니다.

2. 프론트엔드 기술 스택 중 React와 TypeScript가 무엇이고 어떻게 사용하는 지에 대해 배웠습니다.

3. 협업 Tool 중 하나인 Git과 Github가 무엇인지, 어떻게 사용하는 가에 대해 배웠습니다.

4. Rest API에 대해 알고 백엔드와 통신하는 방법을 배웠습니다.

아쉬웠던 점

1. 팀 프로젝트가 처음이다 보니 팀장으로서 이끌어 나가는 것이 어려웠습니다.

2. 팀원들과 소통에 있어서 원활하게 하지 못한 점이 아쉽습니다.

3. 결과물을 보여주기 위한 코딩을 하다 보니 코드의 완성도가 많이 떨어졌습니다.

4. 개념적인 부분에 대한 이해도가 낮다 보니 코딩을 하고 나서도 비슷한 코드가 필요할 때 헷갈리는 부분이 생겼습니다.

학창시절을 거의 놀면서 보냈던 저는 당장 이룬 것도 없고

그나마 막 공부를 시작한 프론트엔드 기술 스택 조차 시작한지 6개월 밖에 되지 않은 저에게 취업 준비란 너무 막막한 일이었습니다.

다행히 프론트엔드 개발자로 재직 중이신 삼촌께서 도와 주시기로 하셨고 삼촌이 가장 먼저 하신 말씀은

"너를 브랜드화 해라"

아무것도 이룬 것이 없고, 해 본 것이라고는 대학교 수업 시간

캡스톤 디자인 수업 때 해본 팀 프로젝트 웹사이트 개발.

어떻게 시작을 해야할 지 아무것도 모르던 저에게 해주신 말씀은

기술 블로그를 작성해보라는 것이었습니다.

그렇게 시작하게 된 기술 블로그 첫 게시물은

이번에 취업 준비를 본격적으로 시작하며 세우게 된 계획표입니다.

계획 세우는 것도, 무엇을 시작해야 하는지도 모르던 제 계획표입니다.

9시 반에 기상하여 11시까지 출근 점심 전까지 기술 블로그를 작성하거나 기술 블로그 게시물 작성 계획 짜기, 혹은 이력서 추가로 작성하기 점심 이후 ~ 저녁 전까지 현재 개발 중인 포트폴리오 웹사이트 개발 저녁 후 ~ 퇴근 전까지 부족한 개념 공부 및 면접 공부

비록 시간 단위로 완벽하게 짠 시간표는 아니지만

우선은 이 안에서 제가 조금씩 계획을 세워가며 해보고자 합니다.