개발자를 희망하는 초보의 자기개발 이야기

윈도우에서 이모지 사용하기

클라우드아실 — Sun, 4 Jan 2026 02:24:03 +0900

윈도우 이모지 창

요즘 슬랙이나 디스코드, 노션에서 이모지를 많이 사용하는데 일반적인 블로그에서도 많이 사용하길래 찾아봤다.
맥에서만 이모지 창을 열어서 사용할 수 있는 줄 알았는데 윈도우에서도 오래전부터 되고 있었다.(?!)

방법 1. 마우스 우클릭

마우스 우클릭시 나타나는 이모지 버튼

알아낸 첫번째 방법은 마우스 우클릭.
하.. 이런 바보같은.. 그동안 노션에서 복사해서 사용하고 있었는데..(??!!)
Windows 10 이상은 텍스트 입력창에서 마우스 오른쪽 버튼을 눌러서 '이모지 & 기호'을 선택할 수 있다.
단, 우클릭시 자체적인 팝업 메뉴를 사용하는 사이트 등에서는 사용할 수 없다.

방법 2. 단축키

윈도우 키 + ;(세미콜론) 또는 .(점)
웬만하면 잊지 않겠지만 혹시 모르니까..

그 외 특이사항

1. 영어 이모지

같은 의미를 영어와 한국어로 검색했을 때 차이

영어로 검색하면 이모지를 못 찾아낸다.
다른 언어의 윈도우를 안써서 모르겠으나 아마 설치된 윈도우의 언어에 영향을 받는 것 같다.
단, GIF는 영어로 검색했을 때 해당 단어가 들어간 자료가 더 잘 나온다.

2. 한영 전환

한영 전환시 발생하는 오류

한글과 영어를 같이 검색할 수 없다. 아니, 안하는게 정신건강에 유리하다.
한글 입력 중 영어로 전환하면 한글자는 꼭 한글이 나오고 뒷부분부터 바뀐다.
좀 더 테스트를 하고자 한은 한글로, 영은 전환후 dud으로 빠르게 번갈아가며 입력했더니
전환을 포기하는 이상 현상이 발생하면서 커서도 중간쯤 고정되서 텍스트를 생성하는 오류가 발생했다.

즉, 이모지는 한글로만 검색하고, GIF를 검색할 때는 한글이든 영어든 원하는 텍스트에 맞춰서 검색하자.

USB 대용량 저장 장치을(를) 꺼내는 동안 문제가 발생했습니다.

클라우드아실 — Wed, 7 May 2025 21:50:07 +0900

외장하드를 사용하는데 한 번씩 꺼내기를 하다 보면 위와 같은 에러메시지와 함께 꺼내기가 안 되는 일이 발생했다. 이 현상은 백그라운드에서 무엇인가 실행되고 있어서 장치에서 꺼내지 못함을 의미한다.
이에 몇가지 효과가 있었던 방법을 기록한다.

작업 중인 파일 종료

실제로 작업 중인 파일이 존재하는 경우.
외장하드에 저장된 메모장을 열어놓고 편집하다가. 또는 저장된 파일을 실행시키고 종료하지 않은 채 꺼내기를 했던 경우가 있었다.
또는 영상파일들을 재생시켰다가 잠시 멈춰두고 바로 꺼내기를 한 경우도 있었다.
해당 파일들을 저장 및 종료하고 꺼내기를 진행하면 된다.

※ 실행중인 백신 프로그램의 실시간 자동 보호 기능이 동작하면서 문제 될 수 있다. 외장기기들을 연결 시 백신 프로그램에서 자동으로 검사를 진행하는 경우도 있기 때문에 백신의 자동 보호 기능을 해제해 보거나 종료 후 진행하는 것도 도움이 된다.

작업 관리자 - Windows 탐색기 다시시작

Ctrl + Alt + Delete를 눌러 작업 관리자를 실행한다.
USB 저장 장치에서 실행 중인 프로세스 및 프로그램을 선택한 다음 마우스 오른쪽 버튼을 클릭하여 해당 프로그램을 또는 프로세스를 종료한다.
실행중인 프로그램이 없는데 꺼내기가 되지 않는 경우에는 프로세스에서 Windows 탐색기 - 마우스 우클릭 - 다시 시작을 실행한다.
기존에 열려있던 탐색기가 모두 닫히면서 신기하게도 웬만하면 꺼내기가 된다.
파일 이동, 복사, 폴더 생성, 파일명이나 폴더명 변경 등 탐색기에서의 작업내역들이 메모리에 남아서 발생하는 문제인 것 같았다.
한 번에 안되면 3~5번 정도 반복해서 진행해 보자.

Resource Monitor

Win + R → resmon 입력
"디스크" 탭 → "디스크 활동" 섹션에서 활동을 확인

내가 제거해야 할 드라이브에서 어떤 것이 실행되고 있는지 확인할 수 있다.
나같은 경우 외장하드를 사면서 설치한 제조사 자체 백업 프로그램이 문제였던 적이 있다.

명령 프롬프트

리소스 모니터에서 실행중인 것을 다 일일이 제거했음에도 시스템적으로 뭔가 실행되고 있을 때 이렇게 조치한다.
관리자 권한으로 명령프롬프트를 실행시킨다

명령프롬프트

diskpart를 실행시켜 아래의 순서대로 입력해서 드라이브를 강제 종료 시킨다.

diskpart
list volume
select volume x (해당 드라이브 번호)
offline disk

diskpart

이제 평소처럼 디스크 제거를 하면 제거가 정상적으로 된다.
해당 디스크를 제거했다가 다시 재연결해도 반응이 없을텐데 그 때는 위의 순서대로 진행 후 마지막에 online disk 를 실행시킨다.
또는 컴퓨터를 재부팅하면 원상복구 된다.

재부팅

위의 방법들을 다 시도했는데도 안될 때는 컴퓨터를 재부팅하고 바로 꺼내기를 시도해 보자. 단, 윈도우 업데이트가 예정되어 있는 상태에서 외부기기를 연결한 상태로 재부팅하면 업데이트 완료가 되지 않고 멈추는 경우가 있으니 업데이트가 자동 실행되지 않도록 하고 재부팅해야 한다.

FileNotFoundError: [WinError 3]

클라우드아실 — Sat, 19 Apr 2025 06:39:39 +0900

Windows‑API는 기본 설정에서 경로가 260 자(MAX_PATH) 를 넘으면 “파일을 찾을 수 없다(FileNotFoundError / WinError 3)”라는 모호한 예외를 내보낸다.

해결 방법 - Windows 긴 경로(> 260 자) 활성화

Windows 10 / 11 Pro
- gpedit.msc → 컴퓨터 구성 > 관리 템플릿 > 시스템 > 파일 시스템 → “Win32 긴 경로 사용 가능하도록 설정” 항목을 사용 으로 변경
Home 버전 또는 스크립트 배포용
관리자 PowerShell:

New-ItemProperty -Path "HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem" ` -Name LongPathsEnabled -PropertyType DWord -Value 1 -Force

참고

윈도우11 홈 버전에 로컬 그룹 정책 편집기 gpedit.msc 설치 : 네이버 블로그

혼공학습단 13기 활동 회고

클라우드아실 — Sun, 23 Feb 2025 23:52:04 +0900

혼공학습단 13기, 나의 6주간 도전기

새해가 되면 으레 새로운 목표를 세운다. '올해는 다이어트!' 같은 결심처럼 말이다. 올해 나는 새로운 도전을 선택했다. 바로 '혼자 공부하는 학습 습관'을 만들기 위해 혼공학습단 13기에 지원한 것. 그리고 1월 6일부터 시작된 여정은 6주 동안 꾸준히 이어졌고, 마침내 2월 23일에 마무리되었다

무엇을 원하는가

혼공학습단에 선정되었을 때 가장 기뻤던 건, 내가 좋아하는 윤인성님의 책으로 공부할 수 있다는 점이었다. 혼공 시리즈를 이미 여러 권 가지고 있었지만, 제대로 완독한 적은 없었다. 국비학원을 다니면서 바쁘게 공부하느라 책들은 한쪽에 쌓여만 갔다. 그런데 이번에는 다르게 해보고 싶었다. 취업 준비가 길어지면서 학습했던 것들이 희미해졌고, 다시 집중력을 끌어올리고 싶었다. 그래서 새로운 한 해를 맞아 학습 습관을 되찾고자 혼공학습단에 지원했다.

혼공시리즈의 장점 인강!

이번 학습단에서는 매일 30분에서 1시간씩 인강을 듣는 루틴을 만들었다. 그리고 학습 내용을 블로그와 깃허브에 정리하며 복습했다. 인강은 반드시 보는 것을 추천한다. 책에서는 접하기 어려운 윤인성님의 실전 팁들이 가득하기 때문이다.

특히 인상 깊었던 장면이 있다. 조건문 챕터에서 짝수/홀수 판별하는 알고리즘을 다룰 때였다. 윤쌤이 "나머지 연산자를 사용하면 된다는 단순한 알고리즘도, 처음 접하는 사람들은 스스로 생각하기 어렵고, 다들 어디선가 한 번쯤 보고 깨닫게 됩니다."라고 말씀하셨다. 이 말에 "아, 나만 그런 게 아니었구나!" 하고 안도감이 들었다. 혼자 공부할 때는 내가 부족한 것처럼 느껴졌지만, 모두가 같은 과정을 거친다는 걸 알게 되어 위로가 되었다.

느리지만 꾸준하게

혼공학습단에서는 매주 블로그에 주차별 과제를 기록해야 했다. 하지만 학습 내용을 정리하는 데 생각보다 시간이 오래 걸렸다. 매일 인강을 들었지만, 이를 블로그에 체계적으로 정리하는 것이 쉽지 않았다. 사실 이건 나 스스로가 학습 내용을 하나도 빠짐없이 기록하겠다는 욕심 때문이기도 했다. 기본 미션만 해도 충분했지만, 나는 더 깊이 있게 정리하고 싶었다.

시간이 부족할 때는 AI를 활용하기도 했다. 챕터의 주요 개념과 소주제를 먼저 정리한 뒤, 강의를 들으며 이를 보완하는 방식으로 시간을 절약했다. 이렇게 하니 효율적으로 학습할 수 있었고, 매주 빠짐없이 과제를 수행할 수 있었다.

다음 목표는?

혼공학습단은 끝이 났지만, 내 학습은 아직 진행 중이다. 아직 남은 챕터들을 완강하는 것이 첫 번째 목표다. 그리고 배운 내용을 바탕으로 개인 프로젝트를 진행해볼 계획이다. 최근 리액트만 다루다 보니 순수 자바스크립트로 DOM을 조작하던 감각이 흐려졌다. 하지만 결국 자바스크립트가 근본이니, 이를 더 자유롭게 다루는 것이 목표다. 이를 위해 프로젝트를 통해 실전 경험을 쌓으려 한다.

혼공족장님 만세!

주차별 간식과 응원의 메시지!

사실 이 여정을 끝까지 완주할 수 있었던 것은 혼공족장님의 응원 덕분이다. 매주 과제를 제출하면 며칠 내로 족장님의 응원의 메시지가 댓글로 달렸다. 이 작은 격려가 목표를 달성하는 데 큰 동기부여가 되었다. 또한, 주차별 목표를 달성한 사람들 중 일부는 간식을 받을 수 있었는데, 나는 완주 간식까지 포함해 총 4번이나 받았다! 게다가 완주자에게는 한빛미디어에서 사용할 수 있는 2만 마일리지가 지급된다. 다음에는 어떤 혼공 시리즈를 구매해서 학습단에 참여할지 고민중이다.

[혼공스] 6주차 Chapter 07 문서 객체 모델

클라우드아실 — Sun, 23 Feb 2025 23:50:29 +0900

기본 미션

p. 315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡처하기

사이트가 https://www.placecats.com으로 변경되었음.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const img = document.querySelector("img");
      img.setAttribute("src", "https://www.placecats.com/200/200");
      img.src = "https://www.placecats.com/200/200";

      console.log(img.getAttribute("src"));
      console.log(img.src);
    });
  </script>
</head>
<body>
  <img src="" alt="" />
</body>

선택미션

p. 352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡처하기

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const addTodo = () => {
        if (input.value !== "") {
          const div = document.createElement("div");
          document.body.appendChild(div);

          const checkbox = document.createElement("input");
          checkbox.type = "checkbox";
          checkbox.addEventListener("change", () => {
            if (checkbox.checked) {
              div.style.textDecoration = "line-through";
            } else {
              div.style.textDecoration = "";
            }
          });
          div.appendChild(checkbox);

          const span = document.createElement("span");
          span.textContent = input.value;
          input.value = "";
          div.appendChild(span);

          const deleteButton = document.createElement("button");
          deleteButton.textContent = "제거하기";
          deleteButton.addEventListener("click", () => {
            div.parentNode.removeChild(div);
          });
          div.appendChild(deleteButton);
        }
      };

      const h1 = document.createElement("h1");
      h1.textContent = "할 일 목록";
      document.body.appendChild(h1);
      const input = document.createElement("input");
      input.addEventListener("keyup", (e) => {
        if (e.keyCode === 13) {
          addTodo();
        }
      });
      document.body.appendChild(input);

      const addButton = document.createElement("button");
      addButton.textContent = "추가하기";
      document.body.appendChild(addButton);
      addButton.addEventListener("click", addTodo);
    });
  </script>
</head>
<body></body>

학습 기록

문서 객체 모델

문서 객체 모델(Document Object Model), 줄여서 DOM이라고 부른다.
문서 객체는 HTML 요소를 의미한다.
문서 객체 모델은 자바스크립트를 통해 HTML 요소를 조작할 수 있게 해주는 객체들의 집합이다.

DOMContentLoaded

html에서 <script>가 실행될 때 DOM이 아직 만들어지지 않은 경우를 방지한다.
head 내에 script 태그를 넣고 싶을 때 사용하며, body 태그 내 문서 가장 하단에 script를 배치하면 필요치 않다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", ()=>{
      console.log("안녕하세요")
    })
  </script>
</head>
<body>
  <script>
    console.log("안녕하세요")
  </script>
</body>

querySelector()

document 객체를 통해 HTML 문서 내의 태그에 접근할 수 있다.
querySelector()는 해당 조건에 맞는 첫 번째 태그만 선택한다.
다양한 선택자를 태그로 선택할 수 있다.

<head>
  <script>
    document.querySelector("h1").style.color = "red"; // 태그 선택자
    document.querySelector("#header").style.backgroundColor = "orange"; // 아이디 선택자
    document.querySelector(".center.head").style.textAlign = "center"; // 클래스 선택자
    document.querySelector("[type=text]").style.borderRadius = "10px"; // 속성 선택자
    document.querySelector("body input").style.backgroundColor = "blue"; // 후손 선택자
  </script>
</head>
<body>
  <h1 id="header" class="center head">안녕하세요!</h1>
  <input type="text">
</body>

querySelectorAll()

querySelectorAll()은 해당 조건의 모든 태그를 선택한다.
querySelectorAll()의 결과는 NodeList라는 유사 배열(Iterable) 객체다.
NodeList 자체는 HTML 요소들의 리스트이지만, style 속성은 개별 요소(HTMLElement)에만 적용할 수 있다.
따라서 각 요소를 순회하면서 적용해야 한다. 이 때 반복문을 활용한다.

<head>
  <script>
  document.addEventListener("DOMContentLoaded", () => {
      for (const el of document.querySelectorAll("input")) {
        el.style.backgroundColor = "red";
      }
    });
  </script>
</head>
<body>
  <h1 id="header" class="center head">안녕하세요!</h1>
  <input type="text" />
  <input type="" />
</body>

textContent / innerHTML

textContent는 값을 모두 문자로 인식한다.
innerHTML은 값 내의 태그를 HTML로 인식한다.
따라서 innerHTML은 보안상 문제가 될 수 있기 때문에 가급적 textContent를 사용한다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const header1 = document.querySelector("#textContent");
      const header2 = document.querySelector("#innerHTML");

      header1.textContent = "바뀐 문자열<br>입니다.";
      header2.innerHTML = "바뀐 문자열<br>입니다.";
    });
  </script>
</head>
<body>
  <h1 id="textContent">textContent 속성 기존 문자열</h1>
  <h1 id="innerHTML">innerHTML 속성 기존 문자열</h1>
</body>

setAttribute / getAttribute

값 넣기: element.setAttribute("속성명", "값")
값 추출: element.getAttribute("속성명")
표준 속성(src, alt 등)은 점(.)으로 바로 접근 가능하다.
사용자 정의 속성을 조작할 때 해당 메서드를 활용한다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const img = document.querySelector("img");
      img.setAttribute("src", "https://www.placecats.com/200/200");
      img.src = "https://www.placecats.com/200/200";

      console.log(img.getAttribute("src"));
      console.log(img.src);
    });
  </script>
</head>
<body>
  <img src="" alt="" />
</body>

스타일 조작

element.style.속성 = "값"
자바스크립트에서는 CSS 속성명의 대시(-)를 대문자로 표현한다.
또는 객체 속성으로 접근하는 방식도 사용 가능은 하다.(권장하지 않음)
단위를 꼭 같이 표기해야 한다. (ex. height: "10px")

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const divs = document.querySelectorAll("div");

      divs.forEach((div, key) => {
        div.style.backgroundColor = `rgb(${key * 25.5},${key * 25.5},${
          key * 25.5
        })`;
        div.style.height = "10px";
      });
    });
  </script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>

문서 객체 생성, 제거, 이동

문서 객체 생성하기

createElement()
첫 번째 매개변수에 태그 이름을 입력하여 원하는 태그를 생성할 수 있다.
생성된 태그 객체를 변수에 저장하면 내부 텍스트, 스타일, 속성 등을 수정할 수 있다.
단, 이 단계는 생성만 한 것이기 때문에 화면에 출력되지 않는다.

document.addEventListener("DOMContentLoaded", () => {
  const header = document.createElement("h1");

  header.textContent = "createElement로 만든 태그입니다.";
  header.style.backgroundColor = "black";
  header.style.color = "white";
});

문서 객체 붙이기

appendChild()
생성된 문서 객체를 화면에 출력할 때 태그를 지정해 자식으로 붙인다.

document.addEventListener("DOMContentLoaded", () => {
  const header = document.createElement("h1");

  header.textContent = "createElement로 만든 태그입니다.";
  header.style.backgroundColor = "black";
  header.style.color = "white";

  const body = document.querySelector("body");
  body.appendChild(header);
});

문서 객체 제거하기

removeChild()
부모 노드(parentNode)를 사용하면 요소만으로 removeChild() 메서드를 호출하여 노드를 제거할 수 있어 더 편하다.

const header = document.createElement("h1");

header.textContent = "createElement로 만든 태그입니다.";
header.style.backgroundColor = "black";
header.style.color = "white";

const body = document.querySelector("body");
body.appendChild(header);
setTimeout(() => {
  body.removeChild(header); // header의 위치가 바뀌면 새로운 위치를 지정해야 함.
  header.parentNode(header); // 항상 header의 부모 노드에서 제거함
}, 2000);

문서 객체 이동하기

appendChild()
출력하는 메서드이나 다른 위치를 지정해 출력하면 복사가 아니라 이동한다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const header = document.createElement("h2");
      const first = document.querySelector(".first");
      const second = document.querySelector(".second");

      header.textContent = "안녕하세요";

      first.appendChild(header);

      setTimeout(() => {
        second.appendChild(header);
      }, 2000);
    });
  </script>
</head>
<body>
  <div class="first">
    <h1>첫 번째 div 태그 내부</h1>
  </div>
  <div class="second">
    <h1>두 번째 div 태그 내부</h1>
  </div>
</body>

이벤트 핸들링

이벤트 연결하기

addEventListener()
첫 번째 인자에 이벤트 이름, 두 번째 인자에 이벤트 발생 시 호출할 함수를 지정한다.
아래 코드의 경우 텍스트를 클릭시 클릭 횟수가 증가한다.
이 때 텍스트가 불필요하게 선택되는데 userSelect를 none으로 설정하면 이 기능을 없앨 수 있다.

const header = document.createElement("h1");
document.body.appendChild(header);

let count = 0;
header.style.userSelect = "none";
header.textContent = `클릭 횟수 : ${count}회`;

header.addEventListener("click", () => {
  header.textContent = `클릭 횟수 : ${++count}회`;
});

이벤트 제거하기

removeEventListener()
제거할 때는 addEventListener에서 사용한 것과 동일한 함수를 매개변수로 전달한다.
이를 위해 일반적으로 함수를 별도의 변수에 저장한다.

let counter = 0;

// 이벤트 중복연결을 막아줄 조건 설정
let isConnect = false;
  
const listener = () => {
  header.textContent = `클릭 횟수 : ${++counter}회`;
};

const header = document.createElement("h1");
header.textContent = "클릭 횟수 : 0회";

const p = document.createElement("p");
p.textContent = "이벤트 연결 상태: 해제";

const connectButton = document.createElement("button");
connectButton.textContent = "이벤트 연결";
connectButton.addEventListener("click", () => {
  if (isConnect === false) {
    header.addEventListener("click", listener);
    p.textContent = "이벤트 연결 상태: 연결";
    isConnect = true
  }
});

const disconnectButton = document.createElement("button");
disconnectButton.textContent = "이벤트 해제";
disconnectButton.addEventListener("click", () => {
  header.removeEventListener("click", listener);
  p.textContent = "이벤트 연결 상태: 해제";
});

document.body.appendChild(header);
document.body.appendChild(connectButton);
document.body.appendChild(disconnectButton);
document.body.appendChild(p);

이벤트 활용

키보드 이벤트

keyup / keypress / keydown
키보드 입력 상황별 이벤트다.
keypress는 브라우저에 따라 아시아권의 문자를 제대로 처리하지 못하는 문제가 있어 잘 사용하지 않는다.

document.addEventListener("keyup", () => {
  document.body.innerHTML = "<h1>keyup 이벤트 발생</h1>";
});

document.addEventListener("keydown", () => {
  document.body.innerHTML = "<h1>keydown 이벤트 발생</h1>";
});

이벤트 객체

이벤트가 발생하면 이벤트 함수의 첫번째 매개변수로 이벤트 객체가 전달된다.
이 객체에는 이벤트 관련 정보가 포함되어 있어 다양하게 활용할 수 있다.

document.addEventListener("keyup", (e) => {
  document.body.innerHTML = `<h1>${e.code} 이벤트 발생</h1>`;
});

document.addEventListener("keydown", (e) => {
  document.body.innerHTML = `<h1>${e.code} 이벤트 발생</h1>`;
});

이벤트 발생 객체

아래의 코드는 textarea태그에 이벤트를 연결했다. 이 때 textarea는 이벤트 발생 객체가 된다.
이를 참조하는 다양한 방식이 있다.
대표적으로 currentTarget을 통해 이벤트 발생 객체를 참조하는 방식이 있다.

const h1 = document.querySelector("h1");
const textarea = document.querySelector("textarea");
textarea.addEventListener("keyup", () => {
  h1.textContent = `글자 수 : ${textarea.value.length}`;
});

textarea.addEventListener("keyup", (e) => {
  h1.textContent = `글자 수 : ${e.currentTarget.value.length}`;
});

화살표 함수가 아닌 익명함수를 사용해 this를 참조할 수도 있다.

const h1 = document.querySelector("h1");
const textarea = document.querySelector("textarea");
textarea.addEventListener("keyup", () => {
  h1.textContent = `글자 수 : ${textarea.value.length}`;
});

textarea.addEventListener("keyup", function () {
  h1.textContent = `글자 수 : ${this.value.length}`;
});

기본 이벤트 막기

preventDefault()
태그의 기본 동작을 막을 수 있다.
예를 들어 a 태그를 눌러도 링크로 이동하지 않거나
텍스트 위에서 마우스 오른쪽 버튼을 눌러도 contextmenu가 나오지 않게 처리할 수 있다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const a = document.querySelector("a");
      a.addEventListener("click", (e) => {
        e.preventDefault();
      });
      a.addEventListener("contextmenu", (e) => {
        e.preventDefault();
      });
    });
  </script>
</head>
<body>
  <a href="http://naver.com/">네이버</a>
</body>

입력 양식 버튼

버튼 관련 태그

button, input 태그 중 type="button", type="submit"
이 세 가지 태그 모두 버튼 기능을 한다.
click 이벤트를 활용한다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const buttonA = document.querySelector("button");
      const buttonB = document.querySelector("input[type=button]");

      buttonA.addEventListener("click", (event) => {
        event.currentTarget.textContent += "글자";
      });

      buttonB.addEventListener("click", (event) => {
        event.currentTarget.value += "글자";
      });
    });
  </script>
</head>
<body>
  <!-- click 이벤트 활용 -->
  <button>버튼</button>
  <input type="button" value="input 버튼" />
</body>

submit 이벤트는 form 태그에 연결해야 한다.
그래서 click 이벤트와는 달리 submit 이벤트를 따로 활용한다.
submit 이벤트 핸들러에서 이메일 형식 검사 등의 유효성 검증 로직을 구현할 수 있다.
이메일 형식이 잘못된 경우 preventDefault()를 사용하여 form 제출을 막을 수 있다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const form = document.querySelector("form");
      form.addEventListener("submit", (e) => {
        const text = document.querySelector("input[type=text]");
        if (text.value.indexOf("@") >= 0) {
          alert("정상적으로 제출합니다!");
        } else {
          alert("이메일 형식을 입력해주세요");
          e.preventDefault();
        }
      });
    });
  </script>
</head>
<body>
  <!-- submit 이벤트 활용 -->
  <form action="">
    <label for="submit">이메일 형식을 입력해주세요</label>
    <br />
    <input id="submit" type="text" />
    <input type="submit" value="제출" />
  </form>
</body>

추가로 form 태그 내 button 태그는 submit 이벤트를 발생시킨다.
따라서 form 내부에서 button을 사용하고 싶을 때는 button태그가 아닌 input[type="button"]을 생성해야 한다.

입력 양식 글자 입력

key 이벤트를 사용한 출력

input, text, textarea 등은 값을 가져올 때 value 속성을 사용한다.
key 이벤트는 keydown -> keypress -> 입력양식에 값 추가 -> keyup 단계를 거친다.
keydown과 keypress에 이벤트를 등록하면 실제 입력을 즉시 감지하지 못한다.
따라서 입력 값 추출을 위해서는 keyup 이벤트를 사용한다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const input = document.querySelector("input");
      const p = document.querySelector("p");

      input.addEventListener("keyup", () => {
        const inch = Number(input.value);

        // 숫자가 아닌 값을 판별
        if (isNaN(inch)) {
          p.textContent = "숫자를 입력해주세요";
          return;
        }

        p.textContent = `${inch * 2.54}cm로 변환되었습니다.`;
      });
    });
  </script>
</head>
<body>
  <input type="text" /> inch<br />
  <p></p>
</body>

change 이벤트를 사용한 출력

input태그 전체의 입력을 마쳤을 때 발생한다.
즉, 입력 중에는 발생하지 않고 입력을 마치고 엔터를 쳤을 때나
입력 후 마우스로 input 이외에 다른 곳을 클릭하는 등 입력을 마쳤다는게 선언될 때 발생한다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const input = document.querySelector("input");
      const p = document.querySelector("p");

      input.addEventListener("change", () => {
        const inch = Number(input.value);

        // 숫자가 아닌 값을 판별
        if (isNaN(inch)) {
          p.textContent = "숫자를 입력해주세요";
          return;
        }

        p.textContent = `${inch * 2.54}cm로 변환되었습니다.`;
      });
    });
  </script>
</head>
<body>
  <input type="text" /> inch<br />
  <p></p>
</body>

윤쌤의 조언(1)

회원가입이나 로그인시 비밀번호나 휴대폰번호 등을 입력하는 상황에서
onChange를 사용한다면 값을 다 입력한 다음 유효성 검증 결과를 출력한다.
setTimeout 같은 타이머 함수를 이용하면 입력 중에 유효성 검증 결과를 출력한다.
즉, 어떤 방식의 사용자 경험을 제공할 것인지에 따라 다르게 구현하는 것으로 정답은 없다.

입력 양식 선택 상자

아래로 선택상자가 나온다고 하여 드롭다운 이라고도 부른다.
html에서 공식 명칭은 select 선택 박스이다.

단일 선택 상자 사용하기

select 태그를 생성하고 내부에 option 태그를 이용해 선택 옵션을 만든다.
선택 이벤트를 감지하기 위해 change 이벤트를 활용한다.
선택된 옵션의 정보(선택된 옵션의 텍스트, 선택된 옵션의 인덱스)를 가져와 화면에 출력한다.
currentTarget.options 와 currentTarget.options.selectedIndex를 활용한다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const select = document.querySelector("select");
      const p = document.querySelector("p");

      select.addEventListener("change", (e) => {
        const options = e.currentTarget.options;
        const index = options.selectedIndex;
        p.textContent = `선택: ${options[index].textContent}`;
      });
    });
  </script>
</head>
<body>
  <select>
    <option>떡볶이</option>
    <option>순대</option>
    <option>오뎅</option>
    <option>튀김</option>
  </select>
  <p>선택: 떡볶이</p>
</body>

다중 선택 상자 사용하기

드롭다운에서 여러개를 선택할 수 있도록 하는 것을 말한다.
이를 위해 select 태그에 multiple 속성을 추가한다.
다중 선택 시 모든 선택된 옵션을 출력하는 로직
- options을 순회한다.
- selected된 option을 모두 배열에 담는다.
- join 메서드로 배열을 문자열로 바꿔 출력한다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const select = document.querySelector("select");
      const p = document.querySelector("p");

      select.addEventListener("change", (e) => {
        const options = e.currentTarget.options;
        const list = [];
        for (const option of options) {
          if (option.selected) {
            list.push(option.textContent);
          }
        }
        p.textContent = `선택: ${list.join(",")}`;
      });
    });
  </script>
</head>
<body>
  <select multiple>
    <option>떡볶이</option>
    <option>순대</option>
    <option>오뎅</option>
    <option>튀김</option>
  </select>
  <p>선택:</p>
</body>

입력 양식 체크박스와 라디오버튼

체크박스

true/false 값을 나타내는 데 사용한다.
필수,선택 약관동의 등
checked 속성으로 체크 상태를 확인해서 text를 변경한다.

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const checkbox = document.querySelector("input[type=checkbox]");
      const checkboxResult = document.querySelector("h1#checkbox");
      checkbox.addEventListener("change", () => {
        if (checkbox.checked) {
          checkboxResult.textContent = "체크";
        } else {
          checkboxResult.textContent = "해제";
        }
      });
    });
  </script>
</head>
<body>
  <!-- 어떤 대상의 true 또는 false -->
  <input type="checkbox" />
  <h1 id="checkbox"></h1>
</body>

라디오 버튼

과거방법1: undefined 체크 방식

name 속성을 기준으로 여러 값을 묶어서 처리한다.
따라서 querySelectorAll을 사용하고, forEach 반복문을 통해 값을 순회해서 확인한다.

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const radios = document.querySelectorAll(
        "input[type=radio][name=gender]"
      );
      const radioResult = document.querySelector("h1#radiobutton");
      radios.forEach((radio) => {
        radio.addEventListener("change", (e) => {
          e.currentTarget.value;
          radioResult.textContent = `${e.currentTarget.value} 버튼이 선택되었습니다.`;
        });
      });
    });
  </script>
</head>
<body>
  <!-- 여러 대상 중에서 하나를 선택 -->
  <input type="radio" name="gender" value="여성" />여성<br />
  <input type="radio" name="gender" value="남성" />남성<br />
  <input type="radio" name="gender" value="직접지정" />직접지정<br />
  <h1 id="radiobutton"></h1>
</body>

윤쌤의 조언(2)

다양한 앱을 사용하면서 '이건 어떻게 만들었을까' 생각해본다.
생각하다가 실제 코드를 보면 기억에 더 잘 남는다.
초기에는 코드 퀄리티보다 기능 구현에 초점을 맞추는 것이 중요하다.
구현된 코드가 있어야 최적화도 하고 유지보수도 한다.

localStorage 객체

로컬 스토리지 객체란?

브라우저에 데이터를 저장할 수 있는 로컬 저장소다.
getItem, setItem, removeItem, clear 메서드를 제공한다.
간단한 애플리케이션에서 데이터 저장에 유용하다.

localStorage.getItem("키"); // 키로 값을 꺼낼 때
localStorage.setItem("키", "값"); // 키로 값을 저장할 떄
localStorage.removeItem("키"); // 키로 값을 제거할 떄
localStorage.clear(); // 전체 제거할 때

키 하나에 데이터 하나 저장하기

지우기 버튼 클릭 시 로컬 스토리지 데이터 초기화
입력 시 로컬 스토리지에 "key"라는 키로 값 저장
새로고침 시 로컬 스토리지에서 "key" 키 값을 읽어와 적용

<head>
  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const p = document.querySelector("p");
      const button = document.querySelector("button");
      const input = document.querySelector("input");

      const key = localStorage.getItem("key");
      if (key !== null) {
        p.textContent = `이전 실행 때의 마지막 값: ${key}`;
      }
      input.value = key;

      button.addEventListener("click", () => {
        localStorage.clear();
      });

      input.addEventListener("input", () => {
        localStorage.setItem("key", input.value);
      });
    });
  </script>
</head>
<body>
  <p></p>
  <button>지우기</button>
  <input type="text" />
</body>

키 하나에 여러 데이터 저장하기

데이터를 저장할 때 키-값 쌍으로 저장하는데, 키가 많아지면 관리하기 복잡해질 수 있다.
그래서 하나의 키에다가 여러 데이터를 저장하는 방법을 많이 사용한다.
아래의 예시는 split(",")를 이용하기 때문에 입력값 자체에 ","가 포함되면 데이터가 제대로 저장되지 않는 문제가 있다.

<head>
  <script>
    const load = () => {
      const data = localStorage.getItem("애플리케이션");
      if (data !== null) {
        const [color, message] = data.split(",");
        return {
          color: color,
          message: message,
        };
      } else {
        return {
          color: "red",
          message: "",
        };
      }
    };
    const save = (data) => {
      localStorage.setItem("애플리케이션", `${data.color},${data.message}`);
    };

    document.addEventListener("DOMContentLoaded", () => {
      const p = document.querySelector("p");
      const button = document.querySelector("button");
      const input = document.querySelector("input");
      const select = document.querySelector("select");

      // 초기 실행
      const data = load();
      p.textContent = `이전 실행 때의 마지막 값: ${data.message}`;
      input.value = data.message;
      document.body.style.backgroundColor = data.color;
      select.value = data.color;

      // 이벤트 연결
      button.addEventListener("click", () => {
        // 데이터를 모두 지우고!
        data.color = "red";
        data.message = "";
        save(data);
        // 입력 양식 초기화!
        select.value = "red";
        input.value = "";
      });

      input.addEventListener("keyup", () => {
        data.message = input.value;
        save(data);
      });

      select.addEventListener("change", () => {
        const color = select.options[select.selectedIndex].value;
        // 입력 양식 반영
        document.body.style.backgroundColor = color;
        // 데이터를 저장
        data.color = color;
        save(data);
      });
    });
  </script>
</head>
<body>
  <p></p>
  <button>지우기</button>
  <input type="text" />
  <select name="" id="">
    <option value="red">빨간색</option>
    <option value="blue">파란색</option>
    <option value="green">초록색</option>
  </select>
</body>

JSON 객체

문제점을 해결하기 위해 JSON 객체를 사용한다.
JSON은 JavaScript Object Notation의 약자로, 자바스크립트 객체를 문자열로 표현하는 데이터 형식이다.
JSON 객체는 키-값 쌍으로 구성되며, 키는 반드시 문자열로 구성되고, 문자열은 큰따옴표로 감싸야한다.
자바스크립트에는 JSON 객체를 다루기 위한 두 가지 메서드가 있다:
- JSON.stringify(): 자바스크립트 객체를 JSON 문자열로 변환
- JSON.parse(): JSON 문자열을 자바스크립트 객체로 변환
JSON 객체는 다양한 프로그래밍 언어에서 널리 사용되는 데이터 형식이므로, 이를 잘 활용하면 애플리케이션 간 데이터 호환성을 높일 수 있다.
기존 setItem시 ',' 를 통해 값을 구분지어 넣던 것을 JSON.stringify를 활용해 바로 저장할 수 있다

const save = (data) => {
  localStorage.setItem("애플리케이션", `${data.color}, ${data.message}`);
};

// JSON.stringify 적용
const save = (data) => {
  localStorage.setItem("애플리케이션", JSON.stringify(data));
};

기존 로컬스토리지의 값을 split으로 구분해서 각각 변수로 설정했던 것은 JSON.parse로 간단하게 처리할 수 있다.

const [color, message] = data.split(",");
return {
  color: color,
  message: message,
};

// JSON.parse
return JSON.parse(data);

[도서 리뷰] 게으름이 습관이 되기 전에

클라우드아실 — Sat, 22 Feb 2025 19:09:40 +0900

한글판 제목은 '게으름이 습관이 되기 전에' 이지만 원제는 '미루는 습관을 끊는 법'이다. 누구나 한 번쯤 "나중에 해야지"라고 생각하며 일을 미뤄본 경험이 있을 것이다. 각종 업무를 맡아놓고 감당이 안되서 미루게 되는 경우나, 거대한 프로젝트를 맡아 어디서부터 시작해야 할지 모를 막막함에 미루게 되는 경우 등. 하지만 미루는 습관은 성공을 방해하고 삶의 질을 낮춘다. 스티브 스콧의 The Anti-Procrastination Habit에서는 이러한 습관을 깨는 실용적인 방법을 소개한다.

미루는 습관의 원인

왜 우리는 미룰까? 이유를 알면 해결책도 찾을 수 있다. 책에서 설명하는 대표적인 이유는 다음과 같다.

완벽주의: 너무 높은 기준을 세워 시작조차 하지 못한다.
무기력감: 실패 경험과 피로로 동기가 부족하다.
시간 착각: 미래의 나는 지금보다 더 나을 거라고 착각한다.
집중력 부족: 환경이 산만하여 중요한 일에 집중하지 못한다.
시간 부족: 일정이 많아 급한 일만 처리하게 된다.

미루지 않는 습관 만들기

이 책은 ‘제때 하는 습관’을 기르는 구체적인 전략을 제공한다.

25-5 법칙

하고 싶은 일 25개를 작성한다.
가장 중요한 5개만 선택한다.
나머지 20개는 완전히 제외한다. (이것이 핵심이다.)

3개월 SMART 목표 설정

Specific(구체적인 목표 설정)
Measurable(측정 가능하게 설정)
Attainable(달성 가능하게 설정)
Relevant(핵심 목표와 관련되도록 설정)
Time-bound(마감일을 설정)

예: "3개월 안에 5kg 감량하기 위해 주 3회 운동하고 식단을 조절한다."

아이젠하워 매트릭스 활용

긴급성과 중요도를 기준으로 업무를 나눈다.

	긴급함	긴급하지 않음
중요함	즉시 실행한다.	계획을 세운 후 실행한다.
중요하지 않음	위임한다.	삭제한다.

미루지 않기 위한 실천법

2분 법칙: 2분 안에 끝낼 수 있는 일은 즉시 처리한다.
포모도로 기법: 25분 집중 + 5분 휴식 패턴을 반복한다.
유혹 묶기: 미루는 행동과 좋아하는 행동을 결합한다. (예: 운동하면서 좋아하는 팟캐스트 듣기)
주간 계획표 활용: 80/20 법칙을 적용해 중요한 일부터 처리한다.

미루는 습관과 작별하기

습관은 한 번에 바뀌지 않는다. 하지만 위 방법을 적용하면 미루는 버릇을 고치고, 원하는 목표를 더욱 쉽게 달성할 수 있다. 가장 중요한 것은 시작하는 것이다. 미루지 말고 오늘부터 가장 중요한 다섯가지만 실천해보자.

[혼공스] 5주차 Chapter 06 객체

클라우드아실 — Thu, 13 Feb 2025 01:53:32 +0900

기본 미션

객체, 속성, 메소드가 무엇인지 설명하기

객체

객체는 속성과 메소드를 가지고 있는 데이터 타입이다.
중괄호 {}를 사용하여 만들 수 있다.
배열처럼 여러가지 자료형을 담을 수 있다.

속성

객체의 특징을 나타내는 값이다.
객체의 속성은 키와 값으로 이루어져 있다.
속성의 키는 문자열이다.

메서드

객체의 속성 중 함수인 속성을 메서드라고 한다.

선택미션

p. 288 확인 문제 3번 풀고, 풀이 과정 설명하기

Math.sin()은 매개변수로 radian에 대한 사인 값을 반환한다.
radian은 각도의 도(°)와 다르게, 원의 반지름과 원주를 기준으로 각도를 측정하는 단위 중 하나다.
degree는 90으로 주어졌으니, radian은 (degree * Math.PI) / 180로 계산된다.
따라서, console.log(Math.sin(radian))은 1을 출력한다.

const degree = 90;
const radian = (degree * Math.PI) / 180;
console.log(Math.sin(radian));

학습 기록

객체

객체는 키와 값의 쌍으로 구성되며, 배열과 마찬가지로 여러 가지 자료를 한꺼번에 다룰 수 있는 특별한 자료형이다.

객체 생성 방법:

{} 중괄호로 생성한다.
객체의 키는 식별자를 사용한다.
- (식별자 규칙에 의해 숫자로 시작하거나 $, \_ 외에 특수기호가 올 수 없다.)
값에는 숫자, 문자열, 불, 함수 등 다양한 자료형을 사용할 수 있다.

  // 객체 기본 형태
  const object = {
    키: 값,
    키: 값,
  };

객체 값 접근:

객체 이름 뒤에 점(.)이나 대괄호[]를 사용해서 값에 접근할 수 있다.

const object = {
  age: 13,
  level: 1,
};

console.log(object["level"]); // 1
object["level"] = 25;
console.log(object["level"]); // 25
console.log(object.age); // 13

속성과 메서드

객체 내의 요소를 속성(property)라고 부른다.
객체 내부에 있는 함수를 메서드라고 부른다.
메서드를 정의할 때는 일반 함수와 화살표 함수 두 가지 방식을 사용할 수 있다.
단, 메서드에서 화살표 함수의 경우 this를 사용할 수 없으므로 일반 함수 방식을 사용하길 권장한다.

const character = {
  level: 1,
  class: "마법사",
  fireball: function () {
    console.log(`${this.class}가 파이어볼을 사용하였습니다.`);
  },
  icewall: () => {
    console.log(`${character.class}가 아이스월을 사용하였습니다.`);
  },
};
character.fireball(); // 마법사가 파이어볼을 사용하였습니다.
character.icewall(); // 아이스월을 사용하였습니다.

메서드 내부의 this

메서드 내부에서 this를 사용하면 현재 객체 자기 자신을 참조한다.
하지만, 화살표 함수는 this가 외부 다른 객체(windows 등)를 참조한다.
- 이를 익명 함수는 this를 바인딩 하지만 화살표 함수는 this를 바인딩 하지 않는다고 표현한다.
- this 바인딩 : this를 현재 객체와 연결하는 행위

const character = {
  class: "마법사",
  
  icewall: () => {
    console.log(`${this.class}가 아이스월을 사용하였습니다.`);
  },
};

character.icewall(); // undefined가 아이스월을 사용하였습니다.

객체 속성 추가와 삭제

객체 이름 뒤에 점(.)이나 대괄호[]를 사용해서 속성을 추가할 수 있다.
delete 연산자를 사용하여 속성을 제거할 수 있다.

const character = {
  level: 1,
  class: "마법사",
  fireball: function () {
    console.log(`${this.class}가 파이어볼을 사용하였습니다.`);
  },
};

character.hp = 100; // 동적 생성
delete character.hp; // 키와 값을 동적으로 제거

기본 자료형과 객체 자료형, 프로토타입

자바스크립트의 자료형은 기본 자료형과 객체 자료형으로 구분한다.

기본 자료형

기본 자료형은 숫자, 문자열, 불리언 등이다.
기본 자료형은 값만 저장하기 때문에 속성과 메서드를 가질 수 없다.

객체 자료형

객체 자료형은 함수, 배열, 객체 등이다.
스택과 힙을 연결하여 활용하기 때문에 크기를 늘릴 수 있다.
속성과 메서드를 가질 수 있다.

Array.isArray()

자바스크립트에서는 배열도 객체이기 때문에 typeof를 통해서는 자료형 확인이 어렵다.
Array.isArray() 메서드를 사용해 배열을 판단할 수 있다.

let arr = [1, 2, 3, 4];
console.log(Array.isArray(arr)); // true

일급 객체(First-Class Object)

자바스크립트에서 함수는 '실행이 가능한 객체'라는 특이한 자료형이다.
typeof 연산자를 사용하면 function을 출력하지만, 객체의 특성을 가지고 있다.
변수에 저장하고, 다른 함수에 전달하고, 함수에서 반환할 수도 있다.
이러한 성질을 일급객체라 한다.

기본 자료형을 객체 자료형으로 선언하기

new 키워드를 사용해 기본 자료형도 객체 자료형으로 바꿔 선언할 수 있다.

let num = new Number(123);
num.color = "blue";
console.log(num); // Number {123, color: "blue"}
console.log(num + 5); // 128

기본 자료형의 일시적 승급

자바스크립트는 사용의 편리성을 위해 기본 자료형의 속성과 메서드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시킨다.
- (자료형 뒤에 점을 찍고 무엇인가 하려고 할 때)
하지만 이는 일시적인 승급으로 문장이 종료되면 없어진다.

const str = "문자열입니다.";
str.sample = 20;
console.log(str.sample); // undefined

교재 외 래퍼 객체

new 키워드로 생성한 자료형을 래퍼 객체(Wrapper Object)라 한다.
이는 아래와 같은 여러 이유로 권장하지 않다.
- 타입이 달라져 typeof로 비교가 불가능하다.
- 비교 연산이 어렵다.
- 자바스크립트 엔진 자체에서 필요시 래퍼 객체로 임시 생성했다가 삭제한다.(ex. length 메서드)

프로토타입(Prototype)

프로토타입은 기본 자료형에 추가적인 속성과 메서드를 부여할 수 있는 기능이다.
프로토타입을 활용하면 기본 자료형에 사용자 정의 메서드를 추가할 수 있다.
하지만 최근에는 프로토타입을 직접 수정하는 방식이 위험할 수 있어 사용이 줄어들고 있다.
기본적으로 존재하지 않는 메서드인데 사용하고 있는 코드를 본다면 prototype은 아닌지 확인해보자.

String.prototype.contain = function (str) {
  return this.indexOf(str) >= 0;
};

const a = "문자열";
console.log(`a.contain('문자'): ${a.contain("문자")}`); // a.contain('문자'): true

다양한 메서드 맛보기

Number 객체 메서드

toFixed()

숫자 N번째 자릿수까지 출력한다.
문자열로 변환하면서 반올림하여 출력한다.

const num = 123.0987;
num.toFixed(2); // 123.10

isNaN()

매개변수의 값이 NaN이면 true를, 아니라면 false를 반환한다.

const num = Number("문자열");
Number.isNaN(num); // true

isFinite()

무한대의 값을 inFinity라고 한다.
Infinity는 양과 음의 2가지 형태로 나뉜다.
isFinite는 유한한 숫자이면 true, Infinity이면 false를 반환한다.

let n = Infinity;
let m = -10 / 0; // - Infinity

console.log(n === m); // false
console.log(n === Infinity); // true

Number.isFinite(n); // false

String 객체 메서드

trim()

앞, 뒤의 공백을 제거한다.
웹 개발에서 입력을 받는 경우가 굉장히 많기 때문에 자주 사용하는 메서드다.

let str = "       문자          ";
console.log(str.trim()); // 문자

split()

특정 기준으로 배열을 만들고 싶을 때 사용한다.
필수로 알고 있어야 할 메서드 중 하나다.

  let str = "15.12.25,크리스마스,기념일";
  console.log(str.split(",")); // ['15.12.25', '크리스마스', '기념일']
  str = "15.12.25 크리스마스 기념일";
  console.log(str.split(" ")); // ['15.12.25', '크리스마스', '기념일']

Math 객체 메서드

내림: Math.floor(), 올림: Math.ceil(), 반올림: Math.round()

매개변수로 값을 넣으면 내림, 올림, 반올림된 결과값을 반환한다.

Math.floor(34.12); // 34

Math.ceil(34.12); // 35

Math.round(34.12); // 34

최대값: Math.max(), 최소값: Math.min()

배열의 요소에서 값을 도출하는 경우가 많으므로 전개연산자를 함께 기억하도록 한다.

Math.max(12, 34, 56); // 56

let arr = [12, 34, 56];

Math.max(...arr); // 56

랜덤한 숫자 생성: Math.random()

0 이상, 1 미만의 랜덤한 숫자를 생성한다.
Math.floor와 함께 사용해 소수점을 없앤 형태로 많이 사용한다.

Math.floor(Math.random() * 10); // 0~9까지 생성됨
Math.floor(Math.random() * 50); // 0~50까지 생성됨
Math.floor(Math.random() * 10) + 1; // 1부터 10까지 생성됨
Math.floor(Math.random() * (max - min + 1)) + min; // min이상 max미만 랜덤하게 생성하는 공식

자바스크립트 라이브러리 활용

다른 개발자가 미리 여러 클래스나 함수들을 만들어 놓은 것을 라이브러리 라고 한다.
라이브러리는 파일을 다운로드 받거나 CDN 링크를 사용하는 방법이 있다.
src 속성에 다운로드 받은 파일 자체를 경로지정하거나 CDN의 경로를 지정한다.

유용한 라이브러리

Lodash - 집합처리나 배열처리와 관련해 유용한 기능을 제공한다.
Luxon - 시간을 처리할 때 유용하며, '타임존 세팅', '지금부터 몇시간 후' 같은 처리에 유용하다.
Handsontable - 웹페이지에 스프레드시트를 출력한다.
D3.js / Chart.js - 데이터 시각화에 유용하다.
Three.js - 3차원 그래픽을 다룬다.

객체의 기본 속성 지정하기

매개변수로 객체를 지정하는 방법

일반적으로 함수를 호출할 때 호출코드만으로는 각 매개변수가 무슨 역할을 하는지 알 수 없다.

const sendMail = function (from, to, content) {
  return `${from}는 ${to}에게 '${content}'라고 메일을 보냅니다.`;
};

console.log(sendMail("나", "첫사랑", "잘지내"));
// "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

매개변수로 객체를 전달하고, 함수에서 각 매개변수를 처리하도록 하면 좀 더 명확한 코드 작성이 가능하다.

const sendMail = function (object) {
  return `${object.from}는 ${object.to}에게 '${object.content}'라고 메일을 보냅니다.`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

매개변수의 기본값 지정하기

아래와 같은 기본형은 매개변수 자체에 기본 값을 지정하면 된다.
하지만 객체를 매개변수로 전달하게 되면 기본값을 지정하기 어렵다.

let sendMail = function (from, to, content, status = "수취인불명") {
  return `${from}는 ${to}에게 '${content}'라고 메일을 보냅니다.`;
};

console.log(sendMail("나", "첫사랑", "잘지내"));
// "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

객체를 매개변수로 전달할 때 기본값 지정하기

과거방법1: undefined 체크 방식

자바스크립트는 정의되지 않은 속성을 출력하면 undefined가 출력된다.
이를 활용해 기본값을 설정한다.

const sendMail = function (object) {
  object.status = object.status !== undefined ? object.status : "이상 없음";

  return `${object.from}는 ${object.to}에게 '${object.content}'라고 메일을 보냅니다.`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

과거방법2: Falsy 체크 방식

Falsy값을 체크해서 기본값을 설정한다.
단, 빈 문자열이나 0도 Falsy 값으로 체크되니 이런 값이 오지 않을 것이 확실해야 한다.

const sendMail = function (object) {
  object.status = object.status ? object.status : "이상 없음";

  return `${object.from}는 ${object.to}에게 '${object.content}'라고 메일을 보냅니다.`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

과거방법3: 조건부 연산자 + 짧은 조건문

왼쪽 피연산자가 Falsy 값이면 오른쪽 값을 반환함.
Falsy 체크 방식처럼 0, false, "" 등도 기본값이 적용되는 문제가 있다.

const sendMail = function (object) {
  object.status = object.status || object.status : "이상 없음";

  return `${object.from}는 ${object.to}에게 '${object.content}'라고 메일을 보냅니다.`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다."

현대방법1: 전개연산자 활용

객체에 기본값인 속성과 기존 객체를 전개연산자로 묶는다.
이 때 기존 객체에 동일한 속성명이 있으면 값을 덮어쓰게 된다.
동일한 속성이 없다면 기본값으로 추가한 속성이 출력된다.

const sendMail = function (object) {
  object = { status: "이상없음", ...object };

  return `${object.from}는 ${object.to}에게 '${object.content}'라고 메일을 보냅니다. 전송:${object.status}`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다. 전송:이상없음"

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
    status: "수취인불명",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다. 전송:수취인불명"

현대방법2: 매개변수 구조 분해 할당 활용

함수 매개변수에서 직접 구조 분해 할당을 사용하여 기본값을 설정한다.

const sendMail = function ({ from, to, content, status = "이상없음" }) {
  return `${from}는 ${to}에게 '${content}'라고 메일을 보냅니다. 전송:${status}`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다. 전송:이상없음"

현대방법3: 전개 연산자와 구조 분해 할당 병행

전개 연산자로 기본값을 포함한 새로운 객체를 만들고, 구조 분해 할당으로 필요한 속성만 추출한다.
객체를 수정하지 않고 안전하게 기본값을 추가할 수 있으며, 선택적으로 필요한 속성만 사용한다.
Node.js 등에서 자주 사용되는 패턴으로 기억하도록 한다.

const sendMail = function (object) {
  const { from, to, content } = { status: "이상없음", ...object };

  return `${from}는 ${to}에게 '${content}'라고 메일을 보냅니다. 전송:${status}`;
};

console.log(
  sendMail({
    from: "나",
    to: "첫사랑",
    content: "잘지내",
  })
); // "나는 첫사랑에게 '잘지내'라고 메일을 보냅니다. 전송:이상없음"

[혼공스] 4주차 Chapter 05 함수

클라우드아실 — Wed, 5 Feb 2025 03:45:25 +0900

기본 미션

p. 202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기

const isLeapYear = function (year) {
  return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
};

선택미션

p. 240 확인 문제 1번 풀고, 풀이 과정 설명하기

논리연산자 &&를 통해 3가지 조건에 일치하는 값을 필터링 하도록 했다.
filter 메서드는 비파괴적처리를 하기 때문에 result라는 새로운 변수에 필터링된 결과값을 할당했고,
console.log에는 결과값이 할당된 result 변수를 출력했다.

// 변수를 선언합니다.
let numbers = [273, 25, 75, 52, 103, 32, 57, 24, 76]

// 처리합니다.
let result = numbers.filter((el) => el % 2 === 1 && el <= 100 && el % 5 === 0);

// 출력합니다.
console.log(result)

학습 기록

함수

함수는 코드의 묶음이다.
반복되는 작업을 한 번만 정의하면 필요시 재사용할 수 있어서 효율적이다.
긴 프로그램을 기능별로 함수로 분리하면 모듈화되어 전체 코드의 가독성이 좋아진다.
기능별로 수정이 가능하므로 유지보수가 쉽다.

함수 선언 방법:

대괄호 안에 쉼표로 구분된 값들을 넣어 만든다.
배열 내부의 각 값을 요소(element)라고 부른다.

const 함수명 = function () {
  실행될 내용
}

함수 호출:

함수명과 () 괄호를 사용해서 호출한다.
함수 내부에서 외부 변수를 사용할 수 있다.
함수는 실행 시 점프와 리턴 과정이 발생한다.
- 점프: 호출 위치에서 함수 본문으로 이동하는 것이다.
- 리턴: 함수 본문에서 호출 위치로 나오는 것이다.

const 함수명 = function () {
  동작 실행
  return // 값을 가지고 원래 위치로 리턴한다.
}

함수명(); // 함수가 실행되면서 함수 내부로 점프한다.

교재 외 프로시저 함수:

전통적으로 매개변수가 없는 함수를 의미한다.
보통 return 문이 없거나 반환값이 없고, 출력(console.log), API요청, 데이터 저장, 파일 처리 등의 작업을 수행한다.
현대 프로그래밍에서는 매개변수 유무와 관계없이 동작을 중심으로 판단한다.
즉, 매개변수가 있더라도 반환값 없이 특정 동작을 수행하는 함수는 프로시저 함수라고 볼 수 있다.

const sayHello = function () {
  console.log("Hello, world!");
};
sayHello(); // 실행하지만 반환값이 없음

const sayHello2 = function (name) {
  console.log(`Hello, ${name}!`);
};
sayHello2("yoonTeacher"); // 실행하지만 반환값이 없음

수학적 함수:

매개변수를 받아 계산 후 결과를 리턴하는 방식이다.
함수 내부에 리턴 키워드를 사용한다.
OO의 리턴값은 OO다 라고 표현한다.

const sum = function (a, b) {
  return a + b; // 값을 가지고 원래 위치로 리턴한다.
};
sum(1, 2); // 함수에서 각각의 위치 a와 b에 해당 값을 할당하면서 점프한다.

함수의 두 가지 표기 방법 - 익명 함수와 선언적 함수

익명 함수와 선언적 함수는 표기 방법만 다를 뿐 동작은 거의 같다.
초기에는 선언적 함수 형태를 많이 사용했지만, 현대 자바스크립트에서는 익명 함수 형태를 더 많이 사용한다.

선언적 함수(함수 선언식)

function 키워드로 함수를 선언한다.
함수의 이름이 필수다.

function g() {
  return b;
}

교재 외 함수 표현식

함수 표현식

함수를 변수에 할당하는 방식이다.
함수 이름이 없어도 된다.

const f = function () {
  return a;
};

함수 표현식이지만 이름을 붙이는 경우 내부에서 재귀적으로 호출이 가능하다.

const factorial = function fact(n) {
  if (n <= 1) return 1;
  return n * fact(n - 1); // 내부에서 자신의 이름을 사용하여 재귀 호출
};

console.log(factorial(5)); // 5! = 5 * 4 * 3 * 2 * 1 = 120

즉, 모든 함수 표현식이 익명 함수는 아니지만, 익명 함수는 보통 함수 표현식에서 많이 사용된다.
아래와 같은 즉시 호출 함수는 변수에 할당하지 않는 익명함수를 만들 수 있다..

(function () {
  console.log("I am anonymous!");
})();

나머지 매개변수와 전개 연산자(함수 호출)

API(Application Programming Interface)란

애플리케이션 프로그램을 만들 때 약속을 의미한다.
API 설계자가 만든 약속을 API 사용자가 활용한다.
나머지 매개변수, 전개 연산자 등은 주로 API 설계자가 사용하는 기능이며, API 사용자도 이해하면 좋다.

나머지 매개변수(Rest Parameters):

함수를 정의할 때 매개변수 앞에 ...을 붙여서 만든다.
언제나 자료형은 배열이다.
나머지 매개변수는 일반 매개변수와 함께 사용할 수도 있지만, 항상 마지막에 위치해야 한다.

const arr = function (...list) {
console.log(list);
};

arr("apple", "banana", "mango"); // ['apple', 'banana', 'mango']

const arr2 = function (a, ...list) {
console.log(`${a}와 나머지 ${list}입니다.`);
};
arr2("apple", "banana", "mango"); // apple와 나머지 banana,mango입니다.

구버전 자바스크립트에서 가변 인자 함수 구현하기:

매개변수를 지정하지 않고 arguments 객체를 사용하여 나머지 매개변수처럼 구현하는 방법이 있었다.
arguments는 함수 내에서만 사용할 수 있는 유사 배열 객체이다.
유사 배열 객체이기 때문에 배열 메서드를 사용할 수 없다.
현대에는 나머지 매개변수를 사용할 것을 권장한다.

const list = function () {
  let output = arguments;
  return output;
}

console.log(list(1, 2, 3, 4)); //  [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]

전개 연산자(Spread Operator):

함수를 호출할 때 배열 앞에 ...을 붙여서 사용한다.
이렇게 하면 배열의 요소들이 개별 인수로 전달된다.

const arr = function (a, b) {
  console.log(a, b);
};
let list = ["apple", "banana", "mango"];
arr(...list); // apple banana

구버전 자바스크립트에서 전개 연산자 구현하기:

과거에는 apply 메서드를 사용하여 전개 연산자를 구현했다.
배열 형태로 전달할 인자를 apply()에 포함하면 개별 인자로 변환된다.
현대에는 전개 연산자로 간단히 구현할 수 있다.

const list = function () {
  console.log.apply(null, arguments);
};
let input = [1, 2, 3, 4];
list.apply(null, input); // 1 2 3 4

기본 매개변수와 가독성

가독성의 중요성

프로그래밍에서는 성능보다 가독성이 점점 더 중요해지고 있다.
가독성이 좋다는 것은 코드를 쉽게 읽고 이해할 수 있으며, 안전하게 사용할 수 있다는 의미다.
가독성이 좋은 코드를 작성하면 다른 개발자들이 실수를 덜 하게 된다.
기본 매개변수, 게터/세터, 프라이빗 속성/메서드 등은 가독성을 높이기 위한 기능들이다.

과거 자바스크립트 버전의 기본 매개변수 처리

과거에는 기본 매개변수를 설정하기 위해 조건문이나 삼항 연산자 등을 사용했다.
파라미터가 undefined인 경우와 0인 경우를 구분해서 처리해야 하는 등 코드가 복잡해질 수 있었다.

const isLeapYear = function (year) {
  // year = typeof year === "undefined" ? new Date().getFullYear() : year;
  // year = year || new Date().getFullYear();

  return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
};

console.log(isLeapYear());

기본 매개변수(default parameter)

최신 자바스크립트 버전에서는 함수 매개변수에 기본값을 설정할 수 있다.
이를 통해 매개변수를 입력하지 않아도 기본값이 들어가도록 할 수 있다.
예를 들어 윤년 계산기에서 연도 파라미터를 입력하지 않으면 현재 연도를 기본으로 계산하도록 설정 가능하다.

const isLeapYear = function (year = new Date().getFullYear()) {
  return year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
console.log(isLeapYear());

콜백함수

자바스크립트에서 함수는 하나의 값이 될 수 있다.
따라서 함수를 함수의 매개변수로 전달할 수 있다.
이 때 전달된 함수를 콜백함수라고 부른다.

const test = function (callback) {
  callback();
};

const call = function () {
  console.log("안녕하세요");
};

test(call); // 안녕하세요

배열 메서드

배열의 forEach, filter, map 메서드들은 모두 콜백함수를 매개변수로 받는다.
이를 통해 배열의 요소를 다양하게 처리할 수 있다.

forEach

매개변수로 값, 인덱스, 기준 배열을 가진다.
배열의 요소를 콜백함수로 전달해서 반복하는 메서드다.

const arr = ["apple", "banana", "mango", "grape"];

arr.forEach(function (value, index, array) {
  console.log(value, index, array);
});

/*
apple 0 ['apple', 'banana', 'mango', 'grape']
banana 1 ['apple', 'banana', 'mango', 'grape']
mango 2 ['apple', 'banana', 'mango', 'grape']
grape 3 ['apple', 'banana', 'mango', 'grape']
*/

filter

매개변수로 값, 인덱스, 기준 배열을 가진다.
최종 출력은 필터링된 배열이고, 필터를 통과한 요소가 없으면 빈 배열이 반환된다.
단, 비파괴적 처리를 하기 때문에 필터링된 배열을 사용하려면 새로운 변수에 할당하거나 기존 변수에 재할당 해야한다.

let arr = [123, 345, 234, 456];
arr = arr.filter(function (value, index, array) {
  return value % 2 === 0;
});
console.log(arr); // (2) [234, 456]

map

매개변수로 값, 인덱스, 기준 배열을 가진다.
기존의 배열 요소를 기반으로 새로운 배열을 만들어서 리턴하는 함수다.
filter와 마찬가지로 비파괴적 처리로 변수 할당이 필요하다.

let arr = [123, 345, 234, 456];
arr = arr.map(function (value, index, array) {
  return value * 2;
});
console.log(arr); // [246, 690, 468, 912]

콜백함수의 장점

코드를 간결하게 작성할 수 있어 효율적이다.(익명함수, 화살표 함수 활용)
필요에 따라 매개변수의 함수를 통해 다른 결과를 만들 수 있다.

타이머 함수, 즉시 호출 함수(IIFE), 엄격 모드

타이머 함수

setTimeout / clearTimout함수:

특정 시간 후 한 번 실행되는 콜백 함수이다.
clearTimeout를 통해 설정한 타이머를 해제할 수 있다.

const timeout = setTimeout(function () {
  console.log("setTimeout이 실행되었습니다.");
}, 2000);

clearTimeout(timeout);

setInterval / clearInterval함수:

특정 시간 간격으로 반복 실행되는 콜백 함수이다.
clearInterval를 통해 설정한 타이머를 해제할 수 있다.

const intervalTime = setInterval(function () {
  console.log("setInterval이 실행되었습니다.");
}, 2000);

clearInterval(intervalTime);

clear처리하는 함수들은 매개변수로 숫자를 넣도록 되어 있는데 이 숫자는 setTimeout과 setInterval의 리턴값이다.

즉시 호출 함수 (IIFE, Immediately Invoked Function Expression):

함수를 정의하자마자 바로 실행하는 방법이다.
변수/함수 이름 충돌을 방지할 수 있다.
()를 통해 각각의 스코프가 달라지기 때문에 충돌이 발생하지 않는다.

(function func() {
  console.log("I am anonymous!");
})();
(function func() {
  console.log("I am anonymous!");
})();

/* I am anonymous
I am anonymous
*/

엄격 모드(Strict Mode):

자바스크립트 코드를 보다 엄격하게 검사하는 모드이다.
브라우저 콘솔에 입력시 변수나 상수를 선언하지 않았는데도
브라우저 임의로 a,b 변수를 생성해 값을 할당한다.

a = 100;
b = 200;

console.log(a + b);

이런 부분을 엄격하게 검사해 막아주는 기능이다.
<script>태그를 시작할 때 코드의 첫 부분에 'use strict'를 선언하면 활성화된다.

  <script>
  "use strict"
  a = 100; b = 200; console.log(a + b);
  </script>

IIFE 내부에서 엄격 모드를 적용하는 것이 일반적이다.

<script>
(function() {
  "use strict"
  a = 100;
  b = 200;
 console.log(a + b);
})()
</script>

선언적 함수와 익명 함수의 차이, 확인 문제

함수를 만드는 2가지 방법 - 선언적 함수와 익명 함수

선언적 함수:

전체 코드가 실행되기 전에 미리 만들어진다.

익명 함수(함수 표현식):

코드를 실행하면서 만들어진다.

선언적 함수와 익명적 함수의 차이

익명 함수는 코드 순서대로 실행되지만 선언적 함수는 코드 순서와 상관없이 실행된다.
이로 인해 두 함수를 섞어 사용하면 실행 순서 예측이 어려지고 여러개의 파일이 import되면 더 어려워진다.
따라서 일반적으로 선언적 함수는 잘 사용하지 않는다.

함수 ()

함수 = function () {
  console.log("익명함수")
}

function 함수() {
  console.log("선언적 함수")
}

함수()

> 선언적 함수
> 익명함수

[혼공스] 3주차 Chapter 04 반복문

클라우드아실 — Tue, 4 Feb 2025 21:50:02 +0900

기본 미션

비파괴적 처리와 파괴적 처리의 의미와 장단점 설명하기

비파괴적 처리:

연산 후에도 원본 데이터가 바뀌지 않는 것
예) 숫자 연산

비파괴적 처리는 불변성을 유지하며 안정적인 코드 작성에 유리하지만, 메모리 사용량이 증가할 수 있다.

파괴적 처리:

연산 후에 원본이 바뀌는 것
예) 배열의 push() 메서드.

파괴적 처리는 메모리를 절약할 수 있지만, 원본 데이터가 변하기 때문에 사이드 이펙트가 발생할 수 있다.

선택미션

p. 173 확인 문제 3번 문제 풀고, 풀이 과정 설명하기

공통적으로 함수실행 이후 원본 데이터에 변화가 있는지 확인하면 알 수 있다.

비파괴적 처리

> const strA = "사과, 배, 바나나, 귤";
undefined

> strA.split(",");
["사과", " 배", " 바나나", " 귤"]

> strA;
"사과, 배, 바나나, 귤"

파괴적 처리

> const arrayB = ["사과", "배", "바나나", "귤"];
undefined

> arrayB.push("감");
5

> arrayB;
["사과", "배", "바나나", "귤", "감"]

비파괴적 처리

> const arrayC = [1, 2, 3, 4, 5];
undefined

> arrayC.map((x) => x \* x);
[1, 4, 9, 16, 25]

> arrayC;
[1, 2, 3, 4, 5]

비파괴적 처리

> const strD = " 여백이 포함된 메시지   ";
undefined

> strD.trim();
"여백이 포함된 메시지"

> strD;
" 여백이 포함된 메시지   "

학습 기록

배열

배열은 여러 자료형의 값을 모아놓은 것이다.
순서가 중요하며 인덱스를 통해 해당 순서의 값을 확인할 수 있다.

배열 생성 방법:

대괄호 안에 쉼표로 구분된 값들을 넣어 만든다.
배열 내부의 각 값을 요소(element)라고 부른다.

let arr = [요소, 요소, 요소];

배열 요소 접근:

배열 변수 이름 뒤에 대괄호와 인덱스를 사용하여 특정 요소를 가져올 수 있다.
인덱스는 0부터 시작한다.

let arr = ["apple", "banana", "mango"];

arr[0]; // "apple"

배열 길이 구하기:

arr.length로 배열의 길이(요소 개수)를 구할 수 있다.

let arr = ["apple", "banana", "mango"];

arr.length; // 3

배열 요소 추가:

push() 메서드를 사용하여 배열의 맨 뒤에 요소를 추가할 수 있다.
push(요소)

let arr = ["apple", "banana", "mango"];

arr.push("pineapple");
console.log(arr); //  ["apple", "banana", "mango", "pineapple"];

배열 중간에 요소 추가:

splice() 메서드를 사용하여 특정 인덱스에 요소를 삽입할 수 있다.
splice(인덱스, 0, 요소)

let arr = ["apple", "banana", "mango"];

arr.splice(1, 0, "orange");
console.log(arr); //  ["apple", "orange", "banana", "mango"];

배열 요소 제거:

splice() 메서드를 사용하여 특정 인덱스의 요소를 제거할 수 있다.
splice(인덱스, 1)

let arr = ["apple", "banana", "mango"];

arr.splice(1, 1);
console.log(arr); //  ["apple", "mango"];

배열에서 특정 값의 인덱스 찾기:

indexOf() 메서드를 사용하여 배열 내 특정 값의 인덱스를 찾을 수 있다.
indexOf(요소)
원하는 요소가 없을 때는 -1 을 출력한다.

let arr = ["apple", "banana", "mango"];

arr.indexOf("mango"); // 2
arr.indexOf("orange"); // -1

배열에서 특정 값을 찾아 제거하기:

- indexOf() 와 splice()를 같이 활용해서 특정 값을 제거할 수 있다.
indexOf를 통해 먼저 인덱스를 찾는다.
splice로 해당 인덱스의 값을 제거한다.

let arr = ["apple", "banana", "mango"];

let idx = arr.indexOf("mango"); // 2
arr.splice(idx, 1);
console.log(arr); // ["apple", "banana"];

스택, 힙, 비파괴적 처리, 파괴적 처리

스택

기본 자료형(숫자, 문자열 불 등)이 저장되는 공간이다.
데이터가 차곡차곡 쌓이는 구조다.
복합 자료형은 데이터 대신 주소가 저장된다.

힙

복합 자료형(배열, 함수, 객체 등)이 저장되는 공간.
데이터가 무작위로 저장되는 구조.

10 > 5 ? console.log("맞았을 때 출력됩니다.") : console.log("틀렸을 때 출력됩니다.")

자료형과 스택 / 힙의 관계

스택:

변수나 상수를 선언하면 스택에 이름과 값이 저장된다.
복합자료형은 이름과 주소(힙에 존재하는 데이터의 위치)가 저장된다.
주소를 저장한 변수나 상수를 레퍼런스(참조)변수 라고 부른다.

힙:

복합 자료형의 다양한 값을 저장한다.
스택에 있는 주소가 힙에 있는 값을 가리키는 것을 레퍼런스(참조)한다고 표현한다.

비파괴적 처리와 파괴적 처리

비파괴적 처리:

연산 후에도 원본 데이터가 바뀌지 않는 처리방식이다.
예) 숫자 연산

  let num1 = 10;
  let num2 = 20;

  num1 + num2; // 30
  num1; // 10
  num2; // 20

파괴적 처리:

연산 후에 원본 데이터가 바뀌는 처리방식이다.
예) 배열의 push() 메서드

let arr = ["apple", "banana", "mango"];

arr; // ["apple", "banana", "mango"];

arr.push("orange");

arr; // ["apple", "banana", "mango", "orange"];

자료형에 따른 처리 구분 이유:

자바스크립트 언어가 탄생할 시기에는 컴퓨터의 메모리가 부족했다.
이에 다양한 값을 저장하는 자료형은 값을 직접 수정(파괴적 처리)해 메모리 부족을 극복하려고 했다.
현대에는 과거에 비해 메모리 크기가 크게 증가했고, 안정성의 이유로도 파괴적 처리를 선호하지 않는다.
일반적으로 배열이나 객체등을 조작할 때는 원본을 복사해서 비파괴적으로 처리한다.

상수인데 변경 가능한 상수

상수(const)는 스택의 값을 변경할 수 없게 제한한다.
따라서 스택에 저장된 주소 자체를 다른 값으로 변경하면 에러가 발생한다.

  const a = [1, 2, 3];
  a = [5, 6]; // 에러

상수 내부의 복합 자료형은 힙에 저장되기 때문에 변경할 수 있다.

  const a = [1, 2, 3];
  a.push(5);
  console.log(a); // [1,2,3,5]

mutable(가변)과 immutable(불변)

파괴적 처리와 비파괴적 처리는 메서드가 원본 데이터를 수정하는가에 대한 개념이다.
mutable 과 immutable 은 값 자체가 변경 가능한가 에 대한 개념이다.
자바스크립트에서 객체와 배열은 기본적으로 mutable하지만, 그 데이터를 다루는 방식(메서드)이 파괴적일 수도 있고 아닐 수도 있다.

윤쌤의 조언

이론 없이도 코드 작성은 가능하지만 더 발전하기 위해서는 이론 공부가 필요하다.
이론에 의해 코드가 짧아지는 것을 몇 번 보고 나면 '뭔가 알면 짧아질 것 같은데?'와 같은 생각에 코드작성을 못하게 되는 경우가 있다. 그래도 완성하는 것이 아예 완성하지 못하는 것보다 낫다.
완성하는 능력을 키우고 해당 이론을 공부하는 것이 더 도움이 된다.

forof forin for 반복문

for 계통 반복문의 종류:

for of, for in, for 3가지가 있다.
for of와 for in은 배열 등과 함께 사용하고, for는 범용으로 사용한다.
반복문은 중첩할 수 있다.

for of:

배열 요소를 순회할 때 사용한다.
반복 변수명을 요소, 인덱스 등으로 사용 가능하다.

const arr = ["하나", "둘", "셋", "넷", "다섯"];

for (const i of arr) {
  console.log(i); // 차례대로 "하나", "둘", "셋", "넷", "다섯" 출력
}

for in:

객체의 속성을 순회할 때 사용한다.
반복 변수명을 속성명, 인덱스 등으로 사용 가능하다.

const arr = ["하나", "둘", "셋", "넷", "다섯"];

for (const i of arr) {
  console.log(i); // 차례대로 0, 1, 2, 3, 4 출력
}

for:

특정 횟수만큼 반복할 때 사용한다.
시작, 끝, 증감 값 등을 지정할 수 있다.
반복 변수는 반드시 let으로 선언해야 한다.

for (let 초기값 ; 조건문 ; 증감식){
  반복할 내용
}

while 반복문

while:

조건식이 참일 경우 계속해서 반복문 내부를 실행
조건식이 거짓이 되면 반복문을 벗어남

while (조건식) {
  반복할 내용
}

for 반복문과의 비교:

while 반복문은 조건이 중요할 때 사용
for 반복문은 특정 횟수만큼 반복하거나 배열 등을 기반으로 반복할 때 사용
결과가 나올 때까지, 특정 시간까지, 파일에서 특정 단어를 찾을 때까지 등
정확한 반복 횟수를 정할 수 없을 때 유용하다.

브레이크 구문:

반복문을 즉시 종료시킨다.

let i = 1;

while (true) {
  console.log(`${i}번 반복했습니다`);
  i++;
  
  if (i === 5) {
    console.log("이제 그만");
    break;
  }
}

컨티뉴 구문:

현재 반복을 건너뛰고 다음 반복으로 넘어간다.
즉, 아래의 경우 continue에 막혀 "이제 그만" 이라는 문장은 한번도 출력되지 않는다.

let i = 1;

while (i !== 5) {
  console.log(`${i}번 반복했습니다`);
  i++;
  continue;
  
  console.log("이제 그만");
}

윤쌤의 조언

while문의 경우 파일의 입출력과 관련해서 사용하는 경우가 있는데,
자바스크립트에서 파일의 입출력은 node.js와 연계되기 때문에 당장은 사용할 일이 없다.
따라서 for 반복문 위주로 학습하면 된다.
VSCode의 코드 조각은 최소한의 조작으로 최대의 행동을 할 수 있게 만들어주는 도구다.
거부감 없이 활용해도 된다.

[혼공스] 2주차 Chapter 03 조건문

클라우드아실 — Wed, 22 Jan 2025 23:44:29 +0900

기본 미션

p. 139 의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행 결과 인증하기

let x = 15;

if (x > 10) {
  if (x < 20) {
    console.log("조건에 맞습니다.");
  }
}

if (x > 10 && x < 20) {
  console.log("조건에 맞습니다.");
}

선택미션

p. 152의 <태어난 연도를 입력받아 띠 출력하기> 예제 실행하여 본인의 띠 출력한 화면 캡처하기

개인정보 이슈로 년도는 지웁니다. 하하

학습 기록

if 조건문

상반되는 조건이 있을 때는 if - else 구조를 사용하는 것이 좋다.
조건은 상호배타적인 것이 좋다.
else if 구문을 활용해 조건 비교 횟수를 줄이는 것이 좋다.

if문:

if 조건문은 조건식의 결과가 true이면 중괄호 안의 코드를 실행하고, false이면 건너뛴다.

if(3 > 2){
  console.log("진실")
}

else 구문:

if 조건문 바로 뒤에 붙여 반대되는 조건에 대해 처리할 수 있다.

if(3 < 2){
  console.log("진실")
}else{
  console.log("거짓")
}

if else if 조건문:

여러개의 조건 분기가 필요할 때 사용한다.

let num = 255

if(num < 10) {
  console.log("10보다 작다")
}else if(num < 100) {
  console.log("100보다 작다")
}else {
  console.log("100보다 크다")
}

Switch

특정 값의 조건을 비교할 때 사용한다.
case 문으로 조건을 나열하고 break 문으로 탈출한다.
모든 조건에 맞지 않는 경우 default 문을 활용한다.

let num = 95;

switch (true) {
  case num >= 95:
    console.log("A+입니다.");
    break;
  case num >= 90:
    console.log("A입니다.");
    break;
  case num >= 85:
    console.log("B+입니다.");
    break;
  case num >= 80:
    console.log("B입니다.");
    break;
  case num >= 75:
    console.log("C+입니다.");
    break;
  case num >= 70:
    console.log("C입니다.");
    break;
  default:
    console.log("F입니다.");
}

삼항 연산자

간단한 if-else 문을 한 줄로 표현할 수 있다.
조건 ? 참일 때 : 거짓일 때

10 > 5 ? console.log("맞았을 때 출력됩니다.") : console.log("틀렸을 때 출력됩니다.")

짧은 조건문

논리 연산자의 특성을 조건문으로 사용한다.

논리합 연산자:
- 좌변이 참이면 우변을 실행하지 않는다.
- 우변이 거짓이어도 좌변의 영향으로 true가 되는 원리.

true || console.log("실행되지 않습니다.")

논리곱 연산자:
- 좌변이 거짓이면 우변을 실행하지 않는다.
- 좌변이 거짓이면 이미 최종 false가 되는 원리.

false && console.log("실행되지 않습니다.")

윤쌤의 조언

이론 없이도 코드 작성은 가능하지만 더 발전하기 위해서는 이론 공부가 필요하다.
이론에 의해 코드가 짧아지는 것을 몇 번 보고 나면 '뭔가 알면 짧아질 것 같은데?'와 같은 생각에 코드작성을 못하게 되는 경우가 있다. 그래도 완성하는 것이 아예 완성하지 못하는 것보다 낫다.
완성하는 능력을 키우고 해당 이론을 공부하는 것이 더 도움이 된다.

[도서 리뷰] 나는 네이버 프런트엔드 개발자입니다

클라우드아실 — Mon, 20 Jan 2025 06:04:07 +0900

개발자가 목표인 사람들에게 '네카라쿠배' 출신들의 이야기는 항상 흥미로운 주제다. '네카라쿠배' 출신이라고 하면 "와, 실력 장난 아니겠다", "거긴 도대체 어떻게 들어가는 거야?" 같은 생각, 다들 한번쯤 해보지 않았을까?
그렇다면 네이버 프런트엔드 개발자들은 어떻게 그 자리까지 올랐을까? 이 책은 다양한 배경을 가졌지만 모두 네이버에서 프런트엔드 개발자로 활동하는 8인의 이야기를 담고 있다. 이들의 경험과 노하우를 바탕으로 프런트엔드 개발에 필요한 기술, 태도, 성장 방법 등을 배울 수 있다.

1. 프레임워크보다 기본기가 중요하다

가장 인상 깊었던 부분은 “프레임워크와 내 커리어 운명을 함께할 각오가 아니라면 자바스크립트 자체에 대한 이해와 숙련은 필수다.”라는 문구였다.
김지한 님은 자바스크립트 기본기를 강조하며, 프레임워크에 의존하지 말라는 메시지를 던진다. 프런트엔드의 많은 라이브러리와 프레임워크는 자바스크립트를 기반으로 하기 때문에, 기본기를 갖추지 않으면 한계에 부딪힐 수밖에 없다고 지적한다.
나도 국비학원에서 동기들이 자바스크립트를 짧게 공부하고 리액트에만 올인했던 일이 떠오른다. 당시 팀 프로젝트를 진행하면서 자바스크립트 기본기를 다시 학습해야 한다는 걸 절감했었다. 결국, 기본에 충실해야 프런트엔드 개발자로서 더 나아갈 수 있다는 점에 깊이 공감했다.

2. 필요성에서 시작되는 학습

윤영제 님은 학습에 재미를 느끼지 못하는 이유를 "필요성을 느끼지 못하고 학습하기 때문"이라고 설명한다. 직접 개발하며 필요에 따라 학습할 때 더 큰 재미를 느낄 수 있다는 것이다. "운영체제를 이해하면 브라우저를 잘 이해할 수 있다"는 조언은 브라우저 성능 최적화나 백엔드와의 원활한 협업에도 적용될 수 있는 현실적인 조언이었다.

그 외에도 인프런에서 유명한 캡틴판교(장기효)님의 신입 개발자가 갖춰야 할 역량, 윤정현 님의 서비스 안정화 및 성능 향상을 위한 노력 등, 다양한 저자의 이야기가 흥미로웠다. 이처럼 프런트엔드라는 하나의 주제로 모인 저자들의 경험과 팁은 학습 방법이나 커리어 계획을 점검할 좋은 기회를 제공한다. 이 책은 개발자를 꿈꾸는 초보자뿐 아니라, 이미 개발자로 일하고 있는 사람들에게도 유용한 인사이트를 줄 것이다.
프런트엔드 개발에 관심이 있거나 이 분야에서 성장하고 싶은 사람이라면 읽어보길 추천한다.

[혼공스] 1주차 Chapter 01 ~ 02

클라우드아실 — Fri, 10 Jan 2025 01:08:43 +0900

기본 미션

p. 54의 <파일 만들고 저장해 실행하기>에서 'Hello World' 출력하기

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script>
      alert("Hello world");
    </script>
  </head>
  <body></body>
</html>

선택미션

Ch.01(01-1) 확인 문제 1번 상세하게 적고 인증하기

네이버 - 쇼핑, 블로그, 카페, 검색, vibe(음악), MYBOX 등.
다음 - 뉴스, 검색, 메일, 지도 등.
구글 - 검색, 이메일(Gmail), 지도(Google Maps), 클라우드 스토리지(Google Drive), 번역,
인스타그램 - 이미지 및 동영상 업로드 기능, 스토리 기능, 무한 스크롤링, 그리고 다양한 애니메이션 효과
페이스북 - 실시간 채팅, 알림 시스템, 동적 콘텐츠 로딩 기술

학습 기록

개발 환경 설치

자바스크립트 프로그래밍을 하려면 텍스트 편집기(VSCode)와 코드 실행기(웹 브라우저)가 필요하다.

코드 실행 방법

콘솔에서 코드 한 줄씩 입력하고 실행하기
- 크롬 브라우저에서 "about:blank" 페이지 열고 마우스 우클릭 > 검사(Ctrl + Shift + I) > 콘솔 탭에서 입력 후 실행
파일에 코드를 작성하고 실행하기
- Visual Studio Code에서 새 파일 생성, HTML 기본 템플릿 만든 뒤 JavaScript 코드 작성
  (1) [파일] → [새 파일(Ctrl+ N)]을 선택한다.
  (2) 곧바로 [파일] → [저장(Ctrl + S)]를 선택한다.
  (3) "파일_이름.html"라는 형태로 저장한다.
  (4) html:5 또는 ! 입력하고 엔터[또는 탭]
  (5) head 태그 안에 script 태그 생성
  (6) script 태그 안에 코드를 입력한다.
  (7) 코드를 모두 입력했다면 저장한다.
  (8) 크롬에 드래그앤드롭해서 실행한다.

<! DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      alert("안녕하세요"); 
    </script> 
  </head> 
  <body>
  </body> 
</html>

개발자 도구는 코드를 바로바로 입력하고 실행하는 인터랙티브한 방식 (REPL)이다.

REPL이란 Read Eval Print Loop의 줄임말로 읽고 + 실행(평가)하고 + 출력하는 것의 + 반복 이라는 뜻이다.
편리하지만 기존 웹 페이지에서 실행시 영향을 줄 수 있어 about:blank 페이지를 사용한다.

오류 확인 방법

콘솔에서 오류 확인: 에러가 발생하면 바로 출력됨

파일로 작성할 때 오류 확인: 파일 실행 후 개발자 도구의 콘솔 탭에서 오류 확인 가능

자주 발생하는 오류:

ReferenceError : 단어 오탈자가 발생했을 때 출력한다.
SyntaxError: 괄호, 따옴표 등 문법을 잘못 사용했을 때 발생

Visual Studio Code 관련 이야기

개발 시 어두운 테마를 선호한다.
들여쓰기 방법: 일반적으로 2칸의 공백을 많이 사용한다. 코딩 컨벤션에 따라 유동적으로 결정하면 된다.

기본 용어

표현식(Expression):
- 프로그래밍에서 의미 있는 단어나 구
- 숫자, 연산자, 함수 호출 등 값이 만들어지는 모든 것은 표현식이다.
문장(Statement):
- 코드를 실행하는 단위로 줄바꿈이나 세미콜론으로 구분한다.
키워드(Keyword):
- 자바스크립트 언어에서 특별한 의미를 가진 단어들이다.
식별자(Identifier):
- 프로그래밍에서 이름을 붙일 때 사용하는 단어이다.
- 변수명, 함수명 등으로 사용한다.
- 사용 불가 규칙 있음:
  - 키워드 사용 불가
  - 숫자로 시작 불가
  - 특수문자 제한
  - 공백 문자 포함 불가
- 가독성 향상을 위해 'camelCase' 규칙 등이 사용된다.

주석과 출력

주석 작성 방법

HTML 주석: <!--  -->

자바스크립트 한 줄 주석: //
자바스크립트 여러 줄 주석: /* */

출력 방법

alert() 함수: 경고창 출력
console.log() 메서드: 콘솔에 출력

코드 읽는 방법

주어-동사-목적어 구조로 생각하기
명령문은 동사-목적어 구조

문자열과 숫자

문자열 만들기:

// 큰따옴표("") 또는 작은따옴표('')로 문자열을 만들 수 있음
"문자열"
'문자열'

// 문자열 안에 따옴표를 포함하고 싶다면 역슬래시\를 사용해 이스케이프 처리해야 함
let str = "문자열 안에 \"이렇게\" 포함할 것"

// 이스케이프 문자 - 문자 그대로의 표현이 아닌 다른 의미를 가지는 문자
\n(줄바꿈)
\\(역슬래시를 표현)
\t(탭)

문자열 처리:

// 문자열 연결 연산자(+): 두 문자열을 연결할 수 있음
"문자" + "열" => "문자열"

// 문자열 선택 연산: 대괄호[]로 문자열에서 특정 문자를 선택할 수 있음 (인덱스는 0부터 시작)
"문자열"[0] => "문"

// 문자열의 길이: length 속성
"문자열".length => 3

숫자 자료형:

정수, 실수 구분 없이 모두 숫자 자료형으로 취급
사칙연산(+, -, *, /)과 나머지 연산자(%)를 사용할 수 있음

숫자 자료형 관련 주의사항:

컴퓨터의 한정된 자원으로 인해 실수 표현에 오차가 발생할 수 있음
실수에 대한 나머지 연산은 오차 발생으로 거의 사용하지 않음

불(boolean)

참(true)과 거짓(false)을 나타내는 자료형이다.

불 값을 숫자로 변환하면 true는 1, false는 0이 된다.

불 값으로 변환할 때는 대부분의 경우 true로 변환되지만, 0, '', null, undefined, NaN은 false로 변환된다.

불을 생성하는 방법:

// 직접 true 또는 false를 입력
let a = true;

// 비교 연산자(===, !==, >, >=, <, <=)를 사용하여 생성
console.log(1 < 2) // true

비교 연산자 사용 시 주의사항:

자바스크립트는 같다를 ===, 다르다를 !==로 나타낸다.

불의 활용:

조건문(if-else)에서 사용되어 프로그램의 흐름을 제어
회원가입, 로그인 등의 입력 검증에 활용

if (true) {
  console.log(진실); 
}

// 논리 부정 연산자(!): 불 값을 반대로 변경한다.
!(false) => true

불 연산

논리 연산자

논리합(OR, ||): 적어도 하나가 true면 true
논리곱(AND, &&): 모두가 true여야 true
각 경우에 따른 결과는 총 8가지다.

논리 합 연산:

연산자: ||(또는)
논리합(OR, ||): 적어도 하나가 true면 true

true || true -> true
false || true -> true
true || true -> true
false || false -> false

논리 곱 연산:

연산자: &&(그리고)
논리곱(AND, &&): 모두가 true여야 true

true && true -> true
true && false false -> false
false && true - false -> false
false && false -> false -> false

비교 연산자와 논리 연산자 조합

연립 부등식(두 개 이상의 부등식을 묶어서 나타낸 것)의 경우 js는 좌측부터 우측으로 비교 연산을 진행하므로 오류가 발생한다.

-3 <= x < 2; 
// (-3 <= x)를 먼저 연산 후 true로 결과를 도출
// 이후 true < 2 로 연산. 
// true는 다시 1로 형변환되어 최종 결과는 true가 된다.

따라서 비교 연산자와 논리 연산자를 함께 사용해야 한다.

-3 <= x && x < 2

드 모르간의 법칙:

논리 연산자 부정 시 변환 규칙으로 복잡한 조건을 쉽게 뒤집는데 유용하다.
부등식은 반대로! 논리곱 논리합 교체!한다.

// 원래 코드
!(12 <= 현재_시 && 현재_시 <= 13)

// 드 모르간의 법칙 적용 후
(12 > 현재_시 || 현재_시 > 13)

자료형 검사:

typeof 연산자를 사용하면 어떤 자료형인지 확인할 수 있다.
결과값은 문자열로 출력된다.

typeof 2; // 'number'

템플릿 문자열:

연산의 결과를 문자열로 출력할 때 기존에는 연결 연산자(+)를 통해 출력했다.
이를 편하게 처리하고 가독성을 높이고자 백틱(`)를 사용해 만든 것이 템플릿 문자열이다.
달러 기호와 중괄호 {} 를 사용해 표현식을 삽입할 수 있다.

`17 + 23의 값은 ${17 + 23} 입니다.`;

상수와 변수 기본

상수(constant)와 변수(variable)의 개념 및 특징:

// 상수: 값이 변하지 않는 자료.
const a = 1;

// 변수: 값이 변할 수 있는 자료.
let a = 2; 
a = 3;

상수 선언 및 주의사항:

상수는 한 번 선언하면 중복 선언할 수 없음.
상수 선언 시 const 식별자 = 값 형태로 작성해야 함.
선언한 상수 값은 변경할 수 없음.

변수 선언 및 주의사항:

변수는 let 식별자 = 값 형태로 선언.
변수는 언제든 값을 변경할 수 있음.
동일한 이름의 변수를 중복 선언할 수 있으나, 파일 단위로는 중복 선언 불가.

기타 개념:

변수/상수 '선언'은 식별자에 이름을 붙이는 것.
변수/상수에 '할당'은 값을 넣는 것.
'초기화'는 처음으로 값을 할당하는 것.
let 식별자 = 오른쪽값 에서 '='을 기준으로 왼쪽은 '대입'하는 곳, 오른쪽은 '대입'되는 값.

상수와 변수 사용 시 고려사항:

자바스크립트에서는 기본적으로 상수를 최대한 사용하고, 변경이 필요한 경우에만 변수 사용.
프로그래밍 언어에 따라 상수/변수의 개념이나 사용법이 다를 수 있음.

연산자와 undefined

변수에 적용할 수 있는 연산자:

// 복합 대입 연산자
a += 100; 
a -= 100;

// 증감 연산자
a++; 
a--;

복합 대입 연산자와 증감 연산자는 편리하게 코드를 작성할 수 있게 해줌

undefined 자료형:

변수 선언 없이 사용한 경우
값을 할당하지 않은 변수

자료형 변환:

기존 자료형을 다른 자료형으로 변환하는 것을 말한다.

// 결과는 문자열로 저장된다.
let a = prompt("원하는 숫자를 입력하세요")

// 계산이 쉽도록 숫자열로 형 변환
a = Number(a)

// 변환할 수 없는 문자열을 숫자로 변환하면 NaN(Not a Number)이 나온다.
let a = prompot("원하는 숫자를 입력하세요") // (ex. '안녕하세요')
a = Number(a) // NaN

혼공학습단 13기 선정

클라우드아실 — Mon, 6 Jan 2025 23:38:53 +0900

선정되면 받는 이메일!

한빛미디어 혼공학습단 13기에 선정되었다. 개인적으로 윤인성님을 좋아하는데 혼자 공부하는 시리즈 자바스크립트와 파이썬 책의 저자이시다. 그래서 책은 이미 가지고 있었고, 취준 기간 중 복습 겸 가지고 있는 책을 완독하자는 생각에 신청하게 되었다. 개인적인 욕심으로는 혼자 공부하는 시리즈를 4권 가량 가지고 있기 때문에 이번 기수를 시작으로 매 기수 진행해서 가지고 있는 책을 모두 완독하고 싶다.

혼공학습단 13기 활동 방법(3단계)

활동은 간단하다. 주차별 주어진 기본 숙제(추가 숙제는 선택)를 진행하고 블로그에 기록 후 패들랫에 링크를 공유하면 된다. 책도 책이지만 윤인성님의 강의가 유튜브에 무료로 제공되기 때문에 강의와 함께 스터디를 진행할 생각이다.

혼자 공부하는 자바스크립트 유뷰트 재생목록

혼자 공부하는 자바스크립트

www.youtube.com

[혼공 학습단 13] 스터디 활동과 도서별 커리큘럼 안내

[혼공학습단 13기] 혼공학습단 활동과 도서별 커리큘럼 안내

안녕하세요, 한빛미디어 혼공학습단의 혼공족장입니다. 혼공학습단 13기의 활동과 도서별 커리큘럼 안내 드립니다. 13기 활동 기간 1주차: 1월 6일 ~ 1월 12일 2주차: 1월 13일 ~ 1월 19일 3주차: 1

hongong.hanbit.co.kr

[도서 리뷰] 개발자가 되고 싶습니다

클라우드아실 — Mon, 6 Jan 2025 03:39:28 +0900

최근 읽은 '개발자가 되고 싶습니다'는 개발자가 되기 위한 공부 방법, 이력서 작성, 포트폴리오 제작, 면접 준비까지 신입 개발자로서 겪게 될 과정 전반을 따뜻하게 풀어낸 책이다. 30대 중반에 iOS 개발자로 도전한 앨런님의 경험을 바탕으로, 다양한 상황에서 실질적으로 적용 가능한 조언과 전략을 제시한다.

"문법과 프레임워크 기초까지 예습하고 가야 효과가 크다."

특히 위의 문장은 부트캠프와 국비 과정에 참여했던 내 경험과 정확히 맞아떨어진다. 실제로 프론트엔드가 무엇인지조차 모르고 시작했던 동기 중 대부분은 혼란 속에 과정을 포기하거나 힘겹게 마쳤다. 반면, 기본적인 준비를 해온 이들은 과정을 효율적으로 활용하며 더 나은 결과를 얻었다. 이 책은 그런 준비의 중요성을 강조하며 시행착오를 줄이는 법을 알려준다.

다만, 책이 2023년 4월에 출판된 점을 고려할 때, 현재의 취업 시장 상황과는 다소 차이가 있다. 2019~2021년은 개발자 취업의 황금기였지만, 2022년 이후 시장은 급격히 어려워졌다. 다시 전공자를 찾거나 나이를 따지기 시작하는 기업들이 늘어나고 있고, 중소기업의 채용에도 수백 명이 지원하는 상황이다. 그렇기에 이 책에서 말하는 "포기하지 않으면 가능하다"는 희망적인 메시지에 대해서는 안타깝지만 쉽게 동의하기 어려운 상황이 되었다. 워낙 iOS 개발자가 귀하다는 이야기를 많이 들어서 iOS쪽은 다를 수도 있으려나.

그럼에도 불구하고, 개발자가 되기로 마음먹은 이들에게 이 책은 꼭 필요한 가이드가 될 것이다. 앨런님은 "우선 재미를 붙이는 것"을 강조하며, 높은 목표를 바로 추구하기보다는 작은 성취감을 쌓아가며 꾸준히 나아가라고 조언한다. 이 책에서 제시한 학습 자료와 전략은 국비 과정이나 부트캠프를 시작하기 전에 꼭 참고해야 할 내용이다. 비전공자로 개발자에 도전하려는 이들에게 강력히 추천한다.

국비냐 부트캠프냐 고민스러울 때

클라우드아실 — Sat, 4 Jan 2025 19:07:20 +0900

※ 주의

이 글은 지극히 주관적인 경험으로
개인적인 의지의 표명. 한풀이. 각오 다지기. 후회. 반성의 시간 등이 뒤섞여 있습니다.
혹시나 어떠한 알 수 없는 알고리즘으로 인해 이 페이지로 이끌려 오셨다면
이 글은 개인적으로 개발자가 되기를 원하는 누군가에게 전하는 사견입니다.
이렇게 해야만 한다는 것은 아닌 하나의 의견으로 봐주시면 감사하겠습니다.

서론

직장을 다니며 부트캠프를 진행하다가 중도하차 후 늦은 나이에 국비지원 프론트엔드 과정을 수료했다. 국비지원과 부트캠프는 개발자 지망생들에게 흔히 선택되는 길이지만, 동시에 많은 편견과 오해도 따라다닌다.

국비 출신이라 하면 일단 거른다 카더라

그런데 국비 관련만 그런 글이 있는가 하니 그건 또 아니다.

변형 기출. 부트캠프 출신은 거른다 카더라

이러다 다 걸러질 것 같다. 어떻게 하라는겨.

그런데 웃긴건 비전공자 독학으로 개발공부 괜찮냐는 질문에

도르마무, 거래를 하러 왔다..

어쨌든 이런 편견에도 불구하고 나는 두 과정을 모두 경험하며(결과적으로 독학까지 세가지?) 나만의 결론을 얻었다.

그래서 이 글에서는 내가 국비와 부트캠프를 통해 배운 점들을 솔직하게 공유하고, 같은 고민을 하는 사람들에게 도움이 될 조언을 나누고자 한다.

본론

국비지원과 부트캠프의 현실

국비지원 과정은 "무료로 배우고 취업까지 연계한다"는 장점이 있지만, 모든 수강생이 동일한 결과를 얻지는 못한다. 부트캠프도 마찬가지다. "비전공자도 개발자가 될 수 있다"는 문구는 희망적으로 들리지만, 실제로는 자기주도 학습 능력과 철저한 시간 관리가 요구된다.

과연 그럴까..?

나의 경험으로 볼 때, 국비든 부트캠프든 "어디서 배웠는지"보다 중요한 것은 얼마나 집중적으로 많은 시간을 투자했는지였다. 회사에 다니면서 짬짬이 공부하던 시기와 지금 온전히 공부에 전념할 수 있는 시기를 비교하면, 학습의 깊이가 확연히 다르다. 이는 국비와 부트캠프의 한계를 넘어선 문제다.

부트캠프와 국비에서 얻은 교훈

첫 부트캠프에서는 "기초부터 차근차근 가르쳐준다"는 말에 큰 기대를 걸었다. 하지만 현실은 달랐다. 부트캠프의 주된 방식은 자기주도 학습이었다. 예를 들어, 사전 OT에서 강사가 "기초부터 배우니 준비할 필요가 없다"고 했지만, 실제로는 미리 준비한 사람들과 그렇지 않은 사람들 사이의 격차가 매우 컸다. 더군다나 직장을 다니면서 하루종일 공부하는 사람과 똑같은 결과를 얻는다? 불가능한 이야기다.

만약 타임머신을 타고 그 시점으로 돌아간다면, 나에게 이렇게 조언할 것이다.

생활코딩 같은 무료 강의를 하나라도 완강하고 가라.

국비지원의 경우 "팀 프로젝트를 진행하고 연계된 기업에서 발표시 참관도 한다'는 말에 큰 기대를 걸었다. 기업에서 참관했고 피드백도 좋았다. 다만 연계된 기업에서 항상 채용한다는 기대를 버려야한다. 참관한 기업들은 경기가 어렵고 TO가 없다며 올해는 채용계획이 없다고 했다.

연계된 기업이 있고 취업을 알선한다고 했지 보장한다고 하진 않았다.는 함정
전적으로 취업되지 못한 책임은 수강생이 진다.

자기주도 학습의 중요성

왠만한 부트캠프라면 한번씩은 한다는 홍보문구. 하지만..

부트캠프에서는 강의 자료를 제공하고, 과제를 내주고, 프로젝트를 진행하지만, 결국 모든 학습의 주체는 나였다.
어떤 환경에서도 성공하려면 내가 얼마나 시간을 투자하고 스스로 학습했는지가 중요하다. 계획한 대로 공부가 진행되지 않는다면, 부트캠프의 치열한 속도를 따라가기 어려울 것이다.

국비지원은 일반적으로 9-6의 규칙적인 수업이 진행되기 때문에 멱살잡고 분량을 진행한다. 문제는 공부해야 할 내용들이 산더미기 때문에 수업 이후 복습이 필수다.
나는 국비 기간 시작부터 종료되는 시점까지 꾸준히 학원이 마감하는 22시까지 추가 학습을 진행했지만 그래도 매일의 수업 내용을 완벽히 소화할 수는 없었다.

결론

나는 국비와 부트캠프라는 두 가지 과정을 경험하며, 이 둘이 크게 다르지 않음을 깨달았다. 중요한 것은 환경이 아니라 내가 얼마나 집중하고 많은 시간을 노력했는지다. 어떤 과정을 선택하든, 스스로 시간을 투자하고 끝까지 해내려는 의지가 필요하다.

과정을 수료하더라도 취업하기는 쉽지 않다. 무수히 많은 공고를 떨어지고 알게 된 사실인데 일부 인사담당자들은 국비나 부트캠프에서 만든 포트폴리오를 신뢰하지 않는다. 오히려 그 이후의 추가 프로젝트가 중요한데 난 그게 없었다.

디시인사이드에 프로그래밍 갤러리라는게 있단다. 이거 레알이다.

부트캠프나 국비지원을 고민하는 사람들에게는 이렇게 말하고 싶다.

시작하기 전, 먼저 스스로 공부를 해볼 것 - 생활코딩 같은 온라인 공개 강의 완강해보기
시간 관리와 자기주도 학습 능력을 점검할 것 - 치열한 속도를 따라가기 어렵다
부트캠프나 국비는 기초를 다지기에 좋은 환경이 아니다.
빠른 진행 속도를 따라가기 위해 기초가 준비된 상태로 참가해야 얻는 것이 많다.
수료하더라도 이력서만 돌리고 있지 말고 꾸준히 프로젝트를 할 것
짧게는 3개월에서 2년까지 취준 기간이 필연적으로 발생하니 이에 대해 대비할 것

에필로그

수료 후 아직까지 취준상태지만 이제 뭘 모르는지 모르는 상태에서 뭘 모르는지 아는 상태가 되었다. 진정으로 개발 공부에 전념하며 꿈을 향해 나아가고 있다. 아직 개발자가 되기까지 갈 길이 멀지만, 이 여정을 통해 얻은 깨달음은 분명하다. 환경에 의존하기보다는 스스로를 믿고 끝까지 나아가는 것, 그것이 가장 중요한 태도다.

추후 읽어볼 내용

클린코드 Assignment #13 : 클래스

클라우드아실 — Tue, 17 Dec 2024 02:38:57 +0900

TIL (Today I Learned)

2024.12.16

오늘 읽은 범위

10장. 클래스

✔ 책에서 기억하고 싶은 내용

클래스는 작고 단순해야 하며, 단일 책임 원칙(SRP)을 따라야 한다.
캡슐화를 통해 내부 구현을 숨기고, 필드에 직접 접근하지 않도록 한다.
클래스는 확장에는 열려 있고, 변경에는 닫혀 있어야(OCP) 하며, 새로운 기능을 추가할 때 기존 코드를 수정하지 않도록 설계한다.
의존성 역전 원칙(DIP)을 통해 인터페이스와 구현을 분리하고, 유연성을 확보한다.
상속보다는 구성을 우선적으로 고려하여 복잡한 계층 구조를 피한다.

오늘 읽은 소감은?

리액트로 함수형 프로그래밍을 주로 하다보니 클래스와는 좀 어색하다.
함수 챕터와 일맥상통하는 부분이 있다는 것을 느끼면서 읽었다. 작고, 단순해야하며, 단일 책임 원칙을 따라야 한다는 점. 처음부터 일관되게 이야기하는 가독성과도 맞닿아 있다. 어렵지만 연차가 쌓일수록 이 책이 다른 느낌으로 다가온다고..(카더라) 추후에 클래스와 좀 더 친해지고 나서 읽으면 또 다른 느낌이려나 싶다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

단일 책임 원칙(SRP): 클래스는 오직 하나의 책임만 가져야 하며, 변경할 이유도 하나만 있어야 한다.
캡슐화: 클래스 내부 구현을 숨기고, 외부에는 상호작용하는 부분만 노출. 외부의 잘못된 사용을 방지한다.
OCP (개방-폐쇄 원칙): 클래스는 확장에는 열려 있고, 변경에는 닫혀 있어야 한다, 즉 기존 코드를 수정하지 않고도 새로운 기능을 추가할 수 있어야 한다.
DIP (의존성 역전 원칙): 고수준 모듈은 저수준 모듈에 의존하지 않고, 둘 다 추상화된 인터페이스에 의존해야 한다.

클린코드 Assignment #11 : 단위 테스트

클라우드아실 — Fri, 13 Dec 2024 03:38:23 +0900

TIL (Today I Learned)

2024.12.13

오늘 읽은 범위

9장. 단위 테스트

✔ 책에서 기억하고 싶은 내용

단위 테스트는 필수적이며, 코드의 품질과 리팩토링 속도를 높인다.
테스트는 함수마다 한 개념만 테스트한다.
F.I.R.S.T 원칙을 따라 빠르고, 독립적이며 반복 가능한 테스트를 작성해야 한다.
- Fast : 빠른 테스트가 가능한 코드를 작성한다.
- Independent : 단위 테스트는 작고 독립적이어야 하며, 불필요한 의존성을 최소화해야 한다.
- Repeatable : 실행 환경이 테스트에 실패한 이유가 되지 않도록 어디서나 반복적으로 실행할 수 있어야 한다.
- Self-Validating : 테스트는 결과가 명확하게 성공 또는 실패로 나타나야 한다. 확인 작업을 수동으로 하면 안 된다.
- Timely : 테스트는 실제 코드를 구현하기 직전에 구현한다. TDD(테스트 주도 개발)이 가능하게 한다.
Given-When-Then 패턴을 사용해 명확하게 구조화할 수 있다.

function add(a, b) {
  return a + b;
}

// 단위 테스트: Given-When-Then
test("add 함수는 두 숫자의 합을 반환한다", () => {
  // Given [준비]
  const a = 2;
  const b = 3;

  // When [실행]
  const result = add(a, b);

  // Then [조건]
  expect(result).toBe(5);
});

TDD를 통해 테스트를 먼저 작성하면 더 나은 설계를 유도할 수 있다.

오늘 읽은 소감은?

최근 프론트엔드 채용 공고에서 테스트 도구 사용 경험을 우대사항으로 제시하는 경우가 늘어나고 있어서 관심을 두고 있었다. 해당 챕터를 통해 이미 기존의 언어들은 테스트에 대한 다양한 방법론과 패턴이 존재함을 알 수 있었다. 앞서 에러 처리부터 단위 테스트까지 모두 견고한 프로그램을 만들기 위한 일환으로 본다면, 견고한 코드 작성을 위해 타입스크립트가 프론트엔드의 기본사항이 된 것처럼 테스트도 점차 프론트엔드의 기본으로 자리 잡을 것으로 예상된다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

RSpec: Ruby 코드를 테스트하기 위해 프로그래밍 언어 Ruby로 작성된 컴퓨터 도메인 특정 언어 (DSL)(특정 애플리케이션 도메인) 테스트 도구이다.
TEMPLATE METHOD 패턴 : 여러 클래스에서 공통으로 사용하는 메서드를 템플릿화 하여 상위 클래스에서 정의하고, 하위 클래스마다 세부 동작 사항을 다르게 구현하는 패턴이다.
Given-When-Then 패턴 :
- Given [준비]: 테스트를 하기 위해 세팅하는 주어진 환경.
- When [실행]: 테스트를 하기 위한 조건으로 프론트엔드에선 사용자와의 상호작용인 경우도 많음.
- Then [조건]: 예상 결과를 나타내며 의도대로 동작하는지 검증 및 확인할 수 있음.
TDD : 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현하는 개발방식이다.
Test Pyramid
- Unit Test : 단위 테스트. 개별 컴포넌트의 동작을 테스트 하는 단계다. 주로 배포하기 전 자동으로 실행되도록 한다.
- Integration Test : 개별 컴포넌트를 합쳐 동작을 테스트 하는 단계다.
- E2E Test : End to End Test. 즉, 시스템 또는 프로세스의 시작부터 끝까지의 흐름을 테스트하는 단계다.

참고자료

클린코드 Assignment #10 : 오류처리

클라우드아실 — Wed, 11 Dec 2024 02:39:34 +0900

TIL (Today I Learned)

2024.12.10

오늘 읽은 범위

7장. 오류처리

✔ 책에서 기억하고 싶은 내용

오류코드보다 예외를 사용하라
- 오류 처리를 반환값 대신 예외로 처리하는 것이 더 좋다. (중첩에 중첩되는 if문 사용X)
- 예외를 사용하면 정상적인 코드 흐름과 오류 처리가 분리되어 가독성이 좋아진다.
예외에 의미를 제공하라.
- 예외가 언제 발생하는지 의도를 명확하게 작성하고, 혼란스러운 예외 사용을 피해야 한다.
null을 반환하지 마라
- null을 반환하면 호출하는 쪽에서 null 체크를 해야 하므로 코드가 복잡해진다.
- 대신 예외를 던지거나, 명시적인 값을 반환하는 것이 좋다.
특별한 경우를 처리하는 클래스 사용
- null 대신 Null Object 패턴이나 특별한 오류 객체를 사용해 로직을 단순화하라.

✔ 책에서 기억하고 싶은 내용(프론트엔드 적용버전)

반환값 대신 throw를 사용해 예외를 던져라.

// 나쁜 예시
function getUser(id) {
  if (id <= 0) return null; // 잘못된 경우 null 반환
  return { id, name: "User" };
}

const user = getUser(-1);
if (!user) {
  console.log("User not found");
}


// 개선안
function getUser(id) {
  if (id <= 0) {
    throw new Error("Invalid user ID");
  }
  return { id, name: "User" };
}

try {
  const user = getUser(-1);
  console.log(user);
} catch (error) {
  console.error(error.message);
}

에러 처리 코드와 비즈니스 로직을 분리하라.

// 나쁜 예시
try {
  const response = fetch("/api/data");
  const data = response.json();
  console.log(data);
} catch (error) {
  console.error("Failed to load data", error);
}


// 개선안
// 에러 처리 코드
async function safeFetchData(url) {
  try {
    const response = await fetch(url);
    return await response.json();
  } catch (error) {
    console.error("Fetch failed:", error);
    return null;
  }
}

// 비즈니스 로직
async function main() {
  const data = await safeFetchData("/api/data");
  if (data) {
    console.log(data);
  }
}

main();

에러 처리 코드와 비즈니스 로직을 분리하라 - 각 함수의 에러처리 버전

// 공통 API 요청 함수
async function fetchData(url, options = {}) {
  try {
    const response = await fetch(url, options);

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error(`API 호출 실패: ${url}`, error.message);
    throw error; // 개별 try-catch에서 처리 가능
  }
}

// 각각의 API 요청 함수
async function getUser(id) {
  try {
    const user = await fetchData(`/api/users/${id}`);
    console.log("User data:", user);
  } catch (error) {
    console.error("사용자 정보를 불러오지 못했습니다.");
  }
}

async function getPosts() {
  try {
    const posts = await fetchData("/api/posts");
    console.log("Posts:", posts);
  } catch (error) {
    console.error("게시글 목록을 불러오지 못했습니다.");
  }
}

// 실행
getUser(1);
getPosts();

null이나 undefined 대신 기본값을 반환해라.

// 나쁜 예시
function getUser(id) {
  if (id <= 0) return null;
  return { id, name: "User" };
}

const user = getUser(-1);
console.log(user ? user.name : "Guest");


// 개선안
function getUser(id) {
  if (id <= 0) return { id: 0, name: "Guest" }; // 기본값 반환
  return { id, name: "User" };
}

const user = getUser(-1);
console.log(user.name); // 항상 안전하게 접근 가능

의미 있는 에러 메시지를 작성해라.

// 나쁜 예시
throw new Error("Something went wrong");


// 개선안
function getUser(id) {
  if (id <= 0) {
    throw new Error(`Invalid ID: ${id}. ID must be greater than 0.`);
  }
  return { id, name: "User" };
}

try {
  getUser(-1);
} catch (error) {
  console.error(error.message);
}

에러를 개발자용 로그와 사용자 메시지로 나눠 처리하라.

async function fetchData() {
  try {
    const response = await fetch("/api/data");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error details for developers:", error); // 개발자용 로그
    alert("데이터를 불러오는 중 문제가 발생했습니다. 다시 시도해주세요."); // 사용자 알림
    return null;
  }
}

fetchData();

오늘 읽은 소감은?

이게 무슨 소리야 욕하면서 본 것 같다. 클린코드가 자바 중심의 책이라 자바스크립트를 다루는 나로써는 이해할 수 없는 예시와 지문들 때문에 책은 20분도 안되서 다 읽었지만 관련한 영상이나 자료를 찾는데 3시간 이상을 쏟아부었다. 이게 노마드코더 챌린지가 아니었으면 여기서 읽기를 때려쳤을 듯. 유튜브에서 관련한 영상들을 찾아보니 의견이 분분한 챕터이기도 한 것 같다. GPT와도 열띤 토론을 나눴다. 이에 따라 프론트엔드 버전용을 별도로 기록하게 되었다.

결국 이 챕터는 코드의 가독성, 오류 상황에서 시스템의 안정적인 동작 등에 따라 취사선택을 해야할 것 같고, 실무 경험을 쌓아야 논할 수 있을 것 같다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

Checked Exception : 컴파일 타임에 예외 처리를 강제하는 자바의 예외 처리 방식이다. 파일 입출력 시 발생할 수 있는 예외( IOException)나 데이터베이스 관련 작업에서 발생할 수 있는 예외(SQLException) 등은 try-catch로 반드시 처리해야 컴파일이 가능하다. 하지만 자바스크립트는 모든 예외가 선택적 처리가 가능한 Unchecked Exception처럼 동작한다.

참고자료

클린코드 Assignment #08 : 객체와 자료구조

클라우드아실 — Mon, 9 Dec 2024 04:46:22 +0900

TIL (Today I Learned)

2024.12.08

오늘 읽은 범위

7장. 오류처리

✔ 책에서 기억하고 싶은 내용

객체(Object)는 데이터를 캡슐화하여 동작(메서드)을 통해서만 접근하도록 하며, 복잡성을 감추고 유연성을 제공한다.
자료구조(Structure)는 데이터를 외부에 노출하며, 데이터를 처리하는 비즈니스 로직과 구조를 분리한다.
객체는 디미터 법칙을 준수하여 불필요한 의존성을 줄이고, 객체 내부의 데이터를 무분별하게 노출하지 않아야 한다.
복잡한 비즈니스 로직이 포함된 데이터는 객체로 감싸고, 단순히 데이터를 전달하는 역할만 필요한 경우 자료구조를 사용한다
객체와 자료구조는 상호 보완적이며, 상황에 따라 적절히 선택하여 사용해야 한다.

오늘 읽은 소감은?

짧지만 어려운 내용이다. 정리하면 일단 둘 다 클래스를 통해서 생성한 결과물을 두고 이야기 하는 것임을 나중에서야 알았다. 비즈니스 로직의 유무에 따라 객체와 자료구조로 나뉘어 지는데 객체는 디미터 법칙을 준수해야하고, 자료구조에 대해서는 DTO와 빈 구조에 대해 한번 더 설명한 것이었다. 책만으로는 이해가 잘 안되서 관련한 영상을 보고 한번 더 정리했는데 이건 추후에 실제 코드를 만들어보면서 한번 더 정리해야 할 것 같다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

휴리스틱 : 경험에 의한 법칙. ex) 출퇴근 시간, 특히 월요일에는 차가 막힌다.
디미터 법칙(law of Demeter) : '객체는 자신의 가까운 친구(직접적으로 연관된 객체)와만 대화해야 하며, 친구의 친구와는 대화하지 말아야 한다'는 원칙. 즉 ex) obj.a().b().c().d(); 와 같이 함수가 반환하는 객체의 함수를 소환하는 객체의 함수를 소환하는 식의 연쇄작용이 생겨서는 안된다.
DTO(Data Transfer Object) : 공개 변수만 있고 함수가 없는 클래스 형태. 대표적인 자료구조다.
빈(bean)구조 : 비공개(private) 변수를 조회/설정 함수로 조작한다. 자료구조.

클린코드 Assignment #07 : 형식 맞추기

클라우드아실 — Sun, 8 Dec 2024 01:07:38 +0900

TIL (Today I Learned)

2024.12.07

오늘 읽은 범위

5장. 형식 맞추기

✔ 책에서 기억하고 싶은 내용

일관된 형식은 코드의 가독성과 유지보수성을 높이는 핵심이다.
적절한 줄바꿈과 여백으로 코드를 시각적으로 분리하고, 논리적 흐름을 명확히 해야 한다.
팀의 스타일 가이드를 따르고, 자동화 도구를 활용하여 형식 논쟁을 최소화 한다.

오늘 읽은 소감은?

형식 맞추기는 내 생각에 가장 쉽게 클린 코드를 만들 수 있는 방법이다. 그러면서 사실상 Prettier와 ESLint가 필수가 되면서 자동으로 포맷팅이 되니까 잘 모를 수 있는 기본적인 영역이다. 사실상 클린 코드의 가장 큰 목표가 나와 동료의 생산성을 높이는 것이기 때문에 이 부분만 잘 지켜도 협업 생산성이 높아진다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

React는 변수처럼 Hook을 상단에 기재하는데 클린코드에서는 변수는 사용하는 위치에 최대한 가까이 선언하라고 한다.
각 Hook을 개별 함수의 상단에 위치시키면 안되는 것인지 조사
- 리액트에서 Hook은 공식문서에서 최상위에서만 호출하도록 명시하고 있다.
- 이는 Hook이 컴포넌트의 상태와 로직을 관리하기 때문으로 데이터 흐름과 상태 관리를 명확히 파악하기 위한 규칙이다.
- Hook이 그 중첩 함수 내부에서만 의미가 있을 때는 중첩 함수 근처에서 호출하는 것이 더 나을 수 있지만, 그럴 경우에는 CustomHook을 만드는 것이 더 나음

클린코드 Assignment #06 | Mission (1)

클라우드아실 — Fri, 6 Dec 2024 14:13:03 +0900

QUIZ 01.

Hint ! : 검색하기 쉬운 이름을 사용하세요.
blastOFF는 로켓 발사를 의미.
86400000은 하루의 밀리초 (milliseconds) 의미.

// What the heck is 86400000 for?
setTimeout(blastOff, 86400000);


// GOOD  
const MILLISECONDS_IN_A_DAY = 86400000
setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

/* 
86400000가 의미하는 바가 불명확함
구체적이고 의도가 명확한 변수를 만들어 할당함
하루라는 총 시간의 양은 변하지 않기 때문에 const 사용
*/

QUIZ 02.

Hint ! : 의미있는 이름을 사용해 주세요.

const yyyymmdstr = moment().format("YYYY/MM/DD");

// GOOD  
const currentDate = moment().format("YYYY/MM/DD");

// 변수명을 좀 더 의미있는 단어로 수정함

QUIZ 03.

Hint ! : 불필요하게 반복하지 마세요.

const Car = {
  carMake: "Honda",
  carModel: "Accord",
  carColor: "Blue"
};

function paintCar(car, color) {
  car.carColor = color;
}

// GOOD  
const Car = {
  Make: "Honda",
  Model: "Accord",
  Color: "Blue"
};

function paintCar(car, color) {
  car.Color = color;
}

// 객채명과 동일한 car라는 중복단어 제거

클린코드 Assignment #05 : 주석

클라우드아실 — Fri, 6 Dec 2024 02:01:04 +0900

TIL (Today I Learned)

2024.12.05

오늘 읽은 범위

4장. 주석

✔ 책에서 기억하고 싶은 내용

명확하지 않은 코드는 주석으로 설명하기보다 코드를 개선해서 주석이 필요 없도록 만드는 것이 더 좋다.
좋은 주석은 드물기 때문에 최대한 주석을 줄이고, 코드 자체로 의도를 드러내야 한다.
함수명, 변수명, 클래스명 등을 의미 있게 지어 주석 대신 자체적으로 코드가 무엇을 하는지 설명하도록 해야 한다.
복잡한 로직은 함수로 분리하고 명확한 함수명을 붙이는 것이 좋다.

주석이 필요할 때 :

법적 정보: 라이선스나 저작권 관련 정보를 제공해야 할 때.
의도를 설명하는 주석: 코드의 의도가 명확하지 않을 때, 그 이유나 목적을 설명하는 주석
경고: 동작 방식이 정해진 코드는 다른 방식은 문제가 생길 수 있음을 경고하는 주석.
TODO 주석: 추후 개선해야 할 부분이나 추가 작업을 기록할 때.

주석의 문제점 :

매번 코드 변경시 주석을 업데이트하지 않으면 잘못된 정보를 제공할 수 있다.
너무 길거나 많은 정보가 나열된 주석은 가독성을 해치고 코드의 복잡성을 높인다.

주석을 남기기 전에 생각할 것 :

주석의 필요성을 한번 더 생각하고, 더 명확한 코드를 작성하는 방법을 찾아본다.

오늘 읽은 소감은?

코드를 짤 때마다 '이건 이렇게 주석을 달면 좋지 않을까?' '이건 이런 주석이 있으면 이해하기 더 쉽겠지?' 라고 생각하면서 코드를 짰던 적이 있다. 나름대로 친절하고 쉽게 다른 사람들을 위해서 주석을 짰다고 생각했지만, 추후 주석을 보면서 '이게 뭔 소리야?' 라거나 '이런 것도 주석으로 남겼네?'라는 생각이 들었다. 주석은 나쁜 코드를 보완하지 못한다. 어떻게 해야 주석을 잘 짤 수 있을까? 보다 '어떻게 해야 주석이 필요하지 않은 코드를 짤 수 있을까' 를 고민해야 한다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

javadoc : Java 프로그래밍 언어에서 사용되는 문서화 도구. 주석을 달아 API 문서를 자동으로 생성하는 데 사용한다.

/**
 * 이 메서드는 두 숫자의 합을 반환합니다.
 *
 * @param a 첫 번째 숫자
 * @param b 두 번째 숫자
 * @return 두 숫자의 합
 */
public int add(int a, int b) {
    return a + b;
}

이 주석을 아래의 명령을 통해 HTML 형식의 API 문서로 변환할 수 있다.

javadoc MyClass.java

Base64 : 이진 데이터를 텍스트 형식으로 인코딩하는 방식이다.

참고자료

JS로 읽는 클린코드 (한글판)
https://silver-ye.tistory.com/

클린코드 Assignment #04 : 함수

클라우드아실 — Mon, 2 Dec 2024 15:06:02 +0900

TIL (Today I Learned)

2024.12.02

오늘 읽은 범위

3장. 함수

✔ 책에서 기억하고 싶은 내용

1. 작게 만들어라
함수는 짧고 간결하게 한다.
중첩 구조가 생길 만큼 커져서는 안된다.

2. 한 가지만 해라
함수 내의 모든 문장의 추상화 수준이 동일해야 한다.
최대한 추상화 수준이 하나인 함수를 구현하기 위해 노력해야 한다.

3. 함수의 이름은 동작을 설명해야 한다
길고 서술적인 이름이 짧고 어려운 이름보다 좋다.
이름만 보고도 함수의 목적을 쉽게 알 수 있어야 한다.

4. 함수의 인수(파라미터)는 적을수록 좋다
함수 인자는 0~2개가 적당하다.
3개 이상은 객체로 묶어서 전달하는 것이 좋다.
인자가 많을수록 함수가 복잡해지고, 테스트하기 어려워진다.

5. 부수 효과를 일으키지 마라
함수는 부수 효과 (side effect)가 없어야 한다.
외부 상태를 변경하거나 전역 변수를 수정하는 것 등은 함수의 동작을 예측하기 어렵게 만든다.

6. 명령과 조회를 분리하라
함수는 명령(어떤 동작을 수행)과 조회(어떤 정보를 반환)의 역할을 혼합하지 말아야 한다.
하나의 함수는 어떤 동작을 하거나 값을 반환하는 한 가지 목적만을 가져야 한다.

7. Try/Catch 블록 뽑아내기
오류 처리는 try/catch 블록으로 처리하고 별도 함수로 뽑아내는 것이 좋다.

8. 함수를 짜는 방법

기능을 구현한다.
테스트 코드를 작성한다.
리팩토링 한다.(함수 쪼개기, 이름 변경, 중복 제거 등)

오늘 읽은 소감은?

자바코드가 눈에 안 들어와서 너무 힘들었다. JS판으로 다시 보면서 겨우 이해할 수 있었는데 역시 마감기한이 이틀인 이유가 있다. 추상화 수준이라는 단어에 꽂혔는데 기존에는 동작하는 함수를 만들고 난 뒤에 함수 쪼개기를 해볼 생각을 하지 못했던 것 같다. '이렇게 하나하나 세분화해서 쪼갤 수도 있구나'라는 생각과 함수의 재사용성이라는 측면을 고려했을 때 '어디까지 쪼개는 게 좋을까'라는 생각이 공존했는데 현업에서는 어떻게 하는지 나중에 꼭 확인해보고 싶다. 또한 추상 메서드를 묶어서 하나의 추상 팩토리에서 사용하는 방식에 대해 공부가 더 필요할 것 같다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

인코딩 : 데이터를 특정한 형식으로 변환하는 과정이다.
책에서는 코드에 불필요하거나 복잡하거나 불명확한 표현을 덧붙여 해석하기 어렵게 하는 것을 표현하는 것으로도 사용했다.
추상화 수준 : 코드가 어떤 일을 할 때 무엇을 하는지(고수준)와 어떻게 하는지(저수준)를 구분하는 것을 말한다. 예를 들어 아래의 코드에서 authenticateUser는 고수준 함수다. 내부적으로 logFailure와 logSuccess 함수가 실행되는데 이 함수들이 어떻게 동작하는지 로직은 해당 함수 외부에 별도로 작성되어 있다.

// 사용자를 인증하는 고수준 함수
function authenticateUser(username, password) {
  const user = findUser(username);

  if (!user) {
    logFailure(username);
    return false;
  }

  if (!checkPassword(user, password)) {
    logFailure(username);
    return false;
  }

  logSuccess(username);
  return true;
}

// 성공 로그를 기록하는 저수준 함수
function logSuccess(username) {
  console.log(`사용자 ${username} 인증 성공`);
}

// 실패 로그를 기록하는 저수준 함수
function logFailure(username) {
  console.log(`사용자 ${username} 인증 실패`);
}

팩토리 : 객체를 생성하는 역할을 담당하는 클래스 또는 메서드를 의미한다.
추상 팩토리 : 이 패턴은 관련된 객체들의 집합을 생성하기 위한 인터페이스를 제공하는 것이다. 구체적인 클래스에 의존하지 않고, 상위 팩토리 인터페이스를 통해 객체들을 그룹화하고 추상화하여 생성할 수 있다. 예를 들어, 모던 가구와 클래식 가구를 생산하는 두 공장이 있다고 할 때, 두 공장의 가구 생성 메서드를 하나의 추상 팩토리 인터페이스로 묶어서 다양한 가구 객체를 생성하는 방식을 추상화할 수 있다.

// 추상 팩토리: 가구 팩토리 인터페이스
class FurnitureFactory {
  createChair() {}
  createSofa() {}
}

// 모던 스타일 가구 공장 (구체적인 팩토리)
class ModernFurnitureFactory extends FurnitureFactory {
  createChair() {
    return new ModernChair();
  }
  createSofa() {
    return new ModernSofa();
  }
}

// 클래식 스타일 가구 공장 (구체적인 팩토리)
class ClassicFurnitureFactory extends FurnitureFactory {
  createChair() {
    return new ClassicChair();
  }
  createSofa() {
    return new ClassicSofa();
  }
}

// 제품 클래스: 모던 스타일 의자와 소파
class ModernChair {
  info() {
    console.log("This is a modern chair.");
  }
}

class ModernSofa {
  info() {
    console.log("This is a modern sofa.");
  }
}

// 제품 클래스: 클래식 스타일 의자와 소파
class ClassicChair {
  info() {
    console.log("This is a classic chair.");
  }
}

class ClassicSofa {
  info() {
    console.log("This is a classic sofa.");
  }
}

// 클라이언트 코드: 가구 세트를 만드는 함수
function createFurnitureSet(factory) {
  const chair = factory.createChair();
  const sofa = factory.createSofa();

  chair.info(); // 의자 정보 출력
  sofa.info();  // 소파 정보 출력
}

// 사용 예시
const modernFactory = new ModernFurnitureFactory();
createFurnitureSet(modernFactory);
// 출력: 
// This is a modern chair.
// This is a modern sofa.

const classicFactory = new ClassicFurnitureFactory();
createFurnitureSet(classicFactory);
// 출력: 
// This is a classic chair.
// This is a classic sofa.

참고자료

JS로 읽는 클린코드 (한글판)
https://silver-ye.tistory.com/

클린코드 Assignment #03 : 의미있는 이름

클라우드아실 — Sun, 1 Dec 2024 14:35:16 +0900

TIL (Today I Learned)

2024.12.01

오늘 읽은 범위

2장. 의미있는 이름

✔ 책에서 기억하고 싶은 내용

의도를 분명히 밝힌다.
- 이름만 보고도 변수나 함수의 역할을 명확히 알 수 있어야 한다.
- 예를 들어, count 대신 numberOfUsers라는 이름을 사용하면 그 변수가 무엇을 나타내는지 더 명확해진다.
그릇된 정보를 피한다.
- 변수명이나 함수명을 오해가 없도록 지어야 한다.
- 예를 들어, 리스트가 아닌데 accountList라는 이름을 사용하면 안 된다.
의미 있게 구분한다.
- 불필요하게 중복되는 단어나 의미 없는 차별화는 피해야 한다.
- 예를 들어 data, info와 같은 단어만으로는 이게 어떤 데이터인지, 어떤 정보인지 알 수 없다.
발음하기 쉬운 이름을 사용한다.
- 코드를 읽고 논의할 때 발음하기 어려운 이름은 피하고, 의미 있고 발음하기 쉬운 이름을 사용해야 한다.
검색하기 쉬운 이름을 사용한다.
- 짧고 모호한 이름보다 구체적이고 명확한 이름을 사용해야 검색과 유지보수가 용이하다.
클래스는 명사, 메서드는 동사로 짓는다.
- 클래스 이름은 명사로, 메서드 이름은 동사로 짓는 것이 좋다.
  예를 들어, Customer, Account는 클래스명으로 적합하고, getUserName은 메서드명으로 적합하다.
한 개념에 하나의 단어를 사용한다.
- 동일한 개념은 동일한 단어를 일관성 있게 사용 한다.
  예를 들어, fetch, retrieve, get을 섞어 쓰지 말고, 하나의 용어로 통일한다.
불필요한 맥락을 없앤다.
- 클래스명이나 함수명에서 불필요한 정보는 뺀다.
  예를 들어, GasStationAddress 대신 Address가 더 명확하다.

오늘 읽은 소감은?

많이 듣는 개발자들의 농담 중에 개발보다 변수명 짓는 게 더 어렵다는 이야기가 있다. 이번 챕터는 들어가면서 '이름을 잘 짓는 간단한 규칙' 을 소개하겠다고 한다. 책의 내용대로 함수나 메서드는 동작한다는 것에 집중하면 네이밍이 그나마 편한데 변수는 아직도 어려울 때가 있다. 추후에 변수로 인한 결과물까지 고려하면 처음의 네이밍과 서로 부자연스러운 경우가 있다.

이 챕터를 한마디로 정리하면 함부로 네이밍 하지 마라.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

인코딩 : 데이터를 특정한 형식으로 변환하는 과정이다.
책에서는 코드에 불필요하거나 복잡하거나 불명확한 표현을 덧붙여 해석하기 어렵게 하는 것을 표현하는 것으로도 사용했다.
Visitor 패턴 : 객체지향 프로그래밍에서 사용하는 디자인 패턴 중 하나로, 객체의 구조를 변경하지 않으면서 새로운 기능을 추가할 수 있게 해 준다. 상속과 오버라이드를 활용한 방법이다.

// 부모 클래스
class Shape {
  getPerimeter() {
    console.log('Shape의 둘레를 계산합니다.');
  }
}

// 자식 클래스 (오버라이드)
class Circle extends Shape {
  constructor(radius) {
    super(); // 부모 클래스의 생성자 호출
    this.radius = radius;
  }

  // 부모 클래스의 getPerimeter 메서드를 오버라이드
  getPerimeter() {
    const perimeter = 2 * Math.PI * this.radius;
    return perimeter.toFixed(2)
  }
}

// 또 다른 자식 클래스 (오버라이드)
class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }

  // 부모 클래스의 getPerimeter 메서드를 오버라이드
  getPerimeter() {
    const perimeter = 2 * (this.width + this.height);
    return perimeter
  }
}

// 사용 예시
const circle = new Circle(5);
const rectangle = new Rectangle(4, 6);

// 각각의 클래스에서 오버라이드된 getPerimeter가 호출된다.
console.log("Circle의 둘레: ", circle.getPerimeter());      // Circle의 둘레: 31.42
console.log("Rentangle의 둘레: ", rectangle.getPerimeter());   // Rectangle의 둘레: 20

JobQueue : 비동기 작업을 처리하는 대기열로, Task Queue(setTimeout, setInterval, DOM 이벤트와 같은 콜백 함수를 처리)보다 우선순위가 높은 마이크로태스크(Microtasks)(Promise의 then, catch 등)가 대기하는 큐이다.

console.log('1. Script start');

// Tast Queue
setTimeout(() => {
  console.log('4. SetTimeout callback');
}, 0);

// Micro Queue
Promise.resolve().then(() => {
  console.log('3. Promise then');
});

console.log('2. Script end');

참고자료

JS로 읽는 클린코드 (한글판)
https://silver-ye.tistory.com/

️ 과제

클린코드 Assignment #02 : 깨끗한 코드란

클라우드아실 — Sat, 30 Nov 2024 21:56:07 +0900

TIL (Today I Learned)

2024.11.30

오늘 읽은 범위

추천사 ~ 1장. 깨끗한 코드

✔ 책에서 기억하고 싶은 내용

TPM 5S철학으로 코드 바라보기
1. 정리 : 적절하게 이름 붙인다.
2. 정돈 : 누구나 예상하는 위치에 둔다.
3. 청소 : 불필요한 것은 제거한다.
4. 청결 : 일관적이게 표준화한다.
5. 생활화 : 이를 반복한다.

코드는 요구사항을 표현하는 언어다.
좋은 코드를 사수하는 것은 프로그래머들의 책임이다.
나쁜 코드가 나쁜 이유
1. 또 다른 나쁜 코드를 유도한다.
2. 개발 속도를 크게 떨어뜨린다.
3. 팀 생산성이 떨어진다.
4. 유지보수를 위한 새로운 시스템 개발을 유도한다.

나쁜 코드를 짜는 이유
1. 일정이 촉박하다.
2. 사이드 이펙트로 또 다른 버그가 발생할까 봐 기존 코드를 유지한다.
3. 이로 인해 생산성이 떨어진다.
4. 일정이 점점 촉박해진다.
빨리 업무를 끝내는 방법은 코드를 최대한 깨끗하게 유지하는 습관이다.

클린 코드
1. 성능이 좋다.
2. 가독성이 좋다.
3. 중복된 코드가 없다.
르블랑의 법칙(나중은 결코 오지 않는다)

오늘 읽은 소감은?

아직은 '클린코드' 보다는 '돌아가는 코드'를 만드는 게 우선이지만 여러 번 협업을 경험하면서 팀원의 코드에 따라 개발 속도가 확연히 달라지는 것을 경험했다. 그래서 내게 있어 클린코드를 읽고 공부하고 연습하는 이유는 내 코드가 다른 사람에게 방해가 되지 않기를 바라기 때문이다.

'코딩 책 한 권만 읽으면 이렇게 됩니다' 라는 제목의 코딩애플 유튜브에서는 클린코드를 예시로 책 한권 읽고 이를 종교처럼 떠받들면서 다른 사람에게 강요하면 안된다는 내용이다. 책을 읽으면서 이를 직접 '생각'해 보고 '의심'해 보면서 학습하기를 권유한다.
살아가면서 느끼는 부분이지만 '절대'인 것은 없다. 상황에 따라 유연한 사고를 할 줄 아는 것도 협업에서는 중요한 것이다. 그래서 나는 이 책을 통해 기술을 습득해서 다른 사람에게 이렇게 해야 한다 강요하는 사람이 되고 싶지는 않다. 다만, 클린코드가 무엇인지 배우고, 숙달이 된다면. 내가 기존의 코드를 더 클린 하게 만들 수 있다면 더 나은 방향을 직접 제시할 수 있는 사람이고 싶다.

궁금한 내용이 있거나, 잘 이해되지 않는 내용이 있다면 적어보세요.

휴리스틱(heuristic) : 경험에 기반해 어림잡아 판단하는 것. 기계와는 다른 인간의 특성이다.
스크럼(scrum) : 애자일(Agile) 방법론 중 하나로, 소프트웨어 개발 프로젝트 관리에 많이 사용한다. 스프린트를 반복하며 점진적으로 개발한다.
스프린트(sprint) : 2~4주 사이의 짧은 개발 주기로, 각 스프린트에서 팀은 구현 가능한 기능을 완료하는 것을 목표로 한다. 스프린트가 끝나면 다음 스프린트로 이어진다.
린(lean) : 개발에서 린이란 불필요한 코드를 작성하지 않고, 고객이 원하는 기능을 빠르고 효율적으로 제공하는 것을 목표로 하는 방식이다. 반복적인 개선, 피드백, 낭비 제거가 중요한 요소이다.

참고자료

JS로 읽는 클린코드 (한글판)
https://silver-ye.tistory.com/

클린코드 Assignment #01 : 구매인증

클라우드아실 — Sat, 30 Nov 2024 02:02:55 +0900

노개북 클린코드

노개북은 '노마드 개발자 북클럽' 의 약자로 노마드코더에서 진행하는 챌린지다.
한동안 '개발자라면 OOO는 읽어야 된다' 카더라로 구매해놓은 책이었는데
지금 생각해보면 당시에 읽기는 너무 난이도가 높았다..;

챌린지 진행 방식

챌린지는 책의 핵심 부분만 함께 읽는 것이 목표다.

(1) 읽어요 : 아래 스케쥴을 보고. 그날의 할당치를 읽는다. 미션/퀴즈가 있을 시 이를 수행한다.
(2) 쓰세요 : TIL 작성방법 을 참고하여, 독서기록을 작성한다.
(3) 공유해요 : 작성한 TIL 혹은 미션 완수 링크를 제출하고. 슬랙에 공유한다.

미션 : 책 구매 인증

무려 22년 구매내역이다.. (~~2년을 묵혀뒀네..)~~
이 기회에 다 읽어내도록 하겠다! 화이팅!!

윈도우 옛날 프로그램 해상도 작아지는 현상 해결하기

클라우드아실 — Tue, 22 Oct 2024 15:34:11 +0900

윈도우 옛날 프로그램 해상도 작아지는 현상

오랫동안 윈도우 7에서 사용해 오던 프로그램이 있다.
최근 윈도우 11에서 오랜만에 다시 설치해 실행해 보니, 텍스트가 너무 작게 표시되고, 크기 조절도 되지 않아 불편했다.
몇 번은 그냥 참고 사용했지만, 나중을 위해서라도 해결할 필요가 있겠다 싶어 GPT의 도움을 받아 문제를 해결하고 기록을 남긴다.

이것은 구형 프로그램이 고해상도 디스플레이 환경에서 적절하게 동작하지 않는 경우로 고해상도 DPI 설정을 조정하여 프로그램의 크기와 텍스트를 조정할 수 있다.

해결 방법

1. 해당 프로그램의 실행 파일을 우클릭하여 "속성"을 선택한다.

2. 속성 창에서 "호환성" 탭으로 이동한다.

3. "높은 DPI 설정 변경" 버튼을 클릭한다.

4. 열리는 창에서 "높은 DPI 조정 동작을 재정의" 옵션을 체크한 후, "시스템(고급)"으로 설정한다.

5. 설정을 저장한 후 프로그램을 다시 실행하면 해상도에 맞춰 조정된 프로그램을 사용할 수 있다.

압축풀기를 완료할 수 없습니다 압축폴더가 올바르지 않습니다.

클라우드아실 — Mon, 2 Sep 2024 14:22:01 +0900

압축풀기를 완료할 수 없습니다 압축폴더가 올바르지 않습니다.

압축풀기를 완료할 수 없습니다 오류 메시지

구글 드라이브에서 알고리즘 관련 압축파일을 하나공유 받았는데 윈도우의 기본 압축풀기 버튼을 누르면 오류가 발생했다.
처음에는 용량이 323KB였기 때문에 압축파일이 손실되었거나 잘못된 파일이라 생각했다.
그런데 나 빼고는 모두 정상적으로 압축을 풀었다고.. (으잉..?) 결론은

한빛출판네트워크 동일사례에 대한 설명

mac 운영체제에서 압축한 파일이라 윈도우 기본 압축프로그램으로 풀리지 않았다.
윈도우 10 이하 버전의 탐색기에서 주로 발생한다고 하는데 난 윈도우 11인데 왜..?

좀 더 찾아보니 UTF-8을 지원하지 않는 압축프로그램으로 해제를 시도하면 발생하는 오류라고 한다.
(윈도우 실망ㅡㅜ)
uft-8에 해당하는 문자가 폴더나 파일명에 포함되어 있으면 오류가 발생한다고..

반디집으로 압축해제하니 무사히 압축해제가 되었다.

반디집 다운로드 바로가기
알집 다운로드 바로가기

참고자료

네이버 블로그 일상잡기
한빛 네트워크

구글 검색 효과적으로 하는 법

클라우드아실 — Thu, 22 Aug 2024 13:19:12 +0900

저작권 문제가 발생할 수 있어 기사 링크만 기록합니다.

기사 원문 : https://www.itworld.co.kr/news/280537

“이것만 알면 검색왕” 효과적인 구글 검색을 위한 10가지 팁

쇼핑할 때나 자료 조사를 할 때, 친구와의 논쟁을 끝내려고 할 때 대부분 사람은 구글을 가장 먼저 찾는다. 하지만 수십억 개의 검색 결과 중에서

www.itworld.co.kr

개발자 블로그 꼭 해야하나.

클라우드아실 — Thu, 1 Aug 2024 14:04:04 +0900

블로그를 어떻게 활용할지 생각중이다. 20년도만 해도 신입개발자를 목표로 한다면 초보몽키님의 블로그를 참고하는 것이 대세였다. 일기 형식의 TIL로 성향을 알 수 있고, 공부내용을 기록함으로써 기술에 대한 관심과 역량도 알 수 있기 때문이었다.

출처 : https://wayhome25.github.io/til/2017/04/17/TIL/

일기를 쓰면 된다. 얼마나 심플한가. 그렇기 때문에 너도나도 블로그에 일기를 쓰고, 공부한 내용 중 사소한 것도 모두 블로그를 채우기 위해 작성했다.

출처 : https://wayhome25.github.io/javascript/2017/02/24/js-coding-style/

지금은 대부분 비공개 처리했지만 나도 배운대로 똑같이 했다. HTML 태그 하나하나에 대해서 글을 쓴 적도 있었다.(..?) 아니. 하다보니 욕심이 생겨서 글 뿐만 아니라 이미지도 집어넣었고, 링크에 링크를 타고 조사를 하다가 글 하나 쓰는데 5시간 가까이 소요된 적도 있었다. 사실 지금 이 글도 1시간째 쓰고 있는 것 같다.

100달러 벌었다

이 때 꾸준히 일정한 형식으로 글을 썼더니 애드센스도 한번에 통과했고, 이왕 애드센스를 붙였으니 검색엔진 상위에 위치시켜보자 라는 생각으로 GA와 네이버 서치 어드바이저에 블로그 정보를 등록했다. 지금 생각해보면 GA와 네이버 서치 어드바이저를 등록한 것을 블로그에 기록했어야 하는데 다른 블로그 보고 따라 등록하기 바빠서 정작 이건 기록하지 않았다-_.. 어쨌든 한창 부트캠프 열풍이 불고 있던지라 알고리즘을 타서 100달러 벌었다.(물론 지금은 해당 글도 내렸다)

계속 뒀다면 소소하게 더 벌었겠지만 현타가 왔다. 본질에 집중해야 하는데 잿밥에 관심을 더 두는 상황이랄까..? 직장을 다니면서 야간에 개발공부를 하는데 블로그 글 하나를 2~3시간씩 쓰니 부트캠프 일정은 따라가기 어려웠고 정작 부트캠프 경험담에 방문자가 몰리는 상황은 아이러니했다.

출처 : https://daco2020.tistory.com/361

이후로 대부분의 글을 비공개 처리했다. 글을 쓰다보면 '이건 너무 TMI다.' , '이건 너무 쉬운 내용인데?' 같은 경우도 있어서 퇴고를 거듭하다 중단된 경우도 있고, '노션에 썼는데 또?', '깃헙에 올려놨는데 블로그에 또 굳이?' 와 같이 여러군데 같은 내용을 의무적으로 기록하면서 허무한 경우도 있었다. 간단한 코드나 라이브러리 사용방법 등은 '요즘 GPT가 잘 대답해주는데 블로그까지 찾아와서 보는 사람이 있을까?' 같은 생각이 들어서 쓰다가 말았다. 즉, 내 블로그는 현재 상당히 많은 글들이 비공개처리 당해 숨겨져 있다.

'개발자가 블로그를 꼭 해야하나요?' 라는 질문에 대해 유튜브나 내용을 찾다보면 꽤 재미있는데 '일단 시작해서 뭐라도 적어라 쓰다보면 실력이 늘고, 앞의 글은 나중에 퇴고하면 된다.' 고 이야기 하는 사람들도 있고, '알맹이 없는 일기같은 글이나 어설픈 내용을 적을거면 하지 마라' 는 사람도 있다. 개발공부와 관련된 유튜브에서는 아무래도 학습, 복습 차원에서 전자를 이야기 하는 경우가 많고, 이력서나 포트폴리오 관련 유튜브에서는 후자가 더 많았는데 공부의 목표는 결국 취업이기 때문에 요즘은 후자가 더 힘을 얻고 있는 추세다. 사실 글을 막 싸질러 놓으면 나중에 다 찾아서 퇴고하기도 쉽지않다.

결론은 막말로 요즘은 모르는건 GPT한테 물어보면 바로 답을 얻을 수 있기 때문에 블로그는 GPT가 할루시네이션으로 답변하거나 최신 자료라 답변하지 못했던 기술, 한번에 답을 얻기 어려웠던 내용을 기록하는 학습 기록 카테고리를 생각했다. 여러가지 생각이나 잡답을 기록하는 TMI와 ~~TIL(을 가장한 개인 백로그)~~ 그리고 일부 ~~자격증 공부내용을 기록~~하는 카테고리도 필요할 것 같아서 카테고리를 다시 정리했다. (백로그가 뭔가를 한 건 아니니까 TIL도 다시 수정, 자격증 공부 내용도 깃에 따로 올릴까 싶다.) 뭔가 저작권이 문제가 될 것 같은 온라인 강의나 도서 등 모든 학습에 대한 정리는 깃헙에 private로 레포를 따로 등록하고 있다. 그런데 공부하기 위해 구매 및 무료 수강 등록한 강의가 너무 많아서(인프런 기준만 약 600개..!) TIL에 다 등록하기도 힘들 지경이라 지워나가도 지워나가도 끝이 없을 것 같지만. 한편으로는 진행하면서 성취감 장난 아닐 것 같다는 기대를 한다. 공부한 이후에 개인적으로 복습하며 구현중에 일부 내용이나 코드는 기록을 남길 것 같다.

24-07-25

클라우드아실 — Thu, 25 Jul 2024 16:28:13 +0900

할 일

UX/UI
혼공학습단(혼공스 ~ 24.08.18)
SQL 최적화 학습(KDT 오프라인 심화과정. ~ 24.10.08)
SQLD 시험(8.24 오전 10시)
- 더보기
  - 수험표 출력(8.09 오후 16시 이후)
  - 데이터 모델링의 이해
    
    데이터 모델링의 이해
    
    데이터 모델과 SQL
  - SQL 기본 및 활용
    
    SQL 기본
    
    SQL 활용
    
    관리 구문
ADSP 시험(8.10 오전 10시)
- 더보기
  - 수험표 출력(7.26 오후 16시 이후)
  - 데이터 이해
    
    데이터의 이해
    
    데이터와 정보
    
    데이터베이스의 정의와 특징
    
    데이터베이스 활용
    
    데이터의 가치와 미래
    
    빅데이터의 이해
    
    빅데이터의 가치와 영향
    
    비즈니스 모델
    
    위기 요인과 통제 방안
    
    미래의 빅데이터
    
    가치 창조를 위한 데이터 사이언스와 전략 인사이트
    
    빅데이터분석과 전략 인사이트
    
    전략 인사이트 도출을 위한 필요 역량
    
    빅데이터 그리고 데이터 사이언스의 미래
  - 데이터분석 기획
    
    데이터분석 기획의 이해
    
    분석 기획 방향성 도출
    
    분석 방법론
    
    분석 과제 발굴
    
    분석 프로젝트 관리 방안
    
    분석 마스터 플랜
    
    마스터 플랜 수립
    
    분석 거버넌스 체계 수립
  - 데이터분석
    
    R기초와 데이터 마트
    
    R기초
    
    데이터 마트
    
    결측값 처리와 이상값 검색
    
    통계분석
    
    통계학 개론
    
    기초 통계분석
    
    다변량 분석
    
    시계열 예측
    
    정형 데이터 마이닝
    
    데이터 마이닝 개요
    
    분류분석(Classification)
    
    군집분석(Clustering)
    
    연관분석(Association Analysis)
프리온보딩 챌린지 git에 정리 기록하기
- 더보기
  - 프리온보딩 프론트엔드 7월 챌린지(10.15)
  - 프리온보딩 AI 7월 챌린지(10.15)
  - 프리온보딩 프론트엔드 챌린지 6월 챌린지(9.15)
  - 프리온보딩 백엔드 챌린지 6월 챌린지(9.15)
  - 프리온보딩 프론트엔드 챌린지 5월 챌린지(8.15)
  - ~~프리온보딩 프론트엔드 4월 챌린지~~
웹디자인 기능사 시험(8.30 오전 08:30)
- 더보기
  - 출제기준 A
    
    A-1
    
    A-2
    
    A-3
    
    A-4
  - 출제기준 B
    
    B-1
    
    B-2
    
    B-3
    
    B-4
  - 출제기준 C
    
    C-1
    
    C-2
    
    C-3
    
    C-4
  - 출제기준 D
    
    D-1
    
    D-2
    
    D-3
    
    D-4
  - 출제기준 E
    
    E-1
    
    E-2
    
    E-3
    
    E-4
  - 출제기준 F
    
    F-1
    
    F-2
    
    F-3
    
    F-4

실제 이력서 사례로 알아보는 [합격하는 이력서] 작성 가이드 - 워니
- 더보기
  - ~~섹션 0. Intro (1개 ∙ 12분)~~
  - 섹션 1. 이력서를 작성하기 전에 (4개 ∙ 29분)
  - 섹션 2. 이력서 작성하기 (8개 ∙ 49분)
  - 섹션 3. 이력서 작성 후 (3개 ∙ 21분)
  - 섹션 4. 실제 이력서 개선하기 (3개 ∙ 36분)
  - 섹션 5. FAQ (2개 ∙ 13분)
  - 섹션 6. Outro
비전공자를 위한 데이터베이스 입문 - 강진영
- 더보기
  - 섹션 1. 데이터와 데이터베이스
    
    1. 데이터베이스의 개념
    
    2. 파일 시스템과 데이터베이스 시스템
    
    3. MySQL 소개와 설치
  - 섹션 2. 좋은 데이터베이스
    
    1. 데이터 규칙
    
    2. 데이터 정제
  - 섹션 3. 데이터베이스 지도
    
    1. ERD 표기법 이해
    
    2. ERD 그리기
    
    3. 테이블을 ERD로 변환하기
  - 섹션 4. 데이터관리
    
    1. 데이터 처리 표준어: SQL
    
    2. MySQL 스키마
    
    3. 데이터 정의서
    
    4. 데이터 조작어
  - 섹션 5. 한 테이블에서 데이터 조회
    
    1. 데이터 기본 조회
    
    2. 데이터를 필터링하는 WHERE 절
    
    3. 특정 기준으로 데이터를 정렬하는 ORDER BY
  - 섹션 6. 여러 테이블에서 데이터 조회
  - 부록
진짜 게으른 사람이 쓴 게으름 탈출법
- 더보기
  - 프롤로그.
  - LEVEL 0. 나의 게으름 연대기
  - LEVEL 1. 늘 내가 게으른 이유
  - LEVEL 2. 깨어난 후부터 잠들기 전까지, 생활 패턴 바꾸기
  - LEVEL 3. 고정 일과를 만들어야 움직인다
  - LEVEL 4. 사람은 쉬운 일은 계속 한다
  - LEVEL 5. 변화는 옷 세 바구니를 버리면서 시작됐다
  - LEVEL 6. 아주 오래된 감정습관 바꾸기

윈도우11 캡처 도구 활용법

클라우드아실 — Tue, 11 Jun 2024 08:52:51 +0900

1. 동영상 캡처

빨간색 비디오 버튼을 누르면 동영상 캡처모드가 된다.

특정한 프로그램을 설치하지 않아도 윈도우 내장 프로그램인 캡처 도구로 동영상캡처가 가능하다.

동영상 캡처

이렇게 범위를 지정하고 영상을 간단하게 녹화할 수 있다.
프로젝트 후 ppt 제작시 기능을 영상으로 만들어야 할 때 편리함.

우측 상단에 Clipchamp에서 편집 버튼이 있다.

원하는 동영상을 캡처하고 정지버튼을 누르면 위와 같은 결과 창이 나타난다.

2. gif 변환

우측 상단의 Clipchamp에서 편집 버튼을 누르면 윈도우 내장 프로그램인 Clipchamp로 연동되는데 영상 편집이나 gif로 변환 저장할 수 있다.(그런데 화질이..)

어도비 익스프레스가 무료이면서 성능이 훨씬 좋아서 그냥 어도비를 쓰고 있다.

3. 이미지 캡처

기본 결과화면. 좌측 하단부터 순서대로 볼펜, 형광펜, 지우개 아이콘이 배치되어 있다.

이미지는 캡처시 위와 같이 다른 결과화면이 나타난다.
좌측 하단의 툴 아이콘으로 이미지에 바로 표기를 할 수 있다.
그리고 캡처도구 창에서 Ctrl + C를 누르면 클립보드에 저장되고,
노션이나 캔바, 티스토리 등 웬만한 곳에서는 Ctrl + V시 이미지 첨부버튼을 누르지 않아도 바로 붙여넣기가 된다.(!)

노마드코더 챌린지 기록하던 중 활용

심지어 README.md 작성할 때도 혹시 몰라서 Ctrl + V 하니 프로젝트 폴더 내에 파일 저장 및 경로 설정까지 알아서 된다.

이미지 자르기, 그림판 이동

4. 이미지 편집

하단에 자르기 버튼을 누르면 해당 이미지의 상하좌우 중 불필요한 부분을 잘라낼 수 있다.
좀 더 디테일한 편집이 필요하다면 우측 상단의 그림판 아이콘을 누른다.
캡처한 이미지를 바로 편집할 수 있게 그림판과 연동된다.

5. 텍스트 추출(★)

텍스트 추출 버튼 위치와 결과

텍스트 추출버튼이 캡처도구에 기본 내장되어 있다.
OpenAI의 최대 투자자인 마이크로소프트답게 AI에 진심임.
이미지 출처는 복사방지를 해제하는 방법에 대해 복사방지를 걸어놓은 블로그 글 이며 해당 블로그의 텍스트를 추출해봤다.
공부하다 보면 복사방지 글의 내용을 별도로 기록하고 싶을 때가 있는데 이 때 유용하게 사용하고 있다.

6. 눈금자, 각도기

기존에는 볼펜과 형광펜 기능이 있어도 직선을 그리기 어려워 잘 사용하지 않았다.

눈금자 기능을 사용하면 볼펜툴로 밑줄치기, 형광펜으로 마킹하기가 수월하다.

눈금자로 밑줄 직선으로 긋기와 각도기로 원 그리기

마우스 휠을 이용시 눈금자는 각도 조절이 되고, 각도기는 사이즈가 확대/축소된다.

~~근데 그림판에서 편집하는게 더 익숙함.~~

7. 도형(★)

캡처도구 창의 크기에 따른 아이콘 위치.

어느날 갑자기 아이콘이 생겼는데 24년 2월 정도부터 제공된 기능이라고 한다.
아마 내 컴퓨터에 윈도우 업데이트가 제날짜에 처리가 안되면서 아이콘이 늦게 생긴 듯;

그림판으로 이동하지 않고 바로 도형으로 강조하려는 부분을 표기할 수 있다.
가려야 하는 부분을 마스킹할 때도 채우기 기능을 활용할 수 있다.

1일차

클라우드아실 — Thu, 16 May 2024 22:05:13 +0900

TIL (Today I Learned)

2024.05.16

오늘 읽은 범위

첫째마당 기획, 첫발을 내딛다(~p.22)

책에서 기억하고 싶은 내용

01. IT 기획의 필수 개념 알기

IT 기획자란?
- 달성할 목적을 설정하고, 그 목적이 이루어질 수 있도록 연구하고 계획을 세우며 실행하는 사람
기획이란?
- 목적, 계획, 실행을 모두 포함하는 개념
단계별 개념
- 목적 - 사람들에게 필요한 서비스가 무엇인지 고민
  - 필요성, 주 이용자, 시장분석, 더 나은 서비스에 대한 고민
- 계획 - 서비스 제공을 위해 필요한 것과 해야할 것을 나열해보고, 필요한 시간을 가늠
  - 필요한 자원, 업무의 배분과 일정을 순서대로 정리
  - 예상 출시일이나 예산에 따라 계획 변경이나 기획 재고 등 결정
- 실행 - 계획한 것을 실행하면서 리스크 관리
  - 기획, 디자인, 퍼블리싱, 개발, 테스트와 품질 보증 단계로 진행
- 실행의 세부 단계
  - 기획
    - 기능 정의
    - 정책 정의
    - 화면 설계
  - 디자인, 퍼블리싱, 개발, 테스트 단계
    - 기획 의도에 부합하는지
    - 예상하지 못한 문제에 대해 대책 마련 및 기획 내용 교정
    - 기능 테스트
IT 기획자의 구분과 역할
- 서비스 기획자
- 구축 기획자
- 운영 기획자
서비스 기획자의 역할
- 필요한 서비스 구상(세상에 없던 서비스나 불편한 점을 개선한 서비스)
- 서비스 정의
- 수익 모델 설계
- 이용 프로세스 설계
- 프로토타입 설계
- 서비스 기획서를 산출
구축(SI) 기획자의 역할
- 서비스 분석 - 요구 사항 분석(의뢰자와 함께 고민하고 화면을 설계하는 업무)
- 화면 설계 - 이용 프로세스 정리 및 화면 정의서 작성
- 디자인, 퍼블리싱 단계
- 개발, 테스트 단계
- 화면 정의서 산출
운영(SM) 기획자
- 실제 운영에 필요한 대부분의 업무 진행(제작이 완료된 사이트를 개선하는 업무)
- 상품 상세 화면 기획
- 이벤트 기획
- 마케팅 지원
- 사업 지원
- 운영 기획서 산출

오늘 읽은 소감은?

팀 프로젝트를 하면서 개발 이외에 기획도 같이 하게 되는데 모르고 했던 작업들이 이렇게 세세하게 분류되어 있다는 것에 놀랐다. SI와 SM의 의미에 대해서도 정확하게 알게 되었다.

궁금한 내용이나 잘 이해되지 않는 내용은?

실제 현업에서도 대기업들은 이렇게 세세하게 기획자를 분류하는지, 중소기업에서는 실제 어떻게 업무가 진행되고 있는지 궁금하다.

정적 타입 언어와 동적 타입 언어, 강타입 언어와 약타입 언어

클라우드아실 — Tue, 19 Mar 2024 09:00:34 +0900

출처 : 이건 벨로그Jee

정적 타입 언어(Static Typed Languages)

변수가 선언될 때 타입이 결정된다.
프로그램이 실행되기 전에, 컴파일 시간에 변수의 타입을 검사하며, 타입 에러는 주로 컴파일 시간에 발견되기 때문에, 실행 전에 많은 오류를 방지할 수 있다.
예: C, C++, Java, Rust 등

동적 타입 언어(Dynamic Typed Languages)

변수의 타입이 실행 시간에 결정된다.
타입 검사가 실행 시간에 이루어지며, 변수는 여러 타입의 값들을 담을 수 있다.
타입 에러는 프로그램이 실행될 때 발견될 수 있으며, 런타임 에러로 이어질 수 있다.
예: Python, JavaScript, Ruby 등

이 두 타입 시스템 간의 주요 차이는 타입의 안정성과 유연성에 관한 절충에서 발생한다.
정적 타입 언어는 보통 더 안정적이고 예측 가능하지만, 더 많은 코드 작성을 요구할 수 있다.
반면, 동적 타입 언어는 더 유연하고 개발 속도가 빠를 수 있지만, 런타임 오류의 가능성이 더 높다.

강타입 언어

다른 형끼리의 변환이 금지되어있고, 만약 변환을 하고 싶다면 명시적으로 타입을 선언해줘야한다.
(자료형이 맞지 않을 시 에러 발생)

예 : Java, Python, Ruby

약타입 언어

다른 형끼리의 변환이 가능하며, 암묵적으로 변환을 해주기도 한다.

예 : C, JavaScript, PHP

정리

자동 형 변환 가능 유무에 따라 강타입 / 약타입
자료형의 결정 시점에 따라 정적 타입 / 동적 타입 언어

비전공자를 위한 이해할 수 있는 IT 지식 10일차

클라우드아실 — Wed, 6 Dec 2023 21:56:52 +0900

TIL (Today I Learned)

2023-12-05

오늘 읽은 범위

10장 정리

책에서 기억하고 싶은 내용

1. 개발을 시작하면 일어나는 일들
오늘날 IT 세상에 다양한 기기들이 있지만 공통점은 컴퓨터라는 점이다. 프로그램 중 운영체제는 각 부품의 제어를 대신해준다. 이 운영체제를 기반으로 하는 개발자를 클라이언트 개발자라고 한다. 반면, 데이터를 가공, 보관, 응답 처리하는 서버 컴퓨터는 리눅스라는 운영체제를 주로 이용한다. 안정적이고 무료기 때문이다. 이 서버 컴퓨터용 운영체제를 기반으로 하는 개발자를 서버 개발자라고 한다. 이 둘은 특정한 주소와 메소드로 이루어진 API를 통해 요청과 응답을 주고 받는다.

2. 아웃트로
IT의 발달은 IT 뿐만 아니라 택시, 금융, 유통 등 다른 산업군에도 영향을 미친다. 주문을 키오스크로 하는 음식점도 눈에 띄게 늘고 있다. 이는 어쩔 수 없는 시대적 흐름이다.

오늘 읽은 소감은?

어쩔 수 없다는게 가장 맞는 말인 것 같다. 이렇게 빨리 기술이 발전할줄 알았을까. 하지만 흐름은 멈추지 않을 것이고, 다양한 생활영역에 융화되어 삶을 변화시킬 것이다. 결정할 수 있는 것은 변화를 맞이할지 변화에 휩쓸려갈지 뿐이다.
드디어 책을 다 읽었다. 마지막 챕터 약 4페이지 가량의 내용이 이 책 전체를 압축한 프로세스여서 만약 실수라도 맨 뒷부분을 먼저 봤다면 흥미가 떨어져서 다 못읽었을 것 같았다. 그런데 쉬운 내용이 대부분이라 이거를 글로 남기는게 맞나 싶기도..;

궁금한 내용이나 잘 이해되지 않는 내용은?

없음!

※ 이 글은 비전공자를 위한 이해할 수 있는 IT 지식 - 최원영 저자를 기본 출처로 개인적인 공부내용을 요약한 것입니다.

비전공자를 위한 이해할 수 있는 IT 지식 9일차

클라우드아실 — Tue, 5 Dec 2023 21:50:57 +0900

TIL (Today I Learned)

2023-12-05

오늘 읽은 범위

9장 협업, 소스관리, 디자인

책에서 기억하고 싶은 내용

1. 커밋이요? 머지요? 뭐요?
깃은 '리누스 토발즈'가 개발한 프로그램이다. 커밋(commit)은 현재까지의 개발단계를 표기해두는 것으로 메모와 함께 기록한다. 깃은 이런 기록과 기록 사이의 변화와 기록 내용, 담당자 등 모든 기록을 추척할 수 있도록 되어 있다. 추후 이전 단계로 롤백 해야하거나 여러 버전 중 하나를 선택해야 할 때 이런 기록을 토대로 코드를 옮겨 다닐 수도 있다.
깃에는 브랜치와 머지라는 기능이 있다. 예를 들어 하나의 프로젝트로 버전1, 버전2, 버전3과 같이 여러 형태로 개발할 때 브랜치를 각각 나눠서 개발을 진행하고 진행 상황을 기록할 수 있다.
머지는 작업한 결과를 합치는 것이다. 예를 들어 두명이 상,하단으로 나눠서 하나의 작업물을 같이 작업하는 경우.
시작은 같은 코드를 가지고 진행하더라도 두명의 결과물은 달라지게 된다. 이 때 두 결과물을 하나의 완성본으로 합치는 것이 머지다.

2. 왜 말을 저렇게 하지? 둘이 싸웠나?(feat. 디자이너와 개발자)
개발자는 디자이너가 사용하는 툴에 익숙하지 않기 때문에 디자인에 개발 가이드를 요구하게 되었다.
디자이너는 가이드를 만들다보니 디자인에 시간을 뺏기다보니 개발자와 갈등이 생기게 됩니다.
서로 대화가 가능한 문화를 만들어야하고, 서로에 대한 공부가 필요합니다. 개발자와 디자이너는 이해를 통해 협업해야 합니다. 경계를 완벽히 가를 순 없습니다.

오늘 읽은 소감은?

디자인 시안을 피그마로 처음 봤을 때 각종 정보가 다 있어서 너무 신기했다. 그대로 개발하면 되니 세상 편해졌다고 생각했는데, 디자이너 입장에서는 일을 두번한다는 느낌이겠다. 하지만 개발이 제대로 안되면 어차피 또 만나서 이야기해야 하니까 지금처럼 피그마로 시안을 받는 프로스세가 맞다고 생각하고, 요즘에는 피그마 개발자모드도 있어서 더 편해진 것 같지만.. 협업은 항상 힘든 것 같다.

궁금한 내용이나 잘 이해되지 않는 내용은?

없음!

※ 이 글은 비전공자를 위한 이해할 수 있는 IT 지식 - 최원영 저자를 기본 출처로 개인적인 공부내용을 요약한 것입니다.

비전공자를 위한 이해할 수 있는 IT 지식 8일차

클라우드아실 — Mon, 4 Dec 2023 22:00:00 +0900

TIL (Today I Learned)

2023-12-04

오늘 읽은 범위

8장 프레임워크와 라이브러리

책에서 기억하고 싶은 내용

1. 코코아요? 그거 먹는 거잖아요. 그리고 자꾸 왜 도서관 얘기를 하는거죠?(프레임워크, 라이브러리)
프레임워크는 개발을 더 빨리 할 수 있도록 도와주는 기본 틀과 같다. 페이스북이나 구글 같은 회사에서 만들기도 하고, 개인이 만들기도 한다. 해당 회사의 앱을 프레임워크를 통해 빨리 개발하면 그만큼 양질의 앱을 더 많이 확보할 수 있기 때문에 회사에서 프레임워크를 제공하는 측도 있다. 라이브러리는 다른사람들이 만들어 놓은 코드모음이다. 프레임워크는 그 틀을 벗어날 수 없지만, 라이브러리는 필요한 부분들을 조합해서 쓸 수 있다.

오늘 읽은 소감은?

예전에는 프레임워크와 라이브러리를 구분하기 힘들었는데 프레임워크가 더 큰 범주에 속한다는 걸 알게 된 후로는 더이상 헷갈리지 않는다. 사실 프론트엔드 개발에 바닐라자바스크립트 실력도 중요하겠지만, 회사입장에서는 개발기간을 단축해서 이윤을 남기는게 목표다. 따라서 빠르게 개발할 수 있는 프레임워크와 라이브러리를 잘 다루는게 중요할 수밖에 없다. 나 역시 그랬지만 처음 개발공부를 할 때 바닐라자바스크립트를 100% 공부하고 프레임워크나 라이브러리를 공부하겠다고 다짐하는 경우가 있는데 100% 공부라는 건 없으니 어느정도 자바스크립트를 공부했으면 빨리 프레임워크가 라이브러리를 공부하는게 취업에 더 유리하다.

궁금한 내용이나 잘 이해되지 않는 내용은?

대부분의 단원이 짧고 예시와 설명이 잘 되어있어서 사실 궁금한 내용이 거의 없다...
독서록 양식을 바꿔야 하나 싶을 정도..ㅜㅜ

※ 이 글은 비전공자를 위한 이해할 수 있는 IT 지식 - 최원영 저자를 기본 출처로 개인적인 공부내용을 요약한 것입니다.

비전공자를 위한 이해할 수 있는 IT 지식 7일차

클라우드아실 — Sun, 3 Dec 2023 21:43:04 +0900

TIL (Today I Learned)

2023-12-03

오늘 읽은 범위

7장 데이터베이스와 이미지 처리

책에서 기억하고 싶은 내용

1. 쇼핑몰을 생각해봅니다. 여기서 데이터는 대체 뭘까요?

쇼핑몰에서 회원정보, 아이디, 주문 상품, 가격 등 서로 관계가 이어진 텍스트를 데이터라 한다. 많은 데이터 중에서 0.001%라도 오류가 발생한다면, 이 후 누적된 오류는 걷잡을 수 없는 큰 오류와 피해를 발생시킨다. 이처럼 데이터는 단 1%의 결점도 없어야 한다. 이를 무결성이라 한다. 따라서 데이터를 다루는 사람들은 보수적일 수밖에 없다.

출처 : 교보문고

이런 데이터를 관리하는 주요 방법론이 '관계형 데이터베이스'이다. 쉽게는 엑셀처럼 행렬로 관리한다고 생각하면 된다. 관계형 데이터베이스에서는 엑셀의 각 영역에 비추어 Sheet를 테이블(Table)이라고 표현하고, 엑셀 파일 자체는 스키마(Schema) 혹은 데이터베이스(Database)라고 표현한다. 관계형 데이터베이스 관리 시스템을 RDBMS라고 부르며, MSSQL, Oracle DB, MySQL, MariaDB 등 다양하게 존재한다.

2. 클라가 들고 있다는게 뭐죠?(클라에 저장돼요. 클라가 가지고 있어요)
데이터는 클라이언트에도 저장할 수 있다. 예를 들어 알람의 경우 모든 사람들이 개별적으로 등록한 정보에 따라 동작한다. 즉, 이는 클라이언트에 있는 데이터다. 앱에 접속시 모든 사람들에게 동일하게 나타나는 정보는 서버에 있는 데이터다. 하지만, 상황에 따라 둘 다 가지고 있다던지, 여러 상황이 있을 수 있기 때문에 결과물을 확인하는 것만으로는 명확하게 구분할 수 없다. API문서를 통해서 명확한 확인이 가능하다. 이를 구분하는 이유는 정확한 요청을 정확히 담당자에게 하기 위함이다.

3. 배너 좀 바꾸려는데, 자꾸 자기한테 말하면 안 된대요(왜 자꾸 사람이 바뀌는 건데..)
클라이언트에 이미지를 두면 네트워크를 통하지 않아도 빠르게 확인할 수 있다. 하지만 변동성이 있는 이미지(가격 정책 등)를 클라이언트에 두면 안된다. 고객이 다운로드할 때까지 수정되지 않기 때문이다. 따라서 이미지를 서버와 클라이언트 중 어디에 둘 지는 이미지의 성격에 따라 달라진다.

오늘 읽은 소감은?

이미지 뿐만 아니라 영상 같은 고용량의 데이터를 처리할 때 클라이언트와 서버 중 어디에 둘 지 고민하게 된다. 기획자나 일반인은 잘 모르는 부분이지만 이해하기 쉽게 설명이 되었고, 데이터를 다루는 사람들이 보수적인 이유도 잘 설명되었다. 그런데 이 책만 보면 DB는 절대 수정 불가하다고 생각할 수도 있을 것 같다.ㅎㅎ

궁금한 내용이나 잘 이해되지 않는 내용은?

데이터베이스에 대해서 좀 더 상세한 공부가 필요하다. 형태가 엑셀과 비슷하다 정도는 알고 있는데 구축한 이후에 수정이 어렵다는게 어떤 의미인지 잘 와닿지 않는다.

※ 이 글은 비전공자를 위한 이해할 수 있는 IT 지식 - 최원영 저자를 기본 출처로 개인적인 공부내용을 요약한 것입니다.

비전공자를 위한 이해할 수 있는 IT 지식 6일차

클라우드아실 — Thu, 30 Nov 2023 22:11:20 +0900

TIL (Today I Learned)

2023.11.30

오늘 읽은 범위

6장 웹

책에서 기억하고 싶은 내용

1. 웹은 어떻게 이루어져 있고, 어떻게 동작할까?
1) 웹의 기본

: 운영체제와 프로그램에 상관없이 일정한 형식이 언제나 동일하게 보이도록 하기 위해 HTML이 탄생했다. 정보 전달에만 초점을 맞추다보니 디자인을 입힐 수 있는 CSS가 탄생했고, 이 둘을 모두 작업하는 것을 퍼블리싱 작업이라고 한다. 최근 시맨틱 태그의 중요성이 강조되면서 HTML을 더 구조적으로 작업하는 것을 마크업 작업, 이런 작업을 주로 하는 분들을 마크업 개발자 라고 하기도 한다.

로그인, 회원가입, API를 통한 json 정보를 서버와 주고 받는 것은 별도의 프로그래밍 언어가 필요하며, 웹에서는 JavaScript를 이용한다. HTML과 CSS는 이 부분을 처리할 수 없기 때문에 프로그래밍 언어가 아니라는게 일반적인 관점이다.

크롬의 개발자도구를 이용해 Network 탭에서 데이터 전송 속도를 바꿔서 테스트해보거나, http 상태 코드 결과에 대해 확인할 수 있다.

Elements 탭에서는 작성된 HTML이나 CSS를 수정해볼 수 있는데 새로고침 하면 즉시 원상복구 된다.

이는 앱과 달리 웹페이지는 모두 서버의 원본 데이터를 복사해서 받아오는 사본이기 때문이다.

이처럼 웹은 앱의 심사 과정이 없기 때문에 서버에 원본 데이터를 교체하면 심사 없이 변화가 반영된다.

단, 유저가 업데이트 된 정보를 다운로드 해야 하는 것은 동일하나, 웹은 '새로 고침' 이나 '페이지 이동' 이 곳 새로운 다운로드를 의미하기 때문에 빠르게 반영된다.

반대로 웹은 그만큼 네트워크의 영향을 많이 받기 때문에 인터넷이 느리면 급격히 이상해진다.

앱은 웹보다는 효율적으로 네트워크의 영향을 조금 받도록 만들 수 있다. 예를 들어 앱 설치 후 오프라인에서 어플을 사용하다가 온라인 상태가 되면 동기화처리하는 방식을 들 수 있다.

2. 웹 개발하다가 못 해 먹겠다고 말하는 이유
2) 브라우저

: 웹의 기본이 되는 HTML, CSS, JavaScript는 브라우저에서 동작한다. 대표적으로 크롬, 익스플로서, 파이어폭스, 오페라, 사파리 등이 있으며, 다운로드해 설치 후 이용한다.

설치한다는 건 브라우저도 하나의 앱이라는 의미다. 사용자에 따라 버전이 다를 수 있고, 사용하는 브라우저 종류 자체가 다를 수도 있다. 이 문제를 '브라우저 버전의 파편화' 라고 한다.

문제 해결을 '파편화를 잡는다'고 표현한다. 해외에 'caniuse.com'이라는 사이트가 유명한데, 특정한 기술이 사용 가능한지 확인할 수 있는 사이트다. 모두를 만족시키기 보다 '점유율'에 따라, 국내 서비스라면 국내 사용자 점유율에 따라 선택하는 편이 좋다.

3) 반응형으로 코딩하면 더 비싸나요?(그게 뭔데요?)

: 과거 웹 페이지들은 양 옆을 빈 공백으로 자르고, 가운데에 콘텐츠가 모인 형태로 디자인 되었다. 시간이 흘러 스마트폰, 태블릿 등 기술의 발전과 다양한 기기가 생겨났고, 하나의 CSS로 다 해결할 수 없는 상황이 되었다.

이런 불편함을 해결하기 위해 등장한 기술이 '반응형 웹'이다.

이름이 '반응형' 인 이유는 브라우저의 가로 넓이에 '반응'하여 구성 요소가 변하기 때문이다. 반응형 웹페이지는 브라우저의 크기를 변경했을 때 기본적인 색상은 유지하면서 레이아웃이 변한다. UI나 UX 측면에서는 좋지만, 개발하는 입장에서는 기기의 넓이에 따른 CSS를 추가로 코딩해야 하기 때문에 작업 시간과 비용이 더 많이 들어가게 된다.

4) 애플리케이션 이야기를 하는데, 왜 자꾸 웹 개발자에게 말하라는 거죠?

: 유명한 브라우저 중 익스플로러(현재는 엣지), 사파리의 경우 각각 마이크로소프트, 애플에서 만들었다. 브라우저의 점유율은 곧 영향력, 돈으로 연결되기 때문에 각 회사는 점유율을 높이고 싶어 한다. 그렇기 때문에 맥을 구입하면 해당 맥 운영체제에는 사파리가, 윈도우는 익스플로러(엣지)가 기본 내장되어 있다.

운영체제 안에 브라우저가 내장되자 앱의 특정 부분을 브라우저로 처리하는 혼합된 앱이 생겨난다. 운영체제에 따라 정해진 언어를 사용해 제작한 앱을 '원주민' 이라는 뜻을 가진 '네이티브' 앱이라고 하고, 이렇게 혼합형 앱을 '하이브리드 앱'이라고 한다.

'하이브리드 앱'의 경우 브라우저 부분의 장점인 수정의 용이성이 있지만, 네트워크가 느리면 해당 부분의 화면이 빨리 보이지 않아 UX 측면에서 좋지 않다. 반면 네티이브 앱의 경우 운영체제별로 다른 프로그래밍 언어를 통해 수정한 뒤 심사신청 하는 등, 여러 단계를 거쳐야 하며, 심사가 끝나도 사용자가 업데이트를 직접 해야 하는 불편함이 있지만, 네트워크를 최소한으로 이용하도록 코딩하면 인터넷이 느린 환경에서도 빠르게 동작한다.

화면만 보고 이 둘을 확실히 구분하기는 어려우나 HTML 태그의 애니메이션 효과나 API문서를 살펴보는 것으로 구분할 수 있으며, 이에 따라 적합한 개발자에게 문의해야 한다.

오늘 읽은 소감은?

브라우저에 상관없이 사용자가 동일한 웹 페이지를 경험할 수 있도록 하는 크로스브라우징 이슈가 다뤄졌다. 시맨틱 태그의 중요성 때문에 예전처럼 표면적으로 큰 차이가 느껴지지는 않을 것이다. 하지만 아직 많은 회사들은 과거의 레거시 코드를 바탕으로 서비스를 제공하고 있을 것이고, 따라서 크로스브라우징 이슈는 현재 진행형이다.

기획자 입장에서 설명한 반응형 웹에 대해서도 인상깊었다. 최근 관계자에게 반응형 웹 수주가 개발자 입장에서는 좋지 않을 수 있다는 의견을 들었던 터였다. 비유하면 반응형 웹은 맞춤정장으로 코드의 재활용성이 떨어지고, 일반적으로 기업은 처리 기간이 늘어날 경우 개발자의 숙련도를 의심하지 비용을 더 지불할 의사는 없다는 것이었다.

※ 이 글은 비전공자를 위한 이해할 수 있는 IT 지식 - 최원영 저자를 기본 출처로 개인적인 공부내용을 요약한 것입니다.

비전공자를 위한 이해할 수 있는 IT 지식 5일차

클라우드아실 — Wed, 29 Nov 2023 21:01:21 +0900

TIL (Today I Learned)

2023.11.29

오늘 읽은 범위

5장 애플리케이션

책에서 기억하고 싶은 내용

1. 설치한 뒤 실행하는 애플리케이션의 특징
애플리케이션이란?

: 설치해서 사용하는 모든 프로그램을 의미한다.

시대나 사용기기에 따라 응용 프로그램, 앱, 어플리케이션 이라는 명칭으로 부르기도 하나 모두 같은 의미이다.

앱은 일반적으로 버전 업데이트 이슈가 있더라도 일정기간 업데이트를 하지 않은 채로 사용할 수 있다.

그런데 예를 들어 게임의 10,000원 아이템이 11,000원으로 갱신되어야 할 때, 이런 정보가 앱 자체에 있다면? 신규 설치자와 업데이트 하지 않은 기존 사용자간에 아이템 가격차가 발생하고, 이는 큰 문제로 이어질 수 있다.

그렇기 때문에 상황에 따라 변동 가능한 정보는 보통 앱에 바로 넣지 않고 API로 서버에서 불러와 갱신한다.

모바일 기준으로 앱 생태계는 '앱 마켓'을 이용해 검색하고 다운로드 하며, '앱스토어', '구글 플레이 스토어'가 대표적이다. 각각 애플, 구글의 룰을 따르며, 회사간 조금씩 차이가 있다. 하나의 예시로 애플의 경우 앱을 마켓에 등록하기 위한 사전 심사가 깐깐하기 때문에 심사 기간이 길 수 있다. 하지만 대부분의 앱이 정상 동작하고 깔끔하다. 구글 플레이 스토어는 반대로 상대적으로 심사가 느슨해 앱의 수는 더 많으나 일부 수준미달의 앱이 있을 수 있다.(저자 의견입니다.)

오늘 읽은 소감은?

하루 1장씩 읽는게 목표인데 오늘 짧아서 너무 좋다.ㅎㅎ 이전 챕터에서 논의됐던 대로 현재 앱 생태계는 구글과 애플이 주도하고 있다. 각 회사의 향후 정책 방향에 따라 사용언어를 바꾸거나 개발환경을 바꿔야 될 수도 있다는 점에서 개발자라면 관련 이슈에 항상 민감할 수밖에 없겠다. 윈도우가 독점한 운영체제 시장에서 리눅스를 만들어낸 리누스 토르발스처럼. 브라우저계에 혜성같이 등장한 구글의 크롬처럼. 모바일 앱 계에도 언젠가는 새로운 무엇인가가 등장하지 않을까? 기대해본다.

※ 이 글은 비전공자를 위한 이해할 수 있는 IT 지식 - 최원영 저자를 기본 출처로 개인적인 공부내용을 요약한 것입니다.

비전공자를 위한 이해할 수 있는 IT 지식 4일차

클라우드아실 — Tue, 28 Nov 2023 22:04:16 +0900

TIL (Today I Learned)

2023.11.28

오늘 읽은 범위

4장 API와 JSON

책에서 기억하고 싶은 내용

1. POST는 뭐고, GET은 뭐죠?(feat. 개발자의 암호문)
클라이언트는 서버에게 요청을 보낸다. 서버는 요청이 어떤 내용인지 구분할 수 있는 체계가 필요한데 이를 API라고 한다. API는 서로 다른 프로그램에서 요청과 응답을 주고받을 수 있게 만든 체계이다. 어디로 요청을 보내는지에 따라 어떻게 응답할지 미리 정해놓아야 하는데 예를 들어 클라이언트가 서버주소/A 라는 요청을 보내면 서버에서는 내용을 확인 후 로그인처리하는 식이다. 이런 서버 주소 정의와 경로 등은 백엔드에서 주도한다. 클라이언트는 크게 CRUD(Create, Read, Update, Delete)로 요청하게 된다. 특정한 사이트에 회원 프로필 이미지를 등록하는 상황이라고 생각해 보자. 각 요청은 아래와 같다.

Create - 사진 업로드
Read - 업로드 된 사진이 화면에 나타나게 읽기
Update - 다른 사진으로 변경
Delete - 사진 삭제

이런 CRUD는 각각의 주소를 가지는데 잘못 구성할 경우 중복되거나 관리가 어려워지는 상황이 발생한다. 예를 들어 create라는 주소를 사진 업로드에 배정했지만 create 자체는 어떤 생성을 의미하는지 명확하지 않다. 예시로 든 사진 이외에도 메시지, 이모티콘, 신규 글, 좋아요 같은 추천 등록 등 클라이언트의 요청 중 생성의 카테고리에 들어가는 요청은 상당히 많을 것이다. 따라서 좀 더 체계적으로 API를 관리하자는 운동에 따라 RESTful API가 탄생한다.

서버에서도 요청에 대해 검증하게 되는데(예를 들어 비밀번호가 틀렸다던지, 이미지를 업로드 요청했으나 확인시 다른 종류의 파일이 요청됐다던지) 각 기능을 담당하는 부서가 여러 개면 검증결과 표현도 다 다를 수 있다. 이를 특정한 세 자리 숫자로 표현하기로 하는데 이를 'http 상태 코드'라고 한다. 일반인들도 없어진 사이트나 세부 주소가 잘못 입력된 사이트로 접속 시 404 상태코드 화면이 나오는 것을 본 적 있을 것이다.

출처 : github

누군가 제작한 API를 이용해 특정한 기능을 구현할 수도 있는데 예를 들어 지도 API를 연동하면 따로 기능을 개발할 필요 없이 정해진 방식의 코드를 입력하면 앱에서 지도 기능이 구현되는 식이다. 이런 도구를 SDK(Software Development Kit)라고 한다.

2. 요청과 응답을 주고 받을 때의 형식
클라이언트가 요청과 응답을 할 때는 정해진 양식을 사용한다. 현재 가장 유명한 형식은 JSON으로 아래처럼 중괄호 내에 콜론기호를 구분기호로 키와 값으로 구성한다.

{
  "id" : "abc",
  "pw" : "a123"
}

3. API 문서 살펴보기
기업이나 정부에서 무료로 제공하는 API를 Open API라고 한다. 책의 API 예시는 저작권에 위배될 것 같고 네이버 오픈 API 중네이버 카페 API 명세, 카페 튜토리얼 링크를 걸어둔다. 글쓰기, 삭제 같은 기능별 코드와 변수명, 상황별 페이지 이동, 응답 코드 등 어려운 부분도 많지만 책에서 알게 된 내용도 많이 나온다.

오늘 읽은 소감은?

RESTful API는 REST 원리를 따르는 API를 시스템을 의미한다. REST API는 체계적일 API 관리를 하자는 운동이다. 예를 들어 블로그 작성 시 신규 글 작성 등록은 CURD 중 Create(생성) 일 것이다. 업로드된 글이 화면에 나타나는 Read, 글을 수정 후 다시 등록 시 Update, 글 삭제 시 Delete가 되는데 이를 각각의 행동(동사)으로 구분하지 말고 blog/create, blog/delete처럼 카테고리(명사)로 분류 시 좀 더 관리가 쉽다. Open API에 대해서 알고는 있었지만 API 명세를 살펴본 건 처음이었는데 얼마 후 미니 프로젝트를 앞두고 있어서 굉장히 큰 도움이 되었다. 추후에도 여러 프로젝트 시 API명세를 작성할 때 예시로 활용하려고 한다.

궁금한 내용이나 잘 이해되지 않는 내용은?

다음 주에 프로젝트를 위한 기능 구현 회의를 할 예정인데 API 수정 하나가 불러오는 나비효과에 대해서 스스로에게 경고와 함께 대략적인 확인 프로세스를 남겨둔다..ㅎㅎ

Q. 협업 중인 프로젝트에서 회원 정보에 생일을 추가하기로 한다면?

A. 회원 가입 API와 회원 정보 조회 및 수정 API에 대한 변경이 필요하고, 회원가입 화면도 수정되어야 한다. 서버 작업은 눈으로 확인할 수 없기 때문에 API 문서를 통해 진행 상황을 예측할 수 있다.

※ 이 글은 비전공자를 위한 이해할 수 있는 IT 지식 - 최원영 저자 를 기본 출처로 개인적인 공부내용을 요약한 것입니다.

비전공자를 위한 이해할 수 있는 IT 지식 3일차

클라우드아실 — Mon, 27 Nov 2023 22:33:06 +0900

TIL (Today I Learned)

2023.11.27

오늘 읽은 범위

3장 네트워크, 클라이언트, 서버

책에서 기억하고 싶은 내용

1. 국민학교와 초등학교 시절 이야기
컴퓨터가 연결되면 서로 데이터를 주고 받을 수 있는데, 컴퓨터가 연결된 작은 지역을 LAN(Local Area Network)라고 한다. 도시의 여러 LAN을 하나로 연결해 MAN(Metropolitan Area Network)를 만들었고, 도시와 도시, 나라와 나라를 연결해 WAN(Wide Area Network)를 만들었다.

2. 한강에서 카카오톡을 다운로드하고 실행하면 일어나는 일들
앱스토어에서 앱을 다운로드 하면 가까운 기지국으로 신호가 전달되고, 신호는 WAN을 따라 정해진 목적지로 이동한다. 앱스토어를 관리하는 애플은 카카오에서 미리 올려놓아 가지고 있던 설치 파일을 다시 사용자에게 전달하게 된다. IP주소는 컴퓨터가 위치한 주소를 의미하며, 인터넷에 접속하는 순간 12자리의 숫자로 구성된 고유 주소를 갖게 된다. (214.123.142.12)와 같이 이루어지는데 각 자리당 0~255의 숫자만 사용할 수 있는 한계로 최근에는 숫자 구분을 4개에서 6개로 늘린 IPv6를 함께 사용하고 있다.

3. 당신은 계속 뭘 달라고 하고, 누군가는 계속 뭘 준다.
스마트폰도 내부적으로 CPU, 메모리, 보조기억장치, 운영체제 등으로 구성되어 있으므로 결과저긍로 소형 컴퓨터에 해당한다. 이런 스마트폰이나 컴퓨터 등으로 카카오톡 다운로드를 클릭하거나 인터넷 검색으로 웹페이지를 이동하는 등 동작을 요청하는 컴퓨터를 클라이언트라고 한다. 사용자가 직접 눈으로 보면서 동작을 확인할 수 있는 부분이기 때문에 '프론트엔드'라고 표현한다. 반대로 요청받은 파일을 주는 컴퓨터를 서버라고 하는데 서버는 기본적으로 고객의 눈에 보이지 않는 곳에서 자료를 보관 전송 등을 하는 역할을 하기 때문에 '백엔드' 라고 표현한다.

4. 도대체 우분투가 뭐죠?
대부분의 서버 프로그램은 리눅스 라는 운영체제 위에서 동작한다. 우리가 웹페이지 로그인을 한다고 가정하면 서버는 입력된 정보가 실제 존재하는지, 일치하는지 등을 확인하고 그 결과를 클라이언트로 전달하게 된다. 이러한 서버 프로그램은 24시간 365일 동작하고 있어야 한다. 리눅스는 리누스 토발스 라는 사람이 만들었고, 기본적으로 무료이기 때문에 아무리 오래 사용해도 추가 비용이 발생하지 않는다. 즉, 앞서 이야기한 3개의 회사의 영향을 적게 받는다.

윈도우도 95, 98, xp, 10, 11로 다양하게 버전이 바뀌는 것처럼, 리늑스는 오픈 소스인 만큼 더 다양한 버전이 존재한다. 우분투는 리눅스의 유명 버전 중 하나다. 사실 안드로이드도 리눅스를 기반으로 모바일에 운영체제에 적합하게 개량된 OS이다.

※ 오픈소스란?
: 소스 코드를 공개해 누구나 특별한 제한 없이 그 코드를 보고 사용할 수 있는 오픈 소스 라이선스를 만족하는 소프트웨어를 말한다.

5. 개인 서버를 운영하면 힘든 이유
서버 컴퓨터는 24시간 365일 동작해야 한다. 만약 개인이 서버를 운영하면 관리자가 잠든 시간에 오류가 발생해서 동작하지 않는 사고가 생길 수도 있고, 사소한 부주의로 컴퓨터가 고장나버리면 이용자 모두에게 피해를 끼치는 리스크가 발생한다. 상당한 전기세도 발생할 것이다. 그래서 이런 관리를 대신해주는 '호스팅 업체'가 생겨났고, 오늘날 아마존의 AWS과 같은 서비스가 생겨났다. AWS는 서버 컴퓨터 대여 뿐만 아니라 여러 솔루션을 함께 제공해주고 있어서 이러한 기능만 잘 사용해도 안정적이고 효율적인 서버를 쉽게 구축할 수 있다.

오늘 읽은 소감은?

컴퓨터의 연결이 모여 WAN이 되고 WAN을 통해 클라이언트는 자료를 요청하고 백엔드는 데이터를 제공하는 흐름의 챕터였다. 과거에는 서버 컴퓨터를 회사에서 직접 구매해서 관리하는 경우가 많았는데 요즘은 아마존의 AWS, 마이크로소프트의 azure와 같은 서비스로 인해 그런 부분이 많이 변화되었다.

우분투는 프론트엔드 개발을 처음 배울 때 윈도우OS는 적합하지 않다고 권유받아서 설치했던 적이 있는데 설치하고나서 윈도우에서 작업하는게 그리 불편하지 않았던 터라 잘 이용할 일이 없는 것 같다. 서버쪽까지 좀 더 공부해봐야 알겠지만 요즘도 윈도우로 작업하는게 문제점으로 남아있는지 궁금하다.

궁금한 내용이나 잘 이해되지 않는 내용은?

AWS, azure와 같은 서비스로 실제 서버 컴퓨터를 구입, 관리하는 경우가 많이 줄었다. 과거 이런 추세라면 서버 개발자를 필요로 하는 곳이 점차 줄어들 것이라는 전망이 있었는데 또 주위분들에게 물어보면 여전히 서버 개발자가 귀하고 우대받는다고 하니 관련된 분에게 물어보고 싶다.

※ 이 글은 비전공자를 위한 이해할 수 있는 IT 지식 - 최원영 저자 를 기본 출처로 개인적인 공부내용을 요약한 것입니다.

비전공자를 위한 이해할 수 있는 IT 지식 2일차

클라우드아실 — Sat, 25 Nov 2023 22:22:21 +0900

TIL (Today I Learned)

2023.11.25

오늘 읽은 범위

2장 프로그래밍 언어 & 운영체제(OS)

책에서 기억하고 싶은 내용

1. 프로그래밍 언어가 '언어'라고?(못 알아듣겠는데..)
컴퓨터는 기계어인 0과 1로 명령을 처리한다. 인간과 컴퓨터 사이에는 '컴파일러'가 있어서 인간의 요구(명령)를 컴퓨터에게 기계어인 0과 1로 전달한다.

2. 개발자는 앉아서 뭐 하는 거지(뭔가 치긴 치는데...)
개발자는 컴퓨터에게 시킬 일을 문서로 만드는데 이를 프로그래밍 혹은 코딩이라고 한다. 개발하기 위한 모든 것들을 제공해 주는 환경을 IDE(통합 개발 환경)이라고 하며 IDE는 보통 어떤 분야에 특화되어 있다.

3. 뭐가 이렇게 많아?(C언어, 자바, 파이썬... 등)
개발자들은 기존의 것을 발전시키거나 새로운 것을 만들기 좋아한다. 프로그래밍 언어는 기존의 장점과 단점에 따라 새로운 언어가 개발되고, 이 중 많은 사람이 선택한 언어만 살아남게 된다.(기존의 언어가 살아남게 되는 경우도 있다.) 언어는 '저수준' 언어와 '고수준' 언어로 구분할 수 있는데, 저수준 언어는 컴퓨터 입장에서 구체적이나 사람이 이해하기 어렵고, 고수준 언어는 인간 친화적이나 저수준 언어보다 컴퓨터가 이해하기 느리다.

저수준 언어는 컴퓨터 사양을 낮추고 싶을 때 사용한다. 이는 고성능이나 다양한 기능이 필요치 않은 세탁기, 전자레인지 같은 생활가전을 떠올릴 수 있다. 이런 기기에 몇 가지 동작만 가능한 컴퓨터가 필요할 경우 가격을 낮추기 위해 저수준 언어를 최대한 활용해 부품을 탑재하는 것이다. (저수준 언어 자체가 퀄리티가 낮다는 의미가 아님에 주의)

4. 컴퓨터 구매해보셨나요?(컴퓨터의 구성 요소)
'CPU'는 컴퓨터의 머리이다. CPU가 특정한 작업을 할 때 '보조기억장치'(HDD, SSD 등)와 연계해서 처리가 되는데 보조기억장치는 용량이 큰 대신 CPU보다 속도가 매우 느리기 때문에 CPU 입장에서는 보조기억장치를 위해 속도가 하향 평준화 된다. 이런 문제로 '메모리'라는 빠른 개인 작업 공간을 만들었다. CPU에서 처리할 작업이 있을 때 보조기억장치는 보관하고 있던 데이터를 메모리로 넘겨주고, CPU는 메모리 위에서 빠르게 작업을 수행하게 된다. 동작하게 된다.

5. 우린 왜 이 이야기들이 낯설까?
이런 절차들을 일반인들이 일일이 기억할 필요는 없다. 운영체제(OS)라는 소프트웨어가 대신해 주기 때문이다. OS는 대표적으로 윈도우(마이크로소프트), 맥 OS와 iOS(애플), 안드로이드(구글)가 있는데 이런 운영체제는 우리 대신 하드웨어를 관리해 준다.(잔여 용량, 프로그램 설치와 실행, CPU와 메모리 관리 등)

재미있는 건 대부분의 사람들은 자의든 타의든 위의 운영체제를 이용하게 되는데, 그만큼 시장에서의 영향력은 매우 크다. 3개의 회사에서 운영체제의 보안 정책을 바꾸거나 가격을 올리거나 내리면 전 세계적인 영향을 끼치게 된다. 그만큼 이 3개 회사의 운영체제에 의존하고 있는 상황이다. 만약 이 3개 회사에서 특정한 언어만을 공식적으로 운영하겠다고 하면 개발자들은 모두 거기에 맞춰서 개발 언어를 바꿔야 할 수도 있는 것이다.

6. 우리가 자바 최신 버전을 설치해야 하는 이유
과거에는 운영체제의 종류가 다양했고, 그에 따른 각기 다른 언어로 개발해야 하는 경우가 있었다. 자바는 JVM이라는 소프트웨어를 통해 각 운영체제에서 동일한 코드가 동작할 수 있는 프로세스를 만들었다. 개발자는 프로그래밍 언어를 통해 특정한 운영체제 위에 동작하는 프로그램을 만드는 사람이다.

오늘 읽은 소감은?

오래전부터 프로그래밍에 관심이 있었던 만큼 옛 생각도 새록새록 나고, 또 비유를 엄청 많이 사용해서 책을 집필하셨기 때문에(특히 컴퓨터의 동작을 포토샵 실행으로 풀어서 설명하신 부분에 감탄!) 쉽게 이해하면서 읽을 수 있었다.

전통적으로 컴퓨터공학과나 전산학, 과거 컴퓨터공학을 전공한 사람들은 개발에 관심이 있다 하면 C언어 공부를 추천하는데 이는 컴퓨터를 이해하는데 도움이 되기 때문일 것이다. 그러나 기획이나 디자인 쪽 협업파트의 팀원에게 C언어를 추천하는 건 과하다고 생각한다. 나도 20대 중반에 네이버 블로그나 카페에서 엄청 추천을 받아 윤성우 님의 열혈 C프로그래밍을 구매하였던 기억이 나는데, 본격적으로 딥해지는 Part2 포인터와 배열에서 굉장한 좌절을 하고 책을 덮었던 기억이 난다..;

이후에는 한국에서는 취업할 때 자바를 공부하는 게 좋다는 말에 윤성우 님의 난 정말 JAVA를 공부한 적이 없다구요를 구매하였고, 클래스에서 또 한 번 좌절하게 된다.(당시에는 봐도 무슨 말인지 진짜 이해가 안 됐다..)

또 몇 년 전에는 프론트엔드가 코딩테스트를 볼 때 파이썬이 짧은 구문으로 구현이 잘돼서 병행 공부하는 유행이 있었다. 그때는 책은 안 샀지만 파이썬과 자바스크립트를 같이 공부해 봤는데 둘 다 애매하게 수박 겉핥기가 되었고, 또 프론트엔드 개발자로 취업한 사람이 자바스크립트로는 코드구현 실력이 형편 없더라는 이야기가 돌기 시작하면서 최근 프론트엔드 코테는 자바스크립트로 치게 고정된 것 같다.

궁금한 내용이나 잘 이해되지 않는 내용은?

운영체제를 소유하고 있는 3개 회사(마이크로소프트, 애플, 구글)는 시장에서의 영향력이 매우 크고 돈도 많이 벌어들인다는 문구에 불현듯 무료이지만 굉장히 널리 쓰이고 있는 리눅스 OS를 만드신 분은 지금 뭐하고 사시나? 라는 궁금증이 들었다. 리누스 토르발스라는 분으로 심지어 Git도 이분이 개발했다(!!) 궁금해서 관련한 정보를 찾다가 마침 밀리의 서재에 '리누스 토발즈, 재미있고 위대한 공유'라는 약 3~40 페이지 분량의 짧은 전기(특정한 인물의 남다른 경험이나 업적에 대하여 그 인물이 겪은 실제 사실을 바탕으로 기록한 글)가 있어서 집에 가는 길에 완독 해버렸다! 심지어 21살에 리눅스 첫 버전을 발표! 추후 따로 정리해서 글을 쓸 예정이다.

※ 이 글은 비전공자를 위한 이해할 수 있는 IT 지식 - 최원영 저자 를 기본 출처로 개인적인 공부내용을 요약한 것입니다.

비전공자를 위한 이해할 수 있는 IT 지식 1일차

클라우드아실 — Fri, 24 Nov 2023 23:54:45 +0900

TIL (Today I Learned)

2023.11.24

오늘 읽은 범위

1장 오리엔테이션

책에서 기억하고 싶은 내용

1. 왜 자꾸 파이썬(Python)을 배우라고 하는 거죠?(feat. C 언어, 자바(JAVA)를 배워봐)

해당 분야의 지식이 없는 사람과 협업을 하게 될 때 전문용어를 사용하면 서로 소통하기 어렵다. 그렇다고 공부해서 상대방의 수준까지 올라가서 협업한다는 것은 단시간 내에, 어쩌면 영원히 불가능하다.

2. 가장 먼저 알아야 할 지식은 '프로그래밍 언어'가 아닙니다.

하나의 서비스를 위해서 기획자, 디자이너, 퍼블리셔, 개발자(프론트엔드, 백엔드, 앱, 서버, DB 등)와 같이 다양한 직군에서 협업을 하게 되는데 이때 필요한 것은 모든 구성원과 원활하게 대화할 수 있는 '커뮤니케이션' 능력이다. 해당 직군의 기술을 일일이 습득해서 협업을 하는 것은 불가능하다. 이 책은 그러한 커뮤니케이션을 위해 용어를 카테고리고 분류(상위 카테고리, 직군에 따른 분류) 설명할 예정이다.

오늘 읽은 소감은?

노마드코더 IT 5분 잡학사전의 북클럽 챌린지 완주에 자신감을 얻어 집에 있는 책들을 하나하나 완독하고 글을 남기려는 도전을 시작하게 되었다. 그리고 최종적인 목적은 Ebook 이외에 종이책들은 이제 중고로 팔거나 버리고 서재를 없애는 것이다.(...?) 노트북을 사고 yes24 크레마클럽이라는 구독형 독서 이용권을 받았는데 거기서 15년도 전후쯤 출간됐던 HTML 서적을 보다가 깨달았다.(그 책의 최종 과제는 HTML과 CSS로 홈페이지 만들기다. 근데 JS는 안 곁들인...-_?)

궁금한 내용이나 잘 이해되지 않는 내용은?

이번 챕터는 오리엔테이션 구간은 크게 새로운 내용 같은 건 없고 협업. 즉 업무 커뮤니케이션을 위해 이 책을 집필했다는 저자분의 의도를 알 수 있는 구간이었다.

깃을 패러디하신 듯 깊(https://gipp.co.kr/)이라는 사이트를 통해 직강을 운영 중이시다. 금전적으로 여유가 있는 분들은 저자 직강(유료)을 봐도 좋을 것 같다(하지만..)

그리고 유튜브(https://www.youtube.com/@_wy_choi)도 운영 중이신데 최근 비전공자를 위한 이해할 수 있는 파이썬을 출판하셨고 관련 내용과 몇 가지 인사이트 영상을 올리셨다. 인사이트는 강의를 완강했다는 전제 하에 정리내용을 올리신 것으로 완독 후 복습하면서 보면 좋을 것 같다.

※ 이 글은 비전공자를 위한 이해할 수 있는 IT 지식(최원영 저자)을 기본 출처로 개인적인 공부내용을 요약한 것입니다. 문제가 있을 시 연락 주시면 조치하겠습니다.

모던 자바스크립트 Deep Dive 10장 객체 리터럴

클라우드아실 — Tue, 14 Nov 2023 21:59:18 +0900

출처 : 예스24

스터디를 진행하면서 책을 읽고 내용과 떠오르는 생각, 용어들을 정리하고 있습니다.
문제 되는 부분이나 틀린 부분이 있다면 편하게 말씀해 주세요.

10장 객체 리터럴

10.1 객체란?

자바스크립트는 객체(object) 기반의 프로그래밍 언어이며, 원시 값을 제외한 자바스크립트를 구성하는 거의 모든 것 (함수, 배열, 정규 표현식 등) 이 객체다. 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조(data structure)다. 원시 값은 변경 불가능한 값(immutable value)이지만 객체 타입의 값은 변경 가능(mutable value)하다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다. 이는 콜론( : )으로 구분한다.

var human = {
  name: 'Lee',
  age: 30
  sayHello : function () {
    console.log`Hello! My name is ${this.name}.`);
};

자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다. 위의 코드에서 human.sayHello()가 메서드다. 객체는 프로퍼티와 메서드로 구성된 집합체로 위의 코드에서 name과 age는 프로퍼티에 해당한다. 이처럼 상태와 동작을 하나의 단위로 구조화할 수 있어 유용하다. 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임을 객체지향 프로그래밍(OOP, Object Oriented Programming)이라 한다.

※ 일급 객체란?
: 객체가 함수의 변수로 활용이 가능하거나 인자로 넘길 수 있거나, 변수에 할당할 수 있는 등, 연산을 지원할 때 일급객체라 한다. 일반적으로 객체 내에 자바스크립트의 함수는 표현식으로 할당되는데 표현식이 결과가 값으로 반환되는 것과 마찬가지라 볼 수 있다.

※ 객체와 함수의 연관관계란?

: 자바스크립트의 객체는 함수와 밀접한 관계를 가진다. 함수로 객체를 생성할 수도 있고, 함수 자체가 객체이기도 하기 때문에 함수와 객체는 분리해서 생각할 수 없다.

10.2 객체 리터럴에 의한 객체 생성

클래스기반 객체지향 언어는 new 연산자와 함께 생성자(Constructor)를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다. 하지만 자바스크립트는 프로토타입 기반 객체지향 언어로 다양한 객체 생성 방법을 지원한다.

※ 인스턴스란?
: 클래스는 인스턴스를 생성하기 위한 템플릿 역할을 하며 이 템플릿을 통해 메모리에 저장된 실체를 인스턴스라 한다.

※ 프로토타입이란?
: 모든 기능을 내려받아 이용할 수 있는 모체 같은 것이다. 자바스크립트에서는 기본적으로 클래스가 없는 대신 객체의 원형을 이루는 프로토타입이라는 것이 존재한다. 최근 자바스크립트에 클래스 문법이 추가되었다.

객체 리터럴
Object 생성자 함수
생성자 함수
Object.create 메서드
클래스(ES6)

var person = {
  name: 'Lee',
  sayHello: function () {
    console.log(`Hello! My name is ${this.name}.`);
  }
};

가장 일반적이고 간단한 방법은 위와 같이 객체 리터럴을 사용하는 방법으로 중괄호 내에 0개이상의 프로퍼티를 정의해서 생성한다. 중괄호 내에 프로퍼티를 정의하지 않으면 빈 객체가 생성된다. 코드 블록은 중괄호를 닫을 때 세미콜론을 붙이지 않는다. 하지만 객체 리터럴은 중괄호가 코드 블록을 의미하지 않는다. 값으로 평가되는 하나의 표현식으로 평가하기 때문에 블록 끝에 세미콜론을 붙인다. 클래스 정의와 new 연산자를 통한 생성자 호출이 필요 없기 때문에 자바스크립트의 유연함과 강력함을 대표하는 생성 방식이다. 그 이외에 생성 방식은 모두 함수를 사용한다.

10.3 프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.

프로퍼티 키 : 빈 문자열을 포함한 모든 문자열 또는 심벌 값
프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

프로퍼티 키는 문자열이므로 따옴표( '...' 또는 "..." )로 묶어야 한다. 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표를 사용해야 한다.

var person = {
  firstName : 'Dong-won',
  'last-name' : 'Kang',
  '': '',
  0:0,
  'last-name' : 'Kim'
};

네이밍 규칙을 준수하는 경우 따옴표를 생략할 수 있으나, 예를 들어 last-name은 식별자 네이밍 규칙을 준수하지 않기 때문에 따옴표를 생략할 수 없다.( -를 연산자가 있는 표현식으로 해석한다.) 빈 문자열도 프로퍼티 키로 사용할 수 있으나 의미를 갖지 못하므로 권장하지 않는다. 프로퍼티 키에 문자열이나 심벌 값 외의 값을 사용하면 암묵적 타입 변환을 통해 문자열이 된다. 프로퍼티 키를 중복 선언하면 먼저 선언한 프로퍼티를 덮어쓰고 나중에 선언한 프로퍼티가 적용된다. 이때 에러가 발생하지 않는다는 것에 주의해야 한다.

※ 네이밍 규칙이란?

: 카멜케이스( 예: myVariable, calculateTotal), 파스칼케이스( 예: MyClass, CalculateTotal), 스네이크케이스( 예: my_variable, calculate_total)와 같이 식별자의 네이밍을 일정한 형식으로 하는 것을 의미한다.

10.4 메서드

프로퍼티의 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다. 즉, 메서드는 객체에 묶여 있는 함수를 의미한다.

var user = {
  str: 20,
  int: 20,

  attack: function() {
    console.log("공격하였습니다.")
    return this.str*2; // 40
  }
}

  console.log(user.attack.call()); // NaN
  
  window.str = 20;
  
  console.log(user.attack.call()); // 40

메서드 내부에서 사용한 this 키워드는 객체 자신(위 예제에서는 user 객체)을 가리키는 참조변수다. 메서드 외부에서 사용한 this는 window 객체를 가리키게 되고 window내에 str은 ""로 선언될 것이기 때문에 call()함수로 호출 시 NaN이 출력된다. window 객체의 str에 20을 따로 할당하면 동일한 결과가 나오는 것으로 this가 호출위치에 따라 달라짐을 알 수 있다.

10.5 프로퍼티 접근

프로퍼티에 접근하는 방법은 다음과 같이 두 가지다.

마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법(dot notation)
대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄표 효기법(bracket notation)

대괄호 프로퍼티 접근 연산자 내부에서 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다. 네이밍 규칙을 준수하지 않는 이름은 반드시 대괄호 표기법을 사용해야 하며, 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다. 이때 ReferenceError가 발생하지 않는데 주의해야 한다.

var key = 'age';
var person = {};

person[key] = 30;

console.log(person.age); // 30

위의 코드는 빈 person 객체에 새로운 프로퍼티를 추가하고 있다. 이 때 key라는 프로퍼티 키가 person 객체 내부에 없기 때문에 변수 key를 가져오게 되고, person['age']와 같은 결과가 된다. 즉, person['age'] = 30으로 age 키에 30 값을 할당한다.

10.6 프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 재할당하면 프로퍼티 값이 갱신된다. 이는 단점이 더 큰데 기존에 동일한 프로퍼티가 있다는 어떠한 메세지도 나타나지 않기 때문이다. 타입스크립트가 나온 여러 이유 중 하나이기도 하다.

10.7 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 대해 값을 할당하면 프로퍼티가 동적으로 생성 및 추가되고 값이 할당된다.

var human = {
  name: 'Lee'
  };
  
human.age = 30;

console.log(human); // {name: 'Lee', age: 30}

10.8 프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다. delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다. 주의할 것은 존재하지 않는 프로퍼티를 삭제하더라도 에러가 발생하지 않는다.

var person = {
    name : 'Lee',
    age : 20
}

delete person["a"+"ge"] // true

console.log(person) // {name: 'Lee'}

10.9 ES6에서 추가된 객체 리터럴의 확장 기능

10.9.1 프로퍼티 축약 표현

프로퍼티 값은 변수에 할당된 값, 즉 식별자 표현식일 수도 있다. 프로퍼티의 값으로 전역객체에 있는 변수를 값으로 할당할 수 있다는 뜻이다.

var num = 20;

var obj = {
  output : num
};

console.log(obj.output); // 20

프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다. 이때 프로퍼티 키는 변수 이름으로 자동 생성된다. 즉 아래와 같이 객체를 리터럴로 생성하면서 프로퍼티 키만 기재하면 동일한 변수명이 있다면 해당 변수의 할당된 값이 프로퍼티 값으로 자동 할당된다.

let x = 1, y = 2;

const obj = { x, y };

console.log(obj); // { x: 1, y: 2 }

10.9.3 메서드 축약 표현

ES6에서는 메서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.

const obj = {
  name: 'Lee',

  sayHi() {
    console.log('Hi! ' + this.name);
  }
};

일반적인 function 형태로 메서드를 생성 시 new 생성자를 통해 인스턴스를 생성할 수 있다. 그런데 축약형으로 메서드를 생성하면 해당 메서드 자체에 생성자(constructor)가 없는 형태로 생성되기 때문에 new 생성자 함수로 인스턴스 생성이 되지 않는다.

정리

오래전에 자바책을 먼저 접했었는데 클래스를 기반으로 한 new 생성자로 객체와 인스턴스 챕터를 보면서 절망했던 기억이 난다. 객체와 인스턴스는 많은 교재에서 설명할 때 자동차나 붕어빵을 전통적으로 선호하는 것 같다. 물론 그 설명도 좋지만 나는 인강 중에 객체와 인스턴스를 게임 신규 캐릭터 생성으로 설명해 주신 강의로 확실히 개념을 잡았다. 그리고 자바스크립트에서는 객체 리터럴로 간단히 객체가 생성되는 것을 보니 신세계였다.

객체 프로퍼티 접근 시에는 마침표와 대괄호 둘 다 접근이 가능한데 json 파일에서 반복해서 프로퍼티를 가져와야 할 때 json파일 자체에 네이밍 규칙을 준수하지 않는 데이터가 종종 있어서 대괄호 접근 연산자를 좀 더 선호하게 되는 것 같다. 여담으로 과거 부트캠프 수강 시 강사님이 '둘 다 똑같은데 반복문 쓸 때는 대괄호로 하세요'라고 해서 한동안 이유도 모르고 대괄호로 썼다...; ES6의 축약형 같은 경우 추후 나올 객체 구조분해할당과 일맥상통하는 부분이 있어서 알고 넘어가면 리액트 공부시 도움이 된다.

모던 자바스크립트 Deep Dive 9장 타입 변환과 단축 평가

클라우드아실 — Mon, 13 Nov 2023 21:57:17 +0900

출처 : 예스24

스터디를 진행하면서 책을 읽고 내용과 떠오르는 생각, 용어들을 정리하고 있습니다.
문제 되는 부분이나 틀린 부분이 있다면 편하게 말씀해 주세요.

9장 타입 변환과 단축 평가

9.1.1 타입 변환이란?

자바스크립트의 모든 값은 타입이 있다. 개발자가 의도적으로 타입을 변환하는 것을 '명시적 타입 변환' 또는 '타입 캐스팅'이라 한다. 아래 코드 예시는 숫자 11을 문자열 11로 명시적 타입 변환한 것이다.

var x = 11;

var str = x.toString();

표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환 되기도 하는데 이를 '암묵적 타입 변환' 또는 '타입 강제 변환'이라 한다. 아래 코드 예시는 숫자와 문자열을 연산하여 문자열로 강제 형 변환한 것이다.

var str = 1 + '';

이러한 형 변환이 기존 원시값을 직접 변경하는 것은 아니다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다. 즉, 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아니라 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다. 타입 변환 결과를 예측하지 못하거나 예측이 결과와 일치하지 않는다면 오류를 생산할 가능성이 높아진다. 중요한 것은 코드를 예측할 수 있어야 한다는 것이다.

9.2 암묵적 타입 변환

암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다. Symbol 타입은 아래와 같이 타입 에러가 발생한다.

(Symbol()) + '' // TypeError: cannot convert a symbol value to a string

9.2.1 문자열 타입으로 변환

+ 연산자는 피연산자 중 하나 이상이 문자열일 때 문자열 연결 연산자로 동작하고, 모든 피연산자는 문맥상 문자열타입으로 암묵적 타입 변환되어 문자열 값을 반환한다.

1 + '2' // '12'

`1 + 1 = ${1 + 1}` // "1 + 1 = 2"

템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환한다.

9.2.2 숫자 타입으로 변환

+를 제외한 산순 연산자는 숫자 값을 만드는 것이 목표다. 따라서 코드 문맥상 모두 숫자 타입으로 강제 형 변환하여 평가 후 결과를 반환한다.

1 - '1' // 0
1 * 'one' // NaN

비교 연산자의 역할은 불리언 값을 만드는 것으로 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환한다. 빈 문자열( '' ), 빈 배열( []), null, false는 0으로, true는 1로 변환되고, 객체와 빈 배열이 아닌 그 외 배열, undefined는 반환되지 않아 NaN이 된다.

+'' // 0
+null // 0
+[] // 0
+false // 0

9.2.3 불리언 타입으로 변환

자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다. 불리언 값으로 평가되어야 할 문맥에서 Truthy 값은 true로, Falsy 값은 false로 암묵적 타입 변환된다.

※ Falsy 값이란?
: Boolean 문맥에서 false 로 평가되는 값이다. false, undefined, null, 0, -0, NaN, ''(빈 문자열)

9.3 명시적 타입 변환

명시적 타입 변환의 방법에는 표준 빌트인 생성자 함수(String, Number, Boolean)를 new 연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법, 암묵적 타입 변환 방법이 있다.

※ 표준 빌트인 생성자 함수와 빌트인 메서드란?
:자바스크립트에서 기본 제공하는 함수로, 표진 빌트인 생성자 함수는 객체를 생성하기 위한 함수이며 new 연산자와 함께 호출한다. 표준 빌트인 메서드는 String, Number와 같은 new 연산자 없이 사용하는 메서드로 빌트인은 '미리 만들어진'을 의미한다.

9.3.1 문자열 타입으로 변환

문자열 타입으로 변환하는 방법은 아래와 같다.

String 생성자 함수를 new 연산자 없이 호출하는 방법
toString 메서드를 사용하는 방법
문자열 연결 연산자를 이용하는 방법

1. String 생성자 함수를 new 연산자 없이 호출하는 방법
String(126);

2. toString 메서드를 사용하는 방법
(126).toString();

3. 문자열 연결 연산자를 이용하는 방법
126 + '';

9.3.2 숫자 타입으로 변환

숫자타입으로 변환하는 방법은 아래와 같다.

Number 생성자 함수를 new 연산자 없이 호출하는 방법
parseInt.parseFloat 함수를 사용하는 방법(문자열만 가능)
+ 단항 산술 연산자를 이용하는 방법
* 산술 연산자를 이용하는 방법

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number('10.51'); // 10.53

2. parseInt.parseFloat 함수를 사용하는 방법(문자열만 가능)
parseInt('-1'); // -1

3. + 단항 산술 연산자를 이용하는 방법
+ '0'; // 0

4. * 산술 연산자를 이용하는 방법
true * 1; // 1

9.3.3 불리언 타입으로 변환

Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
! 부정 논리 연산자를 두 번 사용하는 방법

1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
Boolean('x'); // true

2. ! 부정 논리 연산자를 두 번 사용하는 방법
!!null; // false

그런데 불리언 타입은 굳이 이렇게 쓸 상황이 생길까 싶다..;

9.4.1 논리 연산자를 사용한 단축 평가

논리합( || ) 또는 논리곱( && ) 연산자 표현식은 언제나 2개의 피연산자 중 한쪽으로 평가된다.

'Cat' && 'Dog' // "Dog"

위와 같이 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 좌항에서 우항으로 평가가 진행되는데 'Cat'은 Truthy 값이므로 true로 평가되되는데 앞서 이야기한 대로 &&은 두 개의 피연산자가 모두 평가되어야 표현식의 평가 결과가 결정되기 때문에 'Dog'도 평가되고, 'Dog'도 마찬가지로 true로 평가된다. 이때 둘 다 true라면 최종 평가된 'Dog'가 반환된다.

'Cat' || 'Dog' // "Cat"

논리합 경우 두 개의 피연산자 중 true가 나오면 그 이후 피연산자는 평가하지 않아도 표현식을 평가할 수 있다. 그래서 'Cat'이 그대로 반환되고 'Dog'는 평가하지 않게 된다. 이처럼 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는데 이를 단축 평가라 한다. 단축평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다. 아래 두 if문을 보면 첫 번째 if문은 우항이 평가되지 않아 (num+=15)가 평가되지 않는다.

let num = 1;

if((4 > 0) || (num += 15)) {
  console.log(num)
}

if((num +=1) || (4 > 0)) {
  console.log(num)
}

단축 평가를 사용하면 if 문을 대체할 수 있는데 React에서 if문을 쓸 일이 잘 없기 때문에 삼항연산자를 많이 사용하듯이 단축 평가도 자주 사용하게 되니 잘 익혀두어야 한다.

var left = true;

var message ='';

message = left && '완료'

console.log(message); // 완료

9.4.1 함수 매개변수에 기본 값을 설정할 때

함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 이 때 단축평가를 사용해 기본값을 설정하면 undefined로 인해 발생할 수 있는 에러를 방지할 수 있다. 아래의 두 코드는 동일한 결과를 반환하는데 두 번째 코드는 ES6의 문법으로 매개변수에 초기값을 아예 할당할 수 있다는 장점이 있다.

function getStringLength(str) {
  str = str || '';
  return str.length;
}

function getSTringLength(str = ''){
  return str.length;
}

getSTringLength(); // 0
getSTringLength('hi'); // 2

9.4.2 옵셔널 체이닝 연산자

ES11에서 도입된 옵셔널 체이닝 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면( 피연산자라 Falsy 값이라도 ) 우항의 프로퍼티 참조를 이어간다. 선언이 완료된 변수를 대상으로만 동작한다. 예를 들어 어떤 게임에 캐릭터 객체가 있는데 이 객체에 지력, 힘, 체력, 마력 등 여러 프로퍼티가 있다고 치자. 그런데 여러 캐릭터 중 '천사' 캐릭터는 '마력'이라는 프로퍼티가 어울리지 않아서 '천사' 캐릭터 객체를 만든 적이 있다면 이 '마력' 프로퍼티를 삭제해주고 싶은 거다. 아래 코드와 같이 표현할 수 있다.

let 천사 = {
  힘 : 20,
  지력 : 20,
  마력 : 250
}

delete 천사?.마력 // 힘, 지력 프로퍼티만 남게 된다.

챗 GPT에게 옵셔널 체이닝에 대해 물어보고 추가적인 예시 코드를 받았다. 객체의 속성이나 메서드에 안전하게 접근하기 위한 기술 중 하나로, 아래와 같이 중첩된 객체에서 하위 객체가 존재하지 않을 수 있는 상황에서 유용하게 활용할 수 있다고 한다.

// 객체 A가 중첩된 상황을 가정
const objectA = {
  // 객체 B가 존재하지 않을 수 있음
  objectB: {
    // 객체 C가 존재하지 않을 수 있음
    objectC: {
      // 실제 값
      value: "Hello, Optional Chaining!",
    },
  },
};

// 옵셔널 체이닝을 사용하여 안전하게 속성에 접근
const result = objectA?.objectB?.objectC?.value;

console.log(result); // 만약 어느 하나라도 존재하지 않으면 undefined 출력

null 또는 undefined 인지 판단할 때 삼항 연산자의 축약형같은 느낌으로 사용할 수도 있다.

var go = "";

var result = go?.length; // 0

변수 go 가 null이나 undefined인지 판별시도후
둘 다 아니기 때문에 0이 할당된다.

정리

역시 악명높은 자바스크립트답게 타입변환에 대해서도 예외사항이 많아 어떤 형식이 반환되거나 타입에러가 나타나는지 다 외우기는 어려울 것 같다. 일단 코테에서 많이 사용하니까 기본적으로 문자열, 숫자열 형 변환은 알고 있다. 옵셔널 체이닝 연산자는 책만 봐서는 감이 안잡혀서 Chat GPT 선생님의 도움을 추가로 구했다. 세상이 좋아져서 기한을 주고 프론트엔드 개발자 공부 커리큘럼을 짜달라고 하니까 커리큘럼도 짜준다.;; 아직 9장인데 단원별로 깊은 내용들이 있어서 좀 무서워지고 있는데 Chat GPT 선생님과 함께 진행해야겠다.

모던 자바스크립트 Deep Dive 8장 제어문

클라우드아실 — Fri, 10 Nov 2023 20:43:14 +0900

출처 : 예스24

스터디를 진행하면서 책을 읽고 내용과 떠오르는 생각, 용어들을 정리하고 있습니다.
문제 되는 부분이나 틀린 부분이 있다면 편하게 말씀해 주세요.

8장 제어문

조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.

8.1 블록문

블록문은 0개 이상의 문을 중괄호로 묶은 것으로 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문의 끝에는 세미콜론을 붙이지 않는다.(블록문 자체가 하나의 종결을 의미하기 때문) 블록 내에 일반적인 구문을 넣으면 블록이 종료되면서 undefined를 반환하고 종료되나 key와 value를 넣게 되면 자바스크립트 엔진은 해당 블록은 객체라고 판단하고 해당 객체를 반환하는 기현상이 발생한다..;

{ let num = 10; } // undefined

{ a : 1 } // {a:1}

8.2 조건문

조건문은 주어진 조건시의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. 조건은 불리언 값으로 평가될 수 있는 표현식이다. 자바스크립트는 if ... else 문과 switch 문으로 두 가지 조건문을 제공한다.

8.2.1 if ... else 문

if문의 조건식이 불리언 값이 아닐 경우 불리언 값으로 강제 변환되어 실행할 코드 블록을 결정한다. 대부분의 if ... else 문은 삼항 조건 연산자로 바꿔 쓸 수 있다. 삼항 조건 연산자 표현식은 값처럼 사용할 수 있기 때문에 변수에 할당할 수 있어 유용하다. if ... else 문 자체는 값으로 사용할 수 없기 때문에 변수에 할당할 수 없다.

경우의 수가 3가지인 삼항 조건 연산자

var num = 0;
var kind = num ? ( num > 0 ? '양수' : '음수') : '영';
console.log(kind); // '영'

조건에 따라 단순히 값을 결정하여 변수에 할당하는 경우 삼항 조건 연산자를 사용하는 편이 가독성이 좋다. 하지만 여러 줄의 문이 필요하다면 if ... else 문을 사용하는 편이 가독성이 좋다.

8.2.2 switch 문

상황을 의미하는 표현식을 지정하고 콜론 뒤에 실행될 문을 지정하는 형태다.

break 문이 없다면 case문의 표현식과 일치하지 않더라도 실행 흐름이 다음 case 문으로 연이어 이동하기 때문에 default를 제외한 각 case에는 break 문을 기입하는 것이 일반적이다. default문은 가장 하단에 위치해야 한다. 아래와 같이 조건에 해당하지 않는 경우 가장 마지막 case인 'February'가 반환된다..; 다른 위치에 default문을 위치시킬 거라면 break 문을 같이 둬야 하는데 굳이..

var month = 13;

switch (month) {
  default: monthName = 'Invalid month';
  case 1: monthName = 'January'; 
  case 2: monthName = 'February'; 
  
} // 'February'

break 문을 생략한 폴스루가 유용한 경우도 있는데 if ... else 문으로 해결할 수 있다면 if ... else 문을 사용하는 편이 좋고, 가독성이 더 좋다면 switch 문을 사용하는 편이 좋다.

※ 폴스루(fall-through)란?
: 하나의 case 절에서 break 문을 사용하지 않고 다음 case 절로 코드 흐름이 이어지는 것을 의미한다.

8.3 반복문

조건이 거짓일 때까지 반복해서 코드 블록을 실행하는 것이다. for, while, do ... while문을 기본 제공한다.

8.3.1 for 문

for문의 변수 선언문, 조건식, 증감식은 모두 옵션이므로 반드시 사용할 필요는 없다. 단, 셋 다 선언하지 않고 사용하면 무한루프가 되니 주의해야 한다. for 문 내에 for 문을 중첩해 사용할 수 있는데 이를 중첩 for 문이라 한다.

8.3.2 while 문

for문은 반복 횟수가 명확할 때 주로 사용하고 while 문은 반복 횟수가 불명확할 때 주로 사용한다. 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환하여 실행한다.

while (true) { ... }

정재남 님이 redux-saga 라이브러리가 위와 같은 무한루프 방식으로 이벤트를 탐지해서 처리한다고 하는데 속도 부하를 어떻게 처리하는지 나중에 공부해야겠다.

※ redux-saga란?
: react/redux의 순수하지 않은 동작(개인적으로는 이상동작이라고 생각한다)을 감지해서 제어할 수 있는 라이브러리다. 예를 들어 사용자가 동일한 api를 여러 번 호출할 경우, 가장 마지막 호출의 response만 받아오도록 제어한다거나 특정 액션이 발생하면 그에 따라 다른 함수나 자바스크립트 코드가 동작하는 식이다.

8.4 break 문

break문은 코드 블록을 탈출하는 역할을 하는데 반복문을 더 이상 진행하지 않아도 될 때 불필요한 반복을 피할 수 있어 유용하다. 일반적으로 레이블 문, 반복문, 또는 switch 문의 코드 블록을 탈출한다. 이 외에 문에서 break 문을 사용하면 SyntaxError(문법 에러)가 발생한다.

8.4 label 문

프로그램의 실행 순서를 제어할 때 사용한다. 예를 들어 이중 for 문의 경우 두 for문의 조건식을 모두 만족해야 종료가 되지만, label 문을 사용하면 특정한 조건일 때 for문 전체를 빠져나온다. 대박..

outer : for (let i = 0; i < 5 ; i++) {
  for (let j = 0; j < 2; j++) {
    if (i + j === 5) break outer;
    console.log(`inner [${i}, ${j}]`);
  }
}

그런데 가독성이 나쁘니 쓰지 말라는 게 정재남 님과 이응모 님의 공통의견. ㅎㅎ 사실 아래와 같이 해도 결과는 같다.

for (let i = 0; i < 5 ; i++) {
  for (let j = 0; j < 2; j++) {
    if (i + j === 5) break;
    console.log(`inner [${i}, ${j}]`);
  }
}

또는 아래와 같이 레이블문으로 된 코드를 여러 개 만들어 따로따로 제어하는 것도 가능하겠지만 마찬가지로 가독성이 나쁘고 의도치 않은 결과가 나올 수 있다.

inner : for (let a = 0; a < 5 ; a++) {
  for (let b = 0; b < 2; b++) {
    console.log(`inner [${a}, ${b}]`);
    if (a + b === 3) break inner;
  }
}

outer : for (let i = 0; i < 5 ; i++) {
  for (let j = 0; j < 2; j++) {
    console.log(`inner [${i}, ${j}]`);

    if (i + j === 5) break outer;
  }
}

8.5 continue 문

반복문의 코드 블록 실행을 현 지점에서 중단하고, 반복문의 증감식으로 실행 흐름을 이동시킨다. break 문처럼 반복문을 탈출하지는 않는다. 실행해야 할 코드가 한 줄이라면 if문을 그대로 사용하는 것도 좋지만 그렇지 않는 경우 continue를 사용하면 추가적인 들여 쓰기 및 중괄호를 생략할 수 있어 가독성이 더 좋다.

var string = 'Hello ahahaha'
var search = 'h';
var count = 0;

for(var i = 0; i < string.length; i++){
  if (string[i] !== search) continue;
  
  count++;
}

정리

프로그래밍 언어를 판단하는 한 가지 기준으로 제어문을 이야기한다. 그렇기 때문에 HTML이나 CSS가 프로그래밍 언어가 아니라고 강력하게 주장하는 것이다.

제어문까지만 공부해도 기본적인 코딩은 가능하다는 이야기가 있기 때문에 이 부분까지를 가장 기본적인 단계라 볼 수 있지 않을까. 코딩테스트 문제 풀 때도 프로그래머스 level0, 1 정도는 for문으로 대부분 해결 가능했던 것 같다. 물론 실행속도까지 조건에 들어가 버리면 배열 고차함수(forEach, map, filter, reduce 등) 없이 안되기는 하더라만..

6장 정도부터 책 정리하면서는 코드나 이미지를 첨부하지 않고 깔끔하게 작성하리라 다짐했는데 코드 입력 없이 말로만 기록하는 것은 한계가 있는 것 같다. 능력 부족인가 싶기도..; 어쨌든 '결과가 불리언으로 강제변환', '표현식이다'.라는 문구들이 쉽게 간과할 수 있는 부분이지만, 출력 형태를 의미하기 때문에 결과값이 달라진다는 뜻이거나, 표현식이라는 건 다른 곳에 할당할 수 있다는 의미라는 것을 생각하면서 꼼꼼히 봐야 한다.

물론 이론과 실제는 항상 괴리가 있어서 코딩은 별개의 문제다..ㅜㅜ.. 코딩하러 가야겠다..

모던 자바스크립트 Deep Dive 7장 연산자

클라우드아실 — Thu, 9 Nov 2023 22:07:30 +0900

출처 : 예스24

스터디를 진행하면서 책을 읽고 내용과 떠오르는 생각, 용어들을 정리하고 있습니다.
문제 되는 부분이나 틀린 부분이 있다면 편하게 말씀해 주세요.

7장 연산자

연산자는 하나 이상의 표현식을 대상으로 연산을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피대상자라 한다.

7.1 산술 연산자

수학적 계산을 수행해 새로운 숫자 값을 만들고 연산이 불가능할 경우, NaN을 반환한다.

7.1.1 이항 산술 연산자( +, -, / )

이항 산술 연산자는 2개의 피연산자를 연산하여 새로운 값을 만든다.

7.1.2 단항 산술 연산자( ++, -- )

단항 산술 연산자는 1개의 피연산자를 산술 하여 값을 만드는데 피연산자의 값을 변경하는 부수 효과가 있다. 1개의 피연산자를 대상으로 연산하는 것이니 결괏값을 해당 피연산자에 암묵적 할당(재할당) 할 수밖에 없다. 증가/감소(++/--) 연산자는 피연산자 앞이나 뒤에 붙일 수 있고, 이 위치에 따라 피연자의 값을 연산하는 시점이 달라진다.
숫자 타입이 아닌 피연산자에 +나 - 단항 연산자를 사용하면 숫자 타입으로 변환한 값을 생성해서 반환한다. 재할당 되는 것은 아니다.

7.1.3 문자열 연결 연산자( '1' + 1 )

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 결과를 문자열로 반환한다. 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 하는데 1 + true의 경우 true를 숫자 타입인 1로 강제 변환 후 연산을 수행한다. 이를 암묵적 타입변환 또는 타입 강제 변환이라고 한다.

7.2 할당 연산자( =, +=, /=, *= )

할당연산자는 대입연산자( = ) 기호가 포함된 모든 연산자를 말한다. 피연산자의 평가(실행) 결과를 좌항에 있는 변수에 할당하며, 결과적으로 값이 기존 변수에 재할당 된다. 할당문도 '할당된 값'이라는 결과값이 해당 변수를 통해 평가(실행)되기 때문에 표현식이다.

7.3 비교 연산자

좌항과 우항의 피연산자를 비교해 결과를 불리언 값으로 반환한다.

7.3.1 동등/일치 비교 연산자( ==, ===, !=, !== )

동등 비교 연산자( ==, != )는 좌항에 대해 우항을 암묵적 타입 변환을 통해 타입을 강제로 일치시킨 후 값을 비교한다. 일치 비교 연산자( ===, !== )는 좌항과 우항의 피연산자가 타입도 같고 값도 같은지 비교하기 때문에 조건문에서 값을 비교할 때는 일치 비교 연산자를 사용해야 한다.

NaN은 자신과 일치하지 않는 유일한 값으로 Number.isNaN 함수를 사용해서 확인해야 한다.
※ isNaN vs Number.isNaN ?
isNaN은 undefined나 빈 객체 {} 도 true를 반환하는 문제가 있다. ES6부터 도입된 Number.isNaN이나 Object.is 함수를 통해 정확한 확인이 가능하다.

7.3.2 대소 관계 비교 연산자( >, <, >=, <= )

피연산자 간 크기를 비교하여 불리언 값을 반환한다.

7.4 삼항 조건 연산자

조건문의 한 가지 형태로 React는 if문 사용이 안되기 때문에 삼항 연산자를 필수로 활용할 수 있어야 한다. 조건식의 평가(실행) 결과가 불리언(true나 false)이 아니면 불리언 값으로 암묵적 타입 변환한다. if ... else 문은 조건문으로 표현식이 아니다. 따라서 조건식 부분에 if .. else 같은 조건문을 넣을 수 없다. 삼항 연산자는 조건식의 결과로 값이 반환되기 때문에 이 자체로 표현식인 문이다(!) 따라서 값을 할당할 수 있는 곳에는 삼항 연산자를 할당할 수 있어 매우 유용하다. 단, 조건에 따라 수행해야 할 문이 여러개라면 if ... else 문의 가독성이 더 좋다.

조건식 ? 참일 경우 반환할 값 : false일 때 반환할 값

console.log( (3 < 0) ? "0이 크다" : "3이 크다" )

7.5 논리 연산자( ||, &&, ! )

논리 연산자는 좌항과 우항의 피연산자를 비교해 불리언 값을 반환한다. 논리 부정 연산자( ! )의 경우 피연산자가 불리언 값이 아니면 falsy 값은 false, 그 외에는 true인 불리언 타입으로 암묵적 타입 변환 후 값을 반환한다. 논리합( || ) 또는 논리곱( && )은 결과값이 불리언 값이 아닐 수도 있다.

논리곱( && ) 연산자는 두 항이 모두 true일 때만 true를 반환한다.
true && true;

논리합( || ) 연산자는 두 항 중 하나라도 true일 때 true를 반환한다.
true || false;
false || true;

논리 부정( ! ) 연산자는 불리언값을 반대로 반환한다.
!false;

!"good" // false

'Cat' && 'Dog'; // 'Dog'

※ falsy 값이란?
: 자바스크립트에서 문맥상 false로 평가하는 값이다. null, undefined, false, NaN, "", 0, -0, 0n 등이 있다.
※ 드모르간의 법칙이란?
: !( x || y ) === ( !x && !y ) 양쪽이 같다는 법칙으로 벤다이어그램을 직접 그려가며 해보면 눈으로도 확인할 수 있다.
논리 부정( ! ) 연산자가 괄호 밖으로 나오면 괄호 내 각 항에서는 제거되고 피연산자 사이 논리곱( && )이나 논리합( || )이 반대가 된다.

7.6 쉼표 연산자( , )

피연산자를 왼쪽부터 차례대로 평가하고 결과는 마지막 피연산자에 대해서만 반환한다. 정재남 님이 스터디 영상에서 좋지 않은 코드니까 쓰지 말라셨다ㅋㅋ 여러 변수를 할당하는 목적으로 쓸 수도 있겠지만 특별한 사항이 아니면 변수는 선언과 동시에 할당하는 게 가장 좋고, 마지막 변수를 반환할 거면 굳이 이렇게 쓸 이유가 없다.

var x, y, z;

x = 1, y = 2, z = 3; // 3

7.7 그룹 연산자( ( ) )

연산자 중 우선순위가 가장 높다. 나눗셈, 곱셈에서 괄호를 쓰냐 안 쓰냐에 따라 결과가 다른 것처럼 먼저 연산해야 할 부분은 괄호로 묶어 주면 된다.

7.8 typeof 연산자

데이터 타입을 문자열로 반환한다. null 값의 경우 object를 반환하는 오류가 있다. null이 할당된 변수와 비교 시 일치 연산자( === )를 사용해야 한다. 배열도 object를 반환하기 때문에 Array.isArray()를 통해 타입을 확인하는 게 정확하다.

7.9 지수 연산자( ** )

ES7에서 도입된 것으로 거듭제곱을 계산할 때 기존에는 Math.pow(값, 지수)의 형태로 사용했던 것을 간단하게 표현할 수 있어 가독성이 좋다. 음수의 경우는 기호와 값을 괄호로 묶어서 사용해야 한다.

5 ** 2
(-5) ** 2

// 25

7.10 그 외의 연산자

?. 옵셔널 체이닝 연산자. 9장에서 상세하게 나오는데 React에서 자주 사용한다. delete 연산자. 10장에서 소개된다.

7.11 연산자의 부수 효과

할당 연산자( = ) , 증가/감소 연산자( ++ / -- ), delete 연산자는 피연산자의 값을 변경하거나 객체의 프로퍼티를 삭제하는 등 변수나 객체의 값에 영향을 준다.

7.12 연산자 우선순위

여러 개의 연산자로 이뤄진 문이 실행될 때 연산자가 실행 되는 순서가 있는데 우선적으로 연산해야 할 부분을 괄호()로 묶는 것을 권장한다.

정리

정재남 님이 스터디 영상에서 for 문의 증감식에 단항 산술 연산자 ++i 와 i++ 를 대입해 보시는데 관습적으로 i++를 사용하다 보니 깊게 생각해 본 적이 없어서 그런가 둘 다 같은 결과인 게 좀 신기했다. 변수에 따로 연산해서 콘솔로 결과를 보여줄 때는 위치에 따라 다르다 보니 당연히 for문에서도 결과가 달라진다고 생각했다.

삼항연산자는 과거 javascript를 처음 배울 때 가독성이 좋지 않으니 쓰지 말라고 강사 선생님이 말씀하셨는데 지금 React를 공부하다 보니 삼항연산자만큼 중요한 게 없다;; 아마 단계에 따라 추가적으로 알려주시려고 하지 않았나 싶긴 한데 당시에 뭣도 모르고 삼항연산자는 가독성이 안 좋으니 쓰지 말라고 블로깅 했던 걸 생각하면...

그 외 isNaN과 Number.isNaN이 별개의 함수로 기억해둬야 할 것 같고, 옵셔널 체이닝이 등장하는데 마찬가지 React에서 많이 쓰이기 때문에 9장에서 집중해서 봐야 할 것 같다.

모던 자바스크립트 Deep Dive 6장 데이터 타입

클라우드아실 — Wed, 8 Nov 2023 20:23:50 +0900

출처 : 예스24

스터디를 진행하면서 책을 읽고 내용과 떠오르는 생각, 용어들을 정리하고 있습니다.
문제 되는 부분이나 틀린 부분이 있다면 편하게 말씀해 주세요.

6장 데이터 타입

자바스크립트의 모든 값은 데이터 타입을 갖는다. 데이터 타입은 6가지의 기본형과 1가지의 참조형으로 분류할 수 있다.

구분	데이터 타입	설명
원시 타입 ( 기본형 )	숫자 타입	정수와 실수 구분 없이 하나의 숫자 타입만 존재
	문자열 타입	문자열
	불리언 타입	참과 거짓
	undefined 타입	선언시 암묵적으로 자동할당 되는 빈 값
	null 타입	의도적으로 할당하여 명시하는 빈 값
	심벌 타입	ES6에서 추가된 7번째 타입
객체 타입 ( 참조형 )		객체, 함수, 배열 등

ES11부터 새로운 원시값인 Bigint가 추가되었다.

const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991);

큰 정수를 표현할 수 있는 새로운 값으로 리터럴 뒤에 n을 붙이거나 Bigint 함수를 호출해 생성할 수 있다.

6.1 숫자 타입

자바스크립트의 숫자 타임은 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다. 자바스크립트 엔진이 정수 값의 경우 뒤에 소수점을 임의로 표시하지 않는다고 생각하면 된다. 세 가지의 특별한 값 표현도 있다.

Infinity : 양의 무한대
-Infinity : 음의 무한대
NaN : not a number의 산술 연산 불가

자바스크립트 엔진은 대소문자를 구분하기 때문에 NaN과 nan은 다른 값이니 주의가 필요하다. NaN은 좀 더 쉬운 예를 들면 문자열과 수를 곱하면 숫자 간의 연산이 아니라서 연산이 불가하다는 의미로 NaN이 반환된다.

6.2 문자열 타입

문자열 타입은 텍스트 데이터를 나타낸다. 작은따옴표( ' ' ) 나 큰 따옴표 ( " " ) 또는 백틱 ( ` ` ) 으로 텍스트를 감싸서 표현한다. 문자열을 따옴표로 감싸지 않으면 자바스크립트 엔진은 키워드나 식별자 같은 토큰으로 인식한다. 일반적으로 작은따옴표를 사용한다.

6.3 템플릿 리터럴

ES6부터 템플릿 리터럴 이라고 하는 새로운 문자열 표기법이 도입되었다. 이는 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능을 제공한다. 템플릿 리터럴은 백틱( ` ` )을 사용해 입력한 그대로, 또는 변수에 할당된 그대로 표현할 수 있는 방식이다.

let name = "강동원"
let feel = "행복"
}

function tag(str, ...args) {
  console.log(str[0], args[0], str[1], args[1], str[2])
 }
 
 tag `안녕하세요 ${name}입니다. 반갑습니다. ${feel}하세요`
  
 // 안녕하세요  강동원 입니다. 반갑습니다.  행복 하세요

/*
str = ['안녕하세요', '입니다.', '반갑습니다', '하세요']
arg = [${name}, ${feel}] 
 */

※ 태그드 템플릿이란?
: 위의 코드 예시처럼 함수를 괄호()가 아닌 백틱( ` ` )으로 호출하는 템플릿 리터럴 방식이다. 함수 호출 시 tag의 백틱 부분은 주석으로 기재한 배열과 같이 매개변수별로 분류되어 함수 내부의 배치 순서대로 호출된다. MDN을 보면서도 이해하기까지 상당히 오래 걸렸다..

6.3.1 멀티라인 문자열

따옴표로 감싼 일반 문자열은 줄바꿈이 불가하다. 또한 문자열을 따옴표로 감싸서 표현하기 때문에 문자열 내에 따옴표를 쓰고자 할 경우에도 문제가 발생한다. 이때 전통적(?)으로는 백슬래시 ( \ )로 시작하는 이스케이프 시퀀스를 사용하는 방식을 이용한다. 하지만 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄 바꿈이나 따옴표 등이 모두 표현 가능하다는 장점이 있다.

6.3.2 표현식 삽입

이전에는 여러 문자열을 하나로 연결할 때 띄워쓰기까지 계산한 문자열과 더하기 연산자를 사용했다.

var first = 'Dong-won'
var last = 'kang'

console.log('My name is ' + first + ' ' + last + '.');
console.log(`My name is ${first} ${last}.`);

// My name is Dong-won Kang.

템플릿 리터럴은 ( ${} ) 기호를 통해 표현식으로 문자열을 간단히 삽입할 수 있다. 이때 문자열로 타입이 강제로 변환되어 삽입된다. 위의 예시 코드의 두 console.log는 같은 결과값을 반환한다.

6.4 불리언 타입

불리언 타입은 참(true), 거짓(false)을 나타낸다. 조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용한다.

6.5 undefined 타입

undefined는 자바스크립트 엔진이 변수를 초기화 할 때 사용하는 값으로 자동할당되는 값이다. 변수에 값이 없다는 것을 명시하고 싶을 때는 null을 할당해야 하고, 의도적으로 undefined를 할당한다면 혼란을 줄 수 있다. undefined는 직역하면 '정의되지 않은' 으로 선언과 정의는 실제로 메모리 주소를 할당하는가로 구분한다. 하지만 자바스크립트 엔진의 경우 변수를 선언하면 암묵적으로 정의가 이뤄진다. ECMAScript에서 변수는 '선언한다'라고 표현하고, 함수는 '정의한다'라고 표현하고 있으므로 이에 따라 표현하도록 한다.

6.6 null 타입

null은 변수에 값이 없다는 것을 의도적으로 명시하는 것으로 대소문자에 주의해야 한다. 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것을 의미하며, 이에 따라 기존 참조값에 대해 자바스크립트 엔진은 가비지 콜렉션을 수행할 것이다. 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.

let element = document.querySelector('.myClass')
console.log(element) // null

6.7 심벌 타입

심벌은 ES6에서 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다. Symbol 함수를 호출해 생성하며, 이 때 생성된 값은 외부에 노출되지 않고, 다른 값과 절대 중복되지 않는 유일무이한 값이다.

Symbol('abc') === Symbol('abc') // false

6.8 객체 타입

자바스크립트는 객체 기반의 언어이며, 자바스크립트를 이루고 있는 거의 모든 것은 객체이다. 6가지 원시타입 이외의 값은 모두 객체타입이다. 11장에서 상세 설명.

6.9.1 데이터 타입에 의한 메모리 공간의 확보와 참조

메모리에 값을 저장할 때 메모리 공간의 크기를 결정해야 하고, 낭비와 손실 없이 값을 저장할 수 있는지를 판단해야 한다. 자바스크립트 엔진은 값의 데이터 타입에 따라 메모리 공간의 크기가 결정된다. 컴퓨터는 한 번에 읽어 들여야 할 메모리 셀의 크기를 변수에 할당된 데이터 타입으로 인식(해석)한다.

※ 메모리 공간 확보 원리란?
변수를 선언하면 각 변수는 각각의 메모리 주소를 가지게 된다. 만약 동일한 값을 할당할 경우 하나의 메모리 주소를 같이 참조해서 사용하고, 재할당으로 변수의 값이 서로 달라지면 그때 새로운 값의 메모리 주소를 생성하는 방식으로 메모리를 관리한다.
※ 심벌 테이블이란?
컴파일러 또는 인터프리터는 심벌 테이블이라 부르는 자료 구조를 통해 식별자를 키로 하여, 바인딩 된 값의 메모리 주소, 데이터 타입, 스코프 등을 관리한다. 즉 키 : 값으로 구성된 해시 테이블의 형태로, 심볼을 위한 큰 심볼 테이블, 스코프에 따른 계층구조의 심볼 테이블 등으로 구성된다.

6.9.2 데이터 타입에 의한 값의 해석

정리해서 데이터 타입이 필요한 이유는 다음과 같다.

값을 저장할 때 확보해야 하는 메로리 공간의 크기를 결정한다.
값을 참조할 때 한번에 읽을 메모리 공간의 크기를 결정한다.
읽은 메모리의 2진수를 어떻게 해석할지 결정한다.

6.10.1 동적 타입 언어와 정적 타입 언어

C나 자바 같은 정적 타입의 언어는 변수를 선언할 때 데이터 타입도 사전에 선언한다. 이를 명시적 타입 선언이라 한다. 정적 타입 언어는 선언한 타입에 맞는 값만 변수에 할당할 수 있고, 타입을 변경할 수 없다. 컴파일 시점에 타입과 값이 일치하는지 타입 체크를 수행하고, 만약 통과하지 못하면 에러가 발생한다. 안정적인 코드의 구현을 통해 에러를 줄인다.

자바에서 num 변수에 정수 9를 할당하는 방식. 
정수(integer)라는 뜻의 int를 변수명 앞에 기재한다.
int num = 9;

자바스크립트는 var, let, const와 같은 키워드를 사용해 변수를 선언한다. 어떠한 데이터 값이라도 자유롭게 할당할 수 있고, 재할당시에도 타입체크를 하지 않는다. typeof 연산자로 변수를 연산하면 할당된 값의 데이터 타입을 반환한다. 즉, 자바스크립트의 변수는 선언이 아닌 할당에 의해. 정확히는 할당된 값에 의해 타입이 결정된다. 그리고 재할당에 의해 변수의 타입은 언제든 동적으로 변할 수 있는데 이를 동적 타이핑이라 하며, 자바스크립트는 동적 타입 언어이다.

6.10.1 동적 타입 언어와 정적 타입 언어

표현식인 문과 표현식이 아닌 문을 구별한느 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다. 표현식인 문은 결과가 값이기 때문에 변수에 할당할 수 있으나 표현식이 아닌 문은 에러가 발생한다. 크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined를 출력하는데 이를 완료 값이라 한다. 완료 값은 표현식의 평가 결과가 아니다. 따라서 변수에 할당할 수 없고 참조할 수도 없다.

6.10.2 동적 타입 언어와 변수

동적 타입 언어는 데이터 타입에 대해 무감각해질 정도로 편리하다는 장점이 있다. 하지만 복잡한 프로그램에서는 변화하는 변수 값을 추적하기 어려울 수 있는 구조적 문제가 있다. 의도적인 값 변경으로 언제든 타입이 바뀔 수 있고, 자바스크립트 엔진에 의해 암묵적으로 자동변환 될 수도 있다. 결국 동적 타입 언어는 유연성은 높지만 신뢰성은 떨어진다. 안정적인 프로그래밍을 위해 변수를 사용시 일반적인 주의사항은 다음과 같다.

변수는 꼭 필요한 경우에 한해 제한적으로 사용한다. 변수가 많을수록 오류가 발생할 확률도 높아진다.
변수의 유효 범위(스코프)는 최대한 좁게 만들어 범위설정으로 인한 오류나 부작용을 억제해야 한다.
마찬가지 전역 변수는 최대한 사용하지 않도록 한다.
상수를 사용해 값의 변경을 억제한다.
변수 이름은 목적이나 의미를 파악할 수 있도록 짓는다.

코드는 동작하는 것만이 아니라 개발자를 위한 문서의 목적도 있다. 따라서 가독성이 좋은 코드가 좋은 코드다.

정리

템플릿 리터럴은 문자열 표현을 정말 편하게 만들어주고, 표현식도 할당할 수 있어서 함수의 결과를 문자열로 표현할 때도 많이 이용했다. 템플릿 리터럴 쵝오!. 태그드 리터럴은 MDN을 보고도 이해가 안돼서 엄청 검색해 봤는데 직접적으로 사용하기에는 무리가 있을 것 같다. 해당 코드를 사용 시 협업에 오히려 문제가 생기지 않을까..?;; 그런데 React 작업 시 CSS를 styled 라이브러리로 조작할 수 있는데 이때 사용하는 백틱이 태그드 리터럴을 이용한 방식이라고 한다.

styled 라이브러리 사용 예시

export const BtSlideNext = styled.button`
  position: absolute;
  top: 50%;
  width: 50px;
`

어떠한 메서드나 라이브러리 등을 만드는데 분명히 장점인 부분이 있다는 것이리라. 그리고 데이터 타입 상관없이 변수에 할당할 수 있다는 것은 알고 있었지만, 그게 변수 할당시 데이터 타입이 결정된다는 이야기나 마찬가지일 줄이야..; 여러모로 알고 있는 동작에 대해 세부적으로 몰랐던 원리를 알아가는 것 같다.

모던 자바스크립트 Deep Dive 5장 표현식과 문

클라우드아실 — Tue, 7 Nov 2023 20:18:41 +0900

출처 : 예스24

스터디를 진행하면서 책을 읽고 내용과 떠오르는 생각, 용어들을 정리하고 있습니다.
문제 되는 부분이나 틀린 부분이 있다면 편하게 말씀해 주세요.

5장 표현식과 문

5.1 값

용어의 의미를 정확히 설명할 수 없다면 개념을 제대로 이해하지 못한 경우가 많다. 값(value)은 식(표현식)이 평가(evaluate)되어 생성된 결과를 말한다. 모든 값은 데이터 타입을 가지며, 이에 따라 다르게 해석될 수 있다. 예를 들어 이진수 01000001은 숫자 65에 해당하지만 문자 'A'로도 해석할 수 있다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간, 또는 해당 공간을 식별하기 위해 붙인 이름이다.

var sum = 10 + 20;

10 + 20은 30으로 sum이라는 변수에 최종 할당되는 값은 30이다. 10 + 20은 할당 이전에 평가되어 값을 생성해야 한다.

5.2 리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법이다. 자바스크립트 엔진은 코드가 실행되는 런타임 시점에 리터럴을 평가해 값을 생성한다. 즉, 리터럴은 값을 생성하기 위해 미리 약속한 표기법이다.

5.3 표현식

표현식은 값으로 평가할 수 있는 문(statement)이다. 즉, 표현식이 평가(실행)되면 새로운 값을 생성하거나 기존 값을 참조한다. 표현식은 리터럴, 식별자(변수, 함수), 연산자, 함수 호출 등의 조합으로 다양하게 이뤄질 수 있다. 즉, 값으로 평가(실행)될 수 있는 문은 모두 표현식이다.

var num = 1;
if( 2 === ( num + 1 ) ) {
  console.log("똑같다")
}

※ 표현식을 값 대신?
: 표현식은 문법적으로 값이 위치할 수 있는 자리에 위치할 수 있고, 다른 표현식의 일부가 되어 새로운 값을 만들어낼 수도 있다.
위의 예시에서 if 문 내에서 숫자 2와 ( num + 1 )을 동등 비교하고 있는데 ( num + 1 ) 은 표현식으로 값 2로 평가되기 때문에 정상동작한다.

5.4 문

문(statement)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다. 문은 여러 토큰으로 구성되며, 이는 컴퓨터에 내리는 명령이 되기 때문에 문을 명령문이라고도 부른다.

※ 토근이란?
: 문법적인 의미를 가지며, 문법적으로 더이상 나눌 수 없는 코드의 기본 요소를 의미한다. 즉, 기호 하나, 연산자 하나하나가 모두 토큰이다.

5.5 세미콜론과 세미콜론 자동 삽입 기능

세미콜론(;)은 문의 종료를 나타내고 대부분의 프로그래밍 언어는 반드시 코드 끝에 붙여야 한다. 하지만 자바스크립트 엔진은 세미콜론 자동 삽입 기능이 암묵적으로 수행되기 때문에 세미콜론을 옵션으로 보고 생략해도 된다. 원칙적으로 if문, for문, 함수 등의 0개 이상의 문을 중괄호로 묶은 코드 블록은 해당 코드블록 하나하나가 자체 종결성을 갖는다고 보기 때문에 세미콜론을 붙이지 않는다. 하지만 동작을 제대로 예측하지 못해 오류가 발생할 수 있으므로 세미콜론을 가급적 사용하도록 권장하는 분위기다.

function foo () {
  return
  {}
}

※ 자바스크립트 엔진의 암묵적인 동작(1)?
: 위의 코드는 중괄호 내의 내용을 반환하는 return {} 으로 고려했으나, 실제 동작은 return;으로 return 이후의 중괄호는 실행되지 않는다.

5.6 표현식인 문과 표현식이 아닌 문

정리

표현식과 값의 관계에 대해서 명확하게 알 수 있었고, 값 대신 표현식을 변수에 할당하거나 조건문에 피연산자로 할당하는 것처럼 좀 더 자유도 있게 사용할 수 있다는 것을 배웠다. 이번 챕터는 큰 맥락을 관통하는 것은 아니지만 챕터 초반에 나온 것처럼 각 용어를 명확히 정의하여 세부적인 동작에 관해 파악하도록 돕는 챕터라 생각한다.