요새 취업 준비를 위해서 이런저런 사이트를 돌아다니며 기업들이 어떤 스택을 원하는지 둘러보고 있는데 꼭 보이는게 Typescript 경험이 있는 사람이었다. Typescript가 뭐지?

📍 Typescipt란 뭘까?

타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 쉬운말로 설명을 해보자면, 타입을 명시할 필요가 없는 인터프리터 언어인 비교적 유연한 자바스크립트와 달리, 정적 타입을 명시할 수 있다는 것이 순수한 자바스크립트와의 가장 큰 차이점이다. 이로인한 장점이라 하면, 높은 개발 안정성과 편의성을 확보할 수 있다. 그래서 대기업이나 큰 규모의 서비스를 제공하는 회사에서는 타입스크립트를 많이 사용한다는 걸 알게 되었다. 나는 규모에 상관없이 미리 일어날 에러들에 대처 할수 있다는 것은 개발자에게도 많은 이점이 있고 생산성도 향상 될거라고 생각 되어서 관심을 가지게 되었다.

🗣 나는 왜 typescript에 관심을 가지게 되었는가?

나는 이번에 첫 팀 프로젝트를 진행하면서 많은것을 깨닳았는데, 그 중 하나는 미리 일어날 에러에 대해 대처를 해놓는게 중요하다는 것이다. 지금까지 코딩을 할때 그 코드로 원하는걸 구현하는데 급급해서 구현에 성공하면 '오케이 다음 기능 구현' 이렇게 넘어가곤 했는데, 배포하고 실제로 사람들이 사용해보게 하는데에는 기능 구현도 중요하지만 에러가 나지 않게 하는것, 원하는 값이 들어오지 않았을시에 어떻게 대처를 해야하는가에 대해서 생각을 많이 하게 되었다. 타입스크립트는 그런 의미에서 필요성이 와닿았다.

• 개발자가 의도한 변수나 함수 등의 목적을 더욱 명확하게 전달할 수 있고, 그렇게 전달된 정보를 기반으로 코드 자동 완성이나 잘못된 변수/함수 사용에 대한 에러 알림 같은 풍부한 피드백을 받을 수 있게 되므로 순수 자바스크립트에 비해 어마어마한 생산성 향상을 꾀할 수 있다. 즉, '자바스크립트를 실제로 사용하기 전에 있을만한 타입 에러들을 미리 잡는 것' 이 타입스크립트의 사용 목적이다. (나무위키 출처)

그래서 알아두면 정말 좋을것 같고 기존 자바스크립트와 크게 다른점이 없기 때문에 한번 다음 프로젝트에서는 써보고 싶다고 생각이 들었다. 특히, 리액트와의 호환도 잘되어 둘의 궁합이 좋다고 해서 주로 리액트를 사용하고 있는 나에게는 정말 매력적으로 와닿았다.

📌 Typescript 설치하기

1. pakage.json 생성

$ npm init

2. typescript 설치

• global로 설치

  $ npm i -g typescript

  • devDependency로 설치

    $ npm i -D typescript

    
    

📌 Typescript 사용하기

설치를 했다면 .ts로 끝나는 파일을 만들어서 typescript파일을 만들어줍니다. typescript는 기본적으로 javascript문법을 씁니다. 가장 특징으로는 타입을 명시하는 것이 다르다. 기본적인 사용법은 아래 공식문서로 빠르게 확인해보자. (친절하게 한국어 버전이 있다.) https://www.typescriptlang.org/ko/docs/handbook/typescript-in-5-minutes.html

그다음, 타입 스크립트 사용은 아래명령어를 사용해서 컴파일 해준다.

$ tsc 내가만든파일명.ts

코딩을 하다보면 자주 마주하는 단어, 기본중에 기본. 인코딩, 디코딩을 자주 마주 한적이 있을것이다. 문자를 인코딩을 해줘야한다. 뭐 그래서 해야한다니까 나도 인코딩을 하는 코드 몇자 추가하면 해결. 근데 이거 인코딩이랑 디코딩이 그러니까 제대로 뭔데? 궁금해서 찾아보고 정리해보았다.

Encoding? Decoding?

배경지식

먼저 인코딩, 디코딩이 뭔지 구글에 검색해보자.

• Encoding이란?
  문자 인코딩 또는 텍스트 인코딩 또는 줄여서 인코딩은 사용자가 입력한 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것을 말한다. (위키백과)
• Decoding이란?
  복호화 또는 디코딩은 부호화된 정보를 부호화되기 전으로 되돌리는 처리 혹은 그 처리 방식을 말한다. 보통은 부호화의 절차를 역으로 수행하면 복호화가 된다. 암호화의 반대말로서의 복호화는 decryption이라고 부른다. (위키백과)

간단히 말하자면! 인코딩은 컴퓨터가 이해하는 언어로 바꾸는 작업, 디코딩은 사람이 이해하는 문자로 바꾸는 작업을 말하는 것이다!

⇒ 컴퓨터가 문자를 이해하는 방식과 우리가 이해하는 문자는 다르게 컴퓨터에서 존재한다는 것이다. 컴퓨터에서 내가 작업하고 싶은 문자가 있다 하면 컴퓨터가 이해하는 방식으로 바꾸는 인코딩 작업이 필요한것이고, 컴퓨터에서 저장했던 컴퓨터만의 방식으로 저장한 문자를 내가 읽을수 있는 문자로 시각화 하려면 디코딩하는 작업이 필요한 것이다.

*문자형 데이터는 컴퓨터가 이해할수 있도록 Bit형태로 변형이 필요하다. 이 과정이 인코딩이 되는것이다. *

한글 인코딩?

우리가 그럼 어떨때 인코딩을 마주하는가! 우리는 한국어를 인코딩 할때 인코딩을 가장 많이 마주하게 된다. 왜 한글 인코딩이 필요한거지?

Ascii계열의 문자는 0-127까지 표현이 되기 때문에 1Byte안에 표현이 가능하다. 한글은 Ascii안에 표현이 불가하다. 이때, 이를 표현하기 위해서는 Byte가 충분히 더 필요하다. 그래서 우리는 한글을 사용할때 인코딩 작업을 넣어주게 되는 것이다.

거기서 자주 마주하게 되는 아이들이 'utf-8', 'cp949', 'euc-kr' 등이 있는것이다.

우리가 값들의 상태관리를 하기 위해서는 useState를 사용할수있다. 그렇지만 전역으로 상태관리를 하기위해서는 레벨업이 필요하다! 그렇다면 전역으로 상태관리를 하기위한 다음 스텝! Context API에 대해서 공부해보자!

Context API

1) context api란?

= context api를 사용하면 전역으로 상태를 관리 할 수 있게 된다. 보통 우리가 리액트를 사용하면서 데이터를 넘겨주고 싶을때 우리는 props를 사용해서 부모에서 자식에게로 데이터를 전달해줄수 있다. 이때, 트리의 깊이가 깊지 않다면 데이터를 props로 전달 전달 해주면서 사용을 할 수 있지만, 트리의 깊이가 깊어지게 되면 트리 위쪽에 값을 저장하고 그걸 props의 props의 props의 data와 같이 전달 해주게 된다. 그러면 내가 사용하고 싶은 데이터와 상관없는 컴포넌트에서 데이터를 받아줘야 하며, 전달 전달 하는 과정이 매우 번거롭게 느끼게 되고 코드도 어지러워진다.

그럴때 우리는 context api를 꺼내들면 된다!

2) context api 사용법

• 먼저! 상황을 가정해보자. 나는 유저의 이름과 좋아하는 컬러를 받아서 사용하고싶다고 가정을 해보겠다. 이때, Username.js컴포넌트에서 이름을 받아오고, Color.js컴포넌트에서 좋아하는 컬러를 받아올것이다. 받아온 데이터를 Show.js에서 화면에 보여주고 싶다고 해보자.

• 아래와 같이 구성한다고 생각하면 좋을거 같다!

1. context api 생성

가장 먼저 해야할일. context api를 생성하자. user.js라는 파일에 생성을 할 것이다. 아래와 같이 생성 할수있다.

user.js

// 리액트와 함께 createContext를 import 해주기
import React, { createContext } from "react";

// UserContext라는 이름으로 context api를 생성
export const UserContext = createContext();

// UserStore라는 이름으로 어떤 데이터를 만들지 생성
const UserStore = (props) => {
    const users = {
        username : "",
        favoriteColor : ""
      }

    return (
      // Provider를 사용해서 감싸주기
      <UserContext.Provider value={users}>
        {props.children}
      </UserContext.Provider>
    );
};

export default UserStore;

2. 사용 범위를 지정해주기

생성이 끝났다면 어디서 이 데이터를 사용하고 싶은지 지정해주자. App.js에서 어느 컴포넌트들에서 데이터를 사용하고 싶은지 지정.

App.js

// UserStore를 user.js에서 받아오기
import React from 'react'
import UserStore from "user";

function App(){
  return(
    <>
      // 받아온 UserStore를 어느 컴포넌트에서 사용할건지 지정
      // 사용하고 싶은 컴포넌트를 감싸는 형태로 만들어주기
      <UserStore>
        <Username />
        <Color />
        <Show />
      <UserStore/>
    </>
  )
}

3. context api 적용하기

그렇다면 context api를 useContext를 사용해서 적용해보자.

Username.js

import React, { useContext, useState, useEffect } from 'react';
import { UserContext } from "../store/user";

export function Username(){

  const [username, setUsername] = useState("");
  const context = useContext(UserContext);

  useEffect(()=>{
      context['username'] = username;
  }, [ username ])

  return <input 
      type="text" 
      value={usernmae} 
      onChange={(e)=>{setUsername(e.target.value)}} />
}

Color.js

import React, { useContext, useState, useEffect } from 'react';
import { UserContext } from "../store/user";

export function Color(){

  const [color, setColor] = useState("");
  const context = useContext(UserContext);

  useEffect(()=>{
      context['color'] = color;
  }, [ color ])

  return <input 
      type="text" 
      value={color} 
      onChange={(e)=>{setColor(e.target.value)}} />
}

Show.js

import React, { useContext, useState, useEffect } from 'react';
import { UserContext } from "../store/user";

export function Show(){
  const context = useContext(UserContext);

  return(<>
         <div>{context.username}</div>
         <div>{context.color}</div>
  </>)
}

4. 결과 확인

이렇게 해주면 화면에 결과는 어떻게 나올까?

input값으로 받은 username
input값으로 받은 color

다른 컴포넌트에서도 값을 사용할 수 있게 되고, 전역적으로 상태관리가 가능하게 된다!

이렇게 비교적 Context api 는 사용법이 간단하다. 생성하는법만 간단히 익히게 되면 전역적으로 객체를 사용하는것 처럼 전역 상태관리가 가능하게 된다. 그렇다면 전역적으로 값의 상태 관리를 하기 위한 다음 스텝은 reduce, redux가 있다. 다음번에는 reduce, redux에 대해서 공부해보고 싶다.

useEffect를 이해했는데 이해 못 한 느낌 🤷‍♀️ 이 안에서 찝찝한 감정을 해소해보고자! 일단 밀린 TIL보다 useEffect에 대해서 제대로 이해하고 넘어가기 위해 글을 작성해봐야겠다. ( = 맨날 TIL핑계대면서 블로그 글을 안쓰게 되므로,,) useEffect를 제대로 이해해보자! 제발~!

useEffect란?

• useEffect를 이용하면 우리는 React에게 컴포넌트에게 렌더링 이후에 어떤 일을 수행하는지 알려줄 수 있다.
• React는 우리가 넘긴 함수를 기억했다가 DOM업데이트를 수행한 이후에 불러낸다.
• Effect Hook을 이용하면 함수형 컴포넌트에서도 생명주기 메서드를 사용할 수 있고, side effect를 수행할 수 있다.
• useEffect는 기본적으로 1)컴포넌트가 최초로 렌더링 될 때, 2)지정한 state나 prop가 변경될 때(=업데이트 될 때)마다 이펙트 콜백 함수가 호출됩니다.

  _음,, 알겠는데 모르는 이 느낌. _

그럼 대체 생명주기 메서드는 뭔데?

React의 특징을 살펴보면 SPA(Single Page Application) 으로 매번 처음부터 화면을 받아오는 방식을 취하는게 아니고, 가상의 DOM을 만들어서 업데이트되는 내용만 다시 그려서 UI를 보여주게 되는 특징이있다. 그러므로, 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 가지고, 생명주기의 때에 따라 어떤 작업을 처리해야 하는지 지정해줘야 불필요한 업데이트를 방지할 수 있다.

컴포넌트는 기본적으로 클래스형 컴포넌트, 함수형 컴포넌트 두 방식이 존재한다. 생명주기 메서드는 class 컴포넌트에서 활용하는 메서드로** 함수형 컴포넌트에서는 Hook을 사용**해서 그 기능을 한다. 그 Hook의 종류 중 하나가 useEffect이다!

(즉! 원래는 클래스 컴포넌트를 사용해서 생성될 때, 업데이트 될 때, 제거 될 때, 일어나는 일들을 생명주기 메서드로 지정해서 관리해야했다. 그러나, 클래스 컴포넌트는 사용방식(=문법) 이 매우 복잡해서 쓰기가 불편하고 함수형 컴포넌트가 훨씬 직관적이고 보기 쉽다. 하지만, 생명주기 메서드를 사용해야 하니 클래스 컴포넌트를 계속 사용을 해왔다. 그러나 그걸 보완하기 위해 Hook이 만들어졌다. 직관적이고 쓰기 좋은 함수형 컴포넌트에서도 Hook을 이용해서 생성주기 메서드와 같은 일을 할 수 있게 되었다는 것!)

-> 생명주기 메서드 보러가기

그럼 대체 side effect는 뭔데?

side effect는 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말한다. 데이터 가져오기, 타이머함수 사용하기, 수동으로 React 컴포넌트의 DOM을 수정하는등이 있고, 함수 컴포넌트의 본문 안에서는 허용되지 않는다. 이를 수행한다면 버그 및 UI의 불일치를 야기하게 될 것이다.

useEffect 사용법

// import는 react와 함께 해주어야 한다.
import React, { useEffect } from 'react';

//이러한 형태가 기본이 된다.
useEffect(Effectcallback, deps);

//Deps: 변경을 감지할 변수들의 집합(배열)
//EffectCallback: deps에 지정된 변수가 변경될 때 실행할 함수


useEffect( () => {
    // mount 시 실행할 함수
    return () => {
        // unmount 시 실행할 함수
    ]
}, [deps값]); //빈 배열일 경우 컴포넌트가 마운트 될때 한번 실행

이렇게 알아보다 보니 조금 이해가 된 느낌이다. 아직도 조금 뭔가 해결안된 무언가가 있는 느낌이지만 그건 차차 사용해보면서 더 알아봐야겠다!

📍이번주 학습 목표

• JavaScript 기초 문법 공부하기
• DOM과 이벤트 동작 방법 이해하기
• 제이쿼리 사용 방법 공부하기
• 자료구조의 개념 공부하기
  >>**오늘 배운 내용 **💪 >> - 자료구조 개념 공부하기

<오늘 복습할 내용>

1. 자료구조
2. 시간 복잡도

1. 자료구조

- 알고리즘, 자료구조의 정의

• 알고리즘이란 무엇일까? = 알고리즘이란 문제를 해결하는 방법을 말한다. 속도가 빠르고 메모리는 적게 사용하면서 문제를 효율적으로 해결하는 방법을 찾는 것이다.

• 자료구조란 무엇일까? = 자료구조란 자료를 담는 컨테이너를 말한다.프로그래밍에서 데이터를 효율적으로 접근 및 수정하기 위해 만들어진 데이터 값의 모임, 관계 및 데이터에 적용할 수 있는 함수나 명령을 의미한다.

  효율적인 알고리즘을 찾을때에는 시간 복잡도와 공간 복잡도에 대해서 고려해야한다. 그때 시간 복잡도는 어떻게 보면 좋을까?

2. 시간 복잡도

- 시간 복잡도

• 우리는 어떤 알고리즘이 더욱 효율적인지 보기 성능을 비교하기 위해서 여러가지 방법으로 연구가 있었지만, 결국에 우리는 연산의 횟수를 체크하는 방법으로 성능을 확인하고, 전체 연산의 횟수가 크게 영향을 주는 전체 코드에서 가장 시간이 오래 걸리는 부분을 찾아 그 부분을 표현 하는 방법으로 성능을 비교하기로 했다. 그리고 그것을 빅오 표기법으로 나타내게 된다.

• 우리가 자료구조의 특성을 확인할 때에는, 탐색, 삽입, 삭제에 있어서 각각에 대한 시간 복잡도를 확인해야 한다.

- 빅오 표기법

빅오 표기법에 대해서 간단하게 이해해보자! 위와 같이 가장 시간이 오래 걸리는 부분을 찾아 (= 최악의 경우일때) 시간 복잡도를 나타내는 것이다.

#만일 리스트가 하나 있다고 하자.
a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

#리스트 a에서 뒤에 있는 원소 하나만 뺀다고 가정하면 O(1)로 나타낸다.
a.pop()

#리스트를 for문으로 한 번 돌려 출력한다고 해보자.
#이 경우 N개의 배열을 한번 완전히 돌리게 되므로 O(N)
for item in a:
    print(item)

#리스트를 for문 안에 for문으로 두번 돌린다고 하면 O(N^2) =N의2제곱
#N개를 완전히 두번 돌리기 때문에.
for i in a:
    for j in a:
            print(i,j)

+) 잡담🙌

2주차 마지막 수업 부터 3주차 수업까지 복습하고 블로그 작성을 못했다,, 절망 😂 사실 갑작스러운 수술이 진행되는 바람에 5일이나 병원에 입원을 했고 분명 입원해서 공부 할 수 있을거라고 자신했으나 그럴 여유따위는 없었고 헤롱헤롱 퇴원하고도 회복이 느려서 밀린 수업 듣는걸로 정신이 나가버리고 그러면서 4주차 수업도 나가려니까 이제는 수업 따라가기도 힘든 지경이 되어 버렸다,,😭 아직도 완벽한 일상으로 돌아오지 못해서 컨디션 회복을 하면서 힘들겠지만 다시 열심히 열심히 따라가보려고 노력중이다,,! 💪 TIL는 매번 해볼려고 노력햇는데 다시 복습하면서 채워보자😇

📍이번주 학습 목표

• JavaScript 기초 문법 공부하기
• DOM과 이벤트 동작 방법 이해하기
• 제이쿼리 사용 방법 공부하기
• 자료구조의 개념 공부하기
  >>**오늘 배운 내용 **💪 >> - Javascript 기초 문법 공부하기

<오늘 복습할 내용>

1. return
2. addEventListener
   > 오늘도 자바스크립트에 대해서 공부했다. 그 중에서도 새로 알게 된 내용 복습하기! return과 이벤트에 대해서 복습해보자! return은 기본중에 기본이지만 놓혔던 부분 체크하기!

1. return

• return 명령문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환합니다. = return으로 주어진 값을 반환하는 것 뿐만 아니라, 함수 실행을 종료하는 break를 걸어줄 수 있다는 뜻이다! 이걸 잘 활용 하면 함수 실행을 종료하도록 응용이 가능하다! ✅

const num1 = 1;
const num2 = 2;

function example(n){
    if (n === 1) {
          return '함수에서 나가자!'
    }
    return '실행하자!'
}

console.log(example(num1)); // '함수에서 나가자!'
console.log(example(num2)); // '실행하자!'

2. addEventListener

= 자바스크립트에서는 많은 종류에 이벤트를 만들어서 등록해서 실행하는게 가능한데, 이벤트를 등록하는 방법 중에 가장 권장 되는 방법은 addEventListener를 사용하는 것이다. 그 이유는 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록 할 수 있기 때문이다. 주의사항! addEventListene는 여러개의 이벤트를 등록할 수 있는 반면, *Event handler properties를 사용해서 만들게 되면 마지막에 설정된 이벤트만 실행한다. 그러나, **addEventListenr 는 ie8 이하 버전에서는 작동하지 않는다.

이벤트 객체

이벤트를 만들어서 실행할 때, 브라우저는 자동적으로 이벤트 객체를 생성해서 이벤트에 관한 정보를 담고, 핸들러의 인수의 형태로 전달한다.

function handleClick(e){
    console.log(e.target); //이벤트의 대상 
    console.log(e.type);     //이벤트의 타입 = "click"
}

item.addEventListener("click" , handleClick);

📍이번주 학습 목표

• JavaScript 기초 문법 공부하기
• DOM과 이벤트 동작 방법 이해하기
• 제이쿼리 사용 방법 공부하기
• 자료구조의 개념 공부하기
  >>**오늘 배운 내용 **💪 >> - Javascript 기초 문법 공부하기

<오늘 복습할 내용>

1. 자바스크립트와 DOM
2. Node 객체

1. 자바스크립트와 DOM

• DOM이란? = DOM(= Document Object Model)은 객체 지향 모델로써 구조화 된 문서를 표현하는 방식이다. DOM은 XML이나 HTML문서의 프로그래밍 인터페이스를 나타낸다. DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서구조, 스타일, 내용 등을 변경할 수 있도록 한다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

• DOM의 종류 1) core DOM : 모든 문서 타입을 위한 DOM모델. 2) HTML DOM : HTML문서를 위한 DOM모델. 3) XML DOM : 문서를 위한 DOM 모델

  • Document 객체 = Document 객체는 웹 페이지를 의미한다. 웹 페이지에 존재하는 HTML요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 한다.

2. 노드 객체

• ** 노드와 노드 트리** = HTML DOM에서 정보를 저장하는 계층적 단위 = 노드 트리는 노드들이 집합으로, 노드 간의 관계를 나타낸다. ⇒ 자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근할 수 있다.

• 노드 간의 관계 = 노드 트리는 모든 노드는 서로 계층적 관계를 맺고 있다.

• 노드의 종류 1) 문서 노드 (document node) → HTML 문서 전체를 나타내는 노드
  2) 요소 노드 (element node) → 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드
  3) 주석 노드 (comment node) → HTML 문서의 모든 주석은 주석 노드
  4) 속성 노드 (attribute node) → 모든 HTML요소의 속성은 속성 노드 이며, 요소 노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식 노드에는 포함 되지 않는다.
  5) 텍스트 노드 (text node) → HTML 문서의 모든 텍스트는 텍스트 노드

• 노드의 값 = 노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있다. nodeName(이름), nodeValue(값), nodeType(타입)

<참고 문서>

• MDN - DOM소개 https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
• MDN - 중요 렌더링 경로 https://developer.mozilla.org/ko/docs/Web/Performance/Critical_rendering_path
• 네이버 D2 - 브라우저는 어떻게 동작하는가? https://d2.naver.com/helloworld/59361
• DOM은 정확히 무엇일까? https://wit.nts-corp.com/2019/02/14/5522

📍이번주 학습 목표

• JavaScript 기초 문법 공부하기
• DOM과 이벤트 동작 방법 이해하기
• 제이쿼리 사용 방법 공부하기
• 자료구조의 개념 공부하기
  >>**오늘 배운 내용 **💪 >> - Javascript 기초 문법 공부하기

<오늘 복습할 내용>

1. 자바 스크립트

오늘 수업에서는 데이터타입, 연산자, 반복문, 조건문과 같은 자바스크립트의 기초 문법에 대해서 공부를 했다. 오늘은 암묵적 타입 변환에 대해서 자세히 공부를 해보자.

// 사칙 연산에 대해서 공부 할때
//문자열에서 +는 문자열로 출력하지만 다른 사칙연산의 경우는 임의로 계산해서 출력한다.

"0" + "1" = "01";
"1" - "0" = 0
"2" * "2" = 4
"4" / "2" = 2

그렇다면 다른 경우는 어떻게 되는걸까?

암묵적 타입 변환

= 자바 스크립트 엔진은 표현식을 평가 할 때 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환 할 때가 있다. 이와 같이 암묵적 타입 변환의 결과를 예상하지 못하고 사용하게 되면 에러를 발생할 수 있기 때문에 자바스크립트에서 어떤식으로 암묵적 타입 변환이 일어나는지 살펴볼 필요가 있다.

문자열 타입으로 변환

//숫자 타입
1 + '2'         // -> "12"
`1 + 1 = ${1 + 1}`    // -> "1 + 1 = 2"
0 + ''             // -> "0"
-0 + ''            // -> "0"
1 + ''            // -> "1"
-1 + ''            // -> "-1"
NaN + ''        // -> "NaN"
Infinity + ''        // -> "Infinity"
-Infinity + ''         // -> "-Infinity"

//불리언 타입
true + ''        // -> "true"
false + ''        // -> "false"

//null 타입
null + ''        // -> "true"

//undefined 타입
undefined + ''        // -> "undefined"

//심벌 타입
(Symbol()) + ''        // -> TypeError

//객체 타입
({}) + ''        // -> "[object Object]"
Math + ''        // -> "[object Math]"
[] + ''            // -> ""
[10, 20] + ''        // -> "10,20"
(function(){}) + ''    // -> "function(){}"
Array + ''        // -> "function Array() { [native code] }"

숫자 타입으로 변환

1 - '1'         // -> 0
1 * '10'        // -> 10
1 / 'one'        // -> NaN
'1' > 0            // -> true

//문자열 타입
+''            // -> 0
+'0'            // -> 0
+'1'            // -> 1
+'string'        // -> NaN

//불리언 타입
+true            // -> 1
+false             // -> 0

//null 타입
+null            // -> 0

//undefined 타입
+undefined        // -> NaN

//심벌 타입
+symbol()        // -> TypeError

// 객체 타입
+{}            // -> NaN
+[]            // -> 0
+[10, 20]        // -> NaN
+(function(){})        // -> NaN

출처: '모던 자바스크립트 Deep Dive'(이웅모 저)

물론, 다 기억을 못하겠지만 수시로 들어와서 눈에 익혀서 생각한대로 출력 값이 나오지 않아 에러가 생기는 일이 일어나지 않도록 주의해야겠다!

📍이번주 학습 목표

• JavaScript 기초 문법 공부하기
• DOM과 이벤트 동작 방법 이해하기
• 제이쿼리 사용 방법 공부하기
• 자료구조의 개념 공부하기
  >>**오늘 배운 내용 **💪 >> - Javascript 기초 문법 공부하기 >> - 제이쿼리 사용 방법 공부하기
  

<오늘 복습할 내용>

1. 제이쿼리

제이쿼리

제이쿼리의 존재에 대해서 들어는봤는데 이제는 사용하지 않는 추세이기 때문에 공부할 필요가 없다는 이야기를 많이들어서, 크게 공부하지 않고 지내왔는데 제이쿼리가 뭔지 늘 궁금했다! 오늘 공부해보자.

제이쿼리는 뭘까?

먼저, 제이쿼리가 뭔지에 대해서 알아보자.

• JQuery란? = 자바스크립트의 라이브러리 라고 할 수 있다. 라이브러리라고 하면 다른사람들이 만들어 놓은 코드의 모음으로, 라이브러리를 사용하면 내가 필요한 부분만 가져다가 쓸 수 있다.

왜 제이쿼리를 이제는 사용하지 않는걸까?

• 과거에는 공통적인 웹 표준이 잘 정립되어있지 않았기 때문에, 브라우저마다 동작하는 웹 사이트를 만들기 위해서 각각의 브라우저에서 작동하는 코드를 짜야 했다. 그 과정에서 제이쿼리를 사용하면 각각의 브라우저마다 코드를 다 짜야하는 번거로움을 덜 수 있었다. 하지만 이제는 웹 표준이 잘 정립되어 있기 때문에, 바닐라 자바스크립트로와 Web API로 모든 브라우저가 작동하도록 만들수 있기 때문이다.

그럼에도 제이쿼리를 왜 공부하는지?

• 물론 지금 제이쿼리를 점점 사용하지 않는 추세여서, 바닐라 자바스크립트가 더 중요한것은 맞지만, 아직 제이쿼리가 사용되는 곳도 있고, 레거시 코드를 다시 짜야할때 읽고 해석할 필요가 있기에 공부를 한다.

제이쿼리 기본 문법

$(selector).action()

//예시를 들어보자!
//h1 태그를 클릭하면 h1 태그의 background-color 바꾸기
$('h1').click(function(){
  $(this).css("background-color", "red")
})

= 이와같이 사용하면 되고, action에도 여러가지가 있어서 응용해서 사용하면 된다!

+오늘 공부하면서 느낀점🙌 처음 접해보는 제이쿼리! 확실히 사용 방법이 용이하다. 그래도 우선순위는 바닐라 자바스크립트이기 때문에 제이쿼리를 보면서 바닐라 자바스크립트로 어떻게 코드를 짜면 좋을지 생각해보는것도 좋을것 같다!

📍이번주 학습 목표

• 웹 프로그래밍 기초 배우기
• HTML/CSS 로 웹사이트 제작하기
• 리눅스에 대해 공부하기
• Git 에 대해 공부하기
  >>**오늘 배운 내용 **💪 >> - 리눅스, Git에 대해서 공부하기
  

<오늘 복습할 내용>

1. 리눅스

1. 리눅스 (LINUX)

나는 비전공자 이기 때문에 IT쪽 지식이 부족해서 리눅스는 사실 처음 접해봤다. 먼저, 리눅스가 뭔지를 이해하기 위해서 정보처리기사 필기 시험 책을 참고해서 본 강의에서 배운 내용을 더욱 넓은 범위에서 깊게 이해할 필요가 있다 느꼈다!

운영체제란 무엇인가?

리눅스도 운영체제 중 하나라고 볼 수 있는데, 먼저 운영체제를 이해해보자.

• 운영체제 (OS:Operating System)란, ** 컴퓨터 시스템의 자원들을 효율적으로 관리하며, 사용자가 컴퓨터를 편리하고 효과적으로 사용할 수 있도록 **환경을 제공하는 여러 프로그램의 모임이다. 컴퓨터 사용자와 컴퓨터 하드웨어 간의 인터페이스로서 동작하는 시스템 소프트웨어의 일종으로, 다른 응용 프로그램이 유용한 작업을 할 수 있도록 환경을 제공해준다.

• 우리가 아는 Window, MacOS는 익숙한 운영체제 인데, 그 이유는 개인용 운영체제이기 때문이고, UNIX, LINUX는 서버용 운영체제 *이다. Window10과 같은 개인용은 하나의 컴퓨터를 한 사람이 사용하는 Single-User시스템이고, UNIX, LINUX, Window NT와 같은 *서버용은 하나의 컴퓨터를 동시에 여러 사람이 사용하는 Multi-User 시스템이다.

운영체제를 이해하기 위해 쉽게 예를 들자면, MP3 플레이어를 켜면 전원이 들어와 장치를 깨우고 사용자의 명령에 따라 음악을 재생하는 동작들을 관리하는 것들도 전부 운영체제라 할 수 있다. (나무위키 출처) 기술의 발달로 사물 인터넷이 점점 더 늘어나고 있기 때문에 여러 하드웨어에 다양한 작업을 하기 위해 운영체제의 수요가 높아지고 있다. 개인 PC를 생각하면 윈도우, 맥OS 같이 운영체제의 그림이 그려지지만 서버용 운영체제라는 개념은 아직 쉽게 와닿지 않는게 사실이다.

LINUX의 특징?

• UNIX기반으로, 완벽하게 호환이 가능하다.
• 프로그램 소스 코드가 무료로 공개되어 있기 때문에 프로그래머가 원하는 기능을 추가할 수 있고, 다양한 플랫폼에 설치하여 사용이 가능하며, 재배포가 가능하다.
• 다중 사용자 (Multi-User), 다중 작업 (Multi-Tasking)을 지원한다.
• 많은 네트워킹 기능을 제공하므로 통신망 (Network) 관리용 운영체제로 적합하다.
• 트리 구조의 파일 시스템을 갖는다.

대체 왜 리눅스를 공부해야 하는거지?

결국에 내가 궁금했던건 내가 왜 리눅스를 공부해야할까 라는 의문이었다. 이 아이로 뭘 할 수 있길래 배워야 하는거지? 어떻게 활용이 되는거지?

리눅스를 사용하면 웹 서버 구축이 가능하고, 사물 인터넷을 할 수 있다고 이해했다. 즉, 리눅스를 활용하여 하드웨어를 활용할 수 있는 환경을 만드는게 가능하다고 이해했다! ✅

+) 오늘 수업에서 느낀 점 🙌 개발자들에게 그저 코딩만 하는게 아닌 컴퓨터 공학의 지식이 왜 요구하는지 절실하게 느끼고 있다. 큰 그림이 어떻게 작동되는지 그리고 그 안에서 내가 개발하고자 하는 부분이 뭔지 어떻게 작동하는지를 제대로 이해하지 못하면, 내가하는 코드 몇줄의 의미를 제대로 파악하지 못한다는 생각이 들었다. 비전공자로써 컴퓨터 공학적 지식이 부족함을 많이 느끼고 있고, 이 부분은 혼자 공부해나가며 메꿔야할 과제라고 느껴서 이 부분도 스스로 찾아보고 공부해야겠다.

📍이번주 학습 목표

• 웹 프로그래밍 기초 배우기
• HTML/CSS 로 웹사이트 제작하기
• 리눅스에 대해 공부하기
• Git 에 대해 공부하기
  >>**오늘 배운 내용 **💪 >> - html, css 학습하여 웹사이트 제작하기
  

<오늘 복습할 내용>

1. background 속성
2. y축 정렬 방법
3. 패럴랙스 효과란?
4. input 태그

1. background 속성

• background 속성

/* background가 가지는 속성과 순서는 아래와 같다 */
.background{
   background-color: red;
   background-image: url();
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: top;
}
   background-size: auto | length | cover | contain | initial | inherit
}

2. y축 정렬 방법

• y축 정렬 방법 y축 정렬 방법은 여러가지가 있으나 한개 배웠으니 체크체크 해두기 ✅ 응용해서 중앙 정렬 하는 방법도 생각해보기 !

{
/* position 사용할때 y축 중앙 정렬 하는법 */
  top: 50%;
  transform: translateY(-50%);

/* x,y축 중앙 정렬 하는 방법 */
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

3. 패럴랙스 효과란?

• 패럴랙스 효과란? = 주로 웹사이트에서 스크롤을 함에 따라 오브젝트와 배경 이미지가 시간차를 두고 변하는 기법을 의미한다. 패럴랙스 스크롤링을 활용하는 홈페이지가 늘어나고 있으며, 사용자와의 인터랙션을 높이고 호기심을 자극하고 보기에도 매력적인 홈페이지 제작이 가능하다.

/* background image를 attachment fixed로 주는 걸로 간단하게 패럴랙스 효과 만들기*/

.parallax{
    background: url('background-image-넣기') no-repeat fixed;
    background-size: cover;
}

맞아! 내가 요새 재밌다고 생각한 홈페이지들은 예를 들면 애플 홈페이지에 가면 스크롤에 함에 따라 현란하게 홈페이지가 바뀌며 3D 차원에 들어가는것 같은 UI를 보이고 했는데 이게 바로 패럴랙스 효과라고 하는구나 이제야 알게되었다. 나도 이런거 만들고 싶었는데 ☺️

4. input 태그

input 태그는 물론 사용도가 높기 때문에 많이 다뤘지만, label 과 함께 쓴다는 점은 이번에 처음 알게 되었다. 오늘 처음 배운 부분 체크체크 해두기 ✅

• input 태그 중 - text, email, tel, password

  <label for="topic">제목</label>
  <input type="text" id="topic" name="topic">
  

이메일 주소

    = 이와같이 label 태그와 함께 사용 해준다. 

- **label 태그란 무엇인가?**
= label 태그는 이름표와 같은 역할은 한다. 양식 입력 창의 요소들을 위한 캡션으로 나타낸다. input 태그와 함께 사용하는 것으로 인해 사용자의 이용성을 향상시킬 수 있다. 예를 들면 위와같은 예시에서는 제목이라는 텍스트를 선택 하는 것만으로도 input 태그 안에 입력창으로 갈 수 있다. 또한, 웹 접근성의 이유로 사용을 해줄 필요가 있다. 스크린 리더와 같은 통신 기기는 label태그를 통해 연결된 input태그를 인식할 수 있다.
<br>
- **input 태그 중 - checkbox, radio**
= check box 중복 체크 가능 / radio 중복 체크 불가능
```html
      <label for="html">
              <input type="checkbox" id="html" name="html">html
          </label>
          <label for="css">
              <input type="checkbox" id="css" name="css">css
          </label>
      <label for="js">
              <input type="checkbox" id="js" name="js">js
          </label>

          <label for="male">
              <input type="radio" id="male" name="gender">M
          </label>
          <label for="female">
              <input type="radio" id="female" name="gender">F
          </label>

    = 이와 같이 만들면 checkbox는 중복 체크 가능하게,
     radio는 중복 체크가 불가능하게 만들 수 있다.

📍이번주 학습 목표

• 웹 프로그래밍 기초 배우기
• HTML/CSS 로 웹사이트 제작하기
• 리눅스에 대해 공부하기
• Git 에 대해 공부하기
  >>**오늘 배운 내용 **💪 >> - html, css 학습하여 웹사이트 제작하기
  

<오늘 복습 할 목록>

1. 그리드
2. transform, transition, animation 속성
3. 미디어 쿼리
   
   ### 1. 그리드 > 레이아웃 표현을 하기 위해 여러가지 방법이 있지만 최신 기능 그리드! 들어본적도 있고 한두번 공부는 해보았지만 쓸일이 없겠지 싶어 대강 이해하고 넘어갔는데, 그리드를 지원하는게 96% 브라우저라고 하니 충분히 실무에서도 써도 될거 같고 이참에 제대로 공부하고 이해하고 넘어가자!

• 그리드 문법

  <div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  </div>

  .container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  /* grid-template-columns: repeat(3, 1fr); */
    grid-template-rows: 100px 500px;
  }

2. transform, transition, animation 속성

지금까지 html, css 작업 할때는 동적인 요소를 넣지 않았어서 잘 사용 해본적 없는 속성이여서 신경써서 잘 이해하고 넘어가야겠다 생각했다. 만약 처음 접하시는 분이라면 transform, translate, transition, animation 이름 도 비슷하고 어디에 속성을 넣어야 하는지도 꽤나 헷갈렸기 때문에 다시 한번 정리 하고 가면 좋을거 같다!

먼저! 이름이 비슷하니까 용어 정리부터 확실하게!

transform - 요소의 모양, 위치, 크기를 바꿀수 있는 속성 transition - 정해진 시간동안 요소의 속성값을 부드럽게 변화 시키는 속성 animation - 요소의 현재 스타일을 다른 스타일로 천천히 변화시키는 속성

• transform = transform 은 모양의 변형을 할 수 있는 속성이다. 그 종류로는 아래와 같다.

1. translate(x, y)
2. rotate(deg)
3. scale(x배율, y배율)
4. skew(x-deg, y-deg)
5. matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

해당 html요소에 transform속성을 지정하는걸로 변화 된 모양의 요소를 볼 수 있다.

• transition = 정해진 시간동안 요소의 속성값을 부드럽게 변화 시키는 속성이다. animation과 달리 트리거가 되는 장치를 설정 후 액션이 일어난다. 1회성의 움직임으로 이해했다. 예를 들면, 마우스를 클릭하면 크기가 커진다거나 마우스 호버를 하면 색깔이 바뀌거나 하는 1회성 움직임을 컨트롤 할때는 transition 속성을 만들어준다.

/* transition 속성 작성 문법 */
.transition {
    transition-property: all;
    transition-duration: 1000ms;
    transition-timing-function: linear;
    transition-delay: 3000ms;
}

/* 마우스를 호버하면 색깔이 바뀌는 움직임을 설정하는 예제로 알아보자 */
.box1 {
    color: blue;
    transition: color 0.3s linear; 
}
.box1:hover{
    color: red;
}
// 0.3초 동안 색깔이 blue 에서 red로 일정한 속도로 부드럽게 변화 

• animation = 요소의 현재 스타일을 다른 스타일로 천천히 변화시키는 속성이다. 내가 특별히 트리거가 되는 액션을 취하지 않아도 설정해놓으면 자동으로 움직인다.

  /* animation 속성 작성 문법 */
  .animation{
    animation-name: makeAnimationName;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  @keyframes makeAnimationName{
    from{ width: 300px }
    to{ width: 600px }
  }
  

/* 크기가 변하는 움직임을 설정하는 예제로 알아보자 */ .animation { width: 300px; height: 300px; background-color:orange; animation: changeWidth 3s linear 1s 6 alternate; } @keyframes changeWidth{ from{ width: 300px; } to{ width: 600px; } }

<br>

### 3.미디어 쿼리
> 미디어 쿼리도 몇번 다뤄본적 있어서 생소하지 않았지만 요새는 사용을 안했어서 다시 체크체크 하고 넘어가기!

<br>

- **미디어 쿼리 사용시 주의사항**
모바일 디바이스에서도 의도한 화면을 보게 하도록 아래 코드 꼭 넣어주기!
```html
<head>
    <meta name="viewport" content=“width=device-width, initial-scale=1.0”>
</head>

• 미디어 쿼리 문법

  @media (min-width: 320px) and (max-width: 640px){
    .media{
        //원하는 내용 입력
    }
  }

📍이번주 학습 목표

• 웹 프로그래밍 기초 배우기
• HTML/CSS 로 웹사이트 제작하기
• 리눅스에 대해 공부하기
• Git 에 대해 공부하기
  >>**오늘 배운 내용 **💪 >> - html, css 학습하여 웹사이트 제작하기
  

<오늘 복습 할 목록>

1. 웹 사이트 제작시 고려 사항
2. 마진 병합 현상
3. 캐스케이딩

1. 웹 사이트 제작시 고려 사항

1) 웹 표준 = 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격

웹표준은 웹에서 표준적으로 사용되는 기술이나 규칙으로, W3C가 규정한 표준안에 맞춰 웹을 만들어야한다. 즉, 웹 사이트가 웹 표준에 맞는 올바른 HTML,CSS,JavaScript를 가지고 있어야 한다.

2) 웹 접근성 = 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식

웹의 아버지라 불리는 팀 버너스리는 '웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.' 라고 하며 모두가 웹의 유익함을 누릴 수 있도록 해야 한다고 하였다. 이와같이 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 웹 접근성을 고려하여 웹 사이트를 제작해야 한다. 디자인의 측면에서는 색맹이나 저시력을 가진 사람들도 웹을 이용할수 있도록 최소 폰트 크기, 색깔을 규격을 지정하여 모두가 웹을 이용할수 있도록 하는 예가 있다. 개발에서는 시각장애를 가진 분들은 화면리더기를 사용하기 때문에 img태그에 alt에 대체 텍스트를 입력해 어떤 정보를 가지고 있는지 알 수 있도록 하는 예가 있다.

3) 크로스 브라우징 = 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

HTML, CSS, JavaScript를 공부 하다 보면 이 기술이 지원하는 브라우저가 있고 지원하는 브라우저가 없기도 하다. 개발을 할 때도 모든 브라우저가 또는 기기에서 제대로 작동하도록 고려하며 웹 사이트를 제작할 필요가 있다.

2. 마진 병합 현상

<style>
  .box1{margin-bottom: 150px;)
  .box2{margin-top: 100px;}
</style>

<div class="box1">box1</div>
<div class="box2">box2</div>

위와 같은 상황 일때 box1 과 box2 마진이 위 아래로 겹치게 된다. 이런 경우에는 둘 중에 숫자가 큰 값으로 적용되게 된다. 이 경우에는 숫자가 큰 box1의 {margin-bottom :150px;}이 적용된다.

분명 들어본적 있는 개념인데 실제로 html, css 할때는 생각을 안하고 만들었던 것 같다. 다시 한번 머리속에 입력! ✅

3. 캐스케이딩

** < CSS의 우선순위를 결정하는 세 가지 요소>** 1. 순서 = 나중에 적용한 속성값의 우선 순위가 높음 2. 디테일 = 더 구체적으로 작성된 선택자의 우선순위가 높음 ** 3. 선택자** = style > id > class > type 순으로 우선순위가 높음

점수를 계산해서 설명하시는 분들도 계시던데, 분명 알고 있는 개념이지만 만들때 제대로 인지 하지 못하고 했던 부분이라 다시 한번 머리속에 입력! ✅

+) 오늘 수업에서 느낀 점 🙌 -HTML을 만들때 조금 더 시맨틱하게 만들어야겠다고 생각했다. 나는 main태그는 처음보아서 충격! 띠용! 그리고 속성중에 role 이라는 것도 이번에 처음 알게 되었다. main태그는 특히 인터넷 익스플로러 에서는 지원하지 않기 때문에 role 속성에 main을 꼭 넣어주어야 한다. role속성도 웹 접근성을 위해 사용되며, 구조와 의미를 더욱 정확하게 전달할 수 있도록 하는 역할을 한다고 한다. 암묵적으로 보통 정해져 있으니 다음부터는 role속성도 넣어야 겠다.

<body>    
    <header></header>
    <main role="main">
      <section class="section1"></section>
      <section class="section2"></section>
    </main>
    <footer></footer>
</body>

-그리고 또 한가지 충격은 CSS에서 나는 selector의 띄어쓰기를 생각없이 썼구나 생각했다. 띄어쓰기는 후손 요소를 선택할때 쓴다. 근데 나는 그냥 썼던거 같다. 위의 예제를 사용하여 보자면

main section .section1{}

이런식으로 main 안에 section 중에 section1 이렇게 쓰면서 띄어쓰기를 했던 것이다! 하지만 후손 요소 선택이 아니기에 section과 .section1사이에는 띄어쓰기를 하면 안된다. 나는 그냥 저렇게 했던거 같은데,, 다시 제대로 이해하고 넘어가야지,, 체크체크 ✅

📍이번주 학습 목표

• 웹 프로그래밍 기초 배우기
• HTML/CSS 로 웹사이트 제작하기
• 리눅스에 대해 공부하기
• Git 에 대해 공부하기
  >>**오늘 배운 내용 **💪 >> - html, css 학습하여 웹사이트 제작하기

웹에 대해서 공부해보자!

인터넷과 웹은 같은것인가?

인터넷(영어: Internet, 문화어: 인터네트)은 컴퓨터로 연결하여 TCP/IP(Transmission Control Protocol/Internet Protocol)라는 통신 프로토콜을 이용해 정보를 주고받는 컴퓨터 네트워크이다.
출처:위키피디아

인터넷이라고 우리의 위키피디아에서 찾아보면 이렇게 정의를 내리고 있다. 즉, 인터넷은 웹과 같은게 아니다.

월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간을 말한다. 인터넷에서 HTTP 프로토콜, 하이퍼텍스트, HTML형식 등을 사용하여 그림과 문자를 교환하는 전송방식을 말하기도 한다.
출처:위키피디아

웹은 인터넷상에서 존재하는 하나의 서비스이다. 웹은 인터넷의 일부라고 볼 수 있다.

웹 브라우저와 웹 서버는 무엇인가?

웹 브라우저 또는 웹 탐색기는 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어이다. 웹 브라우저는 대표적인 HTTP 사용자 에이전트의 하나이기도 하다. 주요 웹 브라우저로는 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러/마이크로소프트 엣지,오페라, 삼성 인터넷, 사파리가 있다.
출처:위키피디아

웹 서버(Web Server)는 HTTP를 통해 웹 브라우저에서 요청하는 HTML 문서나 오브젝트(이미지 파일 등)을 전송해주는 서비스 프로그램을 말한다. 웹 서버 소프트웨어를 구동하는 하드웨어도 웹 서버라고 해서 혼동하는 경우가 간혹 있다.
출처:위키피디아

즉, 강의 중에 강사님의 말을 빌리면 웹브라우저 (=client) 웹서버(=sever)와 같다. 요청하는 컴퓨터는 클라이언트 응답하는 컴퓨터는 서버라고 할 수 있다. 네트워크에 접속된 각각의 머신을 호스트라고 한다. 웹 브라우저에서 웹 서버로 필요한 정보를 요청을 하고 받아낸 정보를 웹 브라우저를 통해 받는다고 이해했다.

웹사이트를 운영하기 위해서는 서버를 관리할 엔지니어가 필요한데, 일반적으로 웹(WWW) 공간을 임대(hosting)하는 것을 웹호스팅이라고 한다. 이것을 요즘에는 클라우드라고 표현을 한다.

+) 오늘 수업에서 느낀점 🙌

• 처음 해보는 TIL작성! 이번 코스를 시작하면서 해보려고 한다! 이번주는 HTML/CSS 파트이고 알고있는 내용이 많아서 알고 있는 내용에 관해서는 TIL에 작성하기 보다, 모르는 내용 혹은 제대로 이해하지 못한 내용들을 자세히 알아보고 공부하려고 생각중이다.

2021.09.14 알고리즘 테스트 연습 프로그래머스 > 스택/큐 > 기능개발

** 내가만든 코드 JavaScript ver.**

function solution(progresses, speeds) {
    let arr = [];
    let answer = [];
    let count = 1;
    let i = 1;

    progresses.forEach((item,idx) => {
        let days = Math.ceil( (100 - item) / speeds[idx]);
        arr.push(days);
    });
    while(arr.length > 0){
        if( arr[0] >= arr[i] ){
            count++;
            i++;
        }
        else if (arr.length === 1){
            answer.push(1);
            break;
        }
        else{
            answer.push(count);
            arr.splice(0,count);
            count = 1;
            i = 1;
        }
    }
    return answer;
}

<풀이 로직>

1. progresses에서 받은 배열을 forEach를 통해서 요소 당 몇일이 걸리는지 계산하여 새로운 배열 arr에 넣어주도록 한다.
2. days 가 들어있는 arr 배열에서 첫번째 요소가 다음 요소보다 작은지 큰지 while문을 통해서 확인한다. 1) 작은경우 (=첫번째 요소(=arr[0])가 큰 경우) count에 숫자 1을 더하고 인덱스를 뜻하는 i에도 1을 더한다. 2) 큰 경우 (=첫번째 요소(=arr[0]가 작은경우) count를 배열 answer에 넣고 arr배열에 count숫자만큼의 요소를 삭제 3) arr배열에 요소가 1개가 남은 경우 answer 배열에 1을 넣고 while문 끝내기