24.06.11 웹 개발자 근무 기록 입니다.

240611 웹 개발 근무 기록

 

240611 웹 개발 근무 기록

 

1. 진행 프로젝트

2. 오늘의 작업

3. 오늘의 배운 것

4. 하루를 정리하며

관련글

1. 진행 프로젝트

SW 프로젝트

2. 오늘의 작업

  • 제품 레시피 작성 페이지 CRUD 수정

3. 오늘의 배운 것

  • for문과 forEach에서의 return 차이

4. 하루를 정리하며

 하나의 함수에서 많은 기능을 처리하고 있다 보니, 이후에 해당 함수의 일부 기능만 필요할 때 코드 자체를 그대로 붙여넣기 하는 경우가 많아졌다. 함수를 기능별로 잘게 쪼갠다면, 함수만 불러오면 되기 때문에 편해질 것이라 생각은 하지만, 이미 작업해 놓은 코드가 많아 엄두가 나지 않는다. 우선 지금의 코드는 주말에 천천히 정리해보도록 하고, 이후부터는 이러한 눈덩이가 크게 불어나지 않도록 주의하면서 작업을 진행해야겠다.

관련글

2024.06.16 - [javascript/이론] - for문과 forEach의 차이점 비교

'웹 개발자의 하루 > 웹 개발 근무 기록' 카테고리의 다른 글

240618 웹 개발 근무 기록  (0) 2024.06.18
240617 웹 개발 근무 기록  (0) 2024.06.17
240614 웹 개발 근무 기록  (1) 2024.06.16
240613 웹 개발 근무 기록  (0) 2024.06.13
240612 웹 개발 근무 기록  (0) 2024.06.12

 ARIA 속성은 웹 접근성을 향상시킨다. 실제 동작에 영향을 주진 않지만, HTML 요소의 역할, 상호 작용 대상등을 명시함으로써 웹페이지에 대한 이해를 높일 수 있다.

[웹] ARIA 속성 알아보기

 

[웹] ARIA 속성 알아보기

 

1. ARIA는 무엇이고, 왜 사용하는가?

2. ARIA 속성 사용하기

 

1. ARIA는 무엇이고, 왜 사용하는가?

 Accessible Rich Internet Applications의 약자이다.
 웹 페이지를 사용하기 어려운 사람들의 보조 수단으로 볼 수 있다. ARIA 속성을 사용하면 스크린 리더기로 웹 페이지를 이요할 때 의도한 방식대로 진행되도록 명시할 수 있다.
 또한 비단 사용자 뿐만 아니라 개발자들이 이후 코드를 분석할 때에 ARIA 속성을 통해 이해도를 높일 수 있다.

 사용 이유
  • 스크린 리더기 사용자 보조
  • 키보드만 사용하는 경우에도 이용 보조
  • ARIA 속성으로 각 HTML 요소의 역할 등을 명시하여 코드의 가독성을 높임

2. ARIA 속성 사용하기

1. role

요소의 역할을 정의한다. div 태그를 사용했으나, 실제 기능은 button의 역할을 하는 경우 등에 사용할 수 있다.

<div role="button" onclick="closeButton()">close</div>

 

2. aria-label

현재 속성이 어떠한 의미를 가지고 있는 지 명시한다.

<button aria-label="close">X</button>

 

3. aria-labelledby

어떤 레이블을 통해 제공되는 요소인 지 명시한다.

<label id="username">username</label>
<input aria-labelledby="username" />

 

4. aria-describedby

해당 요소를 설명하는 요소를 명시한다.

<label id="username">username</label>
<input aria-labelledby="username" aria-describedby="username-description" />
<p id="username-description">유저 이름은 최소 8자 이상이어야 합니다.</p>

 

5. aria-desabled

해당 요소가 비활성화 되었는지 여부를 나타낸다.

<button aria-disabled="true">확인</button>

 

6. aria-hidden

요소가 화면에 표시되는 지 여부를 나타낸다.

<button aria-hidden="true">로그 아웃</button>

 

7. aria-expanded

요소가 접힌 상태인지 펼쳐진 상태인지 여부를 나타낸다.

<div aria-expanded="true">열린 상태</div>

 

8. aria-controls

어떤 요소를 제어하는 지 명시한다.

<button aria-controls="menu">메뉴 펼치기</button>
<div id="menu">메뉴</div>

 

9. aria-valuemin, aria-valuemax

값의 범위를 나타낸다.

<input type="number" aria-valuemin="0" aria-valuemax="100" />

'컴퓨터 과학 > 웹 개발' 카테고리의 다른 글

마우스 클릭 시 이벤트 실행 순서 알아보기  (0) 2024.06.16
웹 페이지는 어떻게 그려지는가?  (0) 2024.04.25

  v-show는 시각적으로만 보이지 않게, v-if는 DOM에서 완전히 제외된다.

[Vue] v-show와 v-if의 차이

 

[Vue] v-show와 v-if의 차이

 

1. v-show, v-if의 역할과 차이

2. 언제 사용하는가

 

1. v-show, v-if의 역할과 차이

 v-show와 v-if는 할당된 문자열 값이 거짓일 시 화면에 나타내지 않는다. 그러나 보이는 화면은 같지만 실제 표현되는 HTML 구조에는 차이가 있다. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue v-show와 v-if의 차이</title>
  </head>
  <body>
    <div id="app">
      <div id="show">
        show
        <!-- v-show로 설정된 요소 -->
        <div v-show="false">v-show를 사용하여 보이지 않게 처리된 요소</div>
      </div>
      <div id="if">
        if
        <!-- v-if로 설정된 요소 -->
        <div v-if="false">v-if를 사용하여 보이지 않게 처리된 요소</div>
      </div>
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      const vm = Vue.createApp({
        name: "App",
      }).mount("#app");
    </script>
  </body>
</html>

v-show는 HTML 구조에 속해있지만, v-if는 HTML 구조에 포함되지 않는다.

2. 언제 사용하는가

  v-show
  • 렌더링 여부가 자주 변경되는 요소 (예외적으로 사용) e
  • x) 체크 박스 값에 따라 추가로 입력해야 하는 input

 v-if
  • 렌더링 여부가 자주 변경되지 않는 대부분의 요소
  • ex) 언어 설정에 따라 다르게 렌더링되는 요소

'vue > 기초 공부' 카테고리의 다른 글

[Vue] 단방향 데이터 바인딩(V-bind)과 양방향 데이터 바인딩(V-model)  (0) 2024.04.29

 V-bind는 단방향 바인딩 이기에 사용자 입력에 값이 변하지 않는다. 그러나 V-model은 사용자 입력에 맞춰 값이 변한다.

[Vue] 단방향 데이터 바인딩(V-bind)과 양방향 데이터 바인딩(V-model)

 

[Vue] 단방향 데이터 바인딩(V-bind)과 양방향 데이터 바인딩(V-model)

 

1. V-bind란?

2. V-bind 코드로 살펴보기

3. V-model이란?

4. V-model 코드로 살펴보기

 

1. V-bind란?

 데이터가 Vue 데이터 객체에서 HTML로 전달된다. HTML에서는 데이터를 전달받을 뿐 조작은 불가능하다. 만약 데이터를 변경하고 싶으면 Vue 데이터 객체에 접근해야 한다.

 사용 예시
  • 내부 함수 동작으로 HTML 요소를 조작해야 할 때
  • 데이터 객체 값에 따른 조건부 렌더링을 해야할 때

2. V-bind 코드로 살펴보기 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input v-bind:value="name" />
      <br />
      내 이름은 <span>{{name}}</span>
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      const vm = Vue.createApp({
        name: "App",
        data() {
          return { name: "" };
        },
      }).mount("#app");
    </script>
  </body>
</html>
input에 값을 입력해도 반영 X

3. V-model이란?

 Vue 데이터 객체에 있는 값과 HTML 요소를 연결한다. HTML 요소의 초기값은 Vue 데이터 객체의 값이지만 HTML에서 값을 변경하면 데이터 객체의 값도 변경된다.

 사용 예시
  • 사용자가 input 요소에 입력한 값을 화면에 보여줘야 할 때

4. V-model 코드로 살펴보기 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input v-model="name" />
      <br />
      내 이름은 <span>{{name}}</span>
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript">
      const vm = Vue.createApp({
        name: "App",
        data() {
          return { name: "" };
        },
      }).mount("#app");
    </script>
  </body>
</html>

 

입력한 값이 반영 O

'vue > 기초 공부' 카테고리의 다른 글

[Vue] v-show와 v-if의 차이  (0) 2024.05.04

 useDebugValue 훅을 사용하면 리액트 개발자 도구에서 어떤 훅을 사용 중인지, 상태 값이 현재 어떤 상태인지 확인할 수 있다.

[React]커스텀 훅의 상태를 추적하는 useDebugValue

 

[React]커스텀 훅의 상태를 추적하는 useDebugValue

 

1. useDebugValue는 무엇인가?

2. 사용법

추천글

 

1. useDebugValue는 무엇인가?

 리액트 개발자 도구를 통해 커스텀 훅의 상태를 확인할 수 있는 훅이다.

 console.log()를 사용할 때와의 차이
  • 디버깅만을 위한 훅 사용으로 코드를 직관적으로 표현할 수 있다.
  • 로그가 개발자 도구에 남기 때문에 콘솔이 깔끔해진다.

2. 사용법

import React, { useDebugValue, useState } from "react";

function useCount() {
  const [count, setCount] = useState(0);

  useDebugValue(count, (count) => `현재 카운트: ${count}`);

  const addCount = () => {
    setCount(count + 1);
  };

  return [count, addCount];
}

function App() {
  const [count, addCount] = useCount();

  return (
    <div>
      {count}
      <button onClick={addCount}>숫자 변경</button>
    </div>
  );
}

export default App;


hooks 탭에서 useDebugValue 훅으로 작성한 코드 확인 가능

추천글

리액트 공식문서 - useDebugValue

'react > 훅' 카테고리의 다른 글

[React] 렌더링이 되기 전 코드를 실행하는 useLayoutEffect  (0) 2024.04.29

 useLayoutEffect는 useEffect와 달리 렌더링이 되기 전 실행되어 그 결과를 렌더링에 반영한다. 또한 useLayout Effect의 콜백함수는 모두 동기적으로 실행된다는 것이 차이점이다.

[React] 렌더링이 되기 전 코드를 실행하는 useLayoutEffect

 

[React] 렌더링이 되기 전 코드를 실행하는 useLayoutEffect

 

1. useLayoutEffect는 무엇인가?

2. 언제 사용하는가

추천글

 

1. useLayoutEffect는 무엇인가?

 useLayoutEffect는 useEffect와 유사한 역할을 하는 react 훅이다.

공통점
  • 의존성 배열: 콜백 함수와 의존성 배열을 이용해 특정 상태가 변경될 때 수행할 작업을 지정할 수 있다.

차이점

  • 렌더링 차단 여부: useLayoutEffect는 모든 작업이 끝날 때까지 렌더링이 일어나지 않는다. 따라서 실행시간이 길면 렌더링도 지연된다.
  • 실행시점: useLayoutEffect는 렌더링 전에 실행된다. useEffect는 렌더링 이후에 실행된다.

2. 언제 사용하는가 

import React, { useState, useEffect, useLayoutEffect, useRef } from "react";

function App() {
  const contentRef = useRef(null);
  const [tooltipLeft, setTooltipLeft] = useState(0);

  useLayoutEffect(() => {
    const contentWidth = contentRef.current.offsetWidth;
    setTooltipLeft(contentWidth);
  }, []);

  useEffect(() => {
    const contentWidth = contentRef.current.offsetWidth;
    setTooltipLeft(contentWidth);
  }, []);

  return (
    <div>
      <span ref={contentRef}>안녕하세요</span>
      <div style={{ position: "absolute", top: 0, left: tooltipLeft }}>
        설명입니다.
      </div>
    </div>
  );
}

export default App;

 돔의 레이아웃에 맞추어 작업을 해야할 때 사용한다. 예를 들어, 특정 요소에 대해 툴팁을 만든다고 가정해보자. 이때 해당 요소에 들어갈 텍스트가 상황에 딸 다르다면, 그때마다 요소의 크기를 측정해 툴팁의 x, y 좌표를 지정해야 한다. 이러한 경웨 useLayoutEffect를 사용한다면 요소를 렌더링 하기 전 요소의 크기를 측정하고 툴팀의 레이아웃을 지정할 수 있게 된다.
 다만 작업을 모두 동기적으로 실행하고 그동안 렌더링도 지연된다는 점에서 무분별하게 사용한다면 프로젝트의 성능이 떨어질 수 있다.

추천글

React 공식문서 - useLayoutEffect

'react > 훅' 카테고리의 다른 글

[React]커스텀 훅의 상태를 추적하는 useDebugValue  (0) 2024.04.29

리액트 프레임 워크는 가상돔을 활용해, 변경된 부분을 감지하여 효율적인 렌더링이 가능합니다.

[React] 가상돔 알아보기

 

[React] 가상돔 알아보기

 

요약

1. 가상돔이란 무엇이고, 어떻게 작동하는가?

2. 가상돔 적용과정

 

요약

 리액트 프레임워크는 JSX 코드를 분석하여 가상 돔을 생성한다. 만약 상태가 변경되면 이전 가상돔과 비교하여 달라진 부분을 감지하여 리렌더링한다.

1. 가상돔이란 무엇이고, 어떻게 작동하는가?

 브라우저가 HTML을 파싱할 때 생성하는 DOM과 동일한 형태이다. 다만 가상 돔은 실제 돔을 조작하는 것이 아니라, UI의 변경점을 확인하는 용도이다. 리액트 프로젝트가 실행되면 각 컴포넌트의 JSX 코드를 분석하여 리액트 요소를 생성한다. 이 요소들이 결합되어 가상돔을 구성한다.
 상태의 변경이 일어날 시, 이 과정을 반복하여 매번 새로운 가상돔이 생겨난다. 새로운 가상 돔이 생겨난 이후에는 이전의 가상돔과 비교하여 달라진 부분을 파악한다. 해당 부분만 재렌더링 하여, 효율적인 렌더링이 가능케 한다.

2. 가상돔 적용과정

  1. 리액트 프로젝트가 실행되며, JSX 코드를 분석하여 리액트 요소 생성
  2. 리액트 요소 결합하여 가상돔 생성
  3. 상태 변경이 일어남
  4. JSX 코드를 다시 분석하면서 새로운 리액트 요소 생성
  5. 새로운 가상돔 생성
  6. 새로운 가상돔을 직전 가상돔과 비교하여 달라진 부분 감지
  7. 달라진 부분만 재렌더링

JQuery 에서 html 요소에 이벤트를 부여할 때는 위임과, 할당 2가지 방식이 있습니다. 위임은 상위 요소에 이벤트를 할당하여 자식 요소에서 이벤트가 발생하도록 지정하는 방식이다. 할당은 이벤트가 일어날 대상을 직접 선택자로 불러와 이벤트를 부여 합니다.

[JQuery] 이벤트 할당과 위임

 

[JQuery] 이벤트 할당과 위임

 

0. 요약

1. 할당

2. 위임

 

요약

 JQuery 에서 html 요소에 이벤트를 부여할 때는 위임과, 할당 2가지 방식이 있다. 위임은 상위 요소에 이벤트를 할당하여 자식 요소에서 이벤트가 발생하도록 지정하는 방식이다. 할당은 이벤트가 일어날 대상을 직접 선택자로 불러와 이벤트를 부여한다.
 전자는 최초 실행 이후에 생긴 요소에도 이벤트가 발생하지만, 후자는 최초의 요소에만 이벤트가 발생한다.

할당 

$(".row").on("click", function () {
  alert("클릭!");
});

 대상이 되는 요소에 직접 이벤트를 할당한다.

 장점

  • 코드가 직관적이다.

 단점

  • 새로 만들어진 요소에는 이벤트가 할당되지 않는다.
  • 각 요소마다 이벤트가 할당되어 위임에 비해 메모리 사용이 비효율적이다.

위임 

$("#row-container").on("click", ".row", function () {
  alert("클릭!");
});

 부모요소에 이벤트를 할당해 자식 요소의 이벤트를 관리한다.


 장점

  • 새로 생긴 요소에도 이벤트가 부여된다.
  • 부모 요소에만 이벤트를 할당하여 메모리 효율이 좋다.

 단점

  • 자식요소에 개별화된 이벤트를 부여하기 위해서는 분기 처리 등 세분화된 코드가 필요하다

OOP는 객체 지향 프로그래밍입니다. 네가지 특징으로 캡슐화, 상속, 다형성, 추상화가 있습니다.

OOP란 무엇인가?

 

OOP란 무엇인가

 

0. 여는글

1. 캡슐화

2. 상속

3. 다형성

4. 추상화

 

여는글

 OOP(Object Oriented Programming)을 의미한다. 네가지 특징으로 캡슐화, 상속, 다형성, 추상화가 있다.

1. 캡슐화

 데이터와 메서드를 하나의 객체로 담아 관리하므로, 데이터로의 직접적 접근을 막는다. 이를 통해 데이터가 의도치 않게 변경됨을 방지한다. 
class Person {
  constructor(name) {
    this.name = name;
  }

  introduce() {
    return `내 이름은 ${this.name} 입니다.`;
  }
}

const student = new Person("홍길동");

console.log(student.introduce()); // 내 이름은 홍길동 입니다.
// 객체를 한번 생성하면 객체 안의 데이터에 접근하지 않는다.

2. 상속

 클래스를 통해 객체 생성틀을 만들고, 이를 통해 동일한 형태의 객체를 만들거나, 기존 클래스에 임의의 데이터, 메서드를 추가한 새로운 클래스를 만들어 낼수 있다. 이를 통해 코드를 재사용하고 다루려는 데이터를 계층적으로 구분할 수 있다. 
class Dog {
  constructor(name) {
    this.name = name;
    this.type = "포유류";
  }

  bark() {
    return "멍멍!";
  }
}

class Poodle extends Dog {
  constructor(name) {
    super(name);
    this.color = "갈색";
  }

  introduce() {
    return "저는 푸들입니다";
  }
}

const poodle = new Poodle("푸들이");

console.log(poodle.type); // 포유류
console.log(poodle.bark()); // 멍멍!
console.log(poodle.introduce()); // 저는 푸들입니다

3. 다형성

 각기 다른 클래스라면 동일한 이름의 메서드를 만들 수 있다. 이를 통해 각 객체의 데이터에 알맞은 작접을 각 메서드에서 실행할 수 있다. 
class Dog {
  walk() {
    return "산책 좋아요!";
  }
}

class Cat {
  walk() {
    return "산책 싫어요!";
  }
}

const dog = new Dog();
const cat = new Cat();

console.log(dog.walk()); // 산책 좋아요!
console.log(cat.walk()); // 산책 싫어요!

4. 추상화

 인터페이스를 통해 각 객체들의 공통된 특성을 파악하고 어떠한 데이터, 메서드가 있어야 하는 지 명시적으로 표현할 수 있다. 이를 통해, 객체, 클래스의 작성의도를 명확히 할 수 있다. 
class Animal {
  constructor(name) {
    this.name = name;
  }

  bark() {
    throw new Error(
      "추상 메서드는 오버라이딩(메서드 덮어쓰기) 하여 사용해야 합니다."
    );
  }
}

class Cat extends Animal {}

class Dog extends Animal {
  bark() {
    return "멍멍!";
  }
}

const cat = new Cat("야옹이");
const dog = new Dog("멍멍이");

console.log(cat.bark()); // Error: 추상 메서드는 오버라이딩(메서드 덮어쓰기) 하여 사용해야 합니다.
console.log(dog.bark()); // 멍멍!

웹 페이지가 어떠한 방식을 걸쳐 그려지는 지 알아봅니다.

웹 페이지는 어떻게 그려지는가?

 

웹 페이지는 어떻게 그려지는가?

 

1. 브라우저가 HTML 파일을 파싱하여 DOM 생성

2. 브라우저가 CSS 파일을 읽어 CSSOM 생성

3. DOM과 CSSOM 합쳐 렌더트리 생성

4. 레이아웃

5. 스타일 적용

6. 페인팅

 

1. 브라우저가 HTML 파일을 파싱하여 DOM 생성

 DOM(Document Object Model)은 HTML을 객체로 나타낸 모델이다. HTML 각 요소의 관계를 파악하여 부모, 자식으로 나뉘어 있다고 본다. 각 요소는 노드로 표현되며, 부모, 자식 관계를 반영하여 트리구조로 표현된다.

2. 브라우저가 CSS 파일을 읽어 CSSOM 생성

 CSSOM(CSS Object Model)은 DOM처럼 CSS를 객체로 나타낸 모델이다. HTML의 각 요소에 적용된 스타일을 저장한다.

3. DOM과 CSSOM 합쳐 렌더트리 생성

 렌더트리는 DOM의 각 노드에 CSSOM에 저장된 스타이을 적용한 형태이다. 이를 통해 각 요소들이 어떻게 그려질 지 결정된다.

4. 레이아웃

 렌더 트리를 기반으로 각 요소의 위치, 크기를 계산한다.

5. 스타일 적용

 렌더 트리를 기반으로 각 요소에 글골, 색상과 같은 스타일을 적용한다.

6. 페인팅

 지금까지 결정된 것을 바탕으로 화면에 픽셀로 나타낸다.

'컴퓨터 과학 > 웹 개발' 카테고리의 다른 글

마우스 클릭 시 이벤트 실행 순서 알아보기  (0) 2024.06.16
[웹] ARIA 속성 알아보기  (0) 2024.05.08

+ Recent posts

티스토리툴바