1. 설치된 Java 버전 확인

터미널에 다음의 명령어를 사용하여 내 컴퓨터에 설치된 java 버전을 확인한다. /usr/libexec/java_home -V

나는 14버전과 11버전이 설치된 상태이다.

2. 기본 JDK 설정

기본 JDK를 설정하기 위해서는 Mac 환경변수에 JAVA_HOME를 추가하고 PATH에 JAVA_HOME/bin 경로를 추가해야 한다.

2.1 .zshrc에 JAVA_HOME 및 PATH 설정

.zshrc파일에 JAVA_HOME 및 PATH를 설정해야 한다. nano 편집기 사용하여 .zshrc를 아래와 같은 명령어를 통해 편집할 수 있다. nano ~/.zshrc

파일 제일 하단에 다음 내용을 추가했다.

# Java 11
# export JAVA_HOME=$(/usr/libexec/java_home -v 11)
# export PATH=${PATH}:$JAVA_HOME/bin

# Java 1.8
export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)
export PATH=$JAVA_HOME/bin:$PATH

내용을 추가한 뒤에 ctrl + x, y, enter를 눌러 편집기를 빠져나온다.

그 후, "source" 명령어를 통해, Mac 환경변수에 JAVA_HOME과 PATH를 변경하기 위해 .zshrc에 정의한 export 명령어가 동작할 수 있도록 하면 제 mac의 기본 Java 버전 변경은 완료된다.

source ~/.zshrc

다음 명령어를 사용하여 버전의 변경을 확인한다. java -version

출처 : Mac에서 여러 개의 Java 버전 관리하기 (Mac/Linux 명령어를 곁들인) mac zsh셸에서 java 환경 변수 설정하기 (맥 zsh 자바) - 재테크 인공지능

며칠 전 유튜브를 보다가 Self-Driving Car with JavaScript Course – Neural Networks and Machine Learning 라는 재밌어 보이는 프로젝트를 발견했다.

출처 : Self-Driving Car with JavaScript Course – Neural Networks and Machine Learning

영상을 틀었다. 강의하시는 분은 10분 뒤에 자바스크립트의 Class를 이용하여 코드를 만들기 시작했고 곧 이론적 부족함을 느꼈다. 위의 프로젝트를 만들기 위해 필요한 자바스크립트 기본 지식을 정리하고자 한다.

생성자 함수

생성자 함수는 객체라는 붕어빵을 찍어내는 붕어빵 틀이라고 볼 수 있다.

붕어빵 틀을 이용하여 붕어빵을 계속 찍어낼 수 있고 그때 그때 알맞게 팥이나 크림 등 다양한 재료를 넣어서 모양은 같으나 맛은 조금 다른 붕어빵들을 만들 수 있다.

✨ 생성자 함수 예시

function Car(name) {
  this.name = name;
  this.canFly = false;
}

let car = new Car("SM5");

alert(car.name); // SM5
alert(car.canFly); // false

✅ 생성자 함수의 원칙

• 생성자 함수 이름의 첫 글자는 대문자로 시작해야 한다.
• new 연산자를 붙여 실행한다.

✅ new Car(...)을 실행시켰을 때 작동되는 알고리즘

• 빈 객체를 만들어 this에 할당한다.
• 함수 본문을 실행하고 this에 새로운 프로퍼티를 추가해 this를 수정한다.
• this를 반환한다.

function Car(name) {
  // this = {};  (빈 객체가 암시적으로 만들어진다.)

  // 새로운 프로퍼티를 this에 추가한다.
  this.name = name;
  this.canFly = false;

  // return this;  (this가 암시적으로 반환된다.)
}

✅ 생성자 함수와 return문

생성자 함수엔 보통 return 문이 없다. 반환해야 할 것들은 모두 this에 저장되고, this는 자동으로 반환되기 때문에 반환문을 명시적으로 써 줄 필요가 없다.

그런데 만약 return 문이 있다면 어떤 일이 벌어질까?

• 객체를 return한다면 this대신 객체가 반환된다.
• 원시형을 return한다면 return문이 무시된다.
• return 뒤에 객체가 오면 생성자 함수는 해당 객체를 반환해주고, 이 외의 경우는 this가 반환된다.

function Animal() {

  this.name = "원숭이";

  return { name: "고릴라" };  // <-- this가 아닌 새로운 객체를 반환
}

alert( new Animal().name );  // 고릴라

function Animal() {

  this.name = "원숭이";

  return; // <-- this를 반환
}

alert( new Animal().name );  // 원숭이

✅ 생성자 내 메서드

• 생성자 함수를 사용하면 매개변수를 이용해 객체 내부를 자유롭게 구성할 수 있다. (메서드를 더해주는 것도 가능.)

아래 예시에서 new Car(name)는 프로퍼티 name과 메서드 hitTheBrake를 가진 객체를 만들어준다.

function Car(name) {
  this.name = name;

  this.hitTheBrake = function() {
    alert( "stop..!" );
  };
}

let SM5 = new User("SM5");

SM5.hitTheBrake(); // stop..!

/*
SM5 = {
   name: "SM5",
   hitTheBrake: function() { ... }
}
*/

이상 생성자 함수가 무엇인지에 대해 간단히 정리 해봤다. 더 자세한 내용은 아래 참조 링크를 통해 배울 수 있다.

출처 : new 연산자와 생성자 함수 Self-Driving Car with JavaScript Course – Neural Networks and Machine Learning

약 4개월만에 다시 터미널을 실행시켰고 예전에 그랬듯이 code . 명령어를 통해 비주얼 스튜디오 코드 를 실행시키려 했으나 다음과 같은 오류가 떴다. 무슨 말인지 알아들을 수 없다. 스택 오버 플로우에 검색해본다. 맥북os 업데이트 이후에 발생한 python2 uninstall과 관해 생긴 문제 같다. 아래 링크를 눌러 해결방법을 찾아봤다. 이렇게 하면 해결이 된단다. 이전에 사용했던 cd.. 명령어를 활용하여 경로를 따라가자. usr, local, bin 디렉토리는 무엇일까.. 하여튼 경로를 따라간 뒤 nano code명령어를 실행시킨다. nano는 text editor라고 한다. python을 python3로 변경했다.

• nano에디터에서 나오는 방법

참고 : https://stackoverflow.com/questions/72147174/updated-macbook-and-now-code-command-in-terminal-is-giving-error-any-ideas https://github.com/microsoft/vscode/issues/141738

The same-origin policy is a critical security mechanism that restricts how a document or script loaded by one origin can interact with a resource from another origin.

• _한 출처에 의해 로드된 문서 또는 스크립트가 다른 출처의 리소스와 상호 작용할 수 있는 방법을 제한하는 중요한 보안 메커니즘_

It helps isolate potentially malicious documents, reducing possible attack vectors.

• 잠재적으로 악의적인 문서를 격리하여 공격 경로를 줄여준다.

😊 짧게 줄이자면 웹 브라우저에서 동작하는 프로그램은 로딩된 위치에 있는 리소스만(동일 출처에 있는 리소스만) 접근 할 수 있다는 보안 정책이라는 것이다.

❓ *SOP에서 말하는 Origin(출처)의 정의는 무엇일까? : *

Two URLs have the same origin if the protocol, port (if specified), and host are the same for both. You may see this referenced as the "scheme/host/port tuple", or just "tuple". (A "tuple" is a set of items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.)

• 두 URL의 프로토콜, 포트(명시한 경우), 호스트가 모두 같아야 동일한 출처라고 할 수 있다.

• "스킴 / 호스트 / 포트 튜플"이나 그냥 "튜플"(2개 이상의 요소가 전체를 구성하는 집합)이라고 하기도 함.

• 아래 표는 URL http://store.company.com/dir/page.html와 비교하여 출처가 같은지 아닌지 판단하고 있다.

😊 protocol, host, port가 전부 일치해야 동일한 출처라 할 수 있으며 동일한 출처여야지 리소스 (script, document와 같은) 를 요청할 수 있음.

❓ Inherited origins? (상속된 출처)

Scripts executed from pages with an about:blank or javascript: URL inherit the origin of the document containing that URL, since these types of URLs do not contain information about an origin server.

• about:blank와 javascript: URL은 출처 서버에 대한 정보를 가지고 있지 않다. 따라서 이런 URL에서 실행하는 스크립트는 해당 URL을 가지고 있는 문서의 출처를 상속한다.

For example, about:blank is often used as a URL of new, empty popup windows into which the parent script writes content (e.g. via the Window.open() mechanism).

• 예를 들어, about:blank는 부모 창에서 내용을 채워넣을 빈 팝업(Window.open() 등의 방식으로 생성)의 URL로 주로 사용됨.

If this popup also contains JavaScript, that script would inherit the same origin as the script that created it.

• 만약 이 팝업이 JavaScript도 포함한다면 팝업을 생성한 스크립트의 출처를 따라가게 됩니다.

😊 URL 출처 서버에 대한 정보가 없는 페이지 (about:blank와 javascript: ex. 팝업 페이지)의 경우 그 페이지를 생성한 스크립트의 출처를 상속받게 된다는 이야기

✔️ Internet Explorer (IE)에서는 예외사항이 있다.

(IE만 해당된다!)

If both domains are in the highly trusted zone (e.g. corporate intranet domains), then the same-origin limitations are not applied.

• 양쪽 도메인 모두가 높음 단계의 보안 수준을 가지고 있는 경우 동일 출처 제약을 적용하지 않는다.

IE doesn't include port into same-origin checks. Therefore, https://company.com:81/index.html and https://company.com/index.html are considered the same origin and no restrictions are applied.

• Internet Explorer는 동일 출처 정책 검사에 포트를 포함하지 않는다.

• 따라서 http://company.com:81/index.html http://company.com/index.html 위의 두 출처는 동일 출처로 간주하며, 제한을 두지 않는다.

😊 IE는 다른 브라우저와 예외점이 있다: Origin확인에 port를 신경쓰지 않는다던가 양쪽 출처가 highly Trust Zone에 있는 경우 SOP가 적용되지 않는다거나~

❌ Changing origin (출처 변경하기)

Warning: The approach described here (using the document.domain setter) is deprecated because it undermines the security protections provided by the same origin policy, and complicates the origin model in browsers, leading to interoperability problems and security bugs.

• 경고: 여기에 설명된 접근 방식(document.domain setter 사용)은 동일한 원본 정책에서 제공하는 보안 보호 기능을 약화시키고 브라우저의 원본 모델을 복잡하게 만들어 상호 운용성 문제와 보안 버그를 유발하므로 더 이상 사용되지 않는다.

😊 이제 사용 불가 (위와 같은 문제점이 발견되었기 때문에) : 자세한건 아래 출처의 MDN 문서 참고

✔️ Cross-origin network access (서로 다른 출처 네트워크 접근)

The same-origin policy controls interactions between two different origins, such as when you use XMLHttpRequest or an <img> element. These interactions are typically placed into three categories:

• 동일 출처 정책은 서로 다른 출처 사이에서 XMLHttpRequest 혹은 <img> 요소를 사용할 때 등의 상호작용을 통제한다.

• 상호작용은 보통 다음의 세 가지 범주로 나뉜다.

1️⃣ Cross-origin writes are typically allowed. Examples are links, redirects, and form submissions. Some HTTP requests require preflight.

• 교차 출처 쓰기는 보통 허용한다. 예시로는 링크, 리다이렉트, 양식 제출 등이 있다.

• 일부 HTTP 요청은 preflight를 요구한다.

2️⃣ Cross-origin embedding is typically allowed. (Examples are listed below.)

• 교차 출처 삽입은 보통 허용한다. 예시는 아래

✳️ <script src="..."></script>로 추가하는 JavaScript. 그러나 구문 오류에 대한 상세 정보는 동일 출처 스크립트에서만 확인 가능 ✳️ <link rel="stylesheet" href="...">로 적용하는 CSS. CSS의 느슨한 구문 규칙으로 인해, 교차 출처 CSS는 올바른 Content-Type 헤더를 필요로 한다. 브라우저 별 제한은 다르다. ✳️ <img>로 표시하는 이미지. ✳️ <video>와 <audio>로 재생하는 미디어. ✳️ <object>와 <embed>로 삽입하는 외부 리소스. ✳️ @font-face로 적용하는 글씨체. 하지만 일부 브라우저는 동일 출처를 요구할 수도 있음. ✳️ <iframe>으로 삽입하는 모든 것. X-Frame-Options 헤더를 사용해 교차 출처 프레임의 대상이 되는 것을 방지할 수 있다.

3️⃣ Cross-origin reads are typically disallowed, but read access is often leaked by embedding. For example, you can read the dimensions of an embedded image, the actions of an embedded script, or the availability of an embedded resource.

• 교차 출처 읽기는 보통 불허하지만, 종종 교차 출처 삽입 과정에서 읽기 권한이 누출된다. 가령 삽입한 이미지의 크기나, 삽입한 스크립트의 행동, 삽입한 리소스의 가용성 등을 읽을 수 있다.

공식문서를 읽으면서 내용을 이해할 수가 없었고 아래 출처의 이동욱님의 블로그를 통해 교차 출처 네트워크 접근에 대해 배울 수 있었다.

🚩 동일 출처 정책에 대한 처리

• 만약 http://www.jinkwon1.com 에서 스크립트를 실행하고 실행된 스크립트에 의해서 다른 origin인 http://www.other.com 이 호출된다면 SOP에 의해 호출 에러가 발생할 것이다.

• 이를 해결하는 방법으로는 인프라 측면에서 프록시를 사용하는 방법이나 JSONP와 CORS(Cross Origin Resource Sharing)이라는 방법이 있다.

1️⃣ 프록시를 이용하는 방법

• 앞단에 Reverse Proxy를 넣어서 전체 URL이 같게한다면 스크립트가 로딩된 사이트 (http://www.jinkwon1.com) 와 스크립트에서 호출하고자 하는 API (http://www.other.com) 의 URL이 같아진다.

• 간단하지만, 자사의 웹 사이트를 서비스하느 경우에만 가능. 그래서 자사의 서비스용 API를 만드는 경우에는 괜찮지만, 파트너사나 일반 개발자에게 자바스크립트용 REST API를 공개하는 경우에는 적절하지 않다.

2️⃣ 특정 사이트 접근 허용 방식

• CROS 방식 : API 서버의 설정에서 모든 소스에서 들어오는 API 호출을 허용

• 이는 HTTP로 API를 호출하였을 때 HTTP에 요청에 응답을 주면서 HTTP 헤더에 Request Origin(요청을 처리해 줄 수 있는 출처)를 명시하는 방식

• (http://www.other.com)에서 응답 헤더에 다음과 같이 명시해주면 (http://www.jinkwon1.com)에 의해서 로딩된 스크립트 클라이언트 요청에 대해서만 api.my.com이 요청해준다.

Access-Controll-Allow-Origin: jinkwon1.com

• 만약에 다음과 같이 *****로 해주면 Request Origin에 관계없이 사이트에서 로딩된 자바스크립트 요청에 대해서 처리함.

Access-Control-Allow-Origin: *

3️⃣ Pre-flight를 이용한 세세한 CORS 통제

...SOP를 이해했단 느낌은 전혀없다. 문서의 뒤쪽으로 갈 수록 더 잘 모르겠어서 이만 글을 마친다. 조만간 다시 관련글을 읽어보고 정리할 예정 2021/12/17(금)

출처 : 동일 출처 정책 - 웹 보안 | MDN SOP(Same-origin policy) 란 무엇일까? | 개발자 이동욱 What Is Same-Origin Policy | Acunetix

출처 : 교차 출처 리소스 공유 (CORS) - HTTP | MDN CORS (Cross-Origin Resource Sharing) - [정리]소프트웨어 개발 지식창고 - 개발자, DBA가 함께 만들어가는 구루비 지식창고!

      const list = ['Python', 'Java', 'JavaScript', 'C#', 'C/C++']
      const $list_member = document.querySelector('.list-member');
      const $btn_select = document.querySelector('.btn-select');

      const makeList = (list, list_group) => {
        list.forEach(li => {
          const list = document.createElement('li');
          const button = document.createElement('button');
          button.setAttribute('type', 'button');
          button.textContent = li;
          list.append(button);
          list_group.append(list);
        });
        $list = document.querySelectorAll('.list-member li');
      };

      const showList = (e) => {
        e.target.classList.toggle('on');
      };

      const select = (targetDisplay, e) => {
        targetDisplay.textContent = e.target.textContent;
        targetDisplay.classList.toggle('on');
      };

      makeList(list, $list_member);
      $btn_select.addEventListener('click', showList);
      $list_member.addEventListener('click', select.bind(this, $btn_select));

만들어야 할 기능들을 순차적으로 잘 정리한 다음에 한단계씩 차례로 만들어 나가는 것이 중요한 것 같다.

이벤트 위임을 잘 익히고 활용해야겠다.

• 처음에는 각각의 리스트 멤버에 이벤트를 걸려고 헛수고를 하는 시간을 보냈다.

• 이벤트 위임*을 활용하면 상위 노드에만 이벤트를 걸어주면 된다. 하위노드를 클릭해도 이벤트가 전달되어 상위 노드까지 전파되기 때문에.

• 이벤트를 발생시킨 하위노드는 event.target으로 접근할 수 있다.

참고: 이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지 • 캡틴판교

로또 만들기

Math.random 메서드를 이용해 만들어본 로또번호생성기

console.log(makeLotto());

function makeLotto() {
  const lottoArr = [];
  const chosenNum = [];

  for (let i = 0; i < 6; i++) {
    lottoArr.push(makeRandom(1, 45));
  }

  return lottoArr;

  function makeRandom(min, max) {
    const randomNum = Math.floor(Math.random() * (max - min + 1) + min);
    if (chosenNum.includes(randomNum)) {
      return makeRandom(min, max);
    }
    chosenNum.push(randomNum);
    return randomNum;
  }
}

document에 출력하기

const container = document.querySelector('.cont-lotto');

printNum(makeLotto(), container);

function makeLotto() {
  const lottoArr = [];
  const chosenNum = [];

  for (let i = 0; i < 6; i++) {
    lottoArr.push(makeRandom(1, 45));
  }

  return lottoArr;

  function makeRandom(min, max) {
    const randomNum = Math.floor(Math.random() * (max - min + 1) + min);
    if (chosenNum.includes(randomNum)) {
      return makeRandom(min, max);
    }
    chosenNum.push(randomNum);
    return randomNum;
  }
}

function printNum(arr, container) {
  arr.forEach((v) => {
    const span = document.createElement('span');
    span.textContent = v + ' ';
    container.append(span);
  });
}

동기분의 코드 : 예외처리까지 되어 있는 모범답안

function randomNum(min, max){
    return Math.floor(Math.random()*(max-min)+min);
}

function tryLotto(...input) {
    if (input.length !== 6) {
      console.log('숫자를 6개 입력해야 합니다.');
      return;
    } else if (input.length !== new Set(input).size) {
      console.log('숫자를 중복되지 않게 입력해야 합니다.');
      return;
    } else if (input.some(v => !Number.isInteger(v) || v > 45 || v < 1)) {
      console.log('1부터 45까지 숫자 중 하나를 입력해야 합니다.');
      return;
    }

    const selected = [];
    let count = 0;
    while (count < 7) {
        const selectedNum = randomNum(1, 46);
        if (!selected.includes(selectedNum)) {
            count++;
            selected.push(selectedNum);
        }
    }
    console.log(`당첨번호: ${selected.slice(0, 6).join(' ')} | 보너스: ${selected[6]}`);
    const nums = input.filter(v => selected.slice(0, 6).includes(v));
    switch (nums.length) {
        case 0: case 1: case 2:
            console.log('꽝!');
            break;
        case 3:
            console.log('★ 5등 당첨! ★');
            break;
        case 4:
            console.log('★★ 4등 당첨! ★★');
            break;
        case 5:
            if (input.includes(selected[6])) {
              console.log('★★★★ 2등 당첨!! ★★★★');
              nums.push(`보너스 ${selected[6]}`);
            } else console.log('★★★ 3등 당첨!! ★★★');
            break;
        case 6:
            console.log('★★★★★ 1등 당첨!!! ★★★★★');
    }
    if (nums.length > 0) console.log(`내가 맞춘 번호: ${nums.join(' ')}`);
}

신호등 만들기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
      border-radius: 10px;
    }
    .traffic-light {
      padding: 50px;
      width: 800px;
      background-color: rgb(217, 217, 217);
      margin: 100px auto;
    }

    .traffic-light__display {
      width: 70%;
      height: 500px;
      margin: 0 auto;
      background-color: rgb(255, 107, 107);
    }

    .traffic-light__buttons {
      margin-top: 50px;
      display: flex;
      justify-content: space-evenly;
    }

    .traffic-light__btn {
      padding: 20px;
      min-width: 100px;
    }

    .traffic-light__display.red {
      background-color: rgb(255, 107, 107);
    }

    .traffic-light__display.yellow {
      background-color: rgb(255, 255, 131);
    }

    .traffic-light__display.green {
      background-color: rgb(117, 255, 117);
    }
  </style>
</head>
<body>
  <div class="traffic-light">
    <div class="traffic-light__display"></div>
    <div class="traffic-light__buttons">
      <button type="button" class="traffic-light__btn red">RED</button>
      <button type="button" class="traffic-light__btn yellow">YELLOW</button>
      <button type="button" class="traffic-light__btn green">GREEN</button>
    </div>
  </div>
  <script>
    const display = document.querySelector('.traffic-light__display');
    const buttons = document.querySelectorAll('.traffic-light__btn');

    buttons.forEach(
      button => button.addEventListener('click', turnColor)
    );

    function turnColor(e) {
      const colorToTurn = [...e.target.classList][1];

      // display background 초기화
      display.classList = '';
      display.classList.add('traffic-light__display');

      // change color
      display.classList.add(`${colorToTurn}`);
    }
  </script>
</body>
</html>

const colorToTurn = [...e.target.classList][1]; 이 부분에서 나중에 에러가 발생하지 않을까

처음으로 조원들과 팀프로젝트를 하게 되었기 때문에 깃과 깃허브를 활용하여 협업하는 방법에 관심이 생겼고 반드시 알아야만 했다.

선택한 주제는 오픈소스에 기여하는 법 인데 깃허브를 이용한 협업방식을 익히는 것과 관계 있어 보이는 글이라서 위와 같은 주제를 선택하게 되었다.

😅 해석 후 느낀 점

오픈 소스에 기여하는 사람들은 대단한 사람들인줄 알았는데 소소하게 기여하는 많이 미숙한 개발자들이 있다는 것을 알았다. 오타를 수정하거나 간단한 예제를 만들거나 번역을 하는 등.. 관심을 갖고 탐색하다 보면 미미하지만 나도 오픈소스에 기여할 수 있을지도.

기여할 오픈소스를 선택하는 기준도 있었다. 반드시 라이센스가 존재하고 활발한 개발 생태계를 가진 오픈소스를 선택하는 것이 좋겠다.

How to Contribute to Open Source Projects – A Beginner's Guide

    // 단순 재귀 피보나치
    function fib(n){
        if(n <= 2) {
            return 1;
        }
        return fib(n-1) + fib(n-2)
    }

    // 재귀, 메모이제이션 피보나치
    let fibo_cache = []
    function fibo(n){
      if (n in fibo_cache) {
        return fibo_cache[n]
      }
      fibo_cache[n] = n <= 2 ? 1 : fibo(n-2) + fibo(n-1)
      return fibo_cache[n]
    }

이미 계산된 값을 배열에서 꺼내와서 사용하기 때문에 메모리 절약 가능.

회고

수업을 통해 자바스크립트 개념들이 빠르게 지나가고 있다.

비록 절반밖에 못봤지만 관련 서적을 통해서 미리 접한 나도 개념이 헷갈리고 이해가 안되서 수업을 듣는 시간보다 웹 검색을 하는 시간이 더 많다.

자바스크립트를 처음 접하는 사람들은 정말 너무 힘들 것 같다.

다양한 개념들이 독립적으로 존재하는 것이 아니라 유기적으로 연결되어 있기 때문에 개념을 공부하는 순서를 정하기도 쉽지 않을 뿐더러 어디까지 공부해야 해당 개념을 확실히 이해한 것인지 감이 잘 잡히지도 않기 때문이다.

자바스크립트를 조금 먼저 본 초심자의 입장으로는 prototype, this, class, pass in value or reference, execution context, async 같은 개념은 수업 시간에 집중하는 것과 하루 복습만으로는 절대 따라갈 수가 없다. 계속해서 반복해서 보고 이해하려는 혼자만의 시간이 필요하다.

들을 수록 느끼는 점은 모든 것을 다 알 수는 없다는 점이다. 계속 접하면서 익숙해지는 것이 중요할 것 같다.

이번주에 서비스 배포를 배우면서 리눅스 명령어에 대해서도 알게 되었는데 강의를 듣던 도중 이런 CLI 방식의 컨트롤을 visual studio code에서도 사용한다는 동기분이 있어서 호기심이 생겼다.

😅 해석 후 느낀 점

VIM 과 Visual studio code의 조합은 정말 신세계다. 처음부터 CLI 방식으로 에디터를 사용해서 익숙해졌다면 에디터를 조작하는 속도는 마우스를 사용하는 기존 방식에 비해 말도 안되게 빨랐을거 같다. 하지만 세세한 조작 커맨드들이 너무 많아서 헷갈림. 아직 하드하게 많은 양은 코드를 다뤄본적이 없어서 필요성을 많이 못느끼겠다.

What is Vim?

Vi is an ancient text editor, old even before the first age of the world.

Vi 는 세계 최초의 시대 이전에도 오래된 고대 텍스트 편집기 입니다.

It was designed to work on contraptions called terminals with the very uncommon yet inspired characteristic of functioning in a modal fashion.

그것은 아직은 매우 드물지만 모달 방식으로 작동하는 특성에서 영감받은 터미널이라고 하는 장치에서 작동하도록 설계되었습니다.

That is, it has a mode for inserting text, another for editing text, a different one for selecting text, and so on.

즉, 텍스트 삽입 모드, 텍스트 편집 모드, 텍스트 선택 모드 등이 있습니다.

Vi’s latest and most celebrated incarnation is Vim (Vi IMproved and formerly Vi IMitation) which works both with text and graphical interfaces, comes with a plethora of improvements over vi and is supported on every platform known to humankind.

Vi의 최신 및 가장 유명한 갱생버전은 VIM (VI의 개선, 이전의 Vi 모방?), 텍스트와 그래픽 인터페이스를 모두 작동 이상 개선의 과다와 함께 제공되는 VI 인류에게 알려진 모든 플랫폼에서 지원됩니다.

But the impact of Vim doesn’t stop with Vim, Vim’s ideas are so very remarkable that they’ve trascended the Vim editor itself and propagated into other editors. Today you can find Vim-like modes in almost any editor and IDE that you can imagine. Like in Visual Studio Code.

그러나 Vim의 영향은 Vim에 그치지 않습니다. Vim의 아이디어는 매우 놀랍기 때문에 Vim 편집기 자체를 넘어 다른 편집기로 전파되었습니다. 오늘날 상상할 수 있는 거의 모든 편집기와 IDE에서 Vim과 유사한 모드를 찾을 수 있습니다. Visual Studio Code 에서처럼 .

Why Vim? Isn’t Visual Studio Code Enough?

Why should you care about learning about an ancient editor in this day and age? Does it really make such a big difference to my VSCode setup?

왜 이 시대에 고대 편집자에 대해 배우는 데 관심을 가져야 합니까? 내 VSCode 설정에 정말 큰 차이가 있습니까?

The truth is that Vim provides a different way of interacting with text from anything I’ve ever seen, a way that gives you a completely different level of control and fluency when editing code. At the hands of an experienced user, editing text with Vim seems like magic:

진실은 Vim이 내가 지금까지 본 것과는 다른 방식으로 텍스트와 상호 작용하는 방식을 제공한다는 것입니다. 즉, 코드를 편집할 때 완전히 다른 수준의 제어와 유창성 을 제공하는 방식입니다 . 숙련된 사용자의 손에 Vim으로 텍스트를 편집하는 것은 마술처럼 보입니다 .

Vim makes you faster. Vim makes you more precise Vim unlocks a completely different level of control in text editing Vim thins the interface between your brain and the computer It is awe-striking when doing presentations :D

Vim은 당신을 더 빠르게 만듭니다 . Vim은 더 정확합니다. Vim은 텍스트 편집에서 완전히 다른 수준의 제어 기능을 제공합니다. Vim은 두뇌와 컴퓨터 사이의 인터페이스를 얇게 만듭니다. 프리젠테이션을 하면 기가 막힙니다 . :D

Vim’s modal nature empowers your keyboard to control every aspect of your editor. Every mode is a clean slate that gives your keyboard new powers, to edit text at lightning speed, navigate at the speed of thought, select and move text to your heart’s content, and more.

Vim의 모달 특성은 키보드가 편집기의 모든 측면을 제어할 수 있도록 합니다. 모든 모드는 키보드에 새로운 기능을 제공하고, 번개처럼 빠른 속도로 텍스트를 편집하고, 생각의 속도로 탐색하고, 원하는 대로 텍스트를 선택 및 이동하는 등의 새로운 기능을 제공합니다.

With Vim you’re no longer limited to inserting text nor subject to the tyranny of the mouse to click, navigate or select text. No. After using Vim for a while, you’ll be like a code surgeon that makes expert incisions with surgical precision whenever and wherever it is required, navigating through your code and codebase with the lightning speed and accuracy of a entirely keyboard driven workflow.

Vim을 사용하면 더 이상 텍스트를 삽입하는 데 국한되지 않으며 텍스트를 클릭, 탐색 또는 선택하기 위해 마우스의 압제에 종속되지 않습니다. 아니요. Vim을 잠시 사용하고 나면 필요할 때마다 언제 어디서나 외과적 정밀함으로 전문적인 절개를 하는 코드 외과 의사 가 되어 완전한 키보드 기반 워크플로 의 번개 같은 속도와 정확성으로 코드와 코드베이스를 탐색할 수 있습니다 .

So Why would you want to learn Vim in this day and age? Paraphrasing the mighty Drew Neil author of Practical Vim and master of the most obscure arts of Vim:

그렇다면 왜 이 시대에 Vim을 배우고 싶습니까? Practical Vim 의 강력한 작가이자 Vim 의 가장 모호한 기술의 대가인 Drew Neil의 말을 빌리자면 :

Vim is for programmers who want to raise their game. In the hands of an expert, Vim shreds text at the speed of thought.

Vim은 게임을 향상시키려는 프로그래머를 위한 것 입니다. 전문가의 손에서 Vim은 생각의 속도로 텍스트를 파쇄합니다 .

Why Vim in VSCode and Not Just Vim?

왜 Vim이 아닌 VSCode의 Vim입니까?

You may be wondering... Ok. If Vim is so good then... Why not just use Vim instead of Vim inside Visual Studio Code?

당신은 궁금해 할 수 있습니다 ... 알았어. Vim이 그렇게 좋다면... Visual Studio Code 내에서 Vim 대신 Vim을 사용하지 않는 이유는 무엇입니까?

Great question! The truth is that setting Vim to work with a feature set similar to modern text editors is not a trivial task. Features likes code completion, code navigation, in-editor error messages, etc, although supported by Vim don't work perfectly out of the box.

좋은 질문입니다! 진실은 Vim이 최신 텍스트 편집기와 유사한 기능 세트와 함께 작동하도록 설정하는 것이 쉬운 일이 아니라는 것입니다. 코드 완성, 코드 탐색, 편집기 내 오류 메시지 등과 같은 기능이 Vim에서 지원되지만 기본적으로 완벽하게 작동하지는 않습니다.

Visual Studio Code and Vim offer a very sweet spot that balance the super rich development user experience of Visual Studio Code with lots of the amazing features present in Vim.

Visual Studio Code와 Vim은 Visual Studio Code의 매우 풍부한 개발 사용자 경험과 Vim에 있는 많은 놀라운 기능의 균형을

Installing Vim Inside Visual Studio Code

In order to bring the awesomeness of Vim inside Visual Studio Code you’ll need to install the VsCodeVim plugin:

Visual Studio Code 내에서 Vim의 훌륭함을 가져오려면 VsCodeVim 플러그인 을 설치해야 합니다 .

Open Visual Studio Code Go to Extensions Type vim in the search box The first plugin named Vim is the one you want Click on the install button Epic Victory!

Visual Studio 코드 열기 확장 프로그램으로 이동 vim검색창에 입력 Vim 이라는 이름의 첫 번째 플러그인 이 원하는 플러그인 입니다. 설치 버튼을 클릭 에픽 승리!

Now after the extension is installed you may need to restart Visual Studio Code for the changes to take effect. latest-vscode

이제 확장이 설치된 후 변경 사항을 적용하려면 Visual Studio Code를 다시 시작해야 할 수 있습니다. 최신 vscode

Have you restarted it? Open a code file from your latest project and look at the cursor. Does it look like a rectangle? Yes? Welcome to Vim

다시 시작하셨나요? 최신 프로젝트에서 코드 파일을 열고 커서를 보십시오. 직사각형처럼 보이나요? 예? Vim에 오신 것을 환영합니다

Baby Steps in Vim

If you try to type text right now you’ll be surprised to see that nothing happens. Or to be more correct, nothing that you would have expected to happen. That is, as you type there’s no characters being typed in the screen. That’s because the core mode in Vim is Normal mode and not Insert mode.

지금 텍스트를 입력하려고 하면 아무 일도 일어나지 않는다는 사실에 놀랄 것입니다. 또는 더 정확하게 말하자면, 당신이 기대했던 어떤 일도 일어나지 않을 것입니다. 즉, 입력할 때 화면에 입력되는 문자가 없습니다. Vim의 핵심 모드는 삽입 모드가 아닌 일반 모드 이기 때문 입니다.

In Normal mode you don’t insert text, you move around and edit it. This design decision stems from the realization that we spend more time reading, navigating and changing code that we do inserting it in the first place. These are the very basics you need to survive in Vim:

일반 모드 에서는 텍스트를 삽입하지 않고 이리저리 이동하고 편집합니다. 이 디자인 결정은 처음에 삽입하는 코드를 읽고 탐색하고 변경하는 데 더 많은 시간을 할애한다는 인식에서 비롯됩니다. 다음은 Vim에서 생존하는 데 필요한 기본 사항입니다.

hjkl are the core and most basic motions in Vim. They allow you to move the cursor by one space in every direction:

hjklVim의 핵심이자 가장 기본적인 동작입니다 . 커서를 모든 방향으로 한 칸 이동할 수 있습니다.

They are not the most effective, nor the most efficient way to move around in Vim. But they do give you agility and confidence to move around a file in Normal mode. Learning to hjkl effectively is the equivalent of learning to walk, or learning to ride a bike.

Vim에서 가장 효과적이지도 않고 가장 효율적인 방법도 아닙니다. 그러나 일반 모드 에서 파일을 이동할 수 있는 민첩성과 자신감 을 제공 합니다 . 학습을 hjkl효과적으로은 도보로 학습, 또는 자전거를 타고 학습하는 것과 동일합니다.

After you get comfortable with more Vim motions you won’t use hjkl as much, but they’ll come very handy for short-distance movements and small corrections.

더 많은 Vim 동작에 익숙해지면 hjkl그다지 많이 사용하지 않을 것이지만, 단거리 동작과 작은 수정에는 매우 유용 할 것입니다 .

Mapping Your Caps Lock Key to Control

Caps Lock 키를 control키에 매핑하기

One thing that comes super handy when using Vim (and any other editor for that matter) is to remap your Caps Lock Key to Control. This means that you can easily reach a super commonly used key such as Control from the comfort of the home row.

Vim(및 이와 관련된 다른 편집기)을 사용할 때 매우 편리한 한 가지는 Caps Lock 키를 Control에 다시 매핑하는 것입니다. 즉, 홈 행에서 편안하게 Control과 같이 매우 일반적으로 사용되는 키에 쉽게 도달할 수 있습니다.

If you're using a Mac you can do this directly from Preferences, Keyboard. Otherwise you may need to install some software in your development machine but it should be very straightforward. Google be thy friend. Google it.

Mac을 사용하는 경우 환경 설정, 키보드에서 직접 이 작업을 수행할 수 있습니다. 그렇지 않으면 개발 시스템에 일부 소프트웨어를 설치해야 할 수도 있지만 매우 간단해야 합니다. 구글은 당신의 친구가 되어주세요. 구글링하세요.

Moving Blazingly Fast With The Core Vim Motions

Motions (as in movements) are how you move around in Vim. They are commands that when typed move the cursor around with high speed and precision. There are many of them, and each one is best suited for different types and lengths of movement. I find they work great in tandem with VSCode native Go To features like Go To File and Go To Symbol.

모션(움직임에서와 같이)은 Vim에서 이동하는 방법 입니다. 입력할 때 커서를 빠르고 정확하게 이동하는 명령입니다. 그들 중 많은 것들이 있으며 각각은 다양한 유형과 운동 길이에 가장 적합합니다. 파일로 이동 및 기호로 이동과 같은 VSCode 기본 이동 기능과 함께 훌륭하게 작동한다는 것을 알았습니다.

Here’s a condensed list of the most useful ones:

다음은 가장 유용한 목록을 요약한 것입니다.

Move Horizontally Word By Word

On Notes, Melodies And Chords

음표, 멜로디 및 코드

Vim is quite special. If you've used other editors you're probably accustomed to typing chords of keys. That is, typing a combination of keys at the same time. For instance, CTRL-C to copy and CTRL-V to paste. Vim uses chords as well but relies even more on melodies of keys.

Vim은 매우 특별합니다. 다른 편집기를 사용해 본 적이 있다면 키 코드를 입력하는 데 익숙할 것입니다. 즉, 키 조합을 동시에 입력하는 것입니다. 예를 들어 CTRL-C는 복사하고 CTRL-V는 붙여넣기입니다. Vim은 코드도 사용하지만 키의 멜로디에 더 많이 의존합니다.

✳️ 단어 :

contraptions 장치 incarnation 강생 plethora 과다 trascended 초월 propagated 전파 shreds 파쇄하다 nifty 맵시 있는 accordion 펼치는 feature 기능 cite 인용하다

Boost Your Coding Fu With Visual Studio Code and Vim | Barbarian Meets Coding

✳️ 리액트를 사용하는 이유는 무엇일까?

사실 자바스크립트만 조금 공부해본지라_ 라이브러리, 프레임워크_.. 이름만 들어봤지 무엇인지 잘 몰랐다. 간단하게 특정 언어를 기반으로 하는 쓸만한 도구정도로 알고 있었는데 조은님의 특강을 듣고 리액트는 꼭 배워둬야 겠다는 생각이 들었고 리액트에 노베이스인 상태로 멋사 리액트 스터디에 가입하게 됐다.

오늘 스터디 일정도 정하고 분량도 정했는데 열심히 해야겠다는 생각뿐이었지 왜 리액트를 배우고 써야하는지 리액트가 라이브러리인지? 프레임워크인지? 이걸 쓰면 어떤 이득이 있는지 등 정작 베이스로 깔고 가야할 것들을 생각해보지 않았다.

블로그들을 탐색해서 프레임워크의 사용 이유에 대해 알아보았는데

The choice of a front-end technology doesn’t depend on the features you want to provide to your user, but on the user experience you want him/her to have

• ➡️ 기능에 초점을 맞추면 짧은 대답은 아니오 이고 사용자 경험(UX)에 초점을 맞추면 대답은 예 라는 것이다.

❓ 사용자 경험(UX)이란?

Products that provide great user experience (e.g., the iPhone) are thus designed with not only the product’s consumption or use in mind but also the entire process of acquiring, owning and even troubleshooting it.

제품의 소비 또는 사용뿐만 아니라 구매, 소유 및 문제 해결의 전체 프로세스를 염두에 두고 설계하는 방식?

도널드 노만이라는 분이 만든 디자인 개념이다.

• 사용 가능한 제품을 만드는 데에만 집중하지 않는다. 즐거움, 효율성 및 재미와 같은 사용자 경험의 다른 측면에도 집중한다.

• 따라서 좋은 사용자 경험에 대한 단일 정의는 없고 대신, 좋은 사용자 경험은 특정 사용자가 제품을 사용하는 특정 컨텍스트에서 특정 사용자의 요구를 충족시키는 것이다.

What is User Experience (UX) Design? | Interaction Design Foundation (IxDF)

😅 한번에 이해하기엔 꽤나 모호한 개념이다.. 이분이 내신 디자인 책이 많던데 조은님이 추천해주신 블로그에 있는 목록을 참고해서 한권 읽어봐야할듯

리액트 공식 홈페이지에 나온 리액트 소개 문구

A JavaScript library for building user interfaces

• "React는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리"

• React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

• React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 합니다.

• 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.

✔️ 사용자 입장에서 데이터가 변할 때 페이지 리로딩이 일어나지 않기 때문에 UX가 더욱 향상되는 UX적 이득이 있기 때문에 리액트를 사용하는 것. ➡️ 그래서 SPA(Single Page Application)라고 할 수 있는 것. ✔️ 개발자 입장에서도 컴포넌트 기반의 React를 사용할 경우 코드의 가독성과 재사용성 그리고 유지보수가 편하다.

위의 장점을 가진 비슷한 역할의 프레임워크들이 있음에도 리액트가 대세가 되었는데 그 이유는

• Angular나 Vue에 비해 알아야 할 규칙이나 제약이 적다.
• 페이스북에서 끊임없이 유지, 개발 중에 있다.
• 새로 배울 기술이 많은 커뮤니티를 보유하고 있다.
• ‼ React Native가 있다 (모바일 앱으로 까지 확장)

제로초님 리액트 강좌 : 리액트 사용의 이유!

• 사용자 인터페이스를 편하게 만들기 위해서.
• React => SPA (Single Page Application) : 화면깜빡임 하나도 없고 자연스럽다. => 사용자 경험이 좋아진다. 앱같은 느낌 (UX가 좋아진다.)
• 데이터 처리 쉽게 하려고 (데이터와 화면의 연동을 쉽게 하려고)
• 컴포넌트화 시킬 수 있다. (조각 공장)

출처 : React React를 사용하는 이유 Do We Really Need a Front-end Framework? | by Alexandre Lombard | The Startup | Medium

✳️ Install React

공식문서를 보고 그 순서 그대로 npx 명령어를 통해 설치했다. npm start 명령어 입력시 페이지에 접근할 수 없는 에러가 있었고 에러 내용은 다음과 같았다.

Error: error:0308010C:digital envelope routines::unsupported 정확한 근거는 모르지만 위의 에러 내용을 스택오버플로우에 있는 답변을 통해 해결했음.

node.js - Error message "error:0308010C:digital envelope routines::unsupported" - Stack Overflow

✳️ JSX란?

✔️ JSX === JavaScript eXtension

JSX는 자바스크립트의 확장 문법이며 XML과 생김새가 유사하다.

• (마치 HTML 문법을 JavaScript 코드 내부에 쓴 것 처럼 보인다.)
• 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

function App() {
  return (
    <div>
      Hi! <strong>React!</strong>
    </div>
  )
}

➡️ 위의 코드는 바벨을 통해 아래와 같이 변환된다.

function App() {
  return React.createElement("div", null, "Hi!", React.createElement("strong", null "React!"));
}

➡️ 컴포넌트를 렌더링 할 때 마다 위와 같이 React.createElement 함수를 사용해야 하는 것은 힘들다. JSX를 사용하면 간편하게 UI를 렌더링 할 수 있다.

‼️ JSX는 자바스크립트 문법이 아니다.

• JSX는 리액트로 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다. 바벨에서는 여러 문법을 지원할 수 있도록 preset 과 plugin을 설정한다. 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있다.

‼️ JSX의 규칙들

• 1️⃣ 속성은 쌍따옴표로 감싼다. (class를 주고 싶을 때, 원래 속성명은 class이지만 JSX에서는 className을 사용해야 함.)

  const myVehicle = {
  type: <li>BMW 3 Series Sedan</li>,
  fuel: <li>Gasoline</li>,
  displacement: <li className="list-item">1995 ~ 2998cc</li>,
  }

  
  

• 2️⃣ 태그는 항상 닫혀있어야 함 (HTML에서 <input> 이나 <br> 을 사용할 때 닫지 않는 경우가 있는데 React 에서는 반드시 클로징 태그를 사용해서 닫아줘야 함.)

  import React, {Component} from 'react';
  

class App extends Component { render() { return (

export default App;

<br>

- 3️⃣ **어떤 태그라도 Self-closing tag가 가능**
```js
<input> => <input />
<div></div> => <div />

• 4️⃣ 형제 노드를 작성할 수 없다 아래 예시와 같이 형제만으로 구성된 형태로 작성 할 수 없다.
• (반드시 부모가 감싸고 있는 형태여야 함.)* ❓ 감싸줘야 하는 이유 : Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있음.

  import React, {Component} from 'react';
  

class App extends Component { render() { return (

export default App;

➡️ 그래서 반드시 `div`나 `Fragment`로 감싸진 형태여야 한다.
```js
import React, {Component} from 'react';

class App extends Component {
  render() {
    return (
      <Fragment>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </Fragment>
    );
  }
}

export default App;

• 5️⃣ JSX 안에 자바스크립트 값은 다음과 같이 사용 ✔️ JSX에서 표현식을 작성하는 방법 : (변수를 먼저 렌더 안에서 정의하고 리턴에서 변수명을 중괄호로 감싼 형태로 표현한다.)

import React, {Component, Fragment} from 'react';

class App extends Component {
  render() {
    const type = 'BMW 3 Series Sedan';
    const fuel = 'Gasoline';
    const displacement = '1995 ~ 2998cc';
    return (
      <Fragment>
        <div>{type}</div>
        <div>{fuel}</div>
        <div>{displacement}</div>
      </Fragment>
    );
  }
}

export default App;

• 6️⃣ 조건부 연산자 JSX 내부의 자바스트립트 표현식에서 if 문을 사용할 수는 없다. 하지만 조건에 따라 다른 내용을 rendering 해야 할 때 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, {} 안에 조건부 연산자 (삼항연산자)를 사용하면 된다.

  import React from 'react';
  

function App() { const car = 'BMW 3 Series Sedan'; return (

export default App;

<br>

- 7️⃣ **&& 연산자를 이용한 조건부 렌더링**
삼항연산자를 사용하여 조건에 따른 렌더링을 할 수도 있지만 AND 연산자(&&)를 사용하여 좀 더 간결하게 작성할 수도 있다.
```js
import React from 'react';

function App() {
    const car = 'Benz G-Class';
    return (
      <div>
        {car === 'BMW 3 Series Sedan' && <h1>It's correct</h1>}
      </div>
    );
}

export default App;

➡️ 위 코드를 실행하면 브라우저에 아무것도 렌더링되지 않는다. ❓ &&연산자로 조건부 렌더링 할 수 있는 이유 :

• react에서 false를 rendering 할 때는 null 과 마찬가지로 아무것도 나타나지 않기 때문.

• 주의해야 할 점 : falsy 한 값인 0은 예외적으로 화면에 나타난다.

  const num = 0;
  return num && <div>content</div>

  위의 예제는 화면에 content를 보여주는 것이 아니라 0을 보여줌.

  
  

• 8️⃣ && undefined를 렌더링하지 않기 react 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 ❌. 다음 예시를 보자.

  import React from 'react';
  import './App.css';
  

//undefined를 렌더링 하지 않기 function App() { const car = 'undefined'; return name; }

export default App;

코드를 실행하면 다음과 같은 오류가 발생한다.
`App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.`

어떤 값이 `undefined` 일 수도 있다면, OR( || )연산자를 사용하면 해당 값이 `undefined` 일 때 사용할 값을 지정할 수 있으므로 간단하게 오류 방지 가능하다.
```js
import React from 'react';
import './App.css';

function App() {
  const car = 'undefined';
  return name || '값이 undefined 이다.';
}

export default App;

JSX 내부에서 undefined를 렌더링하는 것은 괜찮다.

import React from 'react';
import './App.css';

function App() {
  const car = 'undefined';
  return <div>{name}</div>;
}

export default App;

car값이 undefined일 때 보여 주고 싶은 문구가 있으면 다음과 같이 코드를 작성한다.

import React from 'react';
import './App.css';

function App() {
  const car = 'undefined';
  return <div>{name || 'BMW'}</div>;
}

export default App;

위에 설명한 JSX의 규칙들은 아래 출처의 블로그들에 나와 있는 내용들이다. 이 외 JSX의 특성은 공식문서에 정리되어 있다.

출처 : [React 기초] JSX란? / JSX 문법 React | JSX란? 렌더링 Rendering이란?

클래스형과 함수형 차이 Babel이란 무엇인가? — 오웬의 개발 이야기

멋사 - 리액트스터디 - Google Sheets

    h2 {
      margin: 30px;
    }

    .cont-select {
      position: relative;
      width: 200px;
    }

    .btn-select {
      width: 100%;
      padding: 13px 20px 13px 14px;
      font-size: 12px;
      line-height: 14px;
      background-color: #fff;
      border: 1px solid #C4C4C4;
      box-sizing: border-box;
      border-radius: 10px;
      cursor: pointer;
      text-align: left;
      background: url('./image/icon-Triangle-down.png') center right 14px no-repeat;

      /* 말줄임 */
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .btn-select:hover {
      border: 1px solid #9B51E0;
      outline: 3px solid #F8E4FF;
    }

    .list-member {
      display: none;
      position: absolute;
      width: 100%;
      top: 49px;
      left: 0;
      border: 1px solid #C4C4C4;
      box-sizing: border-box;
      box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
      border-radius: 10px;
    }

    .btn-select.on {
      background: url('./image/icon-Triangle-up.png') center right 14px no-repeat;
    }

    .btn-select.on + .list-member {
      display: block;
    }

    .list-member li {
      height: 40px;
      padding: 5px 8px;
      box-sizing: border-box;
    }

    .list-member li button {
      width: 100%;
      padding: 7px 0;
      border: none;
      background-color: #fff;
      border-radius: 8px;
      cursor: pointer;
      /* 말줄임 */
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .list-member li button:hover,
    .list-member li button:focus {
      background-color: #F8E4FF;
    }

• 컨텐츠가 길어져서 컨테이너의 크기가 변형되는 것을 방지하기 위해 말줄임을 적용한다.

      /* 말줄임 */
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

• 백그라운드 축약속성은 속성의 순서가 중요 : url('') b-position-x b-position-y / b-size b-repeat

    .btn-select.on {
      background: url('./image/icon-Triangle-up.png') right center 14px no-repeat;
    }

  right center 14px

  위의 속성은 모두 background-position을 위한 속성

• 화살표의 위치와 말줄임이 곂치는 것을 대비해서 오른쪽 padding을 충분히 더 적용한다.

      padding: 13px 20px 13px 14px;

• outline으로 네온부분 표현 가능 : 나는 가상요소를 이용했는데 이렇게 편하고 직관적인 속성이 있었다. 앞으로는 이렇게~

    .btn-select:hover {
      border: 1px solid #9B51E0;
      outline: 3px solid #F8E4FF;
    }

동영상 제어

• padding-top, padding-bottom 값에 %값은 부모의 width값 기준이다!

• 이를 이용해서 interactive 하면서도 검은 배경을 없앤 유튜브 동영상 스트리밍 구현가능

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .cont-video {
      position: relative;
      padding-top: 56.25%;
      /* padding-top, padding-bottom 속성의 % 값은 부모 요소의 넓이에 비례합니다. */
      /* 예를 들어 부모의 넚이가 1200px 이라면 padding-top=50% 의 값은 600px 과 같습니다. */
    }
  
  

.video-next-level {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

YouTube 내장 플레이어 및 플레이어 매개변수  |  YouTube IFrame Player API

1. ls 명령 시 숨김 파일도 모두 출력되도록 alias를 설정하세요.
   alias ls = ‘ls -a’

2. 위에서 설정한 alias를 해제하세요. unaries ls

3. 긴 명령어를 쳤는데 오타가 났다. 기존에 명령어를 불러와 수정하는 방법은 무엇인가요? 화살표 ⬆️

4. 자동완성 키는 무엇인가요? Tab

5. 현재 폴더에 다음과 같이 폴더와 파일을 만들고 tree 명령어를 이용해 이를 아래와 같이 출력하세요.

   1. tree는 기본 설치가 안되어 있습니다. 인터넷을 통해 tree설치 명령어를 알아내세요.
   2. 폴더 트리
   3. .
   4. ├── README.md
   5. ├── a
   6. │ ├── one.txt
   7. │ └── two.txt
   8. └── b
   9. ├── c
   10. │ └── four.txt
   11. └── three.txt
   12. sudo apt-get install tree tree -P "*.txt"

6. 현재 폴더 기준으로 확장자가 .js 파일을 모두 출력하세요. find ./ -name "*.js"

7. 현재 폴더 기준으로 확장자가 .js 파일인 것을 result.txt에 저장하세요. find ./ -name "*.js" > result.txt

8. 현재 경로를 표시해보세요. pwd

9. a 폴더에 있는 one.txt를 change.txt로 이름 변경을 해보세요. mv one.txt change.txt

10. change.txt를 b폴더에 옮겨놓으세요. mv ./change.txt ../b

11. chmod : Peter의 우아한 프로그래밍 :: [Linux] chmod 로 파일 권한 변경하기

실제 서비스 런칭

프로세스

1. url 구매
2. https 인증서 발급
3. url 구매한 것을 우리 컨테이너에 연결

SASS

CSS의 전처리기 html의 인덴팅 (nest) 구조로 CSS를 짜서 CSS파일로 컴파일링해서 사용한다.

인덴팅이 깊어지면 오히려 보기 나쁜 것 같다. 잘 분리해서 가독성도 생각해야 할 듯. 변수, mixin, extend, 조건문, 반복문, 함수 등 굉장히 프로그래밍언어와 비슷한 요소들이 많다.

mixin과 extend는 굉장히 유사한 개념같지만 extend는 연관이 있는 요소들의 템플릿으로 사용하는 느낌이다.

익숙해지는데 시간이 걸릴듯하다.

조은님 특강

나의 역량 강화 위해 지속적인 스터디, 발표 좋다. 많고 다양한 프로젝트로 어필하는거 보다 거기서 무엇을 배웠는지 무슨 문제가 있었는지 회고의 과정이 더 중요 나만의 강점이 있어야하는데.. 로드맵을 그려보자. (1,3,5,10년) 가고싶은 회사가 있다면 기술역량, 기술블로그 분석, 그 기술을 직접 사용해보고 분석해보는 과정 중요한거 : 좋은 사수가 있는 회사, 연봉 (회사의 자신감?) 이 회사가 어떤 제품을 만드는지 보는 것도 중요 (재미를 위해) (회사의 미래) 성장가능성을 보여줘라 나도 회사와 수평적인 관계라고 생각하고 면접에 임하는 것이 어떨까 (일단 직원은 아니니) 실리콘벨리 무조건 가봐라! 회사가 2~3년 버티는지 본다. 그 기간동안 다양한 이슈를 경험해봐라 네이버의 .blind { margin: -1 } 은 IE 때문..ㅋㅋ 인식을 못하는 경우가 있어서

✔️ 가장 중요한 준비

🚩 블로그에 너의 고민이 담겨있고 기승전결이 있는 좋은 글들을 작성해라 (글의 수보다 질이 중요함. 개념을 학습하기 위해 어떤 시도를 했고 결과적으로 무엇이 개선됐는지 한계는 무엇인지 개선 과정에서 뭘 느꼈고.. 등등)

지금까지 약 70개의 블로그 글을 게시했는데 걍 일기장이나 다름없다..ㅋㅋ ** **한달에 1개 목표로 기술에 대한 고민이 담긴 질이 좋은 글을 하나씩 올려봐야겠다.

추천 책 : 한 권으로 읽는 컴퓨터 구조와 프로그래밍 수학 리부트 자바스크립트는 왜 그 모양일까? 프론트엔드개발자를 위한 UX 책 이야기

tailwindCSS 를 이용해 만들어 본 이력서 그냥 만드는거 보다 다섯배는 오래 걸리는거 같다.. 이거만든다고 하루 시간을 다 써버렸다.

TailwindCSS는 스타일을 html에서 다 적용할 수 있고 부트스트랩처럼 컴포넌트를 가져와서 쓰는 것이 아니라서 커스터마이징도 장점이라 그랬는데 익숙하지 않아 그런지 공식홈페이지를 왔다갔다 하며 적용하는 것이 오히려 더 힘들었다.

우분투 실습

goorm을 통해 우분투 실습

• 어찌저찌 커맨드를 눌러서 이전에 만든 1만시간의 법칙을 서비스했다. 커맨드의 정확한 의미를 모르고 따라치기만 했기 때문에 추가적인 공부가 필요하다 강사님이 말씀하시길 aws와 같은 서버 세팅이 서비스의 30퍼센트 비중을 차지한다고 하는데 왜 그런 것인지는 아직 모르겠다 오늘은 서버수업 첫날이니 무리하지 않고 빨리 자야겠다!

상장을 받았다 ㅎㅎ

Goorm : Anyone can develop | goorm Front End School: 1. 우분투 실습

커스텀 셀렉창을 하나 만들어 보았다.

실무에서 사용하는 CSS 테크닉

1️⃣ NAVER blind

.blind {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}

width, height 가 0 이면 스크린리더가 읽지 못한다. clip: rect : 네모로 자르겠단 의미 (더 이상 사용하지 않는다.) margin: -1px : 모르겠다.. 레거시코드

margin: -1px에 대한 설명 : 웹 UI 개발

이미지 최적화 웹 : Kraken.io Image Optimizer · Kraken.io 클립 웹 :Clippy — CSS clip-path maker

2️⃣ IMAGE Sprite 여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법

코드도 절약하고 이미지도 줄어드는 효율적인 방법 아래의 웹을 이용하여 제작한다.

*❌ 사용하지 말아야 할 경우 : *

만든 스프라이트 파일이 너무 큰 경우 오히려 손해일 수 있다. 수정을 많이 해야 하는 이미지일 경우

CSS Sprites Generator

3️⃣ 레티나 디스플레이 대응

길이2배 높이2배되는 넓이 4배의 이미지를 준비해서 해결한다. 스프라이트도 마찬가지

media query : device pixel ratio 고려하여 적용한다.

BootStrap

부품들을 가져와서 사용하는 느낌 굉장히 편리하게 웹사이트 제작할 수 있을 것 같다. 부트스트랩 템플릿도 역시 라이센스를 확인하여야 한다. (MIT license ?)

강사님이 웹개발 외주뛸 때 사용했던 기술들

• 스택은 부트스트랩 + php + mysql
• 부트스트랩 + 워드프레스
• 부트스트랩 + Django
• 부트스트랩 + Node
• 워드프레스는 DIVI 테마와 Pods 플러그인

Containers · Bootstrap v5.1 플러그인 : SweetAlert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes Datepicker | jQuery UI TOAST UI :: Make Your Web Delicious! | TOAST UI :: Make Your Web Delicious! Examples | bootstrap-select · SnapAppointments Developer

TailWindCSS

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

당신이 몰랐던 멋진 HTML 태그 8가지

A Duda customer recently asked me about semantic HTML tags and this turned on the curious side of my brain.

Duda 고객은 최근에 의미론적 HTML 태그에 대해 질문했고 이것은 내 두뇌의 호기심 많은 부분을 일으켰습니다.

With modern web design and HTML 5, there are a range of semantic HTML tags that help people and/or robots reading your website’s HTML code understand the structure or context of the content on a page.

현대적인 웹 디자인과 HTML 5에는 웹사이트의 HTML 코드를 읽는 사람 및/또는 로봇이 페이지에 있는 콘텐츠의 구조나 컨텍스트를 이해하는 데 도움이 되는 다양한 의미 체계 HTML 태그가 있습니다.

Anyone who’s been around the web is familiar with the classic tags: <p> for paragraph, <table> for a structured table, <h1> - <h6> for heading sizes.

웹을 사용해본 사람이라면 누구나 클래식 태그에 익숙합니다. 단락의 경우 <p>, 구조화된 표의 경우 <table>, 제목 크기의 경우 <h1> - <h6>입니다.

These are the classic semantic tags of HTML. You might even be familiar with a bit more specific tags such as <nav> for navigation, <article> for blog or news articles, <header> and <footer>, etc..

이것은 HTML의 고전적인 의미 태그입니다. 탐색을 위한 <nav>, 블로그 또는 뉴스 기사를 위한 <article>, <header> 및 <footer> 등과 같은 좀 더 구체적인 태그에 익숙할 수도 있습니다.

On its own, semantic HTML is a great tool that makes websites easier to understand and parse. But, this made me curious about all the different HTML tags that exist officially as part of HTML 5 and sent me down a rabbit hole of fun (yes, this is my idea of fun on a Tuesday night). So, I thought I’d share my findings.

그 자체로 시맨틱 HTML은 웹사이트를 더 쉽게 이해하고 분석할 수 있게 해주는 훌륭한 도구입니다. 그러나 이것은 HTML 5의 일부로 공식적으로 존재하는 모든 다른 HTML 태그에 대해 호기심을 갖게 했고 재미있는 토끼굴로 나를 보냈습니다(예, 이것이 화요일 밤의 재미에 대한 제 생각입니다). 그래서 제 연구 결과를 공유할 생각이었습니다.

Here are the eight most interesting HTML5 tags I found:

• 1️⃣ <del> and <ins>
• 2️⃣ <abbr> 🚩
• 3️⃣ <meter>
• 4️⃣ <progress>
• 5️⃣ <details> and <summary>
• 6️⃣ <blockquote> 🚩 & <cite>
• 7️⃣ <time>
• 8️⃣ <datalist>

내가 찾은 가장 흥미로운 HTML5 태그 8개는 다음과 같습니다.

Some of the above tags are actually pretty powerful, some are just kind of fun and some can be used for semantic situations. Really, the point here is just to show you there is much more to HTML than meets the eye.

위의 태그 중 일부는 실제로 매우 강력하고, 일부는 그저 재미있고, 일부는 의미론적 상황에 사용할 수 있습니다. 실제로 여기에서 요점은 HTML에 눈에 보이는 것보다 훨씬 더 많은 것이 있음을 보여주기 위한 것입니다.

Let's take a more in-depth look at each one of the HTML tags I've listed above.

위에 나열된 HTML 태그 각각에 대해 좀 더 자세히 살펴보겠습니다.

• 1️⃣ <del> and <ins>

There is actually a tag for text that is struck-through and another that indicates the replacement text. This comes directly out of the semantic playbook to show that a piece of text should be deleted.

실제로 취소선이 있는 텍스트에 대한 태그와 대체 텍스트를 나타내는 태그가 있습니다. 이것은 텍스트의 일부를 삭제해야 함을 보여주기 위해 의미 체계 플레이북에서 직접 나옵니다.

An example of this is: "Pluto is isn't a planet."

예를 들면 "명왕성은 행성이 아닙니다."입니다.

In HTML, here is how that looks:

HTML의 경우 다음과 같습니다.

<p>Pluto<del>is</del> <ins>isn’t</ins> a planet.</p>

Plutois isn’t a planet.

If you want to be extra fancy, you can even include a datetime attribute on the <ins> tag to show when the new text was added or amended.

좀 더 화려하게 만들고 싶다면 <ins> 태그에 datetime 속성을 포함하여 새 텍스트가 추가되거나 수정된 시기를 표시할 수도 있습니다.

<ins datetime="2015-09-15T22:55:03Z">This is an inserted text.</ins></p>

This is an inserted text.

• 2️⃣ <abbr>

  “abbr” is short for abbreviation! (Would you ever have guessed?) The idea here is that if you use a title (e.g. “Mr.”) or acronym (e.g. “POTUS”), the abbr tag indicates exactly what that abbreviation means.

  "abbr"은 약자의 줄임말입니다! (어디까지나 짐작이 가셨나요?) 여기서 아이디어는 제목(예: "Mr.") 또는 약어(예: "POTUS")를 사용하는 경우 약어 태그가 해당 약어의 의미를 정확히 나타냅니다.

<p><abbr title="President of The United States">POTUS</abbr> rode his bicycle into a tree.</p>

POTUS rode his bicycle into a tree.

• 3️⃣ <meter>

  The next two elements in our list are similar, but definitely not the same. Meter is a built-in range to give an indication of good, medium or bad results. This gauge is a nifty tool built into browsers that is normally created using much more custom code and JavaScript.

  목록의 다음 두 요소는 비슷하지만 확실히 동일하지는 않습니다. 미터는 좋은 결과, 중간 또는 나쁜 결과를 표시하는 내장 범위입니다. 이 게이지는 일반적으로 훨씬 더 많은 맞춤 코드와 JavaScript를 사용하여 생성되는 브라우저에 내장된 멋진 도구입니다.

<meter min="0" max="100" low="59" high="90" optimum="90" value="50">50%</meter>

50%

• 4️⃣ <progress>

  Both the progress and meter tags display bars on a web page. However, the progress tag is designed to show how far along something is, such as a project or task.

  진행률 및 미터 태그는 모두 웹 페이지에 막대를 표시합니다. 그러나 진행률 태그는 프로젝트 또는 작업과 같은 항목이 얼마나 진행되고 있는지를 보여주기 위해 설계되었습니다.

For example, if you wanted to show a project is 70 percent complete, you could use this HTML:

예를 들어 프로젝트가 70% 완료되었음을 보여주고 싶다면 다음 HTML을 사용할 수 있습니다.

<progress id="project" max="100" value="70"> 70% </progress>

70%

And here is what that would look like on the page:

그리고 다음은 페이지에 표시되는 내용입니다.

• 5️⃣ <details> and <summary>

Did you know HTML has a built-in accordion feature? Most websites that implement some type of accordion rely on JavaScript to implement the ‘open and close’ experience, but this is actually a native feature of HTML5.

HTML에 내장된 펼치는 기능이 있다는 것을 알고 계셨습니까? 일부 유형의 펼치는 기능을 구현하는 대부분의 웹사이트는 '개방 및 닫기' 경험을 구현하기 위해 JavaScript에 의존하지만, 이것은 실제로 HTML5의 기본 기능입니다.

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>
<details open>
<summary>Item 2</summary>
  Something else. This one defaults to open!
</details>

• 6️⃣ <blockquote> & <cite>

If you’re including content from a different source, you should absolutely cite that source (yes, just like in college). The blockquote and cite HTML tags are the semantic version of this that indicate the content is from an outside source.

다른 출처의 콘텐츠를 포함하는 경우 해당 출처를 절대적으로 인용해야 합니다(예, 대학에서와 마찬가지로). blockquote 및 cite HTML 태그는 콘텐츠가 외부 소스에서 왔다는 것을 나타내는 의미론적 버전입니다.

<figure>
    <blockquote cite="https://en.wikipedia.org/wiki/Citizenship_in_a_Republic">
        <p>It is not the critic who counts; not the man who points out how the strong man stumbles, or where the doer of deeds could have done them better...</p>
    </blockquote>
    <figcaption>--Teddy Roosevelt, <cite>Citizenship in a Republic Speach</cite></figcaption>
</figure>

• 7️⃣ <time>

  The time element is both semantic and structured data. It tries to tell crawlers and bots what time exactly is being referenced. A perfect example of where this can be used is in the post date of an article, blog post or page.

  시간 요소는 의미론적 및 구조화된 데이터입니다. 정확히 참조되는 시간을 크롤러와 봇에 알리려고 시도합니다. 이것이 사용될 수 있는 완벽한 예는 기사, 블로그 포스트 또는 페이지의 게시 날짜입니다.

<p>Posted: <time datetime="2020-07-07">July 7th</time></p>

Posted: July 7th

Now, this element does not have a special display and will simply look like all the text around it; but, it provides much more context to any computer or person reading it!

이제 이 요소는 특별한 디스플레이가 없으며 단순히 주변의 모든 텍스트처럼 보일 것입니다. 하지만 컴퓨터나 그것을 읽는 사람에게 훨씬 더 많은 컨텍스트를 제공합니다!

• 8️⃣ <datalist>

  The datalist tag is one I really wish more developers knew about. Often, developers will use complex JavaScript libraries to implement this exact same functionality, even though it already exists in HTML!

  데이터 목록 태그는 더 많은 개발자가 알았으면 하는 태그입니다. 종종 개발자는 복잡한 JavaScript 라이브러리를 사용하여 이와 똑같은 기능을 구현합니다. 비록 이미 HTML에 존재하지만!

A datalist is an advanced drop-down to select something in a form. The nice thing is that it works as both a search and a drop-down.

데이터 목록은 양식에서 무엇인가를 선택하기 위한 고급 드롭다운입니다. 좋은 점은 검색 및 드롭다운으로 작동한다는 것입니다.

<label for="car-make">Choose a car make:</label>
<input list="car-makes" id="car-make" name="car-makes" placeholder="Select make.." />
<datalist id="car-makes" >
    <option value="BMW">
    <option value="Tesla">
    <option value="Toyota">
    <option value="Volkswaggon">
    <option value="Mazda">
</datalist>

Choose a car make:

And here’s a simple example of what this looks like in action:

다음은 이것이 실제로 어떻게 보이는지 보여주는 간단한 예입니다.

As you can see, there are a lot of great HTML5-based tags out there and I’ve only scratched the surface. HTML5 has done wonders for the web and continues to be a place of great innovation in browsers. Let’s all just hope that browser vendors continue to extend and add easy to use core HTML elements like these into the future!

보시다시피, 훌륭한 HTML5 기반 태그가 많이 있으며 저는 표면만 긁어왔습니다. HTML5는 웹에서 놀라운 일을 해냈고 브라우저에서 계속해서 큰 혁신의 장소가 되었습니다. 브라우저 공급업체가 앞으로도 이와 같은 사용하기 쉬운 핵심 HTML 요소를 계속해서 확장하고 추가하기를 바랍니다!

✳️ 단어 :

struck-through 관통 fancy 엄청난, 화려한 amend 수정하다 abbreviation 약어 acronym 두문자어 : 약어 built-in 내장된 nifty 맵시 있는 accordion 펼치는 feature 기능 cite 인용하다

✳️ 구문 :

a range of semantic HTML tags

시맨틱 HTML 태그 범위 ❌ 다양한 의미의 HTML 태그 👍

There is actually a tag

사실 태그가 있다

comes directly out of

에서 직접 나옵니다.

when the new text was added or amended

새로운 텍스트가 추가되거나 수정되었을 때

how far along something is

어떤 것이 얼마나 멀리 떨어져 있는지 ❌ 얼마나 진행되고 있는지 👍

8 Cool HTML Tags You Didn't Know Existed Schema Markup — What It Is & How to Add It to Websites

1. 요소의 높이는 되도록 설정하지 마라

컨테이너의 높이를 설정했더니 내부 컨텐츠가 늘어났을 때 레이아웃이 깨지는 모습. 되도록 내부 컨텐츠에 종속되도록 해라.

2. a 나 button 같은 focus 되는 요소들은 정확하게 그 요소에 속성을 정해주자.

img에 속성을 적용했더니 a는 정확한 위치에 있지도 않고 크기도 지정되지 않았다. 더구나 focus 도 되지 않아서 웹접근성에 좋지 않다. 내부 자식인 img같은 태그에 적용하지 ❌

3. 태그의 의미에 맞게 태그를 사용해라

<p><strong>자동차</strong>: 바퀴로 굴러가는 기계</p>

div, span은 가능한 사용하지 말자.

2️⃣ 모듈을 이용한 모달창 실습

.modal-login {
  display: none;
  height: 100%;
}

.modal-login.on {
  display: block;
}

• class 속성을 이용하여 모달창을 끄고 킬 수 있도록 css에서 작성해줬다.

  .modal-login::after {
  display: block;
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  opacity: 0.7;
  z-index: 10;
  }

• 가상요소를 이용하여 배경색을 깔아준다. z-index와 opacity를 이용해서 뒤쪽의 본래화면이 어두워 보이도록 만들었다.

  .modal-login .cont-form-login {
  width: 100%;
  max-width: 520px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #FFF;
  z-index: 20;
  }

• position: fixed 와 top, left 속성 그리고 transform 을 이용해서 모달창이 정가운데로 오도록 만들었다.

  .form-login .label-hold {
  cursor: pointer;
  }
  

.form-login .label-hold::before { display: inline-block; content: ''; background: url('../images/check-box.png'); width: 22px; height: 22px; }

.form-login .inp-hold:checked+.label-hold::before { background-image: url('../images/'); }

.form-login a[class^="link"] { display: inline-block; margin-top: 20px; line-height: 18px; font-size: 14px; color: #767676; }

.form-login .link-signup::after { display: inline-block; content: '|'; margin: 0 12px; }

.cont-form-login .btn-close { position: absolute; top: 0; right: 0; padding: 22px 24px; box-sizing: content-box; background-color: transparent; }

- `input`이 보이지 않도록 `class="txt-hide"`를 적용했기 때문에 체크박스는 `label`의 가상요소를 이용하여 꾸민다.
- `input`이 체크되었을 때 형제 라벨의 속성을 바꾸도록 설정해준다.
- 닫기 버튼은 html의 논리적 흐름상 `section`의 끝부분에 위치해 있기 때문에 `position` 속성을 이용하여 좌상단으로 끌어올린다.

```css
/* 접근성 */
.form-login .inp-hold:focus+.labl-hold::before {
    outline: 2px solid black;
    outline-offset: 5px;
}

• 접근성을 고려해서 input에 focus 가 들어왔을 때 label의 가상요소에 스타일링을 해준다. (input이 display 밖으로 날아갔기 때문에)

• splitting script 와 perspective, transform을 활용하여 반지를 만들어 보았다.

Circle Text Animation using CSS & Splitting.js | CSS Text Effects - YouTube Splitting/splitting.js at master · shshaw/Splitting

미디어 쿼리를 사용한 벤딩 머신 만들기

강사님의 html 마크업 방식이 좋아보였고 앞으로는 class명 지정이나 구조설정에서 오늘 배운 방식을 따라해보록 노력해야겠다. 자바스크립트를 염두해둔 html 마크업이 인상적이었다. dataset은 아마도 자바스크립트에서 값을 다루기 위해서 넣은 속성처럼 보인다.

부트스트랩 사용해 봄 (모듈을 모아둔 느낌이다.)

완전 똑같이 따라해봤다 부트스트랩의 모듈들을 그대로 복사해서 button과 <input type="radio">이 필요한 곳에 사용했다.

pseudo selector 는 element 앞에 있다.

z-index가 먹지 않는 경우가 있다.

transform 되었을 때는 z-index가 해지되는 현상 발생

참고 : z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법) | by Erwinousy | Medium

그래서 transform 말고 position을 이용해 해결했다.

프론트엔드의 아찔한 상황

서비스 출시 후에 ui 가 깨진다거나 테스트 해보지 않은 상황이 나와서 예상치 못한 에러가 발생한 경우 ex) 축구 경기 게시판의 자살골의 경우를 생각하지 못하고 테스트해보지 않았던 경우

과제 리뷰시간

동기님들의 과제를 리뷰해 본 시간 개발자 도구의 .cls를 이용해서 클래스를 토글할 수 있다. img alt 값을 구체적으로 주기 (닫기 => 로그인 창 닫기) input은 label과 짝을 지어야 함. (input 의 id와 label 의 for 일치) pw input의 type은 pw 로 개발자 도구의 elements를 우클릭해서 edit html 가능

강사님의 모듈화 강의

.btn-login{
  width:100%;
  padding:17px 0 15px;
  font-weight: bold;
  font-size: 22px;
  line-height: 28px;
  background-color: #2F80ED;
  border-radius: 5px;
  border:none;
  color:#fff;
  cursor: pointer;
}

.btn-close{
  width:16px;
  height:16px;
  background-color: #fff;
  border:none;
  cursor: pointer;
}

.module-inp .inp-login{
  display: block;
  width:100%;
  padding:15px 0 15px 16px;
  border: 1px solid #C4C4C4;
  box-sizing: border-box;
  border-radius: 5px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}
.module-inp.module-inp-id.error .inp-login{
  border:2px solid #F4492E;
}

.module-inp .inp-error{
  display: none;
  margin:6px 0 0 4px;
  font-size: 14px;
  line-height: 18px;
  color: #F4492E;
}

.module-inp.error .inp-error{
  display: block;
}

.module-inp + .module-inp{
  margin-top:10px;
}

.link-sns-login{
  display: block;
  padding:15px 0 16px;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #767676;
  text-decoration: none;
  text-align: center;
  border: 1px solid #767676;
  box-sizing: border-box;
  border-radius: 5px;
  text-indent: -16px;
}


.link-sns-login::before{
  display: block;
  content:"";
  float:left;
  width:22px;
  height:22px;
  margin-left:16px;
  background-image:url("../images/Google__G__Logo\ 1.png");
}

.link-sns-login.icon-naver{
  border-color:#00BF18;
}

.link-sns-login.icon-naver::before{
  background-image:url("../images/naver-logo.png");
}
.link-sns-login.icon-facebook{
  border-color:#2D9CDB;
}

.link-sns-login.icon-facebook::before{
  /* background-image:url("../images-login/icon_facebook.png");
  background-repeat:no-repeat;
  background-position: center; */
  background:url("../images/facebook.png") center no-repeat;
}
.link-sns-login.icon-kakao{
  border-color:#F2C94C;
}

.link-sns-login.icon-kakao::before{
  background-image:url("../images/message-circle.png");
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./styles/reset.css">
  <link rel="stylesheet" href="./styles/style_module.css">
</head>
<body>
  <p>버튼 모듈</p>
  <li><a href="" class="icon-google link-sns-login">구글 계정으로 로그인</a></li>
  <li><a href="" class="icon-facebook link-sns-login">페이스북 계정으로 로그인</a></li>
  <li><a href="" class="icon-naver link-sns-login">네이버 계정으로 로그인</a></li>
  <li><a href="" class="icon-kakao link-sns-login">카카오톡 계정으로 로그인</a></li>

  <button type="button" class="btn-login">로그인</button>
  <button type="button" class="btn-close"><img src="./images/close.png" alt="로그인 닫기"></button>

  <p>인풋 모듈</p>
  <fieldset class="module-inp module-inp-id error">
    <label for="inpId" class="txt-hide">아이디</label>
    <input type="text" class="inp-login" id="inpId" placeholder="아이디">
    <strong class="inp-error">아이디를 입력해 주세요.</strong>
  </fieldset>
  <fieldset class="module-inp error">
    <label for="inpPw" class="txt-hide">비밀번호</label>
    <input type="password" class="inp-login" id="inpPw" placeholder="비밀번호">
    <strong class="inp-error">비밀번호를 입력해 주세요.</strong>
  </fieldset>
</body>
</html>

필요한 모듈을 부품처럼 꺼내서 사용할 수 있다

오늘의 과제

오늘 배운 OOCSS를 활용해서 만들어보았다.

source code

피그마 활용

100%에서 screenshot 딴다. PerfectPixel by WellDonCode (Chrome Extension 다운받기) screesshot과 비교하여 정확하게 만들 수 있다.

CSS 설계기법

OOCSS

레고처럼 여러가지 모듈을 만들어서 조합하도록 하는 방법론

    /* 구조와 스킨의 분리 */

    .btn {
      width: 200px;
      height: 80px;
      font-size: 30px;
    }

    .btn-close {
      background: black;
      color: #FFF;
      border: 3px dotted #fff;
    }

    /* container와 contents를 분리하라 */
    /* 아래 예제 처럼 스타일링되면  #main이 사라졌을 때 css가 무력화된다. module화를 해야한다. */
    #main .btn {
      width: 300px;
      display: inline-block;
      padding: 20px;
      margin: 10px;
      font-size: 18px;
      line-height: 1.5;
    }

    #main .general {
      background-color: aquamarine;
      color: black;
    }

    #main .warning {
      background-color: azure;
      color: blue;
    }

  <h1>구조와 스킨의 분리</h1>

  <button type="button" class="btn"></button>
  <button type="button" class="btn btn-close"></button>

  <h1>container와 contents를 분리</h1>

  <main id="main">
    <button type="button" class="btn general">기본 버튼</button>
    <button type="button" class="btn warning">취소 버튼</button>
  </main>

SMACSS

1️⃣ base 프로젝트의 표준 스타일을 정의함. 방법론 :

• 구조(structure)와 스킨의 분리
• 컨테이너와 콘텐츠의 분리

2️⃣ layout 헤더, 메인영역, 푸터, 사이드 바와 같은 웹사이트에서 큰 틀을 구성하는 모듈에 관한 규칙.

• 대부분 페이지에 몇개 존재하지 않기 때문에 ID 선택자를 사용하기도 함. ```css #header { ... }
• 텍스트* #section { ... }

#footer { ... }

```html
<header id="header"></header>
<section id="section"></section>
<footer id="footer"></footer>

3️⃣ module과 subclass 레이아웃안에 배치되는 모든 요소를 의미

• 반복되는 요소들이기 때문에 ID 선택자를 사용하지 않으며, 요소 선택자의 사용을 최소화.(자식 요소에만 적용)
• 비슷한 모듈안에서도 모양이 조금씩 다를 경우 서브클래스를 만든다. (btn-small, btn-long 등등)

  .btn.bts-small {
    width: 50%;
  }
  .btn.bts-big {
    width: 150%;
  }

4️⃣ state 기존 스타일을 덮어쓰거나 확장하는데 사용하는 스타일

• 서브클래스와 다른 점은 레이아웃이나 모듈에 둘 다 적용가능하며, 서브클래스가 한번 적용되면 바뀌지 않는 - 속성임에 비해 스테이트는 자바스크립트로 필요할때 넣었다 뺐다 할 수 있다는 점.
• 클래스 이름은 앞에 is 라는 접두사를 사용 (is-hidden, is-active … )

BEM

얀덱스(Yandex)사가 만든 설계방법. 기본 규칙

• ID 선택자와 요소 선택자를 권장하지 않는다. (우선 순위 계산의 원할함을 위해서. z-index를 10단위로 계산하는 것과 마찬가지)

1. Block

어디에서나 재사용 가능한 부품 클래스 네이밍은 목적이 명확해야 (Error, hidden … ) 소문자를 사용하며 여러 단어가 연결되는 경우는 하이픈 케이스(케밥케이스)를 사용 (cont-nav … )

1. Element

Block 을 구성하는 요소들로 block 에 종속되야 함 때문에 block 의 클래스 이름을 상속 받고 element의 클래스 이름을 언더바 두 개를 접두사로 하여 사용 (error__link, opacity-half__btn )

Element 안에 또 element를 사용할 경우 클래스 네이밍은 element 끼리 중첩하지 않는다.

opacity-half__btn__txt (x)
opacity-half__txt (o)

1. Modifier

block이나 element의 모습이나 상태 또는 움직임 (요소가 활성화된 상태, 사이즈, 컬러 등등)을 정의

단독으로 클래스 이름을 사용하지 않고 두 번째 클래스 이름으로 사용

btn_size_small (x)
btn_move btn_move_active (o)

클래스 네이밍은 block이나 element의 이름을 상속 받고 언더바 하나로 연결 만약 두 개 이상의 단어를 사용해야하면 block처럼 하이픈으로 연결

btn_move btn_move_size-small (o)

이렇게 언더바와 하이픈이 혼용된 형태를 취함.

참고 : [CSS 방법론] BEM 방식 :: nana_log