state

• 화면에 보여지는 데이터들의 저장소
• state안에 / 밖에 넣어야 할 데이터가 다르다.
• state에 데이터를 넣는다? -> 변화를 주고 싶어서 넣는 것(동적)
• 메소드를 활용해서 변화를 줄 수 있다는게 가장 큰 특징
• 리액트는 setState가 호출되야 새로 render()를 호출한다. 때문에 state를 바꾸어줄땐 반드시 setState로!
• 여담 : 리액트에서 refresh를 하면 state값이 다시 초기화 되기 때문에 가능하면 refresh를 하면 안됨
• 부모에서 state만들 때 constructor을 굳이 선언 안 해줘도 됌

props

• 인스타 feed창 같음.
• 여러개를 재사용 할건데 똑같은 틀만 만들어놓고 안에 있는 데이터를 바꾸어야한다
• 각각의 컴포넌트에 데이터를 넘겨주는 객체
• console.log(this.props.키값)
• 키값을 정해주는 방법? : 부모컴포넌트에서 정해줌
• `state = {image_url: ''}'
• `
• 자식에서 this.props.image 로 접근
• props도 자식 컴포넌트에서 변화가 있으면 state와 마찬가지로 다시 render가 된다.
• react는 단방향이라 위에서 아래로 쭉 데이터가 내려온다.

map

• map을 가지고 컴포넌트 재사용
• 컴포넌트 배열의 각각의 데이터가 다르다?
• 리액트 파일 참고

자식

import React, { Component } from 'react';

class Card extends Component {
  render() {
    console.log("Card", this.props)
    return (
      <>
        <div>Title : {this.props.title}</div>
        <div>Number : {this.props.number}</div>
        {/* <div>{<Child title={this.props.title}</div> 
        이것처럼 하면 컴포넌트 안에 컴포넌트 자식으로 줄 수 있다.
        하지만 이걸 계속하면 불필요한 렌더가 계속 되기 때문에 비추
        불필요한 렌더를 막아주는 방법이 있는데 그건 나중에! 이걸 최적화라고 한다.*/}
      </>
      // 만약 자식에서 부모로 넘겨주고 싶을 땐 어떡해?
      // 만약 input정보들을 모아서 회원가입을 해야하는데, 이건 어떡해?
      // 아예 부모에서 state를 관리한다. 
      // 부모에서 onchange를 만들어 준다음에 함수 자체를 자식에다 props로넘겨주면
      // props의 키값으로 함수를 넣어준다. 
      // 인자가 부모로 간다는 말이고 부모에서 setState를 해주면 된다.

    )
  }
}
export default Card;

부모

import React, { Component } from 'react';
import Card from './Card'

const arr = [
  {title : 'hello', number : 1},
  {title : 'hey', number : 2},
  {title : 'yo', number : 3},
];

export default class index extends Component {
  constructor() {
    super();
    this.state = {
      text: "abc from 부모"
    }
  }

  render() {
    //state도 여기서 확인 가능
    //render에는 바뀐 state값이 있을 수 밖에 없다.
    //바뀐 state값은 JSX가 return된다.
    console.log(this.state.text)

    return (
      <div>
        {arr.map(el =>{
          return <Card title={el.title} numver={el.number}/>
          //el에 객체가 들어오는거니 el.title 처럼 접근해줘야.
          //객체에는 순서가 없기 때문에 인덱스를 지정해주지 않으면 오류가 난다. 
          //이 키값이 순서대로 절대 날 수 없다. 
        })}
      </div>
    )
  }
}
/*
mapTest = () => {
  const arr = [1, 2, 3, 4, 5];
  //기준이 되는 배열(map이 들어가는 것은 반드시 배열이어야한다)
  //for문과 비슷해요!
  arr.map((num, index) => { //초기엔 num=1, index=0 인것!
    //map은 배열을 받아와줘야한다. 즉 함수 인자. 이름을 마음대로 지어줘도 된다.
    //map 콜백함수의 두 번째인자로 index를 받아준다. 배열의 index
    return num
    //우리는 여기서 컴포넌트를 return 해준다. 
  });

  /*콜백함수란? : 당장 호출하는게 아니라 나중에 호출하고 싶을 때 
    예를들어 이벤트. 만약 클릭이 됐을 때 실행시키고 싶으면 인자를 함수로 받는다
    hello();
    hello.addEventListener('click', () => {})
    hello.addEventListener('click', hello) : ()이 아니라 함수를 정의만 해주고 이
    이벤트가 일어났을때 위에있는 hello 함수를 호출해주는 것
  */
  /*
mapTest = () => {
  const arr = [1, 2, 3, 4, 5];
  //기준이 되는 배열(map이 들어가는 것은 반드시 배열이어야한다)
  //for문과 비슷해요!
  arr.map((num, index) => { //초기엔 num=1, index=0 인것!
    //map은 배열을 받아와줘야한다. 즉 함수 인자. 이름을 마음대로 지어줘도 된다.
    //map 콜백함수의 두 번째인자로 index를 받아준다. 배열의 index
    return num
    //우리는 여기서 컴포넌트를 return 해준다. 
  });

  /*콜백함수란? : 당장 호출하는게 아니라 나중에 호출하고 싶을 때 
    예를들어 이벤트. 만약 클릭이 됐을 때 실행시키고 싶으면 인자를 함수로 받는다
    hello();
    hello.addEventListener('click', () => {})
    hello.addEventListener('click', hello) : ()이 아니라 함수를 정의만 해주고 이
    이벤트가 일어났을때 위에있는 hello 함수를 호출해주는 것

  */

비동기

결과를 기다리면 너무 지체가 되기 때문에 다음줄로 넘어가버림 만약 결과값이 들어오면 이걸 가지고 사용

fetch

• 엄청 많은 데이터가 있으면 이걸 자바스크립트 파일로 가지고 있다는것은 말도안됨
• 데이터베이스에서 사용하겠지?
• 데이터 베이스에서 요청을 하는것
• 데이터 파일을 state를 통해서 받아와주는것
• 결국 비동기 처리를 위한것

API 호출

• JSON 데이터를 쓰는 이유: 모든 언어의 객체(딕셔너리)와 비슷하기 때문

mock데이터.

화면구현을 위해서 백엔드에서 받아온게 아니라 직접만든 데이터

과제설명

• 받자마자 npm install 해줘야함.

• 깃 이그노어가 있어서 npm 다시 받아줘야함.

• package.json 에 있는 파일 받아야함.

• 브랜치 만들어거 작업하기

• pull request 하기

• git branch feature'이름'

• gir checkout branch'이름'

• add ,commit

• git push origin feature'이름'

암호화를 하는 방법.

• HTTP를 그냥 쓰면 보안이 적용 되있지 않아서 HTTPS로 SSL을 적용하여 암호화(인증서발급) HTTP+Secure. 보안적 통신이 요구 될때는 S를 붙이는 경우가 많다. SSL을 무료로 발급하는 사이트가 있어서 찾아보면 좋을것이다.
• 해싱을 통해 암호화

암호화? : 바로 알아 볼 수 없게 만드는것

1. 단방향 해쉬

   • 본래 해쉬는 빠른 자료 검색, 데이터 위변조 체크를 위해서 쓰이지만, 복원이 불가능한 단방향 해위함수는 암호화에 사용된다.
   • SHA-256이 현재 가장 많이 쓰이는 해싱.
   • 이를 이용해서 해슁을 하면 식별이 불가능해 보이니까 완벽해보이지만, 같은 알고리즘으로 풀어보면 항상 같은 결과가 도출합니다.
   • 이같은 허점을 보완하고자 비크립트의 salting과 Key Stretching이라는 아이디어가 생겨났다.

2. bcrypt

   • 복호화 할 수 없는 라이브러리
   • Salting & Key Stretching의 대표적인 라이브러리다.
   • salting
     • 비밀번호와 임의로 생성한 문자열(Salt)를 함쳐서 해싱하여 이해시를 저장하는 방법.
     • 자바스크립트도 지원 된다!
     • 입력한 비밀번호+임의로 생성한 문자열(Salt)를 합쳐서 해싱
     • 해커를 막기 위해서 Salting에 쓰인 해싱을 여러번 반복해서 늘린다. 이를 키 스트래칭(Key Stretching) 이라고 한다

인가는 무엇일까요?

사용자를 식별하기 위한 표현

• 로그인인한 사용자만 이용할 수 있는 기능을 인가라고 한다.
• 인가의 매개체는 JSON Web Token 일명 JWT
• 저장되지 않기 때문에 자주 쓰인다.
• (헤더 . 내용 . 서명) 의 구조로 되어있다.
  • 헤더 : 비암호화
  • 내용 : 비암호화
  • 서명 : 암호화
  • 프론트에서 로그인 토큰이 발행되면 위와같이 헤더. 내용. 서명으로 가지고 있다.
  • 저장만 해두고 백앤드에게 앤드포인트가 있다면 헤더값에다가 토큰을 키 주고 인가를 해준다.
  • 실제로 서비스를 만들 때는 세 군데중 하나에 저장해주고 헤더에 넘겨야지 요청을 수행할 수 있다.
  • 헤더에 넘길 키는 프론트,백에서 약속한 키로 정해주자.

1.리액트의 폴더구조

React는 재사용이 가능한 Components로 요소를 분리해 놓는게 가장 중요하다. 때문에 파일을 효과적으로 나누어 폴더 분류를 하는게 중요한데, 나는 아래와 같이 인스타그램 클론 프로젝트 폴더를 분류했다.

• components : Header, Footer와 같이 모든 페이지에서 재사용 가능한 컴포넌트
• images : 웹에서 사용할 모든 이미지
• pages : 특정 페이지에서 사용되는 컴포넌트. 그 안에서만 재사용 되는 컴포넌트는 Article안에서 관리한다.
• styles : reset, common, font 등 공통의 스타일.

2. SCSS

그냥 CSS를 사용해도 되지만, scss를 이용하여 유지보수가 쉽도록 만들어보자. Sass와 SCSS는 연산, 중첩, 상속과 같은 기능을 사용할 수 있어 css의 구조를 가독성 있게 만들어주고 유지보수가편리하도록 만들어준다.

SASS vs SCSS

// SASS
.wrapper
  width: 100px
  height: 200px
  .content
    color: white
    float: left


// SCSS
.wrapper{
    width: 100px;
    height: 200px;
    .content{
        color: white;
        float: left;
    }
}

이 둘은 중괄호, 세미콜론 등과 같은 차이가 있는데 사용하기 익숙한 SCSS로 리액트를 작성해보록 한다.

Nestig

부모요소를 반복적으로 기술하지 않고 부모 {}안에 자식요소를 위치시켜 사용한다.

& 부모선택자

&는 부모선택자라는 뜻이다. &>div 처럼 부모선택자 안의 요소를 쉽게 선택할 수 있게 해준다.

&:hover

부모(&)에 :속성을 부여해줄 때 사용한다.

li{
    float:left;
    display:inline-block;
    text-align:center;
    color:white;
    width:50%;
    line-height:50px;
    &:hover{
        font-weight:bold;
        background-color:$fontcolor*2;
        color:$fontcolor;
        height:49px;
    }

$변수

$변수를 이용하여 공통된 속성을 재활용 할 수 있다.

$font-color: red;
.content{
    color: $font-color;
    float:left;
}

@mixin

@mixin을 사용하면 공통된 속성의 묶음을 재활용 할 수 있다. 다음과 같이 미디어 쿼리를 사용할 때 매우 유용하게 쓰일 수 있다.

$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
​
@mixin mobile {
  @media screen and (min-width: $sm) {
    @content;
  }
}
​
@mixin tablet {
  @media screen and (min-width: $md) {
    @content;
  }
}
​
@mixin desktop {
  @media screen and (min-width: $lg) {
    @content;
  }
}
​
@mixin large-desktop {
  @media screen and (min-width: $xl) {
    @content;
  }
}

@extend

특정 선택자를 상속할 때 사용한다.

.box{
    padding:20px;
    border:1px solid #333;
}

.news-box{
    @extend .box;
    background-color:#eee;
}

.list-box{
    @extend .box;
    background-color:#000;    
}

typography로 정해놓은 속성 extend하기

아래와 같이 h1,h2,h3등등과 같은 태그들의 속성들을 typography 파일로 전역적으로 사용하기 위해 설정해두고, 다른 파일에 extend하여, 다른 속성들을 적용시킨다.

//typography.css
.h1 {
  font-size: 2.0em;
}
​
.h2 {
​
}
​
.h3 {
  margin-top: 2.1em;
  margin-bottom: 1.3em;
​
  font-size: 1.3rem;
  font-weight: 700;
}
​
.h4 {
  margin-top: 1.3em;
  margin-bottom: 0.9em;
​
  font-size: 1.15rem;
  font-weight: 600;
}

//index.css
 h5 {
      @extend .h5;
      font-weight: bold;
      padding-top: 1.25rem;
      border-top: 1px solid $color-lightgray;
    }

@import

하나의 파일로 CSS관리하는 것에는 어려움이 있기 때문에 @import기능을 활용하여 코드의 재활용, 유지보수에 도움을 준다. @import 'reset.css 처럼 확장자를 붙여도 되고 @import 'reset' 처럼 생략도 가능하다.

@if

조건 분기가 가능하다.

$num : two;
div{
    @if $num == one{
    color: blue;
    }else if $num == two{
    color: red;
    }@else{
    color: black;
    }
}

@for

반복문 사용이 가능하다

@for $i form 1 thrugh 3{
    .item-#{$i}{
    width: 2em * $i;
    }
}

Transfer : ~를 전송하기 위한 Protocol : ~하기로 상호간의 약속한것

하이퍼텍스트(HTML)문서를 교환하기 위해 만들어진 통신규약(protocol)

• HTTP란 웹상에서 네트워크로 서버끼리 통신을 할 때 어떠한 형식으로 서로 통신을 하자고 규정해놓은 통신 형식 혹은 통신 구조를 뜻한다.
• 프론트앤드와 백앤드 서버간의 통신 || 백앤드와 프론트앤드 서버간의 통신에도 사용된다.
• HTTP는 TCP/IP 기반으로 되어있다. 꼭 HTTP를 쓰지 않아도 된다. FTP(File Transfer Protocol)같은걸 쓸 수도 있다.

HTTP의 통신 방식

1) 요청과 응답

• HTTP는 기본적으로 요청/응답(request/response)구조로 되어있다.
• 요청을 하고 응답을 하는것이 하나의 통신이다.
• 클라이언트와 서버의 모든 통신이 요청과 응답으로 이루어 진다.

2) Stateless

• 말그대로 state(상태)를 저장하지 않는다

HTTP통신은 굉장히 이기적이다. 요청이 오면 그에 응답을 할 뿐 이전에 했던 통신을 하지 못한다. 이전의 통신을 저장하지 않는다. 네이버와 HTTP통신을 20번 했더라도 하나도 기억을 못한다. HTTP는 여러 요청/응답끼리 연결되어 있지 않다. 로그인을 했지만, 다른 통신은 로그인을 했다는 사실 조차 기억하지 못한다.

그럼 이걸 어떻게 해결하지?

요청을 보낸 사람이, 요청을 보낸 사람이라는 정보를 해당 요청에 첨부,저장해서 보낸다! 이러면 이걸 브라우저의 쿠키(긴정보)나 세션(메모리상에 저장. 브라우저를 끄면 사라짐)에 저장한다.

HTTP Request 구조

HTTP Ruest 메세지는 크게 세부분으로 나뉘어져있다

• Start Line : 말 그대로 HTTP의 첫 라인
  • HTTP Method : 해당 리퀘스트가 의도한 액션을 정의하는 부분 (GET, POST등)
  • Request target : 해당 request가 전송되는 목표 uri (/login)
  • HTTP Version : 사용되는 버전. (1.0, 1.1, 2.0 등이 있다)

    GET /serch HTTP/ 1.1

• Header : 해당 request의 추가 정보를 담고 있는 부분 key : value으로 이루어져있다. (HOST: google.com)
  • Host : 요청이 전송되는 서버의 도메인 ex)google.com
  • User-Agent : 요청을 보내는 클라이언트의 대한 정보 : 예를 들어 웹브라우저에 대한 정보 우리가 어떤 컴퓨터를 쓰는지, 어떤 사이트에서 어떤 쇼핑을 했는지 retargeting 해서 관련 맞춤 광고를 띄우는데 사용된다. 크롬을 더이상 이 정보를 보내지 않겠다고 선언했다고...
  • Accept : 해당 요청이 받을 수 있는 응답 타입을 지정해주는것 ex) gzip, deflate
  • Accept-Encoding: 데이터가 크면 압축을 해서 보내는데, 사용 가능한 압축 확장자를 알려준다.
  • Connection : 해당 요청이 끝난 후 서버와의 네트워크 연결을 유지/종료의 정보
  • Content-Type : 해당 요청이 보내는 body의 타입. JSON을 보내면 application/json
  • Content-Length : body 메세지의 길이

Accept: application/json
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Type: application/json
Content-Length: 257
Host: google.com
User-Agent: HTTPie/0.9.3

• Body : 해당 리퀘스트의 실제 메세지와 보낼 내용
  • Body가 없는 Request도 있다 예를 들어, GET request들은 대부분 body가 없는 경우가 많다.

구조 확인#############################################

POST /payment-sync HTTP/1.1
Accept: application/json
Accept-Encoding: gzip, deflate
Connection: keep-alive
Content-Length: 83
Content-Type: application/json
Host: intropython.com
User-Agent: HTTPie/0.9.3
{
    "imp_uid": "imp_1234567890",
    "merchant_uid": "order_id_8237352",
    "status": "paid"
}

HTTP Response 구조

request와 마찬가지로 크게 3부분으로 구성되어 있다.

• Status line : Response의 상태를 간략하게 나타내주는 부분

  • Status code: 응답 상태를 나타내는 코드. 숫자로 되어 있는 코드. 예를 들어, 200
  • Status text: 응답 상태를 간략하게 설명해주는 부분. 사람이 응답상태를 숫자로만 이해하기 힘들기 때문에 글로 표기 예를 들어, Not Found

    HTTP/1.1 404 Not Found

• Headers : Response의 headers와 동일하다.

  • 다만 response에서만 사용되는 header 값들이 있다. 예를 들어, User-Agent 대신에 Server 헤더가 사용된다.

• Body : Response의 body와 일반적으로 동일하다.

  • Request와 마찬가지로 모든 response가 body가 있지는 않다. 데이터를 전송할 필요가 없을경우 body가 비어있게 된다.

구조확인#############################################

HTTP/1.1 404 Not Found
Connection: close
Content-Length: 1573
Content-Type: text/html; charset=UTF-8
Date: Mon, 20 Aug 2018 07:59:05 GMT
<!DOCTYPE html>
<html lang=en>
  <meta charset=utf-8>

HTTP Method

• GET
  • 말그대로 데이터를 요청 보내는 것
  • 가장 많이 사용되는 메소드 중에 하나
  • 데이터 수정, 삭제 하지 않고 데이터를 받아올 때만 사용
  • 보내줄 데이터가 없기 때문에 Body가 비어있을 수 있믕
• POST
  • 데이터 수정, 삭제, 추가를 할때 사용되는 메소드
  • 수정, 삭제, 추가를 하기 때문에 리퀘스트 body가 포함된다
• DELETE
  • 특정 정보를 삭제 요청하는 메소드
• PUT
  • POST에 밀려 잘 안쓰임

HTTP Status Code

• 200 OK
  • 가장 자주 보게되는 status code.
  • 문제없이 다 잘 실행 되었을때 보내는 코드.
• 301 Moved Permanently
  • 해당 URI가 다른 주소로 바뀌었을때 보내는 코드.
  • HTTP/1.1 301 Moved Permanently
  • Location: http://www.example.org/index.asp
• 400 Bad Request
  • 해당 요청이 잘못된 요청일대 보내는 코드.
  • 주로 요청에 포함된 input 값들이 잘못된 값들이 보내졌을때 사용되는 코드.
  • 예를 들어, 전화번호를 보내야 되는데 text가 보내졌을때 등등.
• 401 Unauthorized
  • 유저가 해당 요청을 진행 할려면 먼저 로그인을 하거나 회원 가입을 하거나 등등이 필요하다는것을 나타내려 할때 쓰이는 코드.
• 403 Forbidden
  • 유저가 해당 요청에 대한 권한이 없다는 뜻.
  • 예를 들어, 오직 과금을 한 유저만 볼 수 있는 데이터를 요청 했을때 등.
• 404 Not Found
  • 요청된 uri가 존재 하지 않는다는 뜻.
  • host가 아니라 request target이 잘못된것
  • host는 존재하는데 요청이 이상하다는것
• 500 Internal Server Error
  • 서버에서 에러가 났을때 사용되는 코드.
  • API 개발을 하는 백앤드 개발자들이 싫어하는 코드.

HTTP 확실히 알고 넘어가기

1. HTTP는 stateless이다.
2. 백앤드 <-> 프론트앤드 간의 통신에 필요하다.
3. HTTP가 기본적으로 요청/응답(request/response) 구조로 되어있다.
4. 백앤드와 백앤드끼리의 요쳥에도 사용할 수 있다.
5. 클라이언트에서 서버로 데이터를 전달하려면 HTTP request의 body에 넣어 전달한다.
6. 클라이언트에서 서버로 받은 데이터는 HTTP response를 확인한다
7. 클라이언트가 요청을 보내고 응답을 받은 후, 이전 응답을 확인할 수 없다.
8. HTTP Request 메세지 중에서 해당 Request의 실제 메세지/내용이 포함된 것은 body이다.

참고링크

데이터 구조란 무엇인지, 왜 중요한지, 그리고 데이터 구조의 첫 번째 Array와 Tuple에 대해 배워봅시다.

✔️Data Structure의 개념 필요성, 그리고 다양한 종류의 자료구조에 대해 이해한다. ✔️Array의 개념과 장점, 단점, 그리고 언제 사용하면 좋은지 이해한다. ✔️Tuple의 개념과 장점, 단점, 그리고 언제 사용하면 좋은지 이해한다.

Data Structure(자료 구조)란 무엇인가?

자료구조란 데이터에 편리하게 접근하고 조작하기 위한 데이터를 저장하거나 조직하는 방법입니다.

• 자료구조의 종류에는 여러가지가 있습니다. 하지만 모든 목적에 부합하는 자료구조는 없기 때문에
• 각 자료구조가 가지는 장점과 한계를 이해하고 상황에 맞는 올바른 자료 구조를 선택하고 사용해야 합니다.*
• 자료구조는 언어별로 지원하는 모양이 다릅니다.
• 언어별로 지원하는 자료구조가 다르더라도 개념을 올바르게 알고 있으면 해당 언어에 맞추어서 사용 가능합니다.

왜 Data Structure을 사용하는가?

우리는 무언갈 담기 위해 다양한 가방을 이용합니다. 여행을 갈 때는 많은 짐의 양을 한꺼번에 담을 수 있는 큰 캐리어, 화장품을 넣을 때는 작은 파우치 등 내용물에 맞는 적절한 가방을 사용합니다

• 이처럼 자료구조란, 상황과 맥락에 맞게 데이터를 담을 수 있는 적절한 구조를 말합니다.
• 데이터를 맞는 적절한 자료 구조를 사용하는 것은 전체 개발 시스템에 굉장히 큰 영향을 끼칩니다.

Data Structure의 분류

• Primitive Data Structure(단순 구조) : 프로그래밍에서 사용되는 기본 자료구조.
  실제로 컴퓨터는 0과 1만을 다룰 수 있기 때문에 다를 수 있는 기본형의 종류는 세 가지에 불과합니다.
• 숫자, 문자, True/False, 이것이 컴퓨터가 다를 수 있는 기본 자료형의 종류입니다*
• Non-Primative Data Structure(비단순 구조) : 단순한 데이터를 저장하는 구조가 아니라 여러 데이터를 목적에 맞게 효과적으로 사용하는 구조
  • Linear Data Structure(선형 구조) : 저장되는 자료의 전후 관계가 1:1 (ex. List, Stacks, Queues)
  • Non-Linear Data Structure(비선형 구조) : 데이터 항목 사이의 관계가 1:n 또는 n:m, 데이터가 트리 형태로 저장되어있는 자료구조 (ex. Graphs, Trees)

일반적으로 가장 자주 사용되는 데이터 구조

• Array(Python에서는 List)
• Tuple
• Set
• Dictionary
• Stack & Queue
• Tree

1. Array(List)

1) Array(List)란?

가장 기초적이고 단순하면서 가장 자주 사용되는 자료 구조입니다. JavaScript에서는 Array, Python에서는 List

2) Array의 특징

Array는 순차적(ordered)으로 데이터를 저장할 때 사용하는 가장 일반적인 자료구조입니다.

• 순서가 상관 없더라도 서로 연결된 데이터들을 저장할 때 사용합니다.
• 자료 구조에 저장하는 데이터를 요소(element)라고 합니다.

기타 특징

• 삽입된 순서대로 저장됩니다. 새로 삽입되면 맨 뒤로 갑니다.
• 이미 생성된 리스트도 수정 가능합니다.(mutable)
• 동일한 값을 여러번 삽입 가능합니다.
• 다중차원 배열(Multi-dimentional Array)도 가능합니다 :Array의 요소가 Array가 될 수 있습니다

3) Array 내부 구조

Array의 가장 큰 특징은 순차적으로 데이터를 정리하는 것입니다.
이렇게 순서가 있다보니 당연히 순차적으로 번호(index)를 지정할 수 있습니다.
index는 0 부터 시작합니다. 마이너스 index는 맨 마지막 요소부터 시작합니다.
예를들어 -1은 맨 마지막 요소를 의미합니다

왜 Array는 데이터를 순차적으로 저장할까?

실제 메모리 상에서 즉 물리적으로 데이터가 순차적으로 저장되기 때문입니다 데이터가 순차적으로 저장되기 때문에

• index가 존재하며
• Indexing : index를 사용해 특정 요소를 읽어 들이는 것이 가능하고
• Slicing : 요소의 특정 부분, 즉 n~m인덱스까지 따로 분리해 조작이 가능합니다

4) 단점

Array는 indexing이 가능하다는 장점도 있지만 그러한 특성 때문에 단점도 존재합니다

1. 데이터의 삭제와 추가

• 삭제 : 순차적으로 담겨있는 데이터 중 특정 위치에 있는 중간 요소가 삭제되는 경우 삭제된 요소부터 뒤에 있는 모든 요소를 데이터가 잘려나간만큼 앞으로 당겨줘야합니다. 가래떡을 중간에 자르면 뒤에 있는 떡을 끌어와야 하나의 가래떡 처럼 보이겠죠?

• 추가 : 추가도 마찬가지입니다. 특정 위치에 새롭게 요소가 추가되면 추가된 데이터만큼 그 뒤의 요소가 밀리게 됩니다.

• 결론 : Array에서의 데이터 삭제와 추가는 다른 자료구조에 비해 느릴 수 있습니다.

• 그렇기 때문에 Array는 데이터가 자주 삭제, 추가 되는 데이터를 담기에는 적절하지 않습니다.*

2. Array 리사이징

배열은 메모리가 순차적으로 채워지기 때문에 처음 생성될 때 메모리를 미리 할당합니다. 이를 pre-allocation이라고 부릅니다. 하지만 요소가 할당한 메모리보다 이상으로 많아진다면 아래의 과정을 진행합니다

• 만약 100개의 메모리 공간이 다 차서 100개를 추가해야 하는경우
• 200개 크기의 메모리를 생성후 > 기존 100개를 복사하고 > 그 다음 101번 부터 데이터가 순차적으로 추가됩니다.....

그럼으로 배열의 resizing은 상대적으로 시간이 오래 걸리는 작업입니다.

그렇기 떄문에 Array는 사이즈 예측이 잘 안되는 데이터를 다루기엔 부적합니다.

5) 언제 사용하면 좋을까?

• 순차열적인 데이터를 저장할 때
• 다차원 데이터를 다룰때(Multi-demensional Array)
• 어떠한 특정 요소를 빠르게 읽어야 할 때 -> index를 통해 빠르게 읽을 수 있음
• 데이터의 사이즈가 급변하지 않는 데이터일 때
• 요소가 자주 삭제되거나 추가되지 않을 때

6) 면접 기출 - Data Structure #1. 자료구조 & Array

자료구조의 정의와 중요한 이유를 설명하세요.

자료 구조란 데이터의 편리함 접근과 조작을 가능하게 하는 데이터를 저장하거나 조직하는 방법입니다. 문맥과 데이터의 종류에 따라 적절한 자료 구조를 사용하는 것은 전체 개발 시스템에 큰 영향을 미칩니다. 그렇기 때문에 자료구조의 다양한 종류와 각각의 장점을 한계를 잘 이해하고 상황에 맞게 올바른 자료 구조를 선택하고 사용하는 것이 좋습니다.

Array(List)의 가장 큰 특징과 그로 인해 발생하는 장점과 단점에 대해 설명하세요.

Array의 가장 큰 특징은 순차적으로 데이터를 저장한다는 점입니다. 이렇게 데이터에 순서가 있기 때문에 0부터 시작하는 index가 존재하며, index를 사용해 특정 요소를 찾고 조작이 가능하다는 것이 Array의 장점입니다. 반면에 이에 따른 단점도 존재하는데, 순차적으로 존재하는 데이터 중간에 요소가 삽입되거나 삭제되는 경우 그 뒤의 모든 요소들을 뒤로 밀거나 당겨줘야 하는 단점이 있습니다. 이러한 경우 메모리 상에서 이루어지는 작업이 다른 자료구조에 비해 커지기 때문에 Array는 정보가 자주 삭제되거나 추가되는 데이터를 담기에 적절하지 않습니다.

Array를 적용 시키면 좋을 데이터의 예를 구체적으로 들어주세요. (ex. 주식 차트) 구체적 예시와 함께 Array를 적용하면 좋은 이유, 그리고 Array를 사용하지 않으면 어떻게 되는지 함께 서술해주세요.

Array를 적용시키면 좋은 예로 주식 차트가 있습니다. 주식 차트에 대한 데이터는 요소가 중간에 새롭게 추가되거나 삭제되는 정보가 아니며, 날짜별로 주식가격이 차례차례 저장되어야 하는 데이터입니다. 즉, 순서가 굉장히 중요한 데이터 이므로 Array를 사용하지 않는 경우, 즉 순서가 없는 자료 구조를 사용하는 경우에는 날짜별 주식 가격을 확인하기 어려우며 매번 전체 자료를 읽어들이고 비교해야하는 번거로움이 발생합니다.

앞선 React설치 글을 보고 따라왔다면 해당 디렉토리을 VSCode로 열어보자.

public 디렉토리

public 디렉토리는 기본적으로 정적파일을 담는다. 웹브라우저상에 보이는 html파일들이나 img 등이 이 디렉토리에 담긴다. index.html을 열어보면

<div id="root"></div>

react를 통해 만든 컴포넌트들은 id가 root인 엘리먼트 안에 들어가도록 create-react-app이 지정해두었다. 물론 아이디 이름을 바꿀수도 있다. 개발자도구에서 id가 root인 div를 열어보면 react를 통해 만든 컴포넌트들이 내부에 포함 되어있는 것을 볼 수 있다. 그렇다면 이 root안에 들어가는 컴포넌트들은 어떤 파일을 열어야지 확인 할 수 있는지 알아보자.

src 디렉토리

index.js

파일을 열어보자.

<script>
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
serviceWorker.unregister();
</script>

하나하나 뜯어보자.

1) 돔 선택자를 기반으로해서 컴포넌트들을 index.html에 붙이겠다

document.getElementById('root')

2) React에서 만든 컴포넌트들 ===

<React.StrictMode>
    <App />
</React.StrictMode>,

3) 컴포넌트 모음 가져오기

import App from './App';

App.js

그렇다면 이 모든 컴포넌트를 가져오는 App.js는 무엇일지 열어보자

<script>
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render(){
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer">
            Learn React
          </a>
        </header>
      </div>
    );
  }
}
export default App;
</script>

이 코드에서 index.js에 있는 <App /> 사용자 정의태그 안에 들어가는 내용은 바로 App 클래스의 return된 값들이다.

❗️주의사항

1) 웹에서 실제로 보여지는 부분은 이 <div className="App">내부를 변경해서 사용한다 만약 당신이 이 div 안의 내용을 바꾸면. React 페이지에서 자동으로 리로드 해준다.

2)보여주고자 한 요소들은 만드시 <div>태그 안에 들어가 있어야 한다.

index.css

css를 다루는 파일이다. index.js에 임포트 해주자

import './index.css';

지금까지 자바스크립트에서 배운 객체, class, prototype 등등은 결국 react를 배우기 위한 초석을 닦았던 것이다. 프론트앤드 개발자를 노린다면 Veu, Angular, React중 하나 이상을 해야지 취업이 가능하다는건 구글에서 프론트앤드 개발자 되는 법만 검색해도 주루룩 나올것이다. 춘추전국시대같은 프론트앤드 시장에서 그나마 지금까지 굳건한 1등을 지키는것은 바로 React이다.

1. React.js?

React는 Facebook에서 내부적으로 개발하여 2013년에 오픈소스로 런칭한 JavsScript의 라이브러리이다.

2. JavaScript Framework의 발전

사용자 경험면에서 PHP의 단점을 극복하고자 JavaScript에선 DOM 객체 및 Ajax를 통한 데이터 통신 및 데이터 바인딩을 할 수 있는 프레임워크들이 나오기 시작했다. 대표적인 예로 Angular js, Backbone js등이다. 하나의 페이지에서 리소스를 다룰 수 있는 SPA(Single Page Application)이 인기를 얻으면서 이러한 프레임워크들이 발전해가기 시작했다.

기본적인 개념은 데이터를 받아오고, 기존에 렌더링 되어있던 데이터들과의 비교를 통해서 전체 DOM 객체를

비동기적(Asynchronous) 어떤 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가, 요청했던 작업이 종료되면 그에 대한 추가 작업을 수행하는 방식

으로 갱신해 줌으로써 서버에서 직접 소스코드를 받아와 렌더링 해줌으로, 리프레시가 되는 부분들 없이 사용자 경험적으로 더 좋고 부드러운 UX를 제공해 줄 수 있게 되었다.

3. 왜 React?

React는 철저한 뷰 라이브러리다. 기존의 JavaScript, 예를들어 Angular js가 MVC 형태를 모두 갖추고 있는 프레임워크라면 React는 철저하게 view단에만 집중한다.(프레임워크라기 보다 라이브러리 성격이 강함) 이는 오로지 DOM 객체의 갱신 및 이벤트 응답에만 관심이 있는 라이브러리라고 볼 수 있다.

4. React의 특징

React는 Angular js 등 에서 가지고 있는 view모델과는 다르게, DOM 업데이트를 효과적으로 처리할 수 있는 특징을 가지고 있다

1) JSX 2) 단방향 데이터 흐름 3) Virtual DOM

1) JSX(JavaScript XML)

JSX는 HTML과 유사한 문법을 보이고, React 컴포넌트에서 사용할 마크업을 작성하기 위한 문법체계로 사용한다. js에서 append 등의 DOM을 조작할 때, 여러 줄을 작성하게 되면, 문자열로 HTML 마크업 + 다음줄 같은 복잡한 방식으로 개발했던 때가 생각난다(...) React는 JSX를 사용함으로써, 문자열 형식으로 HTML 마크업을 표현하는 복잡한 방식이 아니라 HTML 마크업 그대로를 사용한다. 따라서 문자열로 바꾸거나 할 필요 없이 Javascript + HTML마크업을 사용하면 되는것이다.

2) 단방향 데이터 흐름

React는 기타 JavaScript framework와 다르게 데이터 흐름이 단방향으로 이루어져 있다.

Angular js를 살펴보면, 데이터의 변경을 framework에서 감지하고 있다가, 변경되는 시점에 DOM객체에 렌더링 해주거나, 페이지 내에서의 모델의 변경을 감지하여 JavaScrip 실행부에서 변경하는 등의 양방향 데이터 바인딩을 가지고 있다. 양방형 데이터 바인딩은 코드의 사용면에서 코드량을 크게 줄여주는 등의 장점이 있지만, 자체 실행 코드 내에서 데이터의 변화를 감지하여 DOM객체 전체를 렌더링 해주거나, 데이터를 바꿔주는 등의 실행으로 성능이 감소되는 비효율성이 생긴다.

React는 이러한 양뱡향 바인딩이 아니기 때문에 실행부 자체 내에서 데이터의 변화를 감지하지 않으며, 데이터에 변화가 오게 되면, 특정 함수를 실행시킴으로써 DOM 객체를 갱신한다. 따라서 성능에 관련되어 데이터 변화에 따른 성능 저하 없이 효율적으로 DOM 객체를 갱신해 줄 수 있는 장점이 있다.

3) VIRTUAL DOM

JavaScript MVC framework는 DOM 객체 자체에서 데이터 변화를 감지하고 DOM 객체를 수정하여 갱신한다. 이는 브라우저 내의 리소스를 사용하기 때문에 DOM 객체 갱신에 성능 저하가 일어날 수 밖에 없다.

React는 자체 실행 엔진에서 메모리상에 가상의 DOM객체를 생성하고, 단방향 데이터 흐름으로 인한 데이터 변경에 관련된 DOM 객체만 부분적으로 변경해주는 효율적인 알고리즘 체계를 가지고 있다. 따라서 브라우저 DOM 자체 내의 리소스를 사용하지 않고도 효율적으로 DOM을 갱신할 수 있는 장점을 가지고 있다.

결론

React는 뷰 컴포넌트 라이브러리이기 때문에 다양한 MVC framfework에도 활용할 수 있다. 이러한 React의 특징은 빠르고 효율적이기 때문에 많은 사람들이 React를 사랑할 수 밖에 없다.

리액트가 인기 있는 이유

• 어마어마한 생태계 : 사용하는 사람들이 많기 때문에 그에 따른 다양한 라이브러리가 쏟아져 나옴
• 사용하는 곳이 많다 : 에어비앤비, facebook, 야후.. 등등
• 한 번 사용하면 좋아하게 된다!

출처 : https://trustyoo86.github.io/react/2017/11/18/what-is-react.html

React설치

React공식사이트에 접속을 하고 시작하기를 눌러보자. 필자는 영어에 능숙하지 않기 때문에 우측 상단 nav의 rangauages를 한국어로 변경한 상태로 설치를 진행했다. 영어를 잘 몰라도 공식 사이트를 잘 활용할 수 있다(번역이 매끄러움)

https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app 자 이 사이트에 접속을 하면 위같은 페이지가 뜰 것이다. create-reate-app의 설명을 확인할 수 있다. 여기서 Create React App 을 클릭해보자. github페이지가 뜰것이다. Create-React-App Github

설치방법

공식 github에서 추천하는 방법 하지만 필자는 npx로 하는게 귀찮기 때문에 npm으로 설치했다.

npx create-react-app my-app cd my-app npm start

npm과 npx의 차이

• npm : 프로그램을 말 그대로 ‘설치'
• npx : 임시로 설치해서 딱 한번만 실행시키고 지우는 것을 반복 장점 : 가볍다, 항상 최신버전 유지

MAC OS 기준 설치방법

1) node js설치 (안정적인 LTS버전을 추천) 2) iTerm 실행 3) react를 설치할 폴더 만들기 4) 콘솔창에 cd 치고 폴더를 콘솔창에 끌어와서 React설치할 폴더 경로 설정 5) sudo npm install -g create-react-app (-g 글로벌로 설치할것이기 때문에 sudo로 권한 부여해준다) 6) 설치가 끝나면 에디터에서 폴더를 열어준다 (필자는 VSCode를 추천하는데, 자체 터미널을 사용할 수 있기 때문) 7) VSCode 터미널에 npm start 8) http://localhost:3000/ url로 웹사이트가 뜨면 성공!

개요

리눅스는 스웨덴계 핀란드인 프로그래머. 리눅스의 아버지로 유명하며, 분산 버전 관리 시스템인 Git을 개발한 리누스 토발즈에 의해 개발되었습니다.

인터넷과 함께 웹이 폭발적으로 성장하면서 저렴하고 가벼운 운영체제에 대한 수요가 폭발적으로 증가했습니다. 클라우드 컴퓨터가 등장하면서 이제 컴퓨터는 유동적으로 사용되는 소모품이 되가고 자연스럽게 이를 동작시킬 수 있는 운영체제에 대한 수요가 늘어났습니다. 냉장고나 화분처럼 사물이라고 생각한 것들에 초소형 컴퓨터가 들어가고 이러한 사물 인터넷의 시대의 맥락에서 오픈소스이고, 무료이며, 커뮤니티에 의해 빠른 속도로 발전하고 있는것이 바로 리눅스(Linux)입니다. 리눅스는 커널이라는 일종의 운영체제입니다.

리눅스 사용법

리눅스의 간단한 사용 방법을 알아보겠습니다.

리눅스의 루트 경로

리눅스는 tree형태로 구성되어있습니다. 최상위 디렉토리는 / 이며 그 아래 하위 디렉토리들로 구성되어있습니다.

리눅스의 홈 디렉토리

HOME이란 리눅스에서 가장 중요하고 기본이 되는 유저의 공간입니다. ehoh $HOME 이라는 명령은 언제나 나의 home위치를 알려줍니다.

리눅스에서 경로를 탐색하는 명령어

• cd 경로 : 원하는 경로로 이동
• cd ~ : 홈 디렉토리로 이동
• cd .. : 상위경로로 이동 = cd ./이동할디렉토리 : 현재경로에 위치한 디렉토리로 이동
• which 파일이름 : 절대경로로 검색한 것의 위치를 보여줌
• whereis 파일이름 : 상대경로로 검색한 것의 위치를 보여줌
• pwd : 현재위치를 절대 경로로 표시

절대경로 / 상대경로

• 절대경로 : root부터 시작해서 현재 위치까지의 경로 예)/Users/seongjeongmin/opt/miniconda3/bin/python, 서울특별시 송파구 송파대로 345
• 상대경로 : 자기가 있는 위치 기준에서의 경로 예)bin/python, 우리집에서 옆집

ls 명령어 옵션

• ls : 현재 디렉토리에서 파일 목록을 볼 수 있다.
• 파일명을 기준으로 내림차순 정렬하기 : ls -lr
• 특정 디렉토리의 모든 파일 확인하기 : ls -al
• 콤마(,)로 파일들을 구분하기 : ls -m
• 파일 끝부분에 파일형태를 표시하는 특수문자 표시하기 : ls -lF
• .(현재디렉토리)와 ..(상위디렉토리)를 제외하고 표시하기 : ls -aAl
• 파일의 UID, GID를 표시하기 : ls -n
• 소유그룹정보 제외하기 : ls -lG
• 한 줄에 한파일씩만 나열하기 : ls -1
• 파일의 끝에 ‘-’가 붙은 파일(백업파일)은 출력 제외하기 : ls -lB
• 가로길이를 지정하여 표시하기 : ls -w ??
• 서브디렉토리내의 모든 파일들도 함께 표기하기 : ls -lR
• 용량별로 내림차순 정렬 : ls -lS
• 용량별로 오름차순 정렬 : ls -lSr
• 확장자순으로 정렬하여 표시하기 : ls -lX
• 디스크저장 순서대로 출력하기 : ls -lU
• 심블릭 링크파일을 일반 파일형태로 출력하기 : ls -lL
• 최근 변경시간을 기준으로 정렬하기 : ls -lc
• 시간순서대로 표시 : ls -lt
• 사용시간 순서대로 표시 : ls -lu
• 시간표시를 자세히 보여주기 : ls --full-time
• 파일리스트 맨 앞에 파일 색인번호를 표시하기 : ls -li
• 가로로 나열하여 파일리스팅하기 : ls -x
• 세로로 나열하여 파일리스팅하기 : ls -C
• 파일을 KB 단위로 표시하여 파일리스팅하기 : ls -ls
• 특정디렉토리 이하의 모든 파일을 대상으로 용량별로 정렬하기 : ls -alRSh /backup
• 특정디렉토리 이하를 용량별로 정렬리스트하여 지정한 파일에 저장하기 : ls -alRSh /home>ls_list.txt

환경변수

• $ env : 환경변수를 보여주거나, 설정 혹은 삭제 하는 명령입니다. http://ss64.com/bash/env.html
• $ env NAME=VALUE : 현재 세션에 정의된 환경 변수들을 화면에 출력합니다.
• $ env -u NAME : NAME이라는 환경변수에 VALUE라는 값을 지정합니다. 여기서 NAME 환경변수를 삭제합니다.

• set : Bash의 쉘 변수를 관리하는 명령어입니다. http://ss64.com/bash/set.html

set NAME=VALUE 
#Bash에서는 다음과 같이 생략이 가능합니다.
NAME=VALUE

쉘 변수는 Bash라는 쉘 스크립트 언어에서 사용하는 변수이고, 환경 변수는 운영체제에서 사용하는 변수(예: PATH)입니다. 해제하는 방법은 unset 명령어를 사용합니다.

• export: 쉘 변수를 환경 변수로 변경해주는 명령입니다.

NAME=VALUE
export NAME

위는 set과 export를 사용하여 다음 명령과 동일한 결과를 가져옵니다. env NAME=VALUE

• declare: 이는 쉘 변수의 타입을 지정하는 명령이다. 읽기전용, 정수, 배열, 함수 등으로 쉘 변수의 성격을 선언할 때 사용합니다.

• echo $HOME : 나의 home 위치를 표시.

리눅스 환경변수중 PATH 가 하는 일

실행 파일을 찾는 경우 경로를 찾을 수 있다. echo $PATH : 환경변수는 path에 모두 모여있기 때문에 위 명령어로 확인 가능하다.

리눅스에서 .파일

숨김파일

• . 은 현재 디렉토리를 말합니다
• ..은 현재 디렉토리 바로 전 디렉토리, 상위 디렉토리를 말합니다

닷파일 보기

• ls -a : 숨겨진 파일을 볼 수 있습니다.
• ls -al : 숨겨진 파일을 더 자세하게 볼 수 있습니다.

리눅스에 있는 편집기

• vi : 파일을 보는 것 동시에 편집도 가능합니다.
• vim : vi 에서 더 보완되어 나온 것 의미가 있는 단어를 다른색으로 표현 더 보기 쉽게 해줍니다.

파일이나 디렉토리를 복사하는 명령어

• cp -r 복사할것 붙여넣기할것 : 디렉토리 복사
• cp 복사할것 붙여넣기할것 : 파일 복사

파일이나 디렉토리를 이동시키는 명령어

mv 이동할파일 이동할위치

파일이나 디렉토리를 삭제하는 명령어

• rm -r 지울디렉토리 : 디렉토리 지우기
• rmdir 지울디렉토리
• rm 지울파일 : 파일 지우기

디렉토리를 생성하는 명령어

mkdir 디렉토리명

부제 : www.wecode.com을 접속하면 일어난 일들이다.

간단히 얘기 해보자. 사용자가 브라우저에 요청을 하면 서버가 응답을 한다. 조금더 자세하게 얘기하자면 만약 사용자가 www.wecode.com라 브라우저에 검색(요청)을 하면 wecode 서버에서 응답을 한다.

여기서의 서버는 절대 꺼지지 않는 컴퓨터 라고 생각하면된다. 이 컴퓨터엔 전 세계의 사람이 어떤 시간대에 요청해도 접속할 수 있다. 이를 더 자세히 알기 위해선 호스팅(Hosting)이라는 개념을 알 필요가 있다. 집고 넘어가자.

Hosting(호스팅, Web Hosting Service)

호스팅이란 정보의 집약체인 서버의 전체 혹은 일부를 이용할 수 있도록 임대해주는 서비스를 말한다.

인터넷에 띄운다는것은 홈페이지의 구성파일들이(html, css, js) 인터넷에 항상 연결되고 절대 꺼지지 않는 호스트 컴퓨터(웹 서버)에 저장되어 있다가 사용자의 요청이 오면 언제든 응답 하는 것 즉 사용자에게 웹사이트의 비주얼을 보여준다는 것이다. 여기서 웹 서버는 절대 꺼지지 않는 컴퓨터 라고 생각하면 된다. 이렇게 절대적으로 안정적인 컴퓨터의 일부를 빌려서 우리는 웹 서버를 만들게 된다.

위 같은 서비스를 제공하는 예는 cafe24 호스팅센터나 AWS ec2/S3 등이 있다. 당장 구글에 '호스팅'이라 검색해봐도 다양한 호스팅 업체를 찾을 수 있다. 서버를 관리하기 위해서는 24시간 내내 안정적으로 전기를 공급해야 하고, 빠르고 안정적인 인터넷 회선을 사용해야 하며, 철저한 보안 시스템을 갖추고 있어야 한다. 따라서 개인이 서버를 관리하기보다 전문 업체의 호스팅 서비스를 사용하는 것이 일반적이다. 다시한 번 말하자면, 이 호스트 서버 안에 홈페이지를 시각화 하기 위해 필요한 모든 소스코드가 저장되어있다. 사용자가 요청하면 호스트 서버가 응답하여 사용자의 브라우저에 웹사이트를 구현한다.

잠깐! 그럼 브라우저는 어떻게 url을 알고 해당 호스트 서버에 접근하지??

이것은 IP주소를 통해 가능하다. IP에 대해 알아보자.

IP (Internet Protocol)

IP란 인터넷으로 통신하는 각 기기(컴퓨터, 통신장비)에 부여된 고유한 값을 뜻한다

스마트폰이나 노트북부터 대규모 소매 웹 사이트의 콘텐츠를 서비스하는 서버에 이르기까지 인터넷상의 모든 컴퓨터는 숫자를 사용하여 서로를 찾고 통신하며, 이러한 숫자들을 IP 주소라고 한다. ip에 관한 자세한 설명은 위사이트를 확인해 보시라.

정리하자면 사용자가 브라우저 주소를 요청 보내면 호스트 서버가 해당 브라우저의 IP주소를 찾아 사용자에게 응답한다. 그런데 우리는 한 번도 www.192.168.0.23.com 같은 모양의 브라우저 주소를 본 적이 없다. 왜그럴까? 이를 설명하기 위해선 도메인 개념을 알아야 한다

도메인(Domain)

도메인이란 문자(String)으로 된 고유 주소를 뜻한다. 수많은 IP주소를 외워서 접속하는건 불가능 하기 때문에 기억하기 쉬운 문자로 아이피 주소를 포장하는 포장지 역할을 한다

도메인이 포장지 역할을 한다고? 이해하기 힘든 사람을은 아래의 IP주소를 그대로 복사해서 검색해 보길 바란다.

• opentutorials.org -> 115.68.24.88
• naver.com -> 220.95.233.172
• daum.net -> 114.108.157.19

이 도메인은 누구나 살 수 있다. 하지만 시간이 지나면서 좋은 도메인 이름은 먼저 선점 당해버려 후대의 사람들은 아예 그 도메인 이름을 사용할 수 없게 되었다. 그것을 보완하기 위해 사용하는 또 다른 도메인이 있다.

최상위 도메인(top level domain)

흔히 보던 도메인.com, 도메인.co.kr, 도메인.org 등을 최상위 도메인이라고 한다.

이미 선점된 도메인명의 사용 폭을 넓히기 위해 .com등의 최상위 도메인을 덧붙혀 도메인을 구매한다. 한국 최고의 포탈 사이트인 네이버는 이러한 혼선을 막기 위해 우리가 아는 www.naver.com도메인 외에도 www.naver.co.kr, www.naver.org등을 모두 독점한 상태이다. 이럴경우 도메인 비용은?... 아마 많이 비쌀것이다...🤭

이제 IP주소를 도메인으로 감싸서 전달한다는 것 까지는 이해할 거라고 믿는다. 이제 마지막 질문은 naver이라는 문자를 어떻게 컴퓨터가 해석하여 해당 IP주소를 찾아가는지에 대해 알아보도록 하자.

DNS(Domain Name System)

DNS 또는 Domain Name System은 사람이 읽을 수 있는 도메인 이름(예: www.wecode.com)을 기계가 읽을 수 있는 IP주소(예: 192.0.2.44)로 변환하는 것이다.

Amazon Route 53, Cafe24 도메인관리, 가비아 네임서버 관리 등과 같은 DNS 서비스는 전 세계에 배포된 서비스로서, www.wecode.com과 같이 사람이 읽을 수 있는 문자를 192.0.2.44와 같은 숫자 IP 주소로 변환하여 컴퓨터가 서로 통신할 수 있도록 한다. 인터넷의 DNS 시스템은 이름과 숫자 간의 매핑을 관리하여 마치 전화번호부같은 기능을 한다. DNS 서버는 도메인과 서버를 연결해주는 중간 서버로 문자에 대한 요청을 IP주소로 변환하여 사용자가 도메인 이름을 웹 브라우저에 입력할 때 해당 사용자를 어떤 서버에 연결할 것인지를 제어한다. 이 요청을 쿼리라고 부른다. 더 자세한 설명은 아마존DNS소개 페이지를 참고하자.

1. 객체 선언과 사용

var 객체이름 = { property 이름1 : property값, property 이름2 : property값 };

• 객체는 { }(중괄호)로 감싸져 있고,
• , 로 구분된 이름/값 쌍들이
• 쉽표로 분리된 목록의 형태입니다.

객체 = 이름 : 값 으로 구성된 프로퍼티들의 집합

1-1. 객체 생성의 규칙

• property 이름은 중복될 수 없다.
• property 이름과 propert 값 사이에 :(콜론)으로 구분한다.
• property를 추가할 때는 ,(쉼표)를 붙여준다.
• property 값에는 어느 type이나 가능하다(string, number, array, object, function...)

1-2. 객체의 property값 접근하기

[1] 객체이름.프로퍼티이름 [2] 객체이름["프로퍼티이름"]

• [1] 마침표(.) 연산자를 사용하며, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 오른쪽에 위치합니다.
• [2] 대괄호([ ])를 사용하여, 접근하려는 객체명은 왼쪽에, 프로퍼티명은 쌍따옴표(" ")와 함께 대괄호 안에 작성합니다.

<script>
let plan = {
   name : "성정민",
   age : 26
};
console.log(plan.name);
console.log(plan["name"]);
</script>

1-3. 대괄호로 접근할 경우

마침표로 객체에 접근하는게 더 쉬워보이는데, 대괄호로 접근하는 이유가 뭘까요?

대괄호 안에는 "변수"가 들어갈 수 있습니다.

예를들어 plan 객체의 name이라는 프로퍼티에 접근하고 싶을 때, 아래와 같이 사용할 수 있습니다.

<script>
let plan = {
   name : "성정민",
   age : 26
};
let propertyName = "name"; //변수로 만들기
console.log(plan[propertyName]);
</script>

아래의 코드에서 어떻게 객체의 프로퍼티에 접근했는데 확인해보세요

<script>
let myObj = {
   property1 : "hello",
   property2 : [1,2,3,4,5],
   property3 : {
      childproperty: "hey"
   }
};
//대괄호로 객체에 접근
let name = "property";
console.log(mtObj[name+"1"])
console.log(mtObj[name+"2"])
console.log(mtObj[name+"3"])
console.log(mtObj[name+"3"]["child"=name]);
//. 으로 객체에 접근
console.log(myObj.property1);
console.log(myObj.property2);
console.log(myObj.property3);
console.log(myObj.property3.childproperty);
</script>

1-4. 객체 프로퍼티값 수정하기

객체를 정의한 후에야 property값을 수정할 수 있습니다.

<script>
let name = "property1";
myObj[name]
</script>

Flexbox

flex는 자식 요소들을 나열하고 싶을 때 부모에게 쓰는 요소입니다.

justify-content

: Flex요소들을 가로선 상에서 정렬합니다.

• flex-start : 요소들을 컨테이너의 왼쪽으로 정렬합니다
• flex-end : 요소들을 컨테이너의 오른쪽으로 정렬합니다
• center : 요소들을 컨테이너의 가운데로 정렬합니다
• space-between : 요소들 사이에 동일한 간격을 둡니다
• space-around : 요소들 주위에 동일한 간격을 둡니다

align-items

: Flex요소들을 세로선 상에서 정렬합니다.

• flex-start : 요소들을 컨테이너의 꼭대기로 정렬합니다
• flex-end : 요소들을 컨테이너의 바닥으로 정렬합니다
• center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다
• baseline : 요소들을 컨테이너의 시작 위치에 정렬합니다
• stretch : 요소들을 컨테이너에 맞도록 늘립니다

flex-direction

: 정렬할 방향을 지정합니다

• row : 요소들을 텍스트의 방향과 동일하게 정렬합니다
• row-reverse : 요소들을 텍스트의 반대 방향으로 정렬합니다
• column : 요소들을 위에서 아래로 정렬합니다
• column-reverse : 요소들을 아래에서 위로 정렬합니다

❗️주의

• column-reverse 또는 row-reverse를 사용하면 start 와 end의 순서도 뒤바뀝니다

• Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 방향이 가로로 바뀝니다

order

: 때때로 컨테이너의 row나 column순서를 역으로 바꾸는 것만으로는 충분하지 않죠. 이러한 경우에는 order속성을 적용할 수 있습니다. order의 기본값은 0이며, 양수나 음수로 바꿀 수 있습니다.

#pond{
   display: flex;
}
.yellow {
   order:1
}

align-self

: 지정 align-items값을 무시하고 Flex요소를 세로선 상에서 정렬합니다

• 속성은 align-items와 같습니다

flex-wrap

: flex요소들을 한 줄 또는 여러 줄에 걸쳐 정렬합니다

• nowrap : 모든 요소들을 한 줄에 정렬합니다
• wrap : 요소들을 여러 줄에 걸쳐 정렬합니다
• wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬합니다

flex-flow

: flex-direction과 flex-warp이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있습니다. 이 속성은 공백문자를 이용하여 두 속성의 값을 인자로 받습니다.

#pond {
   display: flex;
   flex-flow: column wrap
}

align-content

: 세로선 상에 여분의 공간이 있는 경우 flex-container 사이의 간격을 조절합니다 여러 줄 사이의 간격을 지정할 수 있습니다.

• flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬합니다
• flex-end : 여러 줄들을 컨테이너의 바닥에 정렬합니다
• center : 여러 줄들을 세로선 상의 가운데에 정렬합니다
• space-between : 여러 줄들 사이에 동일한 간격을 둡니다
• space-around : 여러 줄들 주위에 동일한 간격을 줍니다
• stretch : 여러 줄들을 컨테이너에 맞도록 늘립니다

❗️align-items VS align-content

• align-items는 컨테이너 안에서 어떻게 "모든 요소"들이 정렬하는지를 지정합니다.
• align-content는 "여러 줄들 사이"의 간격을 지정하며, 한 줄만 있는 경우 효과❌

웹페이지의 구조를 정의하는것은 HTML입니다. 그런데 HTML만 있다고 해서 웹페이지가 돌아가지는 않지요. 만약 텍스트만 가득한 하나의 페이지만 괜찮지만, 우리가 알고있는 거의 모든 페이지에는 JavaScript 코드가 들어가 있습니다. JavaScript는 웹 페이지와 상호작용하도록 만들어진 언어입니다. 프론트앤드 개발자의 역할이 여러 가지 있겠지만, 가장 큰 역할은 JavaScript를 사용하여 웹페이지를 다이나믹하고 인터렉티브하게 만드는 일입니다.

Variables(변수)

1. 변수의 생성

다양한 값(value)를 각각의 변수에 저장합니다.

• 제 이름은 성정민 입니다.

라는 문장을 봅시다. "이름"과 같은 역할을 하는것을 변수라고 하며 "성정민"과 같은 값은 value(값)이라고 합니다. 변수선언은 변수 이름 앞에 var, let, const라고 쓰고 값을 할당해주면 됩니다.

<script>
   let name = "성정민";
</script>

2. 변수 값 수정

변수를 생성할 때 값을 저장하고, 이후에 값을 수정할 수 있습니다. 값을 수정할 때는 변수 앞에 적어주었던 var, let, const를 빼야만 수정 가능합니다.

<script>
   let name = "성정민"; //변수 생성
   name = "김봉팔";     //변수 수정
</script>

❗️ TIP

• 같은 변수 이름을 중복해서 생성하면 안 됩니다!
• 변수를 선언만 하고 할당은 그 후에도 할 수 있습니다

  <script>
   let name;
   name = "성정민";
  </script>

• 변수가 아닌 값은 얼마든지 중복 가능합니다.
• const 키워드로 선언한 변수는 값을 바꿀 수 없습니다.

Function(함수)

1. 함수의 정의

함수란? 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록입니다.

2. 함수의 호출

변수가 이름이 있듯이, 함수도 이름이 있습니다. 누군가가 여러분을 부르면 뒤돌아보겠죠? 함수도 마찬가지로 불러줄 때까지 기다리고 있다가 호출하면 반응합니다. 이것을 앞으로 "함수를 호출한다"라고 표현하겠습니다.

<script>
function sayHi(){ // 함수를 생성
   let hi = "안녕하세요";
   return hi;
}
sayHi(); // 이름을 불러 호출할 수 있습니다.
</script>

3. 함수의 형태

4. 함수의 데이터 반환하기(return)

모든 함수는 반환(return)을 합니다. 하긴 하는데, return을 생략할 수도 있습니다.

함수 내부에 return 키워드가 보이지 않으면 반환을 생략했다는 말입니다. 이렇게 반환을 생략하면 undefined라는 값을 반환합니다.

함수를 호출하여 반환한 값을 저장할 수 있습니다.

<script>
console.log('======== 파라미터가 없는 함수 ========')
function noParameter() {
  return 10;
}
console.log(noParameter());    // 함수를 호출한 것을 바로 확인할 수도 있고
const result4 = noParameter(); // 변수에 담아서도 확인 가능합니다
console.log(result4);
</script>

• 이와같이 변수에 저장할 수도 있고, 다른 로직에 사용할 수도 있습니다.

❗️ 주의사항

• 함수 내부에서 인자로 받은 변수에 새로운 값을 넣으면 안된다.

  <script>
  function alertSuccess(name){
   let name="성정민";
   alert(name + "님 로그인 성공");
  }
  //위와 같이 함수 내부에서 인자로 받은 변수(name)에 새로운 값("성정민")을 넣으면 안됩니다.
  //인자(parameter)에 실제로 어떤 데이터가 전달될지는 호출할 때 결정하는 것입니다. 아래를 확인해주세요
  

alertSuccess("김두팔") // 인자 전달은 호출할 때 결정하는 것

### 5. 매개변수(parameter)와 인자(argument)
위에서는 return 키워드를 통해 함수를 호출할 때 데이터를 "반환" 하는 법을 배운 것입니다.
이제는 함수가 실행될 때 데이터를 "받는" 법을 배우려고 합니다.

#### (1) 매개변수란
>
매개변수(媒介變數), 파라미터(parameter), 모수(母數)
**매개(媒介) 란?** : 
1. 둘 사이에서 양편의 관계를 맺어 줌.
2. <논리> 서로 떨어져 있는 두 명사 사이에서 두 명사의 관계를 맺어 주는 중간 항의 명사를 부여하는 작용.
3. <철학> 헤겔의 변증법에서, 어떤 사물이 존재할 조건이 되는 일. 모든 사물이 따로 독립하여 존재하는 것이 아니고 타자(他者)와의 관계 속에서 존재한다고 보았다.

함수를 정의하면서, 함수 선언식의 괄호'( )' 안에 어떤 변수명을 쓰면, 우리는 그것을 매개변수라고 부릅니다.
매개변수는 그 이름처럼 실제로 함수 안쪽에서 변수와 같은 역할을 하게 됩니다. 

함수가 호출될 때, 값을 전달받게 되면, 매개변수에 값이 정의됩니다.

#### (2) 인자란
어떤 함수를 호출하면서, 호출문의 괄호 안에 어떤 값 또는 값이 정의된 변수를 쓰면, 그것을 **인자**라고 부릅니다. 
함수에서 매개변수를 적어둔 상태라면, 호출 시 인자로 전달한 값은 매개변수를 통해 사용 가능하게 됩니다.

함수에 인수가 한 개가 아니라 여러개 전달할 수 있습니다.

>

- 함수는 입력받은 정보에 따라 다르게 실행되도록 만들 수 있습니다.
또한 입력받은 정보를 가공해서 리턴하도록 만들 수도 있습니다.

### 6. 함수 내부에서 다른 함수 호출하기
>

---

# 생소한 수학표현
### 1. ++, --

>

- num++의 의미는 num = num+1과 같습니다. 
변수의 값에 1을 더하는 기능을 훨씬 더 간략한 코드로 구현해주는 기능릏 합니다.
- ++대신에 --를 쓰면 1을 뺄 수 있습니다
num--;

이러한 표현식은 변수에 값을 할당할 때도 사용할 수 있습니다.

위의 한줄짜리 코드에서 일어나는 과정을 스텝별로 보면
1. newNum 변수에 num변수를 할당해서 newNum에 1이 할당 되었고,
2. 그 후 num++가 실행되어 변수 num이 2가 되었습니다.

위의 스탭을 풀어서 작성하면 아래와 같습니다.

---
# 독특한 비교 연산자
비교연산자가 있을 때는 비교연산자 기준으로 왼쪽/오른쪽 나눠서 코드를 실행하게 됩니다.

<table width=100%>
  <tr>
    <th>비교 연산자</th>
    <th>설명</th>
  </tr>
  <tr>
    <td>== (동등 연산자)</td>
    <td>두 피연산자의 자료형이 같지 않아도 같아지도록 변환한 후, 엄격 비교를 수행합니다.<br>피연산자들이 모두 객체라면, 내부 참조를 보고, 둘 다 메모리의 같은 객체를 바라보는지 판별합니다.</td>
  </tr>
  <tr>
    <td>!= (부등 연산자)</td>
    <td>피연사자의 자료형이 같지 않아도 같아지도록 변환한 후, 두 피연산자가 같지 않을 경우 참을 반환합니다.<br>피연산자들이 모두 객체라면, 내부 참조를 보고, 둘 다 메모리의 같은 객체를 바라보는지 판별합니다. </td>
  </tr>
  <tr>
    <td>=== (일치 연산자)</td>
    <td>두 연산자가 엄격히 같은지 자료형 까지 판별합니다.</td>
  </tr>
  <tr>
    <td>!== (불일치 연산자)</td>
    <td>두 연산자가 같지 않거나, 같은 자료형이 아닐 때 참을 반환합니다.</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

---
# Array(배열)
몇 천개의 정보를 얻어야 할 때...

let kospi_20200429 = 2029.23; let kospi_20200430 = 2329.3; let kospi_20200501 = 2029.23; . . .

### 1. 배열을 왜 쓰나요?
이렇게 구현하려면 어마어마한 양의 변수가 필요합니다.

이런 경우를 위해 배열이 있습니다! 배열을 사용하면 몇 천개의 변수를 생성하지 않고 하나의 변수에 모든 데이터를 갖고 있을 수 있습니다.
배열은 [ ] 대괄호로 감싸져 있습니다.
자 그러면 배열을 만들어볼까요
>

let anything = ["경기", 1995, ["하나", ["하나하고반", 1.5]"둘", 3]];

### 2. 배열 유의사항
- "경기", 1995 와 같은 배열의 값, 하나하나를 Element(요소)라고 부릅니다.
- 요소와 요소 사이에는 쉼표로 구분합니다.
- 요소는 어떤 type도 가능합니다 [String, Number, Array, Boolean...]
- 배열의 요소는 순서(index)를 갖고 있습니다
특징은 1에서부터 시작하는 것이 아니라 **0부터 시작**한다는 것입니다.

index를 사용하면 해당 배열의 요소를 가져올 수도 있습니다.
>배열이름[index]

[1] 위의 배열을 활용해볼까요 anything 변수에서 "하나하고반"을 추출해보세요!
>

[2] addFirstAndLast 함수에 주어진 인자 myArray는 숫자 값으로만 이루어진 array 입니다.
addFirstAndLast 함수에 주어진 인자 myArray 의 첫번째 element와 마지막 element의 값을 더한 값을 리턴해주세요.
만일 myArray에 한 개의 요소만 있다면 해당 요소의 값을 리턴해 주시고 요소가 없는 비어있는 array라면 0을 리턴해주세요.
>

### 3. 배열 조작하기(model solution)

#### 1) 배열 추가와 수정

요소가 없는 빈 배열을 선언해보겠습니다.

let cities = [];

그리고 아래와 같이 요소를 하나씩 추가할 수 있습니다.

cities[0] = "서울"; cities[1] = "대구"; cities[3] = "부산";

그리고 나머지는 건너뛰고 6번째 요소에 "제주도"를 할당해볼까요?

cities[5] = "제주도"

이로써 다음과 같이 총 6개의 요소가 있는 배열이 되었습니다. 
아무것도 할당하지 않았기에 undefined라고 출력됩니다. 
>["서울", "대구", "부산", "undefined", "undefined", "제주도"]

요소를 수정하고 싶을 때는 똑같이

cities[5] = "포항";

변수 배열 인덱스를 재정의 해주면 됩니다.

#### 2) 배열 추가 push 함수 / unshift 함수

다른 방법으로도 요소를 추가할 수 있습니다.

let cities = []; cities.push("경주", "전주"); cities.unshift("인천");

push, unshift 모두 요소를 추가하는 함수인데 추가되는 위치가 다릅니다.
- push : array의 **마지막** 부분에 요소를 추가
- unshift : array의 **맨 앞** 부분에 요소를 추가


#### 3) 배열 요소 삭제 pop 함수
요소를 제거할 수도 있습니다

cities.pop(); console.log(cities)

pop함수를 이용하면 **마지막** 요소가 제거되고, **마지막 요소의 값을 반환**합니다

let lastCity = cities.pop(); console.log(lastCity);

#### 배열 조작 방법 정리
>
**1. index 접근하여 수정이나 추가**
**2. push, unshift로 추가**
**3. pop으로 마지막 요소 삭제 및 반환**

![](https://images.velog.io/images/jeongmin_sung/post/0fed7c91-afe8-4f65-9d41-5bd9f56db702/image.png)


### 테스트

divideArrayInHalf 함수를 다음과 같이 구현해주세요. divideArrayInHalf 함수의 인자인 array는 숫자 값으로만 구성되어 있으며 정확히 총 5개의 요소(element)로 구성되어 있습니다.

array의 요소들 중 10과 같거나 작은 값의 element들은 result의 맨 앞으로, 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴해주세요.

• 중요사항 이때, 순서는 array의 맨 뒤의 요소 부터 맨 앞의 요소까지 순차적으로 이루어저야 합니다. 예를 들어, 인자 array 값이 다음과 같을때 [1, 20, 10, 5, 100]

result 배열이 만들어 지는 순서는 다음과 같으며, [100] [5, 100] [10, 5, 100] [10, 5, 100, 20] [1, 10, 5, 100, 20]

아래와 같은 result가 리턴 되어야 합니다. [1, 10, 5, 100, 20]

>

문서 객체 모델(Document Object Model,DOM)은 HTML, XML 문서의 프로그래밍 interface이다.

1. 요소의 내용(content) 바꾸기 innerHTML

  document.body.innerHTML = '내용 다 바꿔'

2. 특정 element에 접근하기

tag, class, id 와 같은 css selector로 접근 가능 주의! JavaScript에서 style을 수정할 때 '-'는 사용 불가능 camelCase로 바꿔야 합니다.

let blueElement = document.querySelector('blue');
blueElement.style.backgroundColor = 'blue';

3. Element 생성하기

.createElement(태그네임) 함수를 사용하면 element를 만들 수 있다 -> 만든 후 붙이고 싶은 element에 append 시켜줘야한다. appendChild는 요소의 뒤쪽에 붙여줍니다.

4. Assignment

• p 태그를 생성하고 (hint: createElement),
• 해당 요소에 dom 이라는 class 이름을 주고 (hint: className)
• 해당 요소에 "DOM" 이라는 텍스트를 넣어서 (hint: innerHTML)
• h1요소 내부에 추가 (hint: appendChild)

<h1 id="h1-title">
   <span>난 span</span>
      여기에 추가해주세요
</h1>

<script>
function addAssignment(){
  let makeptag = document.createElement('p');     //p태그를 만들자
  let h11 = document.getElementById('h1-title') //h1의 아이디를 가져와 변수로 만들기
  makeptag.innerHTML = 'DOM' //만든 p태그의 내용 입력
  makeptag.className = 'dom' //만든 p태그에 class명을 부여함
  h11.appendChild(makeptag)  //h1태그에 p태그를 append
}
addAssignment()
</script>

👀 DOM Element를 동적으로 만드는 메서드

👀 DOM 접근 메서드

요소들을 이용하기 위해서는 아래와 같은 메서드를 사용해 특정 태그에 접근해야 합니다. 이 메서드를 이용해 선택한 요소를 변수에 대입하여 사용할 수 있습니다.

검색 엔진 최적화 (SEO, Search Engine Optimization)

검색 엔진 최적화는 웹 페이지 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 노출 될 수 있도록 하는 작업을 말합니다. 검색한 결과 상위에 웹 페이지가 노출된다면 방문 트래픽이 늘어나기 때문에 효과적인 인터넷 마케팅 방법 중 하나라고 할 수 있습니다.

Robot

검색엔진은 로봇(Robot)이란 프로그램을 이용해 전세계의 웹사이트 정보를 수집합니다. 이를 크롤링이라고 하며, 검색엔진의 크롤러가 이를 수행합니다. 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만들어둡니다. 이를 인덱싱이라고 하며 검색 엔진의 인덱서가 이를 수행합니다.

인덱스를 생성할 때 사용하는 정보는 검색 로봇이 수집한 정보인데, 이는 웹사이트 HTML코드입니다. 검색 엔진은 HTML코드 만으로 웹사이트의 의미를 인지하는데 이 때 시멘틱 요소(Sementic element)를 해석하게 됩니다.

시멘틱 요소(Sementic element)

<font size="6"><b>HELLO WORLD</b></html>
<h1>HELLO WORLD</h1>

위 두 태그를 비교해봅시다. 두 태그의 브라우저에서의 실행값은 동일합니다. 하지만 1행의 요소는 의미론적으로 어떤 의미도 가지고 있지 않습니다. 그러나 2행의 요소는 제목중 가장 상위 레벨이라는 의미를 가지고 있어 개발자가 의도한 요소의 의미가 명확히 드러나고 있습니다. 이는 코드의 가독성을 높이고 유지보수를 쉽게 합니다.

검색엔진은 h1요소 내의 컨텐츠를 중요한 제목으로 인식하고 인덱스에 포함 시킬 확률이 높습니다. 사람들도 마찬가지겠죠. 시멘틱 요소로 구성되어 있는 웹페이지는 효과적인 크롤링과 인덱싱을 가능하게 합니다.

이렇게 의미론적인 문저 정보를 전달할 수 있게 하는 태그를 시맨틱 태그라고 합니다. 시맨틱 태그로 컴퓨터가 HTML요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹을 작성하길 바랍니다.

시멘틱 웹

시멘틱 웹이란 웹에 존재하는 수많은 페이지들에 메타데이터(Metadata)를 부여하겨, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상입니다.

HTML 요소는 non-semantic요소, semantic요소로 구분할 수 있습니다.

non-semantic 요소

<div>,<span>,<p>등이 있으며 이들 태그는 요소에 대해 어떠한 설명도 하지 않는다.

semantic 요소

<img>,<table>,<form>등이 있으며 이들 태그는 요소의 의미를 명확히 설명한다

시멘틱 태그

더 많은 semantic tag

SBS 아카데미 학원(절대다니지마시오), 국비수업을 거쳐 그간 나름 웹사이트도 만들어 봤지만 아무래도 old한 강사진에게 old한 방식으로 받았던 수업으론 반응형 웹사이트를 만드는 건 불가능했고 1920x1080의 기초 웹사이트를 고작 만드는 정도였다. 나름 자신 있다고 생각하던 HTML / CSS였지만 사전스터디 때 처음 Flex box와 Grid Layout 등 신문물을 접하고는 내가 지금까지 얼마나 낡은 코딩을 했는지 실감했다.

4주간의 사전 스터디가 끝나고 본격적으로 Wecode 부트캠프의 첫날이 밝았다.

repl.it으로 html/css기초를 개념설명+문제풀이 형식으로 스터디하고 오늘이야말로 테트리스처럼 군데군데 파인 구멍을 제대로 막아보기로 한다.

위 게시물은 필자의 지식 정리를 위한 글입니다. 처음부터 차근차근(🙅‍♀️)

목차

1. position static, relative, absolute, fixed, sticky, unset, inherit, initial
2. display inline, inline-block, block
3. float

1️⃣ position 프로퍼티

position 프로퍼티는 태그를 어떻게 위치시킬지 정하며 아래의 5가지 값을 가집니다.

static(기본위치)

: 다른 태그와의 관계에 따라 배치되며 임의로 위치 조절은 불가능합니다. 기본적으로 위 값을 지정할 일은 없지만 이미 설정된 position을 무력화 할 때 사용합니다.

absolute(절대위치)

: 부모 또는 가장 가까이 있는 조상 요소를 기준으로 하며 좌표 프로퍼티(top, bottom, right, left)를 사용하여 위치를 이동시킵니다.

1. static은 부모가 될 수 없기 때문에 absolute를 사용할 때는 부모 요소에 relative를 설정해줘야 합니다.

🧐 if 부모, 조상이 모두 static인 경우? -> 최상위 요소인 body를 기준으로 이동합니다. 2. 다른 요소가 자리잡고 있어도 옆으로 밀리지 않고 요소 위에 위치하며 이는 z-index프로퍼티로 레이어 조정이 가능합니다. 3. absolute 사용시 block요소도 inline요소와 같이 컨텐츠 영역만을 차지하기 때문에 반드시 width height크기 설정을 해야합니다. 4. 부모의 위치를 벗어나 어디든 자유롭게 위치할 수 있습니다

position을 사용한 중앙정렬

<style>
div { 
  width:300px;
  background:red;
  position:absolute;
  top:calc(50% - 50px);
  left:calc(50% - 150px);
}
</style>

relative(상대위치)

: static 위치를 기준으로 움직이며 좌표 프로퍼티(top, bottom, right, left)를 사용하여 위치를 이동시킵니다.

fixed(고정위치)

: 부모요소와 상관없이 viewport를 기준으로 좌표 프로퍼티(top, bottom, right, left)를 사용하여 위치를 이동시킵니다.

1. 스크롤에 영향을 받지 않고 언제나 고정된 위치를 유지합니다.
2. fixed 또한 absolute와 동일하게 사용시 block요소도 inline요소와 같이 컨텐츠 영역만을 차지하기 때문에 반드시 width height크기 설정을 해야합니다.
3. 🧐 홈페이지 로딩이 느려지는 원인이 될 수 있으니 주의!
4. IE7 이상 지원

   주의 : 아래와 같이 사용하면 로딩 속도가 느려질 수 있어요

   <div style="position:relative;">
   <div style="position:fixed; background:red;">
    <div style="position:absolute; top:-60px; left:-100px; padding:0px">
      https://github.com/JeongminSung
    </div>
   </div>
   </div>

sticky

: relative처럼 작동하다가, 설정된 top, right, bottom, left 값 위치 도달시 고정됩니다.

1. 스크롤 상단 고정 메뉴를 만들때 사용됩니다
2. IE 지원 X

unset

속성을 부모로부터 상속받은 경우 그 상속값으로, 아니면 초기값으로 재설정

inherit

부모 요소의 속성 상속

initial

속성 초기화

2️⃣ display 프로퍼티

display는 크게 inline, block, inline-block, none으로 크게 네 종류가 주로 사용되는데, 실제로 W3C에서 CSS 2.1 Specification를 살펴보면 display속성에 지정할 수 있는 값은 무려 16가지입니다

inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

생각보다 엄청 많지요?😅

이 16가지의 속성값들은 4가지의 계열로 나눌 수 있습니다.

1. Box-model 계열
2. List 계열
3. Table 계열
4. 기타

Box-model 계열

대부분의 태그에서 사용하는 값들입니다. 어떠한 요소를 block or inline요소로 만들 때 사용합니다. 자주 쓰는 block, inline, inline-block의 3개 값이 여기에 속합니다.

List 계열

<li>태그에서는 list-item 이라는 속성을 사용합니다. 기본적으로는 block요소처럼 작용하지만, 추가적으로 list-style 속성을 이용할 수 있다는 특징이 있습니다.

Table 계열

<table> 태그와 그 부속 태그에서 사용되는 값입니다. display 프로퍼티 값의 2/3를 차지하는 비중있는 녀석이라 The CSS table model를 살펴보면 <table>과 부속태그에는 저마다의 display 속성값이 정해져 있음을 알 수 있습니다.

기타

• none : 해당 요소와 그 자식요소까지 화면과 레이아웃 자체에서 완전히 사라지게 됩니다. 영역조차 남지 않습니다.
• *inherit : * 부모요소의 display 속성을 그대로 따르게 됩니다.

이 외에도 전후의 맥락을 파악해서 display 값을 결정하는 run-in 값이 있습니다. 하지만 개발자의 의도와 다르게 작동할 가능성이 있어 사용하지 않는 것을 권장합니다.

🧐 inline-block과 Table 계열 값은 크로스 브라우저 문제를 야기합니다.

inline-block과 Table 계열에 속성의 값은 IE7과 그 하위 버전에서는 작동되지 않는다고 알려져 있습니다. 그러나 실제로 테스트를 해보면 Table 계열의 값들은 OS에 따라 결과가 다릅니다. 이것이 가장 문제가 되는 경우는 <table>을 화면에 숨기고 보여주기 위해 JavaScript를 이용할 때입니다. 숨길때는 display:none으로 지정하면 되지만, 보일 때에는 브라우저마다 지원여부가 다르기 때문에 복잡합니다. 이를 해결하기 위해선 display 속성을 빈 문자열로 설정하는 것으로 해결할 수 있습니다. 사용자가 CSS 속성값을 지정하지 않으면, 해당 속성값은 브라우저마다 가지고 있는 기본값으로 지정되기 때문입니다.

<script>
function hide(tr)
{
    tr.style.display = 'none';
}
function show(tr)
{
    //tr.style.display = 'table-row';  // 위험! 
    tr.style.display = '';
}
</script>

예를들면 예제코드처럼 <tr>태그를 보이고 숨기는 스크립트가 있을 때, 보여지는 함수에서 display= 'table-row';로 설정한다면 되는 브라우저, 안 되는 브라우저가 생기는 크로스 브라우저 문제가 생길 수 있습니다. 이 때는 display를 display = ''; 빈 문자열로 설정하면 table-row를 지원하는 브라우저는 table-row 값으로, 그렇지 않은 브라우저에서는 지원되는 display 값으로 <tr>을 세팅할 것입니다.

🧐 display:none과 visibility:hidden의 차이점

결론만 말하자면 display:none은 레이아웃에 영향을 미치지 않지만, visibility:hidden은 레이아웃에 영향을 미칩니다.

display:none는 해당 요소 자체를 문서상에서 완전히 들어내는것을 의미합니다. 레이아웃 상에서 완전히 사라지는 거죠.

visibility:hidden는 문서상에 존재는 하되, 화면에 렌더링만 하지 않는 것을 의미합니다. 따라서 너비와 높이 여백까지 그대로 가지고 있는 상태에서 화면에 보이지만 않는 상태를 뜻합니다. 따라서 레이아웃 상에서 자리도 그대로 차지하고 있지요.

3️⃣ float, clear, overflow 프로퍼티

float 즉 floating기법은 복잡한 형태의 레이아웃을 구성하는데 필요한 핵심 속성으로 float 속성을 사용해 박스를 왼쪽(left) 또는 오른쪽(right)으로 "부유"시키는 레이아웃 기법입니다.

이 플로팅 모델을 이용하면 문서의 흐름과 관계없이 화면 배치를 유연하게 할 수 있습니다.

left : 요소를 왼쪽 방향으로 부유하게 설정 right : 요소를 오른쪽 방향으로 부유하게 설정 none : 기본값(default), 요소를 띄우지 않는다

!!플롯 속성을 사용할 요소는 position 속성의 absolute 값과 양립할 수 없습니다.

중요한 사실은 플로팅된 요소는 그 요소의 종류에 상관없이 inline-block 박스가 되고 마치 div처럼 움직입니다.

이미지 출처: https://webclub.tistory.com/606 [Web Club]

Sequence

1. list(리스트) -> mutable
2. tuple(튜플) -> immutable
3. Dictionary
4. range(레인지)

가변형(mutable)과 변형불가형(immutable)

• mutable 객체 객체를 생성한 후, 객체의 값을 수정 가능, 변수는 값이 수정된 같은 객체를 가리키게 됨
• immutable 객체 객체를 생성한 후, 객체의 값을 수정 불가능, 변수는 해당 값을 가진 다른 객체를 가리키게 됨

1) list

• muitable 수정가능한 가변형 객체
• 많은 값을 하나의 list에 저장할 때 사용
• 타입 구분없이 모두 사용 가능
• [] 대괄호 안에 , 로 구분하여 넣는다.

  days=["Mon","Tue","Wed","Thur","Fri","sat"]

2) tuple

• immuitable 수정 불가능한 고정형형 객체
• () 소괄호 안에 , 로 구분하여 넣는다.

  days=("Mon","Tue","Wed","Thur","Fri","sat")

3) Dictionary(dict)

• {} 중괄호 안에 "키(key) - 값(value)" 으로 값을 가진다
• "키(key) - 값(value)"를 쌍으로 갖는 컬렉션이다
• Map이라고 불리우는데, key로 value를 찾아내는 해시테이블(Hash Table)구조를 갖는다.
• 파이썬에서 dict 클래스로 구현되어있다
• 키(key) => 변경할 수 없는 Immutable 타입 즉, key로 tuple이나 문자열은 사용 가능하되, list는 key로 사용 불가능
• 값(value) => Immutable, Mutable 모두 사용 가능.

  person = {
    "name" : "JeongminSung",
    "age" : "26",
    "korean" : "True",
    "fav" : ["Game", "Love", "peace"]
  }

• 딕셔너리에 추가하기+

  person["programmer"] = True

<공통 시퀀스 연산> <가변 시퀀스 연산> 출처: https://docs.python.org/ko/3/library/stdtypes.html#sequence-types-list-tuple-range

*위 글은 Nomad Coders Academy의 Python으로 웹 스크래퍼 만들기 수업을 바탕으로 진행됩니다.

#1.0 Data Types of Python

a_string = "hellojeongmin"
a_number = 4
a_float = 3.2
a_boolean = False
a_none = None
print(type(a_float))

``` 파이썬은 Java와는 다르게 ; (세미콜론)을 붙이지 않아도 출력할 수 있다.

파이썬은 스네이크케이스(snake_case) 케이스 네이밍 컨벤션을 사용할 것을 약속한다. 하지만 다른 방식으로 표기를 해도 사용하는데에는 이상이 없다.

케이스 네이밍 컨벤션이란(Case Nameing Convention)

[1] lower 카멜 케이스 (lowerCamelCase)

• camelCase, backgroundColor, className
• 단봉낙타 표기법이라고도 한다.
• 보통 카멜 케이스라고 하면 lower 카멜 케이스를 의미한다.
• 각 단어의 첫 문자를 대문자로 표시하되, 이름의 첫 문자는 소문자로 적는다.

[2] Upper 카멜 케이스 (UpperCamelCase) == 파스칼 케이스 (PascalCase)

• CamelCase, BackgroundColor, ClassName
• 쌍봉낙타 표기법이라고도 한다.
• 전체 이름의 첫 문자를 포함한 각 단어의 첫 문자를 대문자로 표시한다.

[3] 스네이크 케이스 (snake_case)

• camelcase, backgroundcolor, class_name
• 각 단어의 사이를 언더바_로 구분해주는 표기법이다.

[4] 헝가리안 표기법 (Hungarian notation)

• bCamelCase, szBackgrounColor, strClassName
• 이름 앞에 변수의 타입을 접두어로 넣어주는 표기법이다.
• 접두어의 종류에는 ch - char, db - double, str - string, b - boolean 등이 있다.

css 박스 모델의 기본값에서, 지정한 width와 height는 content-box 크기에만 적용됩니다. 여기에 border, padding이 있으면

width, height + border, padding 처럼 원하지 않은 결과물이 나올 수 있습니다..

따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리, 안쪽 여백 을 고려해야 합니다.

• content-box 는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
• border-box 는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다. 단 이 값은 IE8 이상에서만 사용할 수 있습니다.

HTML

CSS

### **출력결과**

![](https://images.velog.io/images/jeongmin_sung/post/48b1c4fa-3f41-4954-970a-af8213049f5a/image.png)