이경환 - chungstar/hansei-study2 GitHub Wiki

- 2021/01/08 블로그 조사

블로그란? (web + log)

한 줄 요약 : 보통 사람들이 자신의 관심사에 따라 자유롭게 글을 올릴 수 있는 웹 사이트.
웹 사이트에 일기(로그)처럼 기록해 다른 사람들도 보고 읽고 댓글을 달 수 있게끔 열어 놓은 글모음을 말한다.

특징

  1. 분량의 제한 없이 글을 작성할 수 있다.
  2. SNS에 비해 휘발성이 약하기 때문에 컨텐츠를 오랜기간 활용할 수 있다.
  3. 접근 및 사용이 쉽고 비용 없이 시작할 수 있다.
  4. 자신을 알리는 도구나 홍보용으로 사용할 수 있다.
  5. 자신이 게시하고 싶은 어떠한 글을 작성하는 것에 대해 자유롭다.

유형

  1. 일상형 블로그: 자신의 일상과 취미생활 등을 사진으로 추억을 남기는 유형.
  2. 리뷰형 블로그: 여러가지 것들을 블로거가 미리 체험하고 후기를 남기는 유형.
  3. 전문가형 블로그: 어떤 분야에 대해 전문적인 방법과 같은 것들을 설명하는 유형.

관련 용어

  • 엔트리(entry): 블로그에 올린 글. 포스트(post)라고 불린다.
  • 코멘트(comment): 포스트에 담긴 들에 대해 방문자가 자신의 짧은 의견을 남기는 공간.
  • 트랙백(trackback): 역방향 연결고리를 자동적으로 생성해주는 기능. 블로그들 사이의 연결 고리들이 만들어지게 하며, 네트워크를 형성해 소셜미디어 성격을 가지게 한다.
  • 스킨(skin): 블로그의 전반적인 디자인.
  • 위젯(widget): 독립적으로 실행 가능한 작은 프로그램을 블로그 기능으로 추가.
    ex) 시계, 날씨 등등..
  • 태그(tag): 꼬리표, 관련 주제를 가진 글들을 연결시키고, 분류하는 기능에 용이.
  • 템플릿(template): 블로그의 기본 레이아웃과 디자인 양식.
  • 플러그인(plugin): 위젯같이 블로그 프로그램에 기능을 추가하는 작은 프로그램.
  • RSS피드(RSS feed): 본인의 블로그 주소를 확인할 수 있는 RSS 주소.

대표적인 사이트

  • 국내 서비스형: 네이버 블로그, 다음 블로그, 티스토리, 네이버 포스트, 벨로그 등등..
  • 국외 서비스형: 워드프레스닷컴, 텀블러, 라인 블로그 등등..
  • 설치형: 워드프레스, 텍스트큐브, 텍스타일, ZOG 등등..

- 2021/01/08 스터디

블로그 만들기 강좌: https://www.youtube.com/watch?v=jRsqym9pY98&list=PLdkgmKveOzUhvTSULWWnRXwXnlWDDZ2Py&index=1

contentful

Headless CMS라고 불리는 contentful은 컨텐츠를 관리하기 위한 모든 역할을 수행한다.

  • 장점
    1. 컨텐츠와 컨텐츠를 보이는 부분이 분리되어 언제든지 테마 이동 가능.
    2. 컨텐츠에 대해 자체적인 스카마 구성 가능.
    3. 컨텐츠에 대한 상태 관리.
    4. 글을 작성할 수 있는 에디터 제공.
    5. 이미지 리사이징 및 프리뷰, 다양한 최적화 기능.
    6. 대부분의 기능을 자동화할 수 있도록 API 제공.

REST

REpresentational States Transter.

특정시간에 존재하는 조건, 방식을 그대로 보여준다.
어떤 상태를 그것 그대로 전달해주는 역할.
프론트엔드가 필요한 정보를 서버에게 요청하는 통신 방식.

GraphQL

쿼리 언어. DB를 교체하는 것이 아닌 프론트엔드와 DB 사이에 존재하는 레이아웃. restful api 에서 받은 정보를 조건에 따라 가공, 설정한 뒤 프론트엔드로 전달하는 것.

gatsby

리액트 앱을 서버 사이드 렌더링 할 수 있게 해주는 프레임워크 중 하나.

gatsby Link API

gatsby는 Prefetch를 통해 페이지에서 사용할 리소스의 로딩 속도를 높일 수 있다. gatsby Link API 에서 제공하는 Link 컴포넌트를 사용하면 페이지를 로드한 뒤
현재 페이지에서 사용되는 모든 링크를 찾은 후, 각 링크의 페이지를 미리 로드한다.
이를 통해 더 높은 사용자 경험을 제공할 수 있게 된다.

- 2021/01/09 React 스터디

React 디렉토리 이해하기

  • node_modules: CRA를 구성하는 모든 패키지가 설치되는 위치이다.
  • package.json: 설치한 라이브러리, 패키지의 간단한 정보를 기록하는 파일이다.
  • .gitignore: github에 push 하지 않을 파일을 작성하는 파일이다.
  • package-lock.json: 패키지 버전들을 자동으로 관리하는 역할을 한다.
  • public: index.htnl 파일을 포함하고 있다. CRA를 배포하면 실제 서버에 배포되는 폴더이다.
  • src: index.js 파일을 포함하고 있다. 처음 보여줄 컴포넌트를 이곳에서 설정한다.

    • assests: 프로젝트에서 사용하는 자원들을 저장하는 위치.

    • components: 넓은 범위의 컴포넌트 저장.

    • pages: 페이지 단위로 분리된 컴포넌트 폴더.

      components vs pages

      • 여러 페이지에서 동시에 사용되는 컴포넌트를 components 폴더에서 관리.
      • 페이지 컴포넌트의 경우 pages 폴더에서 관리.
      • 어떤 페이지 내에서 단독으로 사용하는 컴포넌트의 경우는 예외적으로 해당 페이지 폴더 하위에서 관리.

React 디렉토리 구조 설계 방법

  1. 기능 별 그룹화: 개발자가 설정한 기능 별로 그룹화하여 분리한다.
    예를 들면, 메인 화면에 쓰이는 모든 파일을 하나의 폴더 내에 위치시킨다.

  2. 파일 유형 별 그룹화: 컴포넌트 그리고 api 파일을 분리한다.

- 2021/01/10 ES6 스터디

강의: https://www.inflearn.com/course/es6-%EA%B0%95%EC%A2%8C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

ES6

ES6 == ES2015. 이후 ES2016, ES2017도 존재하지만, ES2015에서 큰 변화가 생겼다.
ES6를 지원하지 않는 브라우저의 경우 babel를 사용하면 ES5로 변환하여 호환 가능하게 할 수 있다.
많은 라이브러리가 ES6 문법으로 작성되어 있다.

let, const

공통점: 블록 범위 내에서만 존재한다.

  • let
    1. 동적 변수이다. 변수 수정 O. 값이 바뀔 수 있는 여지가 있는 값에 설정한다.
  • const
    1. 정적 변수이다. 변수 수정 X(단, 배열과 오브젝트는 수정 가능). 고정 값을 사용할 때 설정한다.

string Method

  • A.startsWith(B): A가 B로 시작하는지 bool 형으로 반환.
  • A.endsWith(B): A가 B로 끝나는지 bool 형으로 반환.
  • A.includes(B): A에 B가 포함되어 있는지 bool 형으로 반환.

for of, for in

  • for of: 반복 가능한 객체(Array, Map, Set, String, TypeArray, arrguments 객체 등..)을 반복하는 기능 수행.
  • for in: 객체의 속성 또는 배열의 요소에 대해 반복하는 기능 수행.

for of 구문은 루프 구문이 요소들만 순회되는 것이 아니라 프로토타입 체인도 순회하기 때문에
for in 구문을 사용하는 것이 좋다.

spread operator

let pre = ["a", "b", "c"]
let newData = [...pre]
console.log(pre === newData) // false

기존의 참조에서 메모리에 새로운 공간을 할당한 뒤 기존의 값을 그대로 복사한다.

from Method

function addMark() {
  let newArray = Array.from(arguments)
  let new Data = newArray.map(function() {
    return value + "!"
  })
  console.log(newData)
}

addMark(1,2,3) // ["1!", "2!", "3!"]

arguments와 같은 배열 역할을 하는데 배열은 아닌 가짜 배열을 진짜 배열로 바꾸는 역할.

실습1

filter, includes, from을 사용해서 문자열 'e'가 포함된 배열을 만들어서 반환하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>apple</li>
    <li>orange</li>
    <li>banana</li>
    <li>strawberry</li>
  </ul>
</body>
</html>
const print = () => {
  let newArray = [];
  const items = document.querySelectorAll("li");
  const listArray = Array.from(items);
  const filteredArray = listArray.filter(items => {
    return items.innerText.includes("e");
  })
  
  for(let idx in filteredArray) {
    newArray[idx] = filteredArray[idx].textContent;
  }
  console.log(newArray);
}
print() // ["apple", "orange", "strawberry"]

- 2021/01/11 ES6 스터디

Destructing (구조 분해 할당)

  1. Array
const data = ['a','b','c','d']
const [A,,B] = data
console.log(`${A},${B}`) // "a,c"

2.Object

const info = {
  name: "lee",
  age: 23, 
}
const {name, age} = info
console.log(`name = ${name}, age = ${age}`) // "name = lee, age = 23"

Set

중복없이 유일한 값을 저장하려고 할 때 사용

let mySet = new Set()

mySet.add('a')
mySet.add('b')
mySet.add('c')

console.log(mySet.has('a')) // true

mySet.forEach(v => {
  console.log(v) // "a" "b" "c"
})

mySet.delete('a')

mySet.forEach(v => {
  console.log(v) // "b" "c"
})

WeakSet

참조만 가지고 있는 객체만 저장 가능.
객체 형태를 중복없이 저장하려고 할 때 유용.

let obj = [1,2,3,4]
let obj2 = [5,6,7,8]
let data = {obj,obj2}
let ws = new WeakSet()

ws.add(obj)
// ws.add(111) // error
// ws.add('111') // error
ws.add(function() {})
ws.add(obj2)
ws.add(data)

arr = obj

console.log(ws)

-2021/01/12 ES6 스터디

Template literals

`` 로 선언.

런타임 시점에서 일반 자바스크립트 문자열로 처리/변환.

const data = [
  {
    name: "lee",
    age: 23,
  },
  {
    name: "kim",
    age: 20,
  }
]

const temp1 = `name is ${data[0].name}, age is ${data[0].age}`
const temp2 = `name is ${data[1].name}, age is ${data[1].age}`

console.log(temp1) // "name is lee, age is 23"
console.log(temp2) // "name is kim, age is 20"

Tagged Templates

const data = [
  {
    name: 'coffee-bean',
    order: true,
    items: ['americano', 'milk', 'green-tea'],
  },
  {
    name: 'starbucks',
    order: false,
  }
]

function fn(tags, name, items) {
  if(typeof items === "undefined") {
    items = "주문 가능한 상품이 없습니다"
  }
  return (tags[0] + name + tags[1] + items + tags[2])
}

data.forEach(v => {
  let template = fn`<div>welcome ${v.name} !! </div>
<h2>주문가능목록</h2><div>${v.items}</div>`
  
  console.log(template)
})

/*
tags[0] => "<div>welcome "  
name => v.name  
tags[1] => "!! </div><h2>주문가능목록</h2><div>"  
items => v.items  
tags[2] => "</div>"
*/

Arrow Function

'function() {}' 를 '() => {}' 으로 축약해서 사용.
return 문 생략 가능.

let arr1 = [1,2,3,4,5].map(function(value) {
  return value * 2
})

let arr2 = [1,2,3,4,5].map(value => value * 2)

console.log('arr1: ' + arr1) // "arr1: 2,4,6,8,10"
console.log('arr2: ' + arr2) // "arr2: 2,4,6,8,10"

Arrow Function 에서 this

자바스크립트에서 function() {} 내부의 this는 전역 객체를 가리킨다.
ES6에서 등장한 화살표 함수인 () => {} 내부의 this는 정적으로 결정되기 때문에
항상 상위 스코프의 this를 가리킨다.

Function Default Parameters

인자 부분에서 기본 값을 설정할 수 있다.

const sum = (a, b=1) => { return a * b }
console.log(sum(3)) // 3
console.log(sum(2, 8)) // 16

Rest Parameters

가짜 배열인 arguments를 진짜 배열로 바꿔준다.

function checkNum(...argArray) {
  console.log(toString.call(argArray)) // "[object Array]"
  const result = argArray.every(v => typeof v === "number")
  console.log(result) // false
}

const result = checkNum(10, 20, 30, 40, "50");

Class

이전의 생성자 기능을 대체.
클래스 내 생성된 메서드는 프로토타입에 저장.
실제로 클래스로 생성하더라도 다른 언어처럼 클래스가 아닌 함수이다.

- 2021/01/15 글쓰기 레이아웃 디자인

링크: https://www.figma.com/file/rQxKCHRarxfoFdZzX3R3XL/Untitled?node-id=0%3A1

- 2021/01/21 CSS 연습

flexbox 연습

- 2021/01/22 블로그 프로젝트

GitHub: https://tnemnorivnelee.github.io/blog-project/

파트: 게시글 작성 페이지.
페이지 레이아웃 및 적응형 상단바 구현.
태블릿 사이즈: 768px / 모바일 사이즈: 576px

- 2021/01/29 ES6 스터디

module (import & export)

- 2021/01/30 블로그 프로젝트

파이어베이스 간이 구축

GitHub: https://tnemnorivnelee.github.io/blog-project/public/post

- 2021/02/04 블로그 프로젝트

게시글 작성 페이지 설명

Summernote 텍스트 에디터 사용.

<!-- Summernote script & CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-bs4.min.css" rel="stylesheet">
  <script src="./summernote-bs4.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lang/summernote-ko-KR.js"></script>
 ...
 ...
 ...
<!-- html -->
 <textarea id="summernote" name="editordata"></textarea>

Summernote을 선택한 이유

  1. 무료 오픈소스 텍스트 에디터
  2. 글 작성 시, 요구되는 기본적인 기능들이 대부분 내장.
  3. 한국인 개발자들이 개발.
  4. 커스텀하기 쉽고, 많은 예제들을 쉽게 서칭 가능.

- 2021/02/08 블로그 프로젝트

로그인 기능 및 권한 부여

20220209_231811

접근 권한이 없는 유저가 게시글을 작성하거나 수정하기 위해 게시글 작성 페이지로 접근하는 것을 차단.

⚠️ **GitHub.com Fallback** ⚠️