냠

[Day5] Javscript

옝옹 — Fri, 24 Jan 2025 22:31:14 +0900

Day6부터는 https://yeeun426.github.io/ 여기에 정리하였습니다. !

Javascript variables

변수는 데이터를 저장하기 위한 컨테이너

JS의 변수 선언 방법

변수 선언 방법	언제 사용해야하나요?
var	오래된 브라우저를 사용해야 하는 경우
let	const를 사용할 수 없는 경우
const	1. 값을 변경하면 안되는 경우 (상수) 2. type을 변경하면 안되는 경우

Javascript 식별자

이름에는 문자, 숫자, 밑줄, 달러 기호가 포함될 수 있습니다.
이름은 문자로 시작해야 합니다.
이름은 $와 _로 시작할 수도 있습니다
이름은 대소문자를 구분합니다(y와 Y는 다른 변수입니다).
예약어(JavaScript 키워드 등)는 이름으로 사용할 수 없습니다.

할당 연산자

: js에서 등호(=)는 "equal to" 연산자가 아닌 "대입" 연산자이다.

** "equal to" 연산자는 JS에서는 == 와 같이 작성된다. **

변수 선언

var carName;

value없이 선언된 변수는 undefined 값을 갖는다.

let person = "John Doe", carName = "Volvo", price = 200;
// 하나의 문장에서 여러개의 변수 선언

Javascript Let

var 키워드의 문제점
var로 선언된 변수는 다시 선언해도 값이 손실되지 않는다.
var carName = "Volvo";
var carName;
// carName은 여전히 Volvo를 갖는다.
var는 재선언, 업데이트 모두 가능하다.

let 키워드는 var 키워드의 다른점
let은 업데이트는 가능하지만 재선언이 불가능하다.
let carName = "Volvo";
let carName;
// 해당 코드는 작동하지 않음
const 키워드 특징
var, let, const
let보다 const를 사용해라?

Javascript 산술

: 앞에 부터 차근차근 연산한다.

let x = "5" + 2 + 3; // "523" 출력
let x = 2 + 3 + "5"; // "55" 출력

호이스팅 (Hoisting)

JavaScript는 변수와 함수 선언을 코드 실행 전에 메모리에 미리 할당하는 특성이 있음.
변수 선언이 코드의 최상단으로 끌어올려지는 것처럼 동작하는 현상을 호이스팅이라 함.
예제:위 코드에서 var a;가 내부적으로 최상단으로 이동함.
console.log(a); // undefined var a = 10;
let과 const는 이러한 루즈한 문법을 방지하기 위해 등장했으며, 호이스팅은 되지만 초기화 전에는 접근 불가함 (Temporal Dead Zone).

[Day4] 부트스트랩 & Javascript

옝옹 — Thu, 23 Jan 2025 23:46:41 +0900

Bootstrap 5 is mobile-first

모바일 기기에 반응하도록 설계하기 위해 아래 meta태그를 추가

아래 코드가 없는 경우 반응형으로 적용되지 않는다.

  <meta name="viewport" content="width=device-width, initial-scale=1">

** p-5가 최대이며, 숫자가 그 이상이 되면 그냥 0이 됨 **

BS5 Tables

  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>

기본 Bootstrap 5 테이블에는 가벼운 padding과 수평 구분선이 있습니다.

class	effect
.table-striped
.table-bordered
.table-hover	행에 호버 효과
.table-dark
.table-borderless
.table-responsive

BS5 Responsive Images

.img-fluid 를 추가하여 반응형 이미지를 만들면 부모 요소에 맞게 잘 조정된다
.img-fluid 클래스는 이미지에 max-width: 100%; height: auto; 를 적용한다.

BS5 Alerts

bootstrap alert에 javascript 더하기

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
  	function a(){
    	const bValue=document.getElementById('b').value;
        if(bValue===""){
        	//alert("값 없음");
            document.getElementById("c").style.visibility="visible";
        }
    	
    }
  </script>
</head>
<body>

<div class="container mt-3">
  <h2>Alerts</h2>
  <p>Alerts are created with the .alert class, followed by a contextual color classes:</p>
  <div class="alert alert-success">
    <strong>Success!</strong> This alert box could indicate a successful or positive action.
  </div>
  <div class="alert alert-info">
    <strong>Info!</strong> This alert box could indicate a neutral informative change or action.
  </div>
  <div class="alert alert-warning">
    <strong>Warning!</strong> This alert box could indicate a warning that might need attention.
  </div>
  <input id="b" /><button onclick="a()">전송</button>
  <div class="alert alert-danger" style="visibility:hidden;" id="c">
    <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
  </div>
  <div class="alert alert-primary">
    <strong>Primary!</strong> Indicates an important action.
  </div>
  <div class="alert alert-secondary">
    <strong>Secondary!</strong> Indicates a slightly less important action.
  </div>
  <div class="alert alert-dark">
    <strong>Dark!</strong> Dark grey alert.
  </div>
  <div class="alert alert-light">
    <strong>Light!</strong> Light grey alert.
  </div>
</div>

</body>
</html>

Spinner buttons

스피너가 계속해서 돌아가는 효과

<button class="btn btn-primary">
	<span class="spinner-border spinner-border-sm"></span>
	Loading..
</button>

BS5 Progress Bars

BS5 Pagination

<ul class="pagination">
  <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  <li class="page-item"><a class="page-link" href="#">1</a></li>
  <li class="page-item"><a class="page-link" href="#">2</a></li>
  <li class="page-item"><a class="page-link" href="#">3</a></li>
  <li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

BS5 Modal

기본 모달 만드는 방법

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

<부트스트랩으로 회원가입 모달 만드는 예제>

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap 5 Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

    <style>
      .modal_body {
        font-family: Arial, sans-serif;
        background-color: #f4f4f4;
        display: flex;
        justify-content: center;
        align-items: center;
        /* height: 50vh; */
        margin: 0;
      }
      .modal_container {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        /* width: 300px; */
        margin: 50px 0;
      }
      .modal_container h1 {
        text-align: center;
        color: #333;
      }
      .modal_container label {
        margin-top: 10px;
        display: block;
        color: #555;
      }
      .modal_container input[type="text"],
      .modal_container input[type="email"],
      .modal_container input[type="password"] {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
      }
      .modal_container input[type="submit"] {
        background-color: #5cb85c;
        color: white;
        border: none;
        padding: 10px;
        border-radius: 4px;
        cursor: pointer;
        width: 100%;
        margin-top: 15px;
      }
      .modal_container input[type="submit"]:hover {
        background-color: #4cae4c;
      }
    </style>
  </head>
  <body>
    <div class="container p-5 bg-primary text-white text-center">
      <h1>My First Bootstrap Page</h1>
      <p>Resize this responsive page to see the effect!</p>
    </div>

    <div class="container">
      <div class="row">
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
          <div class="container-fluid">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a
                  class="nav-link active"
                  href="#"
                  data-bs-toggle="modal"
                  data-bs-target="#a"
                  >회원가입</a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>

    <div class="container mt-5 border">
      <div class="row">
        <div class="col-sm-4">
          <h3>Column 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris...
          </p>
        </div>
        <div class="col-sm-4">
          <h3>Column 2</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris...
          </p>
        </div>
        <div class="col-sm-4">
          <h3>Column 3</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>
            Ut enim ad minim veniam, quis nostrud exercitation ullamco
            laboris...
          </p>
        </div>
      </div>
    </div>

    <!-- The Modal -->

    <div class="modal" id="a">
      <div class="modal-dialog">
        <div class="modal-content">
          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">회원가입</h4>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
            ></button>
          </div>

          <!-- Modal body -->
          <div class="modal_body">
            <div class="modal_container">
              <form action="/submit" method="post">
                <label for="name">이름:</label>
                <input type="text" id="name" name="name" required />

                <label for="email">이메일:</label>
                <input type="email" id="email" name="email" required />

                <label for="password">비밀번호:</label>
                <input type="password" id="password" name="password" required />

                <input type="submit" value="가입하기" />
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

JavaScript

javascript는 html 컨텐츠를 변경할 수 있다.

document.getElementById("demo").innerHTML = "Hello JavaScript";

(ex 1) javascript는 html 컨텐츠를 변경할 수 있다.

왼쪽 버튼을 클릭하면 myImage라는 아이디를 가진 요소의 pic_bulbon.gif로 바꾸겠다.
오른쪽 버튼을 누르면 다시 pic_buloff.gif로 바꾼다.

javascript는 css를 변경할 수 있다.

document.getElementById("demo").style.fontSize = "35px";

JS Where to go

<script> tag

: HTML에서는 JavaScript 코드가 <script>및 </script>태그 사이에 삽입됩니다.

  <!-- src로 외부 스크립트를 가져옴-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> 
  <!-- 내 코드를 불러옴 -->
  <script>
    alert()
  </script>

** 어디에나 넣어도되지만 스크립트끼리, 스타일끼리 모여져 있는게 가독성 좋음 **

JS Output

innerHTML : HTML 요소에 쓰기
document.write() : HTML 출력에 쓰기
- HTML 문서가 로드된 후에 document.write()를 사용하면 기존 HTML이 모두 삭제된다
window.alert() : alert 에 쓰기
console.log() : 브라우저 콘솔에 쓰기
- 디버깅 목적으로 메서드 호출
window.print() : 현재 창의 내용을 인쇄

JS의 변수는 ES6에서 추가된 중요한 개념이기 때문에 다음 블로그에서 호이스팅과 변수, 재할당 등에 대해 정리를 할 것이다 !

[Day3] CSS 기초 & bootstrap

옝옹 — Wed, 22 Jan 2025 23:04:38 +0900

css 강의는 새로 알게된 개념과 면접에서 필요한 개념 위주로 정리해보았다.

CSS Box model

- 디자인과 레이아웃을 설명할 때 사용된다.

- box model은 본질적으로 모든 html 요소를 감싸는 상자이다.

Content - 텍스트와 이미지가 나타나는 상자의 내용
Padding - 콘텐츠 주변 영역을 지웁니다. padding은 투명합니다.
Border - 패딩과 콘텐츠를 둘러싼 테두리
Margin - 테두리 밖의 영역을 지웁니다. margin은 투명합니다.

** 요소의 총 width와 height를 계산하려면 padding과 border도 포함해야 한다. **

css outline

: border 바깥쪽에 그려진 선

CSS Font

.p1 {
  font-family: "Times New Roman", Times, serif;
}

font-family 속성은 브라우저/운영 체제 간의 최대 호환성을 보장하기 위해 "대체" 시스템으로 여러 글꼴 이름을 보유해야 합니다.
두번째, 세번째 글꼴은 첫 번째 글꼴을 찾을 수 없는 경우를 대비한 백업

CSS Links

상태에 따라 link의 스타일이 다르게 지정될 수 있다.

a:link- 일반적인 방문하지 않은 링크
a:visited- 사용자가 방문한 링크
a:hover- 사용자가 마우스를 올리면 링크가 표시됩니다.
a:active- 클릭하는 순간 링크

** a:hover는 a:link와 a:visited 뒤에 와야 하며, a:active는 a:hover 뒤에 와야 합니다. **

CSS Display

화면에 어떻게 드러날지를 결정

block	기본값 width가 100%가 되게함 -> 전체 너비를 차지한다.
inline	새 줄에서 시작하지 않는 컨텐츠만 감쌀 정도의 크기
inline-block	inline 속성을 갖지만 임의로 크기 변경 가능
none	화면에서 사라짐

display : none OR visibility : hidden

display: none
- 요소가 숨겨지고 페이지는 요소가 없는 것처럼 표시
visibilty : hidden
- 요소가 숨겨지지만 레이아웃에는 있는 것처럼 영향을 미침

CSS Position

문서 상에 요소를 배치하는 방법

static	작성된 순서대로 브라우저에 표시 static 으로 위치한 요소는 위쪽, 아래쪽, 왼쪽, 오른쪽 속성의 영향을 받지 않습니다.
relative	원래 위치를 상대적으로 배치
fixed	특정 부분에 고정
absolute	배치 기준을 가장 가까운 위치에 지정된 상위요소에서 찾음 부모 요소를 기준으로 속성 적용
sticky	사용자의 스크롤 위치를 기준으로 요소가 배치됨 즉, 스크롤링할 때 효과를 봄

CSS Float

float 속성

: 콘텐츠의 위치와 형식을 지정하는 데 사용

오른쪽, 왼쪽으로 객체를 띄어서 정렬하는 속성

사진에 float 속성을 적용하면 이후에 오는 글자나 다른 요소들은 그 사진 주위로 둘러싼 형태가 된다.

left- 요소는 컨테이너의 왼쪽에 떠 있습니다.
right- 요소가 컨테이너의 오른쪽에 떠 있습니다.
none- 요소는 떠다니지 않습니다(텍스트에서 발생한 위치에만 표시됩니다). 이는 기본값입니다.
inherit- 요소는 부모의 float 값을 상속받습니다.

img { float: right;}

사진 주위로 글자가 따라 붙지 않게 하려면 ?

-> clear 속성

: float바로 아래에 있는 요소(오른쪽이나 왼쪽이 아닌)를 원할 경우 해당 속성을 사용해야 한다.

none - 기초값, clear를 설정하지 않는 것과 같음
left - 요소는 왼쪽에 떠 있는 요소 아래로 밀려납니다. (왼쪽 취소)
right - 해당 요소는 오른쪽에 떠 있는 요소 아래로 밀려납니다. (오른쪽 취소)
both - 해당 요소는 왼쪽 및 오른쪽 플로팅 요소 아래로 푸시됩니다. (오른쪽 왼쪽 취소)
inherit - 요소는 부모로부터 명확한 값을 상속받습니다.

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  padding: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  padding: 10px;
  border: 3px solid red;
}

.div3 {
  float: left;
  padding: 10px;  
  border: 3px solid #73AD21;
}

.div4 {
  padding: 10px;
  border: 3px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div>
<br><br>

<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>
</html>

clear를 사용하지 않았을 때 vs 사용했을 떄

CSS Pseudo-classes (가상 클래스)

: 요소의 특별한 상태를 정의하는 데 사용된다.

예를 들어,

사용자가 마우스를 요소 위로 가져갈 때 요소 스타일을 지정할 때
방문한 링크와 방문하지 않은 링크의 스타일을 다르게 지정할 때
포커스가 맞춰지면 요소에 스타일을 지정할 때
유효한/잘못된/필수/선택 양식 요소 스타일

가상 클래스	하는 일
:first-child	자식요소 중에 가장 첫번째를 선택하는 가상클래스
:last-child	자식요소 중에 가장 마지막을 선택하는 가상클래스
:nth-child()	자식요소 중에 형제 요소 중 n번째를 선택하는 가상클래스 :nth-child(odd) -> 홀수 선택 , even(짝수)

CSS Pseudo-element(가상 요소)

: 요소의 특정 부분에 스타일을 지정하는 데 사용

예를 들어,

요소의 첫 글자 또는 줄에 스타일 지정
요소 앞이나 뒤에 콘텐츠 삽입
목록 항목의 마커 스타일 지정
대화 상자 뒤에 있는 뷰박스 스타일 지정

Syntax

selector::pseudo-element {
  property: value;
}

가상 요소	하는 일
::first-line	텍스트의 첫 번째 줄에 특별한 스타일을 추가한다
::first-letter	텍스트의 첫번째 글자에 스타일 추가
::before	요소의 내용 앞에 어떤 내용을 삽입하는 데 사용
::after	요소의 내용 뒤에 일부 내용을 삽입하는 데 사용

CSS Combinators

후손 결합자(space)
자식 결합자 (>)
- 지정된 요소의 자식인 모든 요소
다음 형제 결합자 (+)
- 특정 요소 바로 뒤에 있는(바로 뒤에 배치된 첫번째) 요소
후속 형제 결합자 (~)
- 지정된 요소의 다음 형제인 모든 요소

CSS Flexbox

Flexbox는 Flexible Box Layout 모듈의 약자
항목을 행이나 열로 배열하는 레이아웃 방법
Flex를 사용하면 float를 사용하지 않고도 유연하게 반응형 레이아웃 구조를 디자인할 수 있음

구성요소

Flex container - 부모(컨테이너) <div> 요소
Flex Items - 컨테이너 내부의 항목 <div>

강사님이 알려주신 아래 웹 게임으로 flexbox에 대해

적용해보며 이해할 수 있었다

어렵다면 한번씩 해봐도 좋을거같다 ~

https://flexboxfroggy.com/#ko

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

Bootstrap5

Bootstrap5는 반응형 모바일 웹사이트를 만드는데 가장 인기있는 부트스트랩의 최신 버전
- Bootstrap 이란 ? 더 빠르고 쉬운 웹 개발을 위한 무료 프런트엔드 프레임워크
- 반응형 웹 이란 ? 작은 휴대폰에서 대형 데스크톱까지 보기 좋게 보이도록 자동 조정되는 웹 사이트
Bootstrap 3, 4와 주요 차이점은 Bootstrap 5가 jQuery 대신 vanilla JavaScript로 전환했다는 것

Bootstrap 장점

사용이 간편 : HTML과 CSS에 대한 기본 지식만 있다면 사용 가능
반응형 기능 : 휴대폰, 테블릿, 데스크탑에 맞게 조정
모바일 우선 접근 방식
브라우저 호환성 : 모든 최신 브라우저와 호환됨. 하지만 IE11이하에 대한 지원이 필요한 경우 BS4 또는 BS3 사용

Bootstrap 5 CDN

: bootstrap5를 직접 다운로드하고 싶지 않다면 CDN에 포함하여 작성

<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap5 Containers

컨테이너 내부의 내용을 채우는데 사용된다.

클래스 .container는 반응형 고정 너비 컨테이너를 제공
클래스 .container-fluid는 뷰포트의 전체 너비에 걸쳐 전체 너비 컨테이너를 제공

Fixed Container

클래스를 사용해 .container 반응형 고정 너비 컨테이너를 만든다.

** 화면 크기에 따라 max-width가 변경 된다는 점을 유의 ! **

	Extra small < 576px	Small >= 576px	Medium >= 768px	Large >= 992px	Extra Large >= 1200px	XXL >= 1400px
max-width	100%	540px	720px	960px	1140px	1320px

Fluid Container

항상 화면 전체 너비에 걸쳐져 있는 전체 너비 컨테이너를 생성한다. (width is always 100%)

Container Padding

container는 왼쪽 오른쪽 패딩이 있고, 위 아래는 패딩이 없다. 패딩이 필요할 때 간격 유틸리티를 .pt-5를 사용해 적용시킨다.

<div class="container pt-5"></div>

.pt-5는 'paddint-top'을 의미한다.

Responsive Container

.container-sm|md|lg|xl 클래스를 사용하여 컨테이너가 언제 반응해야 하는지 결정할 수 있다.
max-width 컨테이너의 는 다양한 화면 크기/뷰포트에서 변경된다.

Bootstrap 5 Grid System

flexbox를 기반으로 구축되었으며 페이지 전체를 최대 12개의 열로 나눠어 생각
12개의 열을 모두 개별적으로 사용하고 싶지 않으면 열을 그룹화하여 더 넓은 열을 만들 수 있습니다.

Grid Classes

.col-(매우 작은 기기 - 화면 너비가 576px 미만)
.col-sm-(소형 기기 - 화면 너비가 576px 이상)
.col-md-(중간 장치 - 화면 너비가 768px 이상)
.col-lg-(대형 기기 - 화면 너비가 992px 이상)
.col-xl-(대형 기기 - 화면 너비가 1200px 이상)
.col-xxl-(xxlarge 장치 - 화면 너비가 1400px 이상)

Three Equal Columns

.col 클래스 사용

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Responsive Columns

(ex1) 초대형 데스크톱으로 확장되는 4개의 동일 너비 열을 만드는 방법

<!-- 모바일 폰이나 너비가 576px 미만인 화면에서는 열이 자동으로 서로 위에 쌓인다-->
<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

(ex2) 두 개의 다양한 너비의 열을 가져오는 방법

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

: col-sm-3 : sm크기가 되면 반응형

Bootstrap5 Text/Typography

- Bootstrap 5는 기본값 font-size는 1rem(기본값 16px)을 사용하며 이는 line-height는 1.5이다.

<h1> ~ <h6>

<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>

Display Headings (.display-1 ~ .display-6)

: 일반 헤딩보다 더 눈에 띄도록 사양됨 -> 글자 크기가 더 크고 글꼴 두께가 더 가벼움

<div>
  <h1 class="display-1">Display 1</h1>
  <h1 class="display-2">Display 2</h1>
  <h1 class="display-3">Display 3</h1>
  <h1 class="display-4">Display 4</h1>
  <h1 class="display-5">Display 5</h1>
  <h1 class="display-6">Display 6</h1>
</div>

<small>

모든 제목에 더 작고 보조적인 텍스트를 생성

<h1>h1 heading <small>secondary text</small></h1>

<mark>

노란색 배경과 약간의 패딩으로 스타일이 지정됨

<p>Use the mark element (or the .mark class) to <mark>highlight</mark> text.</p>

etc.

<abbr>	점선 밑줄 쪽에 마우스를 올리면 물음표가 있는 커서로 지정
<blockquote>	다른 출처의 콘텐츠 블록을 인용할 때 클래스를 a에 추가 "from WWF's website" 같은 출처를 지정할 때는 .blockquote-footer 사용
<code>	html 요소 스타일 지정
<kbd>

[Day2] html, css 기초 & virtual dom

옝옹 — Tue, 21 Jan 2025 21:08:27 +0900

HTML favicon

파비콘 : 글쓰기 탭 왼쪽에 이미지가 표시됨

제목 : 글쓰기 (page title)

  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

HTML page title

<!DOCTYPE html>
<html>
<head>
  <title>HTML Tutorial</title>
</head>
<body>
The content of the document......
</body>
</html>

HTML table

태크	정의
<td>	테이블 데이터
<tr>	테이블 행
<th>	테이블 헤더

** <th>는 굵게 표시되고 가운데 정렬됨

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

HTML Lists

순서 없는 리스트 : 목록 항목에 글머리 기호 (작은 검은색 원)으로 표시됨

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

순서 있는 리스트 : 목록 항목에 숫자가 표시됨.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML block and inline Elements

block : 새 줄에서 시작하며, 항상 사용 가능한 전체 너비를 차지한다.
- <p> : html문서의 문단을 정의
- <div> : html요소를 위한 컨테이너
inline : 새 줄에서 시작하지 않으며, 필요한 너비만 차지
- <span> : 텍스트의 일부를 표시하는데 사용

HTML <form><input>

사용자로부터 데이터를 입력받기 위한 대화형 컨트롤
type 속성 값에 따라 다양한 컨트롤 유형을 제공
- <input type = "text">

<form action="처리 할 페이지주소" method="get|post"></form>

action = "" : 입력 받은 데이터를 처리할 스크립트 파일을 명시
method = "" : 입력받은 데이터를 서버에 전달하는 방식
- method 생략시 default는 get

[자주 쓰이는 type 속성 값]

<inut type = " ?? " >	설명
button	일반 버튼
checkbox	체크박스
color	사용자가 색상을 선택하거나 입력할 수 있는 컬러 피커 형태의 입력 필드
date	날짜 입력 컨트롤
datetime-local	날짜와 시간 입력 필드
email	이메일 주소 필드
file	파일 선택 및 업로드
password	비밀번호 입력 필드
radio	라디오 버튼

vscode로 html 실행해보기

<폴더 내의 html파일을 클릭하여 실행하는 경우>

http없는 단순한 파일형으로 웹 페이지가 열린다. 즉, 웹서버가 구축되지 않았다.

<vscode에서 Live Server를 이용하여 실행한 경우>

웹서버 구축됨 -> html이 deploy됨

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입 폼</title>
</head>
<body>
    <h1>회원가입</h1>
    <!-- action이 없으면 서버로 가지 않음 -->
    <form action="MainServlet" method="post"> 
        <input type="hidden" name="sign" value="registMember"><br><br>

        <label for="name">이름:</label><br>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">이메일:</label><br>
        <input type="email" id="email" name="email" required><br><br>

        <label for="password">비밀번호:</label><br>
        <input type="password" id="password" name="password" required><br><br>

        <input type="submit" value="가입하기">
    </form>
</body>
</html>

<위 코드에서 input값을 입력 후 button을 누른 경우>

action값을 취했을 경우

입력한 input값이 [이름 = 값 & 이름 = 값 & 이름 = 값] 으로 url에 나타난다.

이를 쿼리 스트링이라고 한다.

쿼리스트링 : URL 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법

ㄴ 주로 GET방식으로 데이터를 요청할 때 쓰인다.

ㄴ URL에 노출되기 때문에 보안에 취약하기도 하다.

<name 속성을 없앴을 경우>

value들이 서버로 넘어가지 않는다. -> name 속성을 가진 경우만 서버로 제출 된다.

HTTP (HyperText Transfer Protocol)

: 클라이언트와 서버 간에 데이터를 주고받기 위한 프로토콜

기본적으로 데이터를 주고받는 규칙을 정의하며, RESTful이 이를 기반으로 작동

HTTP 메소드	요청
GET	데이터를 요청 -> 오직 받기만 함
POST	데이터를 서버에 제출할 때
PUT	서버에 저장된 데이터를 수정 & 대체
DELETE	서버에 저장된 데이터를 삭제

RESTful API (Representational State Transfer)

: 웹 표준을 기반으로 API 설계 원칙

REST 원칙을 따르는 API는 HTTP 프로토콜을 사용하여 데이터를 주고받으며, 웹 개발에서 널리 사용됨

보안이 취약해서 get, post만 사용할 것을 지향함

-> 즉, RESTful은 HTTP 위에서 설계된 하나의 스타일이라고 볼 수 있습니다.

servlet (서블릿)

form태그에서 servlet을 사용하는 것을 보고 조금 더 조사해보았다.

servlet : 동적 웹 페이지를 만들 때 사용되는 자바 기반의 웹 애플리케이션 프로그래밍 기술

웹 요청과 응답의 흐름을 간단한 메서드 호출만으로 다룰 수 있게 해준다.
예를들면 로그인 시도를 할 때, 서버가 클라이언트에서 입력되는 아이디와 비밀번호를 확인하고 결과를 응답하는데 이러한 역할을 수행하는 것이 서블릿이다.

jsx / js 차이

강사님이 react 프로젝트에서는 jsx를 사용하고 next프로젝트에서는 js를 사용하길래 차이점에 대해서 찾아보았다.
강사님께서는 기존에 있던 index.js나 app.js와 같은 파일과 구별하기 위함이라고 하셨다.

JSX (JavaScript XML) : 자바스크립트에서 XML을 추가한 확장형 문법

자바스크립트에서 HTML 문법을 사용할 수 있고 주로 리액트나 다른 프론트엔드 프레임워크에서도 사용이 가능합니다.

const element = <h1>Hello, world!</h1>;

JSX파일은 UI 관련 작업을 할 때 권장되며, React에서 에러, 경고 메세지를 표시해준다

Babel

브라우저는 JSX를 이해하지 못합니다. 따라서 작성된 JSX 코드를 JavaScript 코드로 변환하는 작업이 필요합니다.

JSX 코드는 자바스크립트 컴파일러인 @babel을 통해 Javascript로 변환됩니다. Babel은 JSX를 JavaScript로 변환하는 데 사용되는 가장 일반적인 도구입니다.

JS와 JSX를 반드시 구분해서 사용해야 할까?

스택오버플로우의 ReactJS - .JS vs .JSX의 게시물에서 가장 높은 추천 수를 받은 답변의 내용을 확인해보면 'JS와 JSX는 확장자로서의 차이가 없다' 라는 의견이 현재 가장 지배적인 것 같습니다.

다만 게시물의 작성자는 JSX는 자바스크립트 표준 문법이 아니기에 이에 관한 논쟁이 있을 수 있다고 말하고 있습니다. 하지만 JSX에 대한 설명에서 보았듯이 결국 리액트로 작성한 코드들은 자바스크립트로 변환됩니다. 따라서 컴포넌트 파일을 만들어 사용하는 리액트의 JSX 관련 코드는 .jsx로 만들고, 나머지 일반 JavaScript 코드들은 .js로 만들며 유연하게 사용하면 될 것 같다.

참고

https://velog.io/@minkuk90/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-.js-vs-.jsx-%EC%B0%A8%EC%9D%B4%EC%A0%90

virtual dom

이전에 블로그에 정리한 내용 > https://yeeeon.tistory.com/33

[React] Virtual DOM

DOM(Document Object Model) 기존 웹이 사용하는 DOM의 Document는 HTML을 말한다. 브라우저를 공장이라고하면 html문서는 이 공장들에 보내주는 주문서이다. 이 주문서에는 내가 원하는 웹페이지의 요소들과

yeeeon.tistory.com

css 3가지 방법

css는 직접 사용해보면서 어느정도 익혔다고 생각해, 자세한 예제들은 생략하고 어떤 방식이 있는지 정리해보기로 했다.

외부 CSS
- HTML 페이지의 <link>요소에서 정의된다.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

내부 CSS
- <style> 요소 안에서 정의된다

<!DOCTYPE html>
<html>
<head>
<style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    }
</style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

인라인 CSS
- 관련 요소에 style 속성을 추가

<h1 style="color:blue;text-align:center;">This is a heading</h1>

[Day1] html 기초 & SEO 최적화 마크업 규칙

옝옹 — Mon, 20 Jan 2025 17:45:34 +0900

HTML (Hyper Text Markup Language)이란 ?

웹 페이지를 만드는 표준 마크업 언어

<!DOCTYPE html> <!-- 이 문서가 HTML5 문서임을 정의 -->
<html> <!-- html 페이지의 루트 요소 -->
    <head> <!-- html 메타 정보 포함 -->
    	<title>Page Title</title> <!-- html 제목 -->
    </head> 
    <body> <!-- 콘텐츠의 컨테이너 -->
        <h1>My First Heading</h1>
        <p>My first paragraph.</p>
    </body>
</html>

HTML 속성

src	표시할 이미지 경로를 지정 <img src = "yeeun.jpg"> 1. 절대적 url : 다른 웹에 호스팅된 이미지 링크 (https:// www ~) 2. 상대적 url : 웹사이트 내에 호스팅된 이미지 (yeeun.jpg)
width, height	<img src = "yeeun.jpg" width = "500" height = "600">
alt	<img> 어떤 이유로 이미지를 표시할 수 없는 경우 대체 텍스트 <img src = "yeeun.jpg" alt = "이예은">
style	색상, 글꼴, 크기 등의 스타일 요소 <p style = "color:red;">red</p>
lang	웹 페이지의 언어를 선언하려면 태그 lang 내부에 속성을 포함해야 한다. <!DOCTYPE html> <html lang="en"> <body> ... </body> </html>
title	요소에 대한 추가 정보를 정의 <p title="I'm a tooltip">This is a paragraph.</p>

SEO 최적화 마크업 규칙

SEO (Search Engine Optimization) 란?

: 웹 사이트의 가시성을 높이고, 검색 엔진에서 노출되도록 최적화하는 프로세스

-> 기본적으로 검색 엔진은 웹 표준과 웹 접근성에 맞춰 작업한 웹사이트를 높게 평가함

SEO를 고려한 마크업

1. 시맨틱 HTML 사용

시맨틱 태그란 특정 의미를 정의하고 목적을 갖는 태그입니다.

예를 들어, <header>, <nav>, <main>, <article>, <figure>, <section>, <aside>, <footer>등의 요소를 사용하여 페이지의 의미론적인 구조로 마크업하여, 검색 엔진이 콘텐즈를 이해하고 해석하기 쉽게 합니다.

<header>	페이지의 제목, 로고 등에 쓰인다.
<nav>	Navbar 메뉴, 목차 등에 쓰인다.
<aside>	주로 사이드바에 쓰인다
<main>	페이지 내에 제일 메인이 되는 컨텐츠에 쓰인다
<section>	구체적인 시맨틱 태그가 없는 문서에 쓰인다. section 태그에는 항상 섹션에 대한 제목이 있는게 좋다.
<article>	독립적으로 여러곳에 재사용 되는 내용에 사용된다.
<footer>	copyright, 개인정보처리방침, 이용약관 등 포함되는 내용에 쓰인다.

2. 올바른 제목 구조

제목 태그(<h1>, <h2>, <h3> 등)는 페이지의 주요 주제를 나타내는데 사용되어야 한다. 이는 검색엔진이 페이지의 핵심 키워드를 식별하는데 도움이 된다. 계층적으로 <h1><h2><h3>..순서로 사용해야 하며 한 페이지에서 하나의 <h1> 을 사용하는 것이 좋다.

3. 이미지 최적화

이미지에 적절한 alt 속성을 추가 : 이미지에 대한 설명을 제공하므로써 시각장애가 있는 사용자도 컨텐츠의 정보를 이해할 수 있도록 웹 접근성을 높인다.

<!-- 이미지에 대한 텍스트 제공 -->
<img src="yeeun.jpg" alt = "이예은"/>

이미지 파일명 최적화 : 키워드가 포함된 의미있는 파일명 사용
이미지 크기 최적화 : 적절한 크기의 이미지는 웹사이트 로딩 속도를 높임

4. 메타데이터 최적화

<head>태그 안에 적절한 메타데이터를 넣어 검색 엔진에 키워드를 노출 시킨다.

제목 태그(title)최적화 : 핵심 키워드가 포함된 간결하고 설명적인 제목 태그 사용

<meta name = "title" content = "핵심 키워드가 포함된 간결하고 설명적인 제목 태그">

메타 설명 최적화 : 핵심 키워드가 포함된 간결하고 설득력있는 메타 설명 작성

<meta name = "title" content = "핵심 키워드가 포함된 페이지 설명">

5. 폼 요소에 label 사용

<label>요소를 사용하여 입력 필드를 설명하는 텍스트를 제공하여 사용자가 어떤 정보를 입력해야하는지 알려줌

<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">

6. 키보드 네비케이션 고려

키보드만을 사용하는 사용자들을 위해 모든 기능을 키보드로 조작할 수 있어야 한다.

<button tabindex="0">클릭 가능한 버튼</button>

** tabindex : 현재 요소의 탭 순서

[JS] Redux 리덕스

옝옹 — Wed, 8 Jan 2025 03:30:09 +0900

Redux 란

리덕스는 JS 상태 관리 라이브러리입니다.

쉽게 설명하면 모든 컴포넌트에서 바로 state에 접속 가능한 저장소 입니다.

(도서관에서는 다양한 사람들이 책을 빌려갈 수 있습니다)

상태?

component 안에서 관리되는 것

사용하는 이유

자식 컴포넌트가 많아지면, 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야한다. => Props drilling 이슈

리덕스를 사용하면 state를 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다.

기본 용어

- Store (스토어)

상태가 저장되는 저장소

- Reducer (리듀서)

특정 action에 따라서 state값을 변경하는 함수

이벤트 핸들러와 비슷

파라미터는 state, action 두개를 받음

- Action (액션) - 주문서

store에 운반할 데이터

- Dispatcher(디스패처)

dispatch() 메소드를 사용해 action을 reducer에 전달

: 스토어에 상태를 변경하라고 말해줌

컴포넌트에서 사용된다.

동작 방식

1. action객체가 dispatch 메소드에 전달

2. dispatch를 통해 reducer를 호출

3. reducer를 통해 state 변경

4. 변경되면 리렌더링

3 원칙

1. 애플리케이션의 모든 상태(state)는 하나의 저장소(store) 안에 하나의 객체 트리 구조로 저장된다.

하나의 저장소(store)가 존재하며, 이 저장소(store)에는 애플리케이션의 모든 상태들이 객체 트리 구조로 저장되어 있다.

2. 상태(state)는 읽기 전용(read-only)이다.

상태(state)는 읽기 전용이다. 상태를 변화시키는 유일한 방법은 액션 객체를 전달하는 방법뿐이다.

3. 변화는 순수 함수로 작성되어야 한다.

리듀서는 그저 이전 상태와 액션을 받아 다음 상태를 반환하는 순수함수이다. 이전 상태를 변경하는 것이 아니라, 새로운 상태 객체를 생성해서 반환해야한다는 사실을 기억해야 한다.

createStore를 손코딩 해보세요

const store = createStore(reducer)
const reducer = (state, action) => {
	switch(action.type) {
		case "ADD" :
        	return state+1;
        case "MINUS" :
        	return state-1;
		default :
        	return state
	}
}

React-redux에서는 뭐가 다른가 !

1. store.js 파일 만든다.

2. index.js파일에서 <Provider store={import한것}> 으로 <App /> 을 감싸준다.

3. useSelector : store에 저장된 state가져오기

4. useDispatch : dispatch 사용하기 위함

import { useSelector, useDispatch } from "react-redux";
import { changeName } from "../store";

function 컴포넌트() {
    let state = useSelector((state) => { return state })
    let dispatch = useDispatch();
    
    ...
    
    return (
    	<div>
            <button onClick={ () => { dispatch(changeName()) }}>
            버튼
            </button>
        </div>
    );
}

redux toolkit

1. createSlice

: state를 생성할 수 있다.

2. configureStore()

모든 컴포넌트가 마음대로 사용 가능하게 해줌

import { configureStore, createSlice } from '@reduxjs/toolkit'

let 변수 = createSlice({
    name: 이름변수,
    initialState: 'hello',
    reducers : {
    	changeName(state) {
        	return '변경하기 ' + state
        }
    }
});

export let { changeName } = 변수.actions

export default configureStore({
	reducer: {
    	변수2: 변수.reducer
    },
});

redux-saga

redux-saga는 redux-thunk 다음으로 가장 많이 사용되는 비동기 작업 미들웨어입니다.

미들 웨어란 ?
- action이 발생하면 reducer가 액션을 처리하기 전에 다양한 작업을 할 수 있다.

조금더 까다로운 상황에서 유용함

비기존 요청을 취소 처리 할 수 있습니다
웹소켓을 사용할 때
API 요청이 실패시 재요청해야할 때

이 외에도 다양한 까다로운 비동기 작업들을 redux-saga를 사용하여 처리 할 수 있습니다.

Generator 문법

Generator 함수는 함수의 흐름을 도중에 멈춰놓았다가 나중에 이어서 진행 할 수 있음
- 제너레이터 함수를 만들 때에는 function* 이라는 키워드를 사용합니다.
- 제너레이터 함수를 호출했을때는 한 객체가 반환되는데요, 이를 제너레이터라고 부릅니다.
- 제너레이터 함수를 호출한다고 해서 해당 함수 안의 코드가 바로 시작되지는 않습니다. generator.next() 를 호출해야만 코드가 실행되며, yield를 한 값을 반환하고 코드의 흐름을 멈춥니다.

[JS] 정규 표현식

옝옹 — Thu, 26 Dec 2024 19:56:57 +0900

정규표현식

문자열에서 특정 문자 조합을 찾기 위한 패턴

정규식 만드는 법

1. 정규 표현식 리터럴 : 슬래시(/)패턴으로 감싸는 방식

const regex = /pattern/flags;

스크립트를 불러올 때 컴파일 되므로, 실행 도중에 바뀌지 않는 패턴일 때 사용하는 것이 좋음.
일반적인 방법이며, 리터럴을 사용하면 정규 표현식 객체가ㅏ 생성된다.

2. RegExp 객체의 생성자 호출 : RegExp 객체의 생성자를 호출하여 만드는 방식

const regex = new RegExp('pattern',flags);

런타임에 컴파일 되기 때문에 실행 도중에 바뀔 수 있는 패턴이나, 사용자 입력에 따라서 유동적으로 바뀔 수 있을 때 활용하는 것이 좋음.

플래그

검색 모드
정규 표현식의 옵션이므로 선택적으로 사용이 가능하다.
순서와 상관없이 하나 이상의 플래그를 동시에 설정할 수 있다.
플래그를 사용하지 않는 경우에는 문자열 내 검색 대상이 1개 이상이더라도 첫번째 조건 대상만을 검색하고 종료하게 된다.

대표적인 플래그
i (ignore case) : 대소문자를 구별하지 않고 검색한다.
g (global) : 문자열 내의 모든 패턴을 검색한다. (문자열에서 한개만 찾는 것이 아닌 해당하는 모든 것을 찾아줌)
m (multi line) : 문자열의 행이 바뀌더라도 검색은 계속한다.
s (single line) : \n까지 포함한 문자

Pattern 만드는 법

[Groups and Ranges]

1. | - or

const regex = /red|blue/flags

red 도는 blue인 문자열을 가진 패턴

2. () - 그룹

const regex = /on(1|2)/flags

on뒤에 1이나 2가 오는 문자열을 매치시겠다.

3. [] - 문자셋

const regex = /on[123456789]/flags

const regex = /on[1-9]/flags

만약 그룹에서 1,2 둘 중에 하나가 아니라 1 ~ 10까지인 경우

4. [^] - 부정 문자셋

const regex = /^[1-9]/flags

1~9까지 빼고 매치시키는 경우

Quantifiers

1. ? - zero or one : 특정 문자 뒤에 두게 되면 있는 것, 없는 것 둘다 매치 시킨다.

const regex = /ones?/flags

이렇게 두었다면 s 가 있는 것, 없는 것 둘다 매치가 된다.
즉, one과 ones 두개가 매치 된다.

2. * - zero or more

const regex = /ones*/flags

one, ones, oness, onesssssss 이런것들이 매치

3. + - one or more : 없는것은 매치하지 않으며 그 문자는 반드시 하나 이상

const regex = /ones+/flags

one은 매치키지 않는다.

4. {n} - n번 반복 : 뚜렷한 개수를 잡아내고 싶은 경우

const regex = /ones{3}/flags

onesss

const regex = /(abc){3}/flags

abcabcabc

5. {min, max} - 최대 최소

const regex = /ones{3,5}/flags

onesss, onessss, onesssss 만을 매치시킨다.

const regex = /ones{3,}/flags

최대를 비워둔다면, 3번 이상 들어간 것을 매치
최소를 비워둔다면 그 반대

Boundary-type

1. \b - 단어 경계

const regex = /\bch/flags

단어 기준으로 ch로 시작하는 단어만을 매치시킨다.
/b를 뒤에 두면, 끝나는 것을 매치

2. \B - 단어 경계 제외

const regex = /\Bch/flags

\b를 제외한것을 매치
string = cheese cheeses check is checking

3. (^) - 문장의 시작 : 문장 기준으로 매치

const regex = /^is/flags;

cheese cheeses check is checking
checking cheese cheeses is check
cheese cheeses check is checking
is check cheese cheeses checking

4. $ - 문장의 끝

Character classes (특정 문자)

1. (\) - 특수 문자가 아닌 문자

const regex = /right\?/flags;

right? 라는 문자를 찾고 싶을 때

2. (.) - All

const regex = /./flags;

전부 다 매치

(\d) - 모든 숫자
(\D) - 모든 숫자 제외
(\w) - 모든 문자 : 특수문자를 제외한 영어, 한글, 숫자
(\W) - 모든 문자 제외 : 문자에 해당하는 것을 제외한 모든 것
(\s) - 모든 공백
(\S) - 모든 공백 제외

[TS] Typescript #day3

옝옹 — Wed, 18 Dec 2024 23:58:41 +0900

# Call Signatures

-> 함수 위에 마우스를 올렸을 때 보게 되는 것

해당 코드의 변수나 함수의 타입을 알려줌
함수를 구현하기 전에 타입을 만들 수 있고, 함수가 어떻게 작동하는지 서술해둘 수 있음

type Add = (a: number, b:number) => number;
const add:Add = (a,b) => a+b

# Overloading

-> 함수 이름은 같지만 매개변수 또는 반환값의 타입이 다른 함수

type Add2 = {
    (a: number, b: number): number
    (a: number, b: string): number
}

const add5: Add2 = (a, b) => {
    if(typeof b === 'string') return a
    return a + b
}

- Add2의 call signatures를 보면 b의 타입이 number 와 string 동시에 지정되어 있다.

[ EX 1 ] call signatrues에 파라미터 타입이 다른 경우

type Config = {
    path: string,
    state: object
}
type Push = {
    (path:string): void
    (config:Config): void
}
// Push 타입은 string과 object를 받을 수 있음
const push:Push = (config) => {
    if(typeof config === "string") console.log("do something")
    else {
        console.log(config.path)
    }
}

[ EX 2 ] call signatrues에 파라미터 개수가 다른 경우

type Add3 = {
    (a: number, b: number): number
    (a: number, b: number, c: number): number
}
// c는 옵션(선택사항)이라는 표시로 ? 사인을 넣어줌
const add6:Add3 = (a, b, c?: number) => {
    return a + b
}

[TS] Typescript #day2

옝옹 — Wed, 18 Dec 2024 23:48:53 +0900

# Types of TS part One

선택적 타입 (Optional Type)

: 필수적으로 존재하지 않아도 되는 속성

사용법 : 이름 뒤에 물음표(?)를 추가한다.

type Player = {
  name : number,
  age?: string
}

타입 별칭 (Type Alias)

특정 타입에 이름을 부여하여 코드의 가독성을 높이고 재사용성을 향상시킴

type Age = number;
type Name = string;

type Player = {
  name : Name,
  age?: Age
}

const nico : Player = {
  name : "nico",
}
const lynn : Player = {
  name : "lynn",
}

type User = {
  id: number;
  name: string;
  email: string;
};

const getUser = (user: User): string => {
  return `User Name: ${user.name}, Email: ${user.email}`;
}

인자 타입/리턴값 타입

function playerMaker(name:string) : Player {
  return {
    name  
  }
} 
const PlayerMaker = (name:string) : Player => ({name})

const nic = playerMaker("nico")
nic.age = 12

#Types of TS part Two

readonly

: 값을 수정하려고 하면 ts가 멈춰줌. 이는 readonly(읽기 전용)이기 때문에 예상되지 않은 상태 변경에 보호장치를 얻게 되는 것

const numbers : readonly number[] = [1,2,3,4]

undefined/null

let a: undefined = undefined
let b : null = null

Tuple

: 길이와 각 요소마다의 타입이 고정된 배열

const player: [string, number, boolean] = ["nico", 12, false]

any type

모든 타입을 허용할 수 있는 타입
typescript 의 보호 장치를 모두 잃어버리게 하기 때문에 사용하지 않는게 좋음.
가끔 써야할 때가 있지만 좋은 규칙은 아님.

const c : any = true

#Types of TS part Three

unknown

변수의 타입을 미리 알지 못할 때 사용한다.
예를 들어, 만약 api로부터 응답을 받는데 그 응담의 타입을 모른다면 unknown으로 막아줄 수 있음
그러면 타입스크립트가 강제로 타입을 확인해줌

let d : unknown;

if(typeof d === 'number') {
  let e = d + 1;
}

if(typeof d === 'string') {
  let e = d.toUpperCase();
}

void

아무것도 return 하지 않는 함수의 타입

function hello() {	
   console.log('x')
}

function hello():void {	
   console.log('x')
}

never

함수가 절대 return하지 않을 때 발생
예를 들어, 함수에서 exception(예외)이 발생했을 때 사용

function bye(): never {
   throw new Error("xxx")
}

function good(name: string | number) {
  if(typeof name === "string") {
    name // string
  } else if( typeof name === "number") {
    name // number
  } else { 
    name  // 여기에 뭘 쓰던 타입은 never임.
  }
}

[TS] Typescript #day1

옝옹 — Mon, 16 Dec 2024 22:26:32 +0900

# Why not JavaScript

"안정성, 더 정확히 말해서 타입 안정성"

코드에 버그가 줄어듦
런타임 에러가 줄어든다
개발 생산성 향상

하지만 자바스크립트는?

* 문제점 1 * 에러를 보여주지 않으려고 많은 노력을 함.

[EX1]

[1,2,3,4] + false

// '1,2,3,4false'

배열도 아닌, boolean도 아닌 string이 콘솔에 찍힌다. 이는 굉장히 이상하다고 볼 수 있는 자바스크립트는 이를 허용함

[EX2]

function divide(a,b) {
	return a/b
}

divide("xxxxx")

// NaN

코드를 실행하고 NaN을 return함. 숫자형도 아니며, argument가 1개만 들어갔음에도 에러가 없고 예외 처리도 없음

* 문제점 2 * 최악의 에러는 런타임 에러

런타임 에러 : 콘솔 안에서 일어나는 에러

ㄴ 유저의 컴퓨터에서 이미 컴파일이 완료되어 코드가 실행될 때 일어나는 에러

[EX3]

const yeeun = {name : "yeeun")
yeeun.hello()

이상적으로 코드가 실행되기 전에 hello() 함수가 없다는걸 알려주는게 가장 좋음
하지만 javascript는 유저의 컴퓨터에서 이 코드를 실행해야만 비로소 에러를 보여줌
좋은 프로그래밍 언어는 hello()가 없다는걸 알고 시작조차 컴파일조차 안됨

# How Typescript Works

타입스크립트(Typescript) : 강타입 프로그래밍 언어

강타입 언어 : 프로그래밍 언어에서 Integer(정수), String(문자열)과 같이 데이터의 타입을 미리 지정하는 언어

타입스크립트의 경우에는 작성한 코드가 자바스크립트로 컴파일 된다. 보통 컴파일은 0과 1로 이뤄진 컴퓨터가 알아들을 수 있는 언어로 바꿔주는 과정을 거치지만, 타입스크립트는 자바스크립트로 바꿔진다는 뜻이다.

ㄴ TS가 제공하는 보호장치는 JS로 변환되기 전에 작동된다. 즉, typescript에 에러가 있다면 javascript로 컴파일 되지 않기 때문에 변환된 javascript 안에서 실수가 일어나지 않게 한다.

TS는 바로 에러를 표시해줌. -> Property 'hello' does not exist on type '{ nickname: string; }'.(2339)

Operator '+' cannot be applied to types 'number[]' and 'boolean'.(2365)

# Implicit Types vs Explict Types

1. 타입 추론

let a = "hello"
const player = {
  name : "yeeun"
}

2. 명시적 표현

ㄴ 명시적 표현은 최소한으로 사용하는게 좋음

let b : boolean = true
let c : number[] = []

* 해당 게시물은 노마드코더 강의를 참고하여 쓰여졌습니다. *