흔적을 남겨

2024년 회고

muyeon — Sat, 4 Jan 2025 18:16:39 +0900

Intro

올 한해 2024년은 나에게 많은 깨달음을 주었던 해이다. 나는 생각이 많고, 상당히 조심스러운 사람이다. 그만큼 겁도 많다. 이러한 문제 때문에 도전에 망설임이 있었는데 이를 극복한 한해라고 생각한다.

올 상반기는 부족함을 많이 느끼며, 취업을 위해 다시금 준비하고 다듬는 기간이었다. 하지만 이런 기간이 길어질수록 힘들었고, 우울해지며 반복되는 번아웃을 겪기도 하였다.

무엇이 나를 바뀌게 했나

취준기간이 계속되던 중 우연히 2주간 교육을 받고 우수한 인원들중 일 할수 있는 기회를 주는 교육 프로그램에 참여하게 되었다.

이때 백엔드로서 참여하게 되었고, 매일 오전 CTO 님의 질의응답을 진행하고 과제를 내주는 방식이었다.

진행하면서 목표를 정했는데 기술을 사용해보는 것들의 대한 목표였다. 예를들어 yarnberry + pnp 방식을 사용해 본다던가, docker 를 사용하며 개발을 진행한다던가, ecs 를 활용해 배포를 진행해보겠다거나 하는 것들이었다.

과제를 제출하며 오늘 하루의 회고와 배운점, 그리고 궁금한 점을 적도록 구성이 되어있었는데, 교육 초반부에 이 부분을 잘 활용하지 않았다. 지금 생각해보면 스스로 해내겠다는 고집때문이었던 것 같다.

첫주가 지나갈때 쯔음 CTO 님이 발제때 해주신 말이 나에게 큰 충격을 주었다. "why 에 대한게 빠져있다.", "기본이 중요하다." 사실 이는 공부하며 수도 없이 들었던 말이다. 이렇게만 말씀하셨다면 와닿지 않았을 것이다. CTO 님은 구체적으로 말씀해주셨다.

"jwt 를 왜써요?", "jwt 가 어떻게 구성되어 있나요?", "jwt 는 안전한가요?", "https 의 보안은 어떻게 추가되어 있나요?" 등 예시를 들어 주셨는데 이에 자연스럽게 답이 나오지 않았다. 기본적인 어떻게보면 당연한 것에 대해서 기본적인 것들에 대해 제대로 알고 있는 것이 없었던 것이다. 코드를 짜고 사용하는데만 집중한 나는 코더였다.

앞으로 나아가 빠르게 배우고 빠르게 기술을 배우는 것이 빨리 배우는 것이 아니었다. 사실 나는 제자리였다는 것을 다시금 느꼈고, 이를 빨리 인지하게 되어 한편으로는 다행이라고 느꼈다.

이후 기본을 다시 잡으면서 한 블로그 포스팅을 접하게 되었다.

https://yozm.wishket.com/magazine/detail/2281/

풀스택 개발자가 되어야 하는 5가지 이유 | 요즘IT

풀스택 개발자라는 말을 들으면 어떤 생각이 드시나요? ‘나와는 거리가 멀어. 하나도 하기 벅찬데 풀스택? 그렇게까지 하고 싶지 않아. 특별한 사람만 가능한 거야 그냥 하나라도 잘하자.’ 이

yozm.wishket.com

기존 JS 기반으로 백엔드를 공부하고 있었기에 더더욱 관심을 가지게 되고 흥미를 가지게 되었다. 프로덕트를 만들고 가지고 싶다는 꿈이 하나 더 생겼다. 이런 나에게 한가지 생각이 머리를 스쳤다.

"하나를 깊게하는 T 자형 개발자가 되어야해."

꿈에 매료된 나는 이 질문에 대해 다르게 답했다. 백엔드만 하는 개발자가 아니라 개발을 잘하는 개발자. 프로덕트와 개발에 대해 깊은 사람. 이게 T 자형 개발자라고 생각하게 되었다.

취업

스타트업에 백엔드 개발자로 취업하게 되었다. 회사에서도 프론트와 백엔드 모두 가능한 사람이 필요했던것 같다.

첫 출근을 하게 되었을때, 직원들의 축하보단 우려와 걱정이 더 느껴졌다. 여러모로 문제가 많은 스타트업이었다. 적은 인원임에도 서로를 신뢰하지 않는 다는 것이 느껴졌다. 프로덕트에 문제가 있는 것을 개발단에서 알고 있으나 이를 알리거나 보고하지 않는다.

대표가 직접 업무를 지시하는데 이는 휴일을 가리지 않는다. 코드에서도 문제점들이 정말 많았다. 문서화되어있지 않아 바로 업무투입이 어려운 환경, 컨벤션이 없는 코드, 단기간에 바뀌는 개발 담당자, 지켜지지 않는 단일책임원칙 등 너무 많았다.

이 회사는 크게 두가지를 느끼게 해주었다. 문화와 신뢰의 중요함, 코드의 문서화와 규칙은 꼭 필요하다는 것을 느꼈다.

이후 운이 좋게 교육받았던 회사에서 인턴 근무를 할 수 있게 되었다.

앞전 회사에서의 경험을 발판삼아 문서화와 작업을 하며 기존의 코드를 바꾸려고 노력했던 것 같다. 좋은 문화를 가진 회사이다 보니 더욱 일에 진심이 되었고, 성장을 갈망하게 되었다. 꽤 긴시간 안썼던 블로그도 스터디를 진행하며 다시금 시작하게 되었다. 현재 회사에서 진행하는 모든 일들이 새롭고 나에게 성장이 되고 있다.

outro

여러가지 경험을 했던 한해였다. 앞으로 2025 에 대한 목표가 있다면, 첫째는 성장이다. 여러모로 부족함을 많이 느꼈다. 여러 면접을 경험하며 모르는 부분을 두루뭉술 하게 넘어가거나 했던 적도 때때로 존재했다. 모르는게 없는 건 어렵겠지만, 최소화하며 이로 이야기와 의견을 나누며 즐기고 싶다. 또한 CS 와 알고리즘을 즐기고 싶다. 두번째는 정규직 취업이다. 왜 두번째냐고 한다면 성장을 하다보면 당연하게 따라 온다고 생각하고 성장이야 말로 기본적으로 계속 행해야 하는 일이라고 생각하기 때문이다. 기술적인 이야기와 대화를 좋아하는데, 처음에 떨렸던 면접이 이제 이야기와 대화하는 기대감을 안겨주는 곳이 되었다고 생각한다.

올해도 성장하자.

잔디 기부 캠페인 회고

muyeon — Thu, 19 Dec 2024 00:49:30 +0900

잔디 기부 캠페인

회고

처음 이 태스크를 받았을 때, 재미보다는 걱정이 더 컸습니다.

그로 인해 기획과 논의를 시작하는 데 힘들었고, 부정적인 생각에 사로잡히기도 했습니다. "어려울 것 같은데요", "힘들 것 같아요", "시간을 맞추기 어려울 것 같아요."

오늘도 개발자는 안된다고 했다

그런 제 모습이 너무 싫어서, 프로덕트에 좋지 않아 생각을 바꾸기로 했습니다. "가능하다", "될 것 같다"는 마음으로, 이를 행동으로 옮겼습니다. 이에 기획을 진전시킬 수 있는 부분은 모두 반영하려 했습니다.

기획안에 맞춰 POC(Proof of Concept)를 만들어 보고, 개발을 진행하는 데 있어 가장 큰 문제는 시간이었습니다. 5일 안에 롤아웃을 해야 했고, 퍼블리싱은 3일째에 끝났지만, 그 이후에도 계속 기능 변동이 있었습니다. 같은 상황에서 플로우도 변경되었습니다.

이런 상황에서 QA를 받거나, 일정 내에 롤아웃을 하는 것은 거의 불가능했습니다.

QA를 미루고 기능 구현에만 집중하다 보니, 추후 수정해야 할 부분이나 구조, 엣지 케이스, 재사용성 등 중요한 사항들을 놓친 채 진행되었습니다.

그 결과 QA 후 버그를 수정하거나, 코드 리뷰 후에 새로운 버그가 발생하는 일이 반복됐고, 결국 여러 번 QA를 거쳐야 했습니다.

하지만 이번 잔디 캠페인에서 중요한 것은, 반복적인 QA를 통해 여러 번 수정하고 개선할 수 있었던 점입니다.

구성원들이 꼼꼼히 검토하고 도와주셔서 결국 배포까지 완료할 수 있었습니다.

배운점

이번 잔디 캠페인에서 배운 점은 크게 세 가지입니다.

메타인지
내가 얼마나 구현할 수 있는지, 시간 내에 가능한지를 알게 되었습니다. 이번 경험을 통해 내 작업에 대한 객관적인 판단을 내릴 수 있는 기회를 얻었고, 앞으로 더 효율적인 시간 관리를 할 수 있을 것 같습니다.
문제는 즉시 해결해야 한다
이전에는 문제가 발생해도 당장 크리티컬하지 않으면 뒤로 미루는 경향이 있었습니다. 하지만 이번 캠페인에서 그런 버릇 때문에 큰 어려움을 겪었습니다. 미뤘던 문제가 점점 커져 결국 크리티컬한 버그로 돌아왔습니다. 이후로는 발견 즉시 문제를 해결하려고 노력하고 있습니다.
테스트의 중요성
빨리 만드는 것만큼 중요한 것은 정확하게 만드는 것입니다. 코드를 빠르게 작성하는 것도 중요하지만, 그보다 더 중요한 것은 프로덕트가 제대로 작동하도록 하는 것입니다. 이번 캠페인에서 QA 중에 발견된 문제들을 수정할 때, 다른 부분에서 버그가 생기는 일이 많았습니다. 제대로 된 테스트가 있었다면 QA 및 버그 수정으로 인한 일정 지연을 줄일 수 있었을 것 같다는 생각이 듭니다.

이번 태스크를 통해 몰입하며 한 단계 성장한 것을 느꼈습니다. 이제는 핵심 기능에 테스트를 바로 적용하고, 예상대로 동작하는 완전한 코드를 만드는 것에 대한 학습이 필요함을 깨달았습니다. 또한, 재사용 가능한 코드를 작성하는 습관이 중요하다는 점을 실감했습니다. 빠르게 진행해야 하는 상황에서도 재사용 가능한 코드를 작성하는 능력은 현재와 미래에 모두 매우 중요한 역량임을 알게 되었습니다.

마무리

짧은 기간이었지만, 프로덕트에 몰입하며 성장할 수 있는 의미 있는 경험이었습니다.

함께 도와주신 덕분에 빠르게 변화하고 적용하는 스타트업의 문화를 제대로 경험할 수 있었습니다.

도와주셔서 진심으로 감사드립니다.

+ 잔디 인증(개발자 특혜 첫 기여 ㅎ)

https://hanghae99.spartacodingclub.kr/campaign

개발자 커리어 개척 캠프 항해99 | 잔디 기부 캠페인

세상의 성장에 기여하세요

hanghae99.spartacodingclub.kr

https://hanghae99.spartacodingclub.kr/campaign/50113066

개발자 커리어 개척 캠프 항해99 | 잔디 기부 캠페인

세상의 성장에 기여하세요

hanghae99.spartacodingclub.kr

http 프로토콜 리퀘스트 라이프 사이클 (HTTP Protocol Request Life Cycle)

muyeon — Mon, 2 Dec 2024 23:31:13 +0900

http 프로토콜 리퀘스트 라이프 사이클?

이는 개발을 공부하며, 면접경험이 있다면 너무나 익숙할 주제다.

한번쯤 면접에서 아래와 같은 질문을 받아본 적 있을 것이다.

https://google.com 을 입력하면 무슨일이 일어나나요?

이는 네트워크 흐름을 물어보는 질문이다.

이에 대해 정확히 알고있지 않다면, 구구절절 늘어 놓는 답변에 면접관을 지루하게 하거나, 핵심을 빗겨나간 답으로 좋은 평가를 받지 못할 수 있다.

때문에 일련의 네트워크 흐름에 대해 자세히 알아보고, 내가 생각하는 좋은 답변을 요약하는 것으로 마무리를 지으려고 한다.

1. 파싱

첫번째로 URL 을 입력과 파싱으로 시작한다.

크게 프로토콜과 호스트 명으로 파싱한다.

https:// # 프로토콜
google.com # 호스트명

파싱을 하는 이유는 호스트명을 IP 주소로 변환하기 위해 DNS 조회를 하기 위한 것이다.

2. DNS 조회

브라우저는 파싱한 호스트명의 IP 주소를 찾기 위해 질의를 보낸다.

그러면 DNS 서버는 호스트명의 IP 를 찾아 반환한다.

* 만약 클라이언트가 캐시하고 있다면 생략됨.

3. 연결

3-way handshake 를 통해 TCP 연결을 설정한다.

1) SYN 플래그를 보내 클라이언트에서 서버로 요청한다.

-> 이 패킷에는 클라이언트의 초기 시퀀스 번호가 포함된다. 이는 순서를 보장하기 위해 사용된다.

2) 요청을 받은 서버는 클라이언트로 받은 SYN 패킷을 수신하고, 연결을 수락하기 위해 응답을 보낸다.

-> [SYN : 연결을 수락한다는 신호]

-> [ACK: 클라이언트가 보낸 SYN 패킷의 확인 응답, 클라이언트가 보낸 시퀀스 번호를 확인 후 +1 한 값을 ACK 번호로 설정한다.]

서버는 자신의 시퀀스 번호를 포함해 SYN-ACK 패킷을 전송한다.

3) 클라이언트는 서버의 SYN-ACK 을 수신하고, 연결을 확인했다는 의미로 ACK 을 보낸다.

클라이언트는 서버가 보낸 SYN-ACK 을 확인하고, 자신의 시퀀스 번호의 +1 더한 값을 ACK 번호로 설정해 응답한다.

3-way handshake가 완료되면, 클라이언트와 서버 간의 TCP 연결이 완전히 확립됩니다.

그 후, 브라우저는 HTTP 요청을 전송할 수 있으며, 서버는 이 요청에 대해 응답을 보냅니다.

이때부터 클라이언트와 서버는 TCP 연결을 통해 데이터를 주고받을 수 있게 된다.

꼭 알아야 할 특징⭐️

- 초기 시퀀스 번호를 교환하며 연결의 안정성을 확보함

- 시퀀스 번호를 사용함으로서 패킷이 제대로 도착 했는지, 순서대로 도착했는지 알수 있어 전송의 신뢰성을 높임. (오류 최소화)

- 서버의 존재와 접속여부를 확인하기에 안정적이고 신뢰성이 높다.

4. SSL-handshake

https 의 안전한 통신을 위해 SSL-handshake 가 이루어 진다.

이 때 서버의 디지털 인증서를 확인하며, 암호화에 필요한 키를 교환하며, 신뢰할 수 있는 발급기관에서 발급되었는지를 확인한다.

이 부분은 이전에 적은 글이 있으니 간략히하고 링크를 첨부한다.

https://muyeon95.tistory.com/331

https

https 는 http 에 보안이 추가된 것이다.이는 너무 단순하며, 이렇게만 알고있으면 https 를 설명하기 어렵다. https 암호화 및 인증을 위해 SSL/TLS 프로토콜을 사용하는 http 의 보안 버전이다.기본적으

muyeon95.tistory.com

5. 요청 전송

이제 브라우저는 실제로 요청을 전송한다.

요청의 형식은 아래와 같다.

GET / HTTP/1.1
Host: google.com
User-Agent: [브라우저 정보]
Accept: text/html,application/xhtml+xml,...

6. 서버에서 요청 처리 - 응답

Google 서버는 HTTP 요청을 받으면, 요청된 리소스(/ 경로)에 대해 적절한 콘텐츠를 처리한다.

서버는 HTML 페이지, JavaScript 파일, CSS 파일, 이미지 등 여러 리소스를 조합하여 응답을 준비한다.

응답은 아래와 같다.

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: [응답 크기]
Set-Cookie: [쿠키 정보]
Date: [응답 날짜]

7. 렌더링

이제 브라우저는 받은 컨텐츠들을 해석해 렌더링해 화면에 표시한다.

HTML, CSS, Javascript 를 로드하고 실행해, 사용자가 볼 수 있는 페이지가 나타난다.

8. 면접에 대한 생각

이 블로그에 적은 모든 내용을 말하기는 쉽지 않을 것이다. 또한 모두 말하더라도 개인적으로 좋다고 생각하지 않는다.

그 이유는 면접은 발표하는 자리가 아니란 점이다. 질문하고 답하며, 대화하는 자리이다.

절대적으로 바라본다고 했을때, 한번에 모두 답한다면 한번 질문에 답한것이고, 면접관이 질문 할 수 있게 유도하여, 꼬리질문까지 받아낸다면 더 좋은 점수를 받을 것이라고 생각한다.

9. 어떻게 답할까?

Q. https://google.com 을 브라우저에 입력하면 무슨일이 일어나는지 설명해주세요.

- 최초에 https://google.com 을 입력하면 프로토콜 부분과, 도메인명이 나누어져 파싱됩니다. 파싱된 도메인명은 DNS 서버를 통해 IP 주소로 변환됩니다. 이후 TCP 통신을 시작해 3-way handshake 를 통해 클라이언트와 서버를 확인해 연결합니다. 이어서 SSL-handshake 를 거쳐 통신 준비가 마무리됩니다. 이때 GET 요청이 발생해 서버로 부터 요청하게 되며, 서버에서 요청을 확인 후 응답을 해주게 됩니다. 이후 받은 컨텐츠가 브라우저에 렌더링되며 화면에 보여지게 됩니다.

꼬리질문: 3-way handshake 는 어떻게 일어나나요?

꼬리질문: SSL-handshake 에서 키를 어떻게 전달하나요?

꼬리질문: 요청과 응답시에 어떤 데이터들을 주고 받나요?

꼬리질문: 여기에서 브라우저 렌더링은 어떻게 일어나게 되나요?

여러개의 input 관리 [React]

muyeon — Fri, 17 May 2024 19:56:29 +0900

input 을 관리할때 onChange 와 value 를 통해 사용하고 useState 를 통해 관리한다.
더 관리하기 좋은 형태는 없을까?

무슨 고민이야?

아래 코드는 간단한 todo 리스트의 입력부분이다.

import React, { useState } from "react";
import "../../styles/index.css";
import TodoFormButton from "./buttons/TodoFormButton";

const TodoForm = ({ setTodos }) => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

  const addTodoHandler = (e) => {
    e.preventDefault();
    if (!title || !content) {
      alert("빈칸은 허용되지 않습니다.");
      return;
    }

    const newTodo = {
      id: Date.now(),
      title,
      content,
      complete: false,
    };

    setTodos((prevTodos) => [...prevTodos, newTodo]);
    setTitle("");
    setContent("");
  };

  return (
    <div className="todo-form-wrapper">
      <form className="todo-form-container" onSubmit={addTodoHandler}>
        <div>
          <label htmlFor="title">제목</label>
          <input
            type="text"
            id="title"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
          <label htmlFor="content">내용</label>
          <input
            type="text"
            id="content"
            value={content}
            onChange={(e) => setContent(e.target.value)}
          />
        </div>
        <TodoFormButton />
      </form>
    </div>
  );
};

export default TodoForm;

고민점은 이렇다.

1. onChange 함수를 보면 set 하는 부분을 제외하면 동일하다.

2. 현재 코드는 input 이 늘어나면 useState 도 늘어나야 한다.

onChange 부분을 함수로 뺀다고 한들 set 부분이 다르기에 조건이 생겨 더욱 보기 안좋아 질 것이다.

이를 더 효율적으로 관리할 수 있는 방법은 뭐가있을까?

객체를 통한 관리

좋은 방법은 input 에 name 을 설정하고, 이벤트가 발생했을때 이를 참조한다.

객체 형태의 관리가 필요하다.

// ... 중략

const TodoForm = ({ setTodos }) => {
  const [inputs, setInputs] = useState({
    title: "",
    content: "",
  });

  const onChange = (e) => {
    
  };

  const addTodoHandler = (e) => {
    // ... 중략
  };

  return (
    <div className="todo-form-wrapper">
      <form className="todo-form-container" onSubmit={addTodoHandler}>
        <div>
          <label htmlFor="title">제목</label>
          <input
            type="text"
            id="title"
            name="title"
            value={title}
            onChange={onChange}
          />
          <label htmlFor="content">내용</label>
          <input
            type="text"
            id="content"
            name="content"
            value={content}
            onChange={onChange}
          />
        </div>
        <TodoFormButton />
      </form>
    </div>
  );
};

export default TodoForm;

이제 이 값을 참조해 객체를 업데이트 하면 된다.

이를 onChange 함수에서 구현한다.

어떻게 업데이트해?

구조분해 할당과 스프레드 연산자를 통해 업데이트 한다.

// ... 중략

const TodoForm = ({ setTodos }) => {
  const [inputs, setInputs] = useState({
    title: "",
    content: "",
  });

  const onChange = (e) => {
    const { name, value } = e.target;
    // name 은 input 의 name 이다.
    
    setInputs({
      ...inputs,
      [name]: value,
    })
    
  };

  // ... 중략

export default TodoForm;

e.target.name 과 e.target.value 를 추출한다.
...inputs 를 사용해 기존 state 를 유지한다.
[name]: value 를 사용해 변경된 필드를 업데이트한다.
setInputs 를 사용해 업데이트된 state 를 설정한다.

주의점은 [name]: value 부분에 [] 를 넣어주지 않는다면 문자열 name 자체가 들어가져 name 값에 따라 다른 key 값이 변경된다.

변경된 코드

import React, { useState } from "react";
import "../../styles/index.css";
import TodoFormButton from "./buttons/TodoFormButton";

const TodoForm = ({ setTodos }) => {
  const [inputs, setInputs] = useState({
    title: "",
    content: "",
  });

  const { title, content } = inputs;

  const onChange = (e) => {
    const { name, value } = e.target;

    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const addTodoHandler = (e) => {
    e.preventDefault();
    if (!title || !content) {
      alert("빈칸은 허용되지 않습니다.");
      return;
    }

    const newTodo = {
      id: Date.now(),
      title,
      content,
      complete: false,
    };

    setTodos((prevTodos) => [...prevTodos, newTodo]);
    setInputs({
      title: "",
      content: "",
    });
  };

  return (
    <div className="todo-form-wrapper">
      <form className="todo-form-container" onSubmit={addTodoHandler}>
        <div>
          <label htmlFor="title">제목</label>
          <input
            type="text"
            id="title"
            name="title"
            value={title}
            onChange={onChange}
          />
          <label htmlFor="content">내용</label>
          <input
            type="text"
            id="content"
            name="content"
            value={content}
            onChange={onChange}
          />
        </div>
        <TodoFormButton />
      </form>
    </div>
  );
};

export default TodoForm;

마무리

이로서 여러개의 input이 있는 요구사항도 효율적으로 상태관리를 하는 방법에 대해 알게되었다.

중요한 점은 객체 상태를 업데이트 할 때는 꼭 기존의 상태를 한번 복사하고 특정값을 덮어씌워 새로운 값을 설정해야한다. -> 불변성

https://hsp0418.tistory.com/171

리액트 불변성이란 무엇이고, 왜 지켜야 할까?

들어가면서 리액트와 불변성의 연관 관계는 리액트가 지향하는 함수형 프로그래밍의 특징에서 발견할 수 있습니다. 함수형 프로그램밍의 특징 중 하나가 순수함수를 사용하는 것인데, 여기서

hsp0418.tistory.com

https://ko.legacy.reactjs.org/docs/faq-state.html

컴포넌트 State – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

https://velog.io/@sunkim/React%EC%97%90%EC%84%9C-%EC%97%AC%EB%9F%AC%EA%B0%9C%EC%9D%98-input-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0

[React]여러개의 input 상태 관리하기

input 여러 개 일때 useState를 여러개 사용하는건 좋은 방법이 아님. 좋은 방법은, input에 name이라는 값을 설정하고, 이벤트가 발생했을 때 이값을 참조하는거다. 여러개의 문자열 형태를 가지고 있

velog.io

https://ko.legacy.reactjs.org/docs/state-and-lifecycle.html

State and Lifecycle – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

Vite

muyeon — Mon, 13 May 2024 20:48:02 +0900

Vite 를 왜 사용해야 할까?
그냥 마냥 사용하면 될까? 주의점은 없을까?

번들링?

번들링은 빌드라고도 할 수 있다.

사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위라고 정의할 수 있다.

개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다.

왜 번들링을 해야해?

코드를 번들링한다는 것은 단순히 묶기만 하는 것이 아닌 압축하는 개념과 비슷하다.

번들 파일은 원본 프로그램 파일보다 크기가 작아지고 실행 속도, 로딩 속도 또한 빨라진다.

압축한 파일을 받아와 압축해제 전까지 파일을 조작할 수 없는 것처럼, 또한 번들링된 웹 애플리케이션은 사용자가 임의로 조작할 수 없다.

js 에서 변수는 기본적으로 전역범위를 가지기 때문에 하나의 프로젝트 폴더에서 여러 개의 js 파일이 있더라도 공유하는 위험이 있다.

변수를 중복 선언하거나 의도치 않은 값을 할당해 생기는 에러를 번들링 도구는 모듈 번들링으로 해결한다.

HMR (Hot Module Replacement)

코드 변경 사항을 페이지 새로 고침 없이 실시간으로 브라우저에 반영하는 기능이다.

이로서 웹 개발 속도를 높이고 효율성을 극대화 할 수 있다.

vite 는 기존 HMR 구현 방식과 차별화된 방식으로 구현했다.

전체 페이지를 로드하는 대신 수정된 모듈만 선택적으로 업데이트해 페이지 리로드를 최소화하고 애플리케이션의 상태를 유지한다.

이는 기본적으로 활성화 되어있다.

ESM (ECMAScript Modules)

ESM 은 자바스크립트에 도입된 네이티브 모듈 지원을 의미한다.

이는 기존 모듈 시스템에 비해 여러가지 장점을 제공한다.

ECMAScript 스펙에 정의된 표준화 모듈 시스템이기에 자바스크립트 환경 및 도구에 호환성을 보장한다.
개별 모듈을 가져오고 내보내는 것을 가능하게 해 모듈성과 코드 구성을 향상시킨다.
정적 분석 도구가 코드 종속성을 더 잘 이해하고 최적화 하도록 돕는다.
트리 쉐이킹을 지원하는데 이는 사용되지 않는 코드를 번들에서 제거하는 프로세스로, 결과적으로 더 작고 빠른 애플리케이션을 만들 수 있다.
자바스크립트에 네이티브로 통합되어 외부 모듈 로더나 구성이 필요하지 않다.

vite & ESM

vite 는 ESM 네이티브 기능을 사용해 모듈을 효율적으로 로드한다.
HMR 이 효과적으로, 수정된 모듈만 업데이트 한다.
모듈을 번들링하고 최적화하여 프로덕션 배포를 위한 더 작고 빠른 코드를 생성한다.

Vite 를 사용해야 하는 이유

브라우저에서 ESM 을 지원하기 전까지 js 모듈화를 네이티브 레벨에서 진행할 수 없었다.

그래서 소스 모듈을 브라우저에서 실행할 수 있는 파일로 번들링 해야 했다.

webpack, rollup, percel 과 같은 도구는 이런 번들링 작업을 진행하 줌으로써 프론트엔드 개발자의 생산성을 크게 향상시켰다.

하지만 웹 애플리케이션들이 발전함에 따라서 js 모듈의 개수도 많이 증가했다.

이런 상황에서 js 기반의 도구는 성능 병목 현상이 발생했고, 번들링 작업의 소요시간은 늘어났다.

번들러 기반의 도구는 애플리케이션 내의 모든 소스코드에 대해 빌드 작업을 마쳐야만 페이지를 제공할 수 있었다.

vite 는 애플리케이션 모듈을 dependencies 와 source code 두가지 카테고리로 나누어 개발 서버의 시작 시간을 개선했다.

기존 작업 도구들은 js 로 만들어져 번들링과정이 비효율적이었고, vite 는 사전 번들링으로 Esbuild 를 사용한다. 이는 Go 로 작성되어 기존 번들러 대비 10~100배 빠른 속도를 제공한다.

소스코드도 마찬가지로 컴파일링이 필요하고 수정또한 잦을 수 있다. 이를 모두 불러오는 것은 낭비이다. vite 는 Native ESM 을 통해 이를 제공하고 해결했다. vite 는 브라우저가 요청하는 대로 소스코드를 변환하고 제공하기만 하면 된다. 동적 import 의 경우 현재 화면에서 실제로 사용되는 경우에만 처리된다.

느린 소스코드 갱신

번들러 기반으로 개발을 진행할 때 소스코드를 업데이트 하게 되면 번들링 과정을 거쳐야 했다.

따라서 서비스가 커질 수록 갱신 시간이 느려진다.

이렇게 되는 이유는 "모든 파일" 을 번들링 해야하기 때문이다. 이러한 이슈를 해결하고자 HMR 이라는 대안이 등장했으나 이 역시 명확한 답은 아니었다.

vite 는 HMR 을 지원하기는 하나 번들러가 아닌 ESM 을 이용한다. 어떤 모듈이 수정되면 vite 는 그저 수정된 모듈과 관련된 부분만을 교체할 뿐이고, 브라우저에서 해당 모듈을 요청하면 교체된 모듈을 전달한다.

모든 과정에서 ESM 을 이용해 앱 사이즈가 커져도 HMR 을 포함한 갱신 시간에는 영향을 끼치지 않는다.

vite 는 HTTP 헤더를 활용해 전체 페이지의 로드 속도를 높인다. 이로 요청 횟수를 최소화해 페이지 로딩을 빠르게 만들어 준다.

사용법

https://ko.vitejs.dev/guide/

Vite

Vite, 차세대 프런트엔드 개발 툴

ko.vitejs.dev

npm create vite@latest

주의점

import 경로를 식별하는 것에 주의해야한다.

vite 가 임포트 경로를 추측하는데 사용하는 default 옵션은 아래와 같다.

['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json']

만약 이 상황에서 import './Component' 로 ./Component.jsx 를 임포트하는 경우 vite 는 다음 단계를 거친다.

1. /Component 가 존재하는지 확인, 없음

2. /Component.mjs 가 존재하는지 확인, 없음

3. /Component.js 가 존재하는지 확인, 없음

4. /Component.mts 가 존재하는지 확인, 없음

5. /Component.ts 가 존재하는지 확인, 없음

6. /Component.jsx 가 존재하는지 확인, 있음

하나의 임포트 경로를 식별하는데 6번의 작업이 필요하게 된다. 즉 암시적인 임포트가 많아질 수록 경로를 식별하는데 더 많은 시간이 필요하게 된다.

임포트 방식을 import './Component.jsx' 와 같이 명시적으로 지정하는 것이 더 좋고, resolve.extensions 의 목록을 좁혀 파일시스템의 작업을 줄이는 방법도 있다. 하지만 후자의 경우 node_modules 내의 파일에 대해서도 잘 수행되는지 확인이 필요하다.

TS 를 사용하는 경우 tsconfig.json 의 compilerOptions 에 "moduleResolution": "bundler" 와 "allowImportingTsExtensions": true 를 추가해 .ts 와 .tsx 확장자를 코드에서 바로 사용할 수 있다.

또한 다른 여러 주의점들이 존재한다. 아래 링크를 참고.

https://ko.vitejs.dev/guide/performance.html

Vite

Vite, 차세대 프런트엔드 개발 툴

ko.vitejs.dev

마무리

그냥 많이 쓰기에 기술들을 사용하는 것을 많이 보았다.

어떤 기술이라 사용하고, 왜 사용하는지 문제점은 없는지 조금이라도 알아보고 사용하는 것이 중요하다고 생각한다.

참고링크

https://ko.vitejs.dev/guide/

Vite

Vite, 차세대 프런트엔드 개발 툴

ko.vitejs.dev

Virtual DOM

muyeon — Fri, 3 May 2024 22:55:52 +0900

리엑트를 사용하는 이유에는 여러가지가 있다.
그중에서 가상 DOM 은 큰 특징이다.

DOM

웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다.

DOM 은 애플리케이션 전체 UI 를 나타내고 트리 구조로 표현된다.

여기에는 Web Document 에 있는 각 UI 요소에 대한 노드가 포함된다.

웹 개발자가 자바스크립트를 통해 컨텐츠를 수정할 수 있기 때문에 유용하다.

또한 구조화된 형식으로 되어 있어 특정 대상을 선택할 수 있고 모든 코드 작업이 쉬워지기 때문에 도움이된다.

DOM 의 문제점은?

DOM 은 트리 구조로 되어 있어 이해하기 쉽지만, 노드의 수가 많아질 수록 느려지고, DOM 업데이트에 잦은 오류를 발생시킬 수 있다.

또 최근 웹은 SPA 를 사용한다. 하나의 웹 페이지를 어플리케이션처럼 구성하는 SPA 에서는 HTML 문서 자체가 하나이며, 여러 동적인 기능이 들어가기에 안그래도 리소스가 모두 합쳐진 무거운 HTML 문서를 지속적으로 재렌더링 해주어야 하는 문제점이 발생한다.

DOM 을 업데이트 하는 것은 컨텐츠 변경을 포함할 뿐 아니라 훨씬 더 많은 작업들이 요구된다. 또한 CSS 를 다시 계산하고 레이아웃을 변경하려면 복잡하며 성능에 영향을 끼친다.

기존에는 화면의 변경사항을 DOM 을 직접 조작해 브라우저에 반영했다.

이 방법의 큰 단점은 DOM 트리가 수정될 때마다 렌더 트리가 계속해서 실시간으로 갱신된다는 점이다.

화면에서 100개의 수정사항이 발생하면 수정 할 때마다 새로운 렌더 트리가 100번 수정되면서 새롭게 만들어지게 된다.

Virtual DOM

리엑트에서 사용하는 가상 DOM 도 실제 DOM 내용에 기반하여 만들어진다.

가상 DOM 은 실제로 화면에 렌더링 하는 것이 아니기에 DOM 을 직접 업데이트하는 것 보다 상대적으로 빠르다.

가상 DOM 은 가상 UI 표현이 메모리에 유지되고 React DOM 과 같은 라이브러리에 의해 실제 DOM 에 동기화된다.

이 방식은 리엑트의 선언적 API 를 가능하게 한다.

왜 가상 DOM 을 사용해야 할까?

실제 DOM 에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있어 실제 DOM 을 조작하는 작업이 무겁기 때문이다.

리엑트는 실제 DOM 의 변경 사항을 빠르게 파악하고 반영하기 위해 내부적으로 가상 DOM 을 만들어 관리한다.

가상 DOM 은 실제 DOM 에서 처리하는 방식이 아닌 가상 DOM 과 메모리에서 미리 처리하고 저장한 후 실제 DOM 과 동기화하는 개념이다. 해당 DOM 을 컴포넌트 단위로 쪼개어 HTML 컴포넌트 조립품 처럼 다루는 개념이다.

Virtual DOM 은 왜 효율적일까?

가상 DOM 을 사용하면 실제 DOM 을 접근해 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성해 사용한다.

DOM 의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용반 반영해 성능 향상이 된다.

DOM 의 상태를 메모리 위에 계속 올려두고 DOM 에 변경이 있을 경우 해당 변경 사항만 반영한다.

실제 DOM 은 느릴까?

리엑트는 대규모 SPA 와 다이나믹 UI 의 웹 페이지를 만들기 위해 존재한다.

만약 규모가 작고 정적인 이전의 웹 애플리케이션이라면 일반 DOM 이 성능이 더 좋다.

실제 DOM 은 초기 정적인 웹페이지에 맞게 설계되어 정적인 성격을 가지고 있으며 현재 트렌드인 동적인 웹 애플리케이션에 사용하려면 성능적인 문제가 발생한다.

복잡한 SPA 에서는 DOM 조작이 빈번하게 발생하며 그 변화를 적용하기 위해 브라우저는 많은 연산을 하게 되고 전체적인 프로세스가 비효율적이게 된다.

정리

Virtual DOM 은 Real DOM 의 가상 표현이다.
리엑트는 먼저 Virtual DOM 의 상태 변경을 업데이트 한 다음 Real DOM 과 동기화 한다.
Virtual DOM 은 기계의 청사진과 같아서 청사진을 변경할 수 있지만 이런 변경사항은 직접 적용되지 않는다.
Virtual DOM 은 UI의 가상 표현이 ReactDOM 과 같은 라이브러리에 의해 Real DOM 과 동기화된 메모리에 유지되는 프로그래밍 개념이며 이를 조정이라고 한다.
Virtual DOM 이 성능을 더 빠르게 만드는 것은 처리 자체가 더 짧은 시간에 완료되기 때문이 아니다. 그 이유는 변경된 정보의 양이다. 전체 페이지를 업데이트 하는 데 시간을 낭비하는 대식 작은 요소와 상호작용을 한다.

	Real DOM	Virtual DOM
업데이트	느리다.	빠르다.
HTML 업데이트 방식	HTML 을 직접적으로 업데이트	HTML 을 직접적으로 업데이트 하지 않음
새로운 element 업데이트 방식	새로운 element 가 업데이트 된 경우 새로운 DOM 생성	새로운 element 가 업데이트 된 경우 새로운 Virtual DOM 생성 후 이전 DOM 과 비교해 차이점만 업데이트
메모리	메모리 낭비가 심함	메모리 낭비가 덜함

참고링크

https://www.geeksforgeeks.org/reactjs-virtual-dom/

ReactJS Virtual DOM - GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

www.geeksforgeeks.org

https://velog.io/@ctdlog/React-DOM%EC%9D%B4%EB%9E%80-Virtual-DOM%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

[React] DOM이란? Virtual DOM을 사용하는 이유?

React의 장점 중에는 Virtual DOM이 있다. 근데 대체 Virtual DOM이 무엇일까?Virtual은 말 그대로 가상이라는 뜻이고 DOM은 Document Object Model의 약자로 그대로 해석하면 문서 객체 모델을 의미한다. 문서 객

velog.io

https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Virtual-DOM/

Vanilla Javascript로 가상돔(VirtualDOM) 만들기 | 개발자 황준일

Vanilla Javascript로 가상돔(VirtualDOM) 만들기 본 포스트는 React와 Vue에서 사용되고 있는 가상돔(VirtualDOM) 직접 만들어보는 내용이다. 그리고 이 포스트를 읽기 전에 Vanilla Javascript로 웹 컴포넌트 만들

junilhwang.github.io

https://doqtqu.tistory.com/316

Virtual DOM, 가상 돔 이란?

DOM(Document Object Model) 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다. DOM은 애플리케이션의 전체 UI를 나타내며 트리 데이터 구조로 표현된다. 여기에는 Web Document에 있는 각 UI

doqtqu.tistory.com

https://legacy.reactjs.org/docs/faq-internals.html

Virtual DOM and Internals – React

A JavaScript library for building user interfaces

legacy.reactjs.org

이벤트 버블링 & 캡처링

muyeon — Thu, 2 May 2024 23:17:49 +0900

바닐라 JS 로 프로그래밍을 하다보면 생기는 현상이 있다.
이벤트를 다른 곳에 지정했는데 왜 상위요소가 지정되지?
왜 하위요소도 전부..?

event flow

DOM 이벤트 흐름에는 캡처링, 타겟, 버블링 3가지가 있다.

캡처링은 이벤트가 하위요소로 전파되는 것이고

타겟은 이벤트가 실제 타겟 요소에 전달되는 것

그리고 버블링은 이벤트가 상위 요소로 전파되는 것이다.

테이블 안 td 태그를 클릭했을때 이벤트의 흐름

td 태그를 클릭하게 되면 이벤트가 최상위에서 시작해 아래로 전파. -> 캡처링

이벤트가 타겟 요소에 도착해 실행 된다. -> 타겟

그리고 다시 위로 전파된다. -> 버블링

위 그림의 3개의 phase 중에서 이벤트 핸들러가 실행되는 과정은 원래 target phase, bubbling phase 이나, 필요에 따라서 capture phase 와 target phase 에서 발생하도록 할 수 있다.

캡처링

캡처링은 이벤트가 하위 요소로 전파된다.

이벤트 버블링의 역순이며 타겟으로부터 거품이 올라오는게 버블링이라면, 해당 타겟이 어디있는지 찾아 내려가는 과정이 캡쳐링이다.

이벤트 캡처링은 이벤트 리스너에 세번째 매개변수로 true 를 지정해 사용할 수 있다.

element.addEventListener('click', (e) => {
	// 이벤트 처리
}, true)

true 매개변수는 이벤트가 하위 요소로 캡처되는 단계에서 이벤트 핸들러를 실행하도록 한다.

이렇게 하면 이벤트가 버블링 단계에 도달하기 전에 이벤트를 처리할 수 있다.

아직 경험이 많지 않지만 캡처링 과정이 중요할때가 있었나 싶다.

언제 사용되지..

버블링

버블링 단계는 이벤트가 상위 요소로 전달되는 것을 말한다.

즉 캡처링과 정반대로 동작한다.

특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다.

모두 다 버블링 될까?

모든 이벤트가 다 버블링이 되는 것은 아니다.

예를 들어 input 에 들어가는 onfocus 같은 이벤트는 버블링되지 않는다.

이런 특수한 이벤트를 제외하면 거의 다 버블링 된다고 생각하면 된다.

이벤트 버블링이 왜 존재해?

각 하위 요소에서 이벤트 핸들러를 각각 세팅해주기 보다는, 부모 요소에서 이벤트를 인지해서 상위 한 곳에서 핸들링을 하기 용이하게 만들기 위한 의도이다.

말 그대로 이벤트에 대한 핸들링을 다른 요소에 위임하는 방식이다.

이벤트 버블링이 없다면 모든 버튼에 핸들러를 넣어주어야 할 것이다.

이게 없다면 UI 요소에 로직 관련된 것이 너무 많이 들어가 보기 좋지 않고,

매번 새로운 핸들러를 만들어서 넣어주어야 해서 특정 경우에는 번거롭다.

이벤트 버블링 제어

event.stopPropagation() 으로 버블링을 제어할 수 있다.

이를 사용하면 이벤트가 상위 요소로 전파되는 것을 막는다.

element.addEventListener('click', (e) => {
	e.stopPropagation();
})

위와 같은 방식으로 의도치 않은 버블링 발생을 피할 수 있다.

하지만 이를 사용할 땐 항상 주의해야한다.

때떄로 이벤트의 전파를 막는 것이 예상치 못한 문제를 일으킬 수 있기 때문이다.

그리고 e.stopPropagation() 은 이벤트 버블링 뿐 아니라 이벤트 캡처링도 중단시킨다.

따라서 이 메서드를 호출하면 이벤트의 전파 단계에 따라 실행되어야 할 다른 이벤트 핸들러들이 제대로 작동하지 않을 수 있다.

참고링크

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

(기본) 이벤트 버블링, 이벤트 캡처링, 그리고 이벤트 위임까지 이벤트 전달 방식과 관련된 모든 것을 파헤쳐 봅니다.

joshua1988.github.io

https://medium.com/hcleedev/web-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EA%B3%BC-%EC%BA%A1%EC%B2%98%EB%A7%81-%EC%9C%84%EC%9E%84-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-f85d9c728561

Web: 이벤트 버블링과 캡처링, 위임 알아보기

DOM에서의 이벤트 버블링, 캡처링, target, 리고 위임 패턴에 대해 알아보자

medium.com

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90%EB%A7%81

한눈에 이해하는 이벤트 흐름 제어 (버블링 & 캡처링)

HTML 이벤트의 흐름 HTML 문서의 각 엘리먼트들은 아래와 같이 태그 안의 태그가 위치하는 식으로 계층적으로 이루어짐을 볼 수 있다. 이러한 계층적 구조 특징 때문에 만일 HTML 요소에 이벤트가

inpa.tistory.com

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

ko.javascript.info

JavaScript & TypeScript

muyeon — Wed, 1 May 2024 20:51:38 +0900

요즘 TypeScript 가 선호된다.
왜 선호되고 장점은 무엇이고 단점은 없을까?

javascript & typescript

자바스크립트는 동적 웹 페이지를 만들기 위해 고안된 언어이며 브라우저를 통해 실행된다.

타입스크립트는 자바스크립트의 슈퍼셋으로 정적 타입을 제공하여 대규모 애플리케이션의 개발을 용이하게 한다.

자바스크립트와 타입스크립트는 웹 개발자에게 강력한 도구를 제공한다. 이들은 개발자가 빠르게, 안정적으로 유연하게 애플리케이션을 개발 할 수 있도록 도와준다.

typescript

타입스크립트는 자바스크립트 기반의 정적 타입 문법을 추가한 언어이다.

타입스크립트는 자바스크립트의 슈퍼 셋, 즉 상위 확장자로 자바스크립트 엔진을 사용하며 자신이 원하는 변수의 타입을 정의하고 프로그래밍을 하면 자바스크립트로 컴파일되어 실행 할 수 있다.

* 컴파일은 컴퓨터가 이해할 수 있는 언어로 바꾸어 주는 과정이다.

타입스크립트는 자바스크립트와 달리 브라우저에서 실행하려면 파일을 한번 변환해 주어야 하는데 이 과정을 컴파일 이라고 한다.

왜써?

가장 큰 이유는 타입때문이다.

이 타입으로 코드 퀄리티와 가독성을 높일 수 있다.

타입스크립트는 컴파일을 하는 과정에서 타입을 결정하게 된다.

변수에 들어갈 값의 형태에 따라 자료형을 지정해 주어야 하는데, 컴파일 시 자료형에 맞지 않은 값이 들어가면 컴파일 에러를 발생시킨다.

타입스크립트는 컴파일 과정에서 타입을 지정하기에 컴파일 에러를 예방할 수 있을 뿐 아니라 손쉬운 디버깅이 가능해진다.

타입스크립트는 높은 생산성을 제공한다.

자바스크립트로 코드를 작성할 때 객체의 필드나 함수의 매개변수로 들어오는 값이 무엇인지 알기 위해 여러 파일을 살펴야 했지만 타입스크립트를 사용하면 변수의 이름뿐 아니라 그 데이터의 자료형까지 알 수 있게 된다.

개발자는 로직과 같은 큰 구조에 집중할 수 있게 된다. 또 객체 안의 필드값을 다 기억할 필요 없이 IDE가 자동으로 리스트업을 해주기 때문에 생산성에 큰 기여를 한다.

타입스크립트는 자바스크립트의 슈퍼 셋이다. 슈퍼 셋은 특정한 언어의 모든 기능을 포함하면서 다른 기능까지 활용가능하도록 확장된 것을 말한다.

타입스크립트를 적용하는 경우 기존의 자바스크립트로 짜인 코드에 확장하는 식으로 대규모 수정 없이도 타입스크립트를 적용 가능하다.

javascript vs typescript

1. 동적 타입 vs 정적 타입

타입스크립트는 자바스크립트의 단점중 하나인 동적으로 타입을 지정하는 특징을 보완하면서 등장했다.

변수의 타입이 런타임, 즉 실행시간에 결정되는 것으로 자바스크립트는 대표적인 동적 타입 언어이다.

배우기 쉽고 유연한 장점이 있지만 동시에 런타임 에러가 발생할 가능성이 있다.

규모가 큰 프로젝트에서 의존성이 있는 모듈을 변경했을 때, 다른 모듈에서 에러가 발생하는지 개발 도중에 알기가 쉽지 않다.

하지만 타입스크립트는 정적 타입 언어로 변수의 타입을 명시적으로 지정해서 사용한다.

컴파일 단계에서 타입 체크를 하기 때문에 코드 작성 중 타입 오류를 방지하는 타입 체킹 기능인 타입 어노테이션을 활용해 에러를 빠르게 발견할 수 있게 도와주기 때문에 코드를 수정하고 나서 버그가 생기는 것을 방지할 수 있다.

2. 컴파일 vs 인터프리터

자바스크립트와 타입스크립트는 언어를 해석하는 과정에 차이가 있다.

자바스크립트는 인터프리터 언어인데, 인터프리터 언어란 소스코드를 한줄한줄 읽어가며 명령을 바로 처리하는 언어로 코드가 즉시 실행되기 때문에 컴파일 언어에 비해 빠르다는 장점이 있다.

반대로 타입스크립트는 컴파일 언어이다. 컴파일 언어는 소스코드 전체를 컴퓨터가 이해할 수 있는 기계어로 변환하는 언어로 변환과 실행이 따로 이루어진다. 소스코드를 기계어로 번역하는 과정에서 인터프리터 언어에 비해 시간이 오래걸리지만 런타임 상황에서는 모든 소스코드가 변환되어 있기에 빠르게 실행할 수 있다.

typescript 의 단점은?

1. 초기세팅

초기세팅이 어렵다. 독자적인 언어가 아니기에 기존 자바스크립트에서 실행된다. 그래서 기본적으로 설치해야하는 모듈들이 있고 컴파일을 하기 위한 옵션들도 설정해야 한다.

2. 생산성 저하

타입스크립트가 익숙하지 않다면 생산성이 낮아질 수 있다. 매번 타입을 지정해줘야 하는 번거로움과 타입 어노테이션으로 인한 타입 에러로 실제 개발보다 타입을 지정하는데 시간을 더 할애할 수 있다.

또 타입스크립트에서 지원하는 interface, class 등에 매번 변수명을 지정하면서 길어지는 변수명과 관리 포인트가 늘어나 생산성이 저하될 수 있다.

마무리

자바스크립트는 동적 언어이기에 유연하게 활용할 수 있지만 이로 인해 오류를 발견하기 어렵고 유지보수가 어려워지는 문제가 있다.

타입스크립트는 자바스크립트의 슈퍼셋으로 타입 검사를 통해 오류 발견이 쉽고 코드의 안정성을 높이는 장점이 있다.

타입스크립트에 대해 필요성을 느끼기 시작한 후로는 이를 좋아하게 되었다.

컴파일시에 에러를 발견하는지 런타임시에 에러를 발견하는지의 차이는 크다.

예기치 못한 버그들을 최소한으로 줄이는 것은 정말 중요하다.

또 타입스크립트의 다양한 기능들이 존재한다. pick, emit, decorator 등 을 활용해 더욱 안전하고 편리한 기능들을 이용할 수 있어 사용을 안할 이유가 없다고 생각이든다.

https://velog.io/@theon2/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%99%80-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%B0%A8%EC%9D%B4-%EC%9E%A5%EB%8B%A8%EC%A0%90%EC%97%90-%EB%8C%80%ED%95%B4-%EC%84%A4%EB%AA%85%ED%95%B4%EC%A3%BC%EC%84%B8%EC%9A%94

자바스크립트와 타입스크립트의 차이, 장/단점에 대해 설명해주세요.

JavaScript와 TypeScript는 모두 널리 사용되는 프로그래밍 언어로, 웹 개발을 위해 주로 사용됩니다. 둘 사이에는 몇 가지 중요한 차이점이 있는데, 이를 통해 각 언어의 장점과 단점을 이해할 수 있

velog.io

https://www.elancer.co.kr/blog/view?seq=183#:~:text=Javascript%EB%8A%94%20%EC%9D%B8%ED%84%B0%ED%94%84%EB%A6%AC%ED%84%B0%20%EC%96%B8%EC%96%B4%EC%9D%B8%EB%8D%B0,%EB%8A%94%20'%EC%BB%B4%ED%8C%8C%EC%9D%BC%20%EC%96%B8%EC%96%B4'%EC%9E%85%EB%8B%88%EB%8B%A4.

TypeScript 사용하는 이유, 현직 웹 개발가 알려드립니다! I 이랜서

안정적인 개발과 높은 수준의 코드 품질을 유지하는데 좋은 프로그램 언어 'Typescript'의 특징과 사용하는 이유에 대해 이랜서에서 알려드립니다. I react typescript, typescript playground, typescript enum, type

www.elancer.co.kr

https://f-lab.kr/insight/javascript-and-typescript-for-modern-web-development?gad_source=1

현대 웹 개발을 위한 자바스크립트와 타입스크립트의 이해

이 글에서는 자바스크립트와 타입스크립트의 기본 개념과 차이점을 설명하고, 현대 웹 개발에 두 언어를 어떻게 효과적으로 활용할 수 있는지 탐구합니다. 또한, 자바스크립트와 타입스크립트

f-lab.kr

https://www.guru99.com/ko/typescript-vs-javascript.html

TypeScript와 JavaScript – 차이점

TypeScript와 JavaScript: TypeScript와 JavaScript의 차이점 - JavaScript는 대화형 웹 페이지를 만드는 데 도움이 되는 스크립팅 언어인 반면 Typescript는 JavaScript의 상위 집합입니다.

www.guru99.com

this [re:]

muyeon — Tue, 30 Apr 2024 22:40:25 +0900

this 는 무엇일까?

this

this는 일반적으로 객체지향 언어에서 자기자신을 가리키는 객체, 즉 자기 자신과 굉장히 관련이 깊다.

자바스크립트도 비슷할까?

그렇지 않다. 자바스크립트가 조금 특별하기 때문인데,

자바스크립트의 함수는 객체, 그 중에서도 일급 객체이다.

일급 객체인 자바스크립트 함수는 변수나 데이터에 할당할 수 있고,

다른 함수에 인수 또는 반환값으로도 사용할 수 있다.

// 1. 변수나 데이터에 저장

const myFunc = func

// 2. 함수의 인수로 전달

function func1(func2) {}

// 3. 함수의 반환값으로 사용

function func1() {
	...
    return func1
}

이런 특징으로 자바스크립트의 함수는 다양한 환경에서 호출될 수 있다.

func(), test.func(), tt.func()

이래서 자기 자신이라는 표현을 사용하는 것이 까다롭다.

이는 함수가 선언된 이후에 어떤 환경에서 어떤 객체에 의해 호출될지 예측할 수 없기 때문이다.

그만큼 this 도 단순하지 않다.

this 는 어떤 객체에 의해 호출되냐에 따라서 this 의 의미가 많이 달라진다.

자바스크립트에서 모든 함수는 this 를 가지고 있다. 그리고 함수가 호출되면 상황에 따라 this 가 가리키는 객체가 달라지고 결정된다.

이렇게 this 가 동적으로 결정되는 것을 this 가 "그 객체에 바인딩 된다" 라고 표현을 한다.

자바스크립트 엔진은 프로그램을 실행하면 모든 실행 가능한 코드를 평가해서 실행 문맥을 만든다.

이때 실행 가능한 코드는 전역 코드, 함수 코드, eval 코드 이다. 이 코드별로 실행 문맥이 만들어 진다.

실행 문맥은 렉시컬 환경 컴포넌트, 디스 바인딩 컴포넌트 등 실제로 실행에 필요한 컴포넌트들로 이루어져 있는데

this 바인딩 컴포넌트에 우리가 알고 있는 this에 대한 정보가 담기게 된다.

프로그램이 실행이 되면 자바스크립트 엔진은 전역 코드를 평가해서 전역 실행 문맥을 만듭니다.

함수가 실행이 되면 전역 코드 실행을 잠깐 멈추고 또 다시 실행 문맥을 만들게 된다. 이 타이밍에 this 바인딩 컴포넌트의 값이 결정된다.

일반적으로 this 는 점앞에 있는 객체 즉 호출 당시 함수를 포함하고 있는 객체에 바인딩된다.

그럼 함수가 객체에 의해 호출되지 않는 상황에서는 어떻게 this 가 바인딩 될까?

단독으로 호출되는 함수나 생성자 함수에서는 어떻게 this 를 이해하면 좋을까?

this binding rules

this 는 기본적으로 4가지 규칙에 의해서 바인딩 된다.

기본 바인딩, 암시적 바인딩, new 바인딩, 명시적 바인딩

이 규칙들은 우선순위가 존재한다.

1. 기본 바인딩

function showThis() {
	console.log(this);
}

function showThisStrictMode() {
	'use strict'
    console.log(this);
}

showThis(); // window
showThisStrictMode(); // undefined

이처럼 함수를 단독호출 했을때 this 는 기본적으로 전역 객체에 바인딩 된다.

브라우저 실행 환경에서는 윈도우 객체에 바인딩 되고, 엄격 모드에서는 전역 객체가 바인딩 대상에서 제외된다.

feat. 노드 환경에서는 global 을 가리킨다. 그리고 {}

2. 암시적 바인딩

const obj = {
	name: 'muyeon',
    getName() {
    	return this.name;
    }
}

console.log(obj.getName()); // muyeon

. 앞에 있는 객체에 바인딩 된다.

이런 방식을 암시적 바인딩이라고 하는데 조심해야 할 부분이 있다.

const obj = {
	name: 'muyeon',
    getName() {
    	return this.name;
    },
};

function showReturnValue(callback) {
	console.log(callback());
}

showReturnValue(obj.getName); // undefined

예상과 다르게 undefined 가 출력된다.

자바스크립트에서 객체를 할당한 변수는 해당 객체의 참조값을 저장한다.

obj.getName 프로퍼티에는 getName 함수에 대한 참조가 들어 있는 것이다.

참조값을 함수의 인수로 넘기게 되면 함수는 이 참조값을 복제해서 사용을 하게 된다.

이제 같은 객체를 참조하는 또 다른 변수를 만들어서 함수 안에서 사용하게 되는 것이다.

마찬가지로 showReturnValue 에 obj.getName 을 전달하면 동일한 함수를 참조하는 또 다른 레퍼런스가 콜백 변수에 저장되어서 사용된다.

이렇게 되는 이유는 . 연산 때문이다.

. 연산이나 대괄호 연산을 통해서 객체의 프로퍼티에 접근하면 참조 타입이라고 하는 특별한 값을 반환해준다.

참조타입은 자바스크립트 명세서에서만 사용되는 타입인데, 프로퍼티 뿐만 아니라 프로퍼티를 가지고 있는 객체와 strict 모드인지 아닌지에 대한 여부를 같이 가지고 있는 하나의 타입이다.

따라서 . 연산을 통해 얻은 값은 바로 함수를 호출하지 않고서는 암시적 바인딩을 기대할 수 없다.

마찬가지로 인수로 전달된 콜백의 참조도 객체에 대한 어떠한 정보도 포함을 하지 않기 때문에 함수로 단독 호출한 것과 같이 동작을 하게 되는 것이다.

이렇게 한두다리만 건너도 바인딩된 this 를 너무 쉽게 잃어버리는 문제가 있는데 어떻게 이를 해결할 수 있을까?

3. 명시적 바인딩 (call, apply, bind)

this 를 특정 객체에 암시적으로 바인딩할 뿐만 아니라 명시적으로도 바인딩 할 수 있는 방법을 제공한다.

이를 통해 this 가 소실되는 문제를 해결할 수 있다.

함수 객체는 call, apply, bind 를 통해 명시적으로 바인딩을 해결하는 방법을 제공한다.

call(context, arg1, arg2, ...)

apply(context, args)

call 과 apply 를 사용하면 this 를 바인딩할 객체를 지정한 상태로 함수를 호출할 수 있다.

첫번째 인자로 바인딩할 객체를 전달하고 다음에 인수를 넣어준다.

call 과 apply 는 인수를 전달하는 방법에만 차이가 존재한다.

func.bind(context, arg1, arg2, ...)

bind 메서드는 this 가 참조하는 객체를 고정시켜 준다.

이 메서드가 반환하는 특수한 객체가 있는데 그 객체는 마치 항상 this가 어떤 특정 객체에 바인딩되어 있는 것처럼 그런 함수처럼 행동한다.

이렇게 항상 같은 객체에 바인딩 되도록 강제하는 방법을 하드 바인딩이라고도 부른다.

4. new 바인딩

자바스크립트의 함수를 new 방식으로도 호출할 수 있다.

이렇게 호출하게 되면 생성자 함수로서의 역할을 수행할 수 있게 된다.

{
	obj = {} // create new Object
    this = obj // bind
    
    this.name = "muyeon" // obj : { name: "muyeon" }
    
    return this
}

new 연산자를 사용해 this 가 바인딩되는 규칙을 new 바인딩이라고 한다.

5. 바인딩 우선 순위

new 바인딩 > 암시적 바인딩 > 명시적 바인딩 > 기본 바인딩

arrow function

화살표 함수는 다른 함수들이랑 this 를 바인딩하는 방법이 다르다.

const obj = {
	name: 'muyeon'
    showNameInSec(sec) {
    	setTimeout(() => {
        	console.log(this.name);
        }, sec);
    }
}

obj.showNameInSec(1000); // muyeon

화살표 함수는 상위 실행 문맥을 유지한다.

렉시컬 스코프와 관계 없이 호출 당시에는 의존하는 기존의 바인딩 규칙은 화살표 함수 안에서 this 에게 의미가 없다.

화살표 함수 안에서 this 는 선언될 당시에 상위 스코프 그 스코프에 해당하는 실행 문맥 상의 this 바인딩 컴포넌트를 참조한다.

쉽게 말해 상위 스코프의 this 를 가리킨다.

이런 this 를 렉시컬 this, 어휘적 this 라고 부른다.

참고링크

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

this - JavaScript | MDN

JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.

developer.mozilla.org

https://poiemaweb.com/js-this

this | PoiemaWeb

자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다. Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을

poiemaweb.com

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-this-%EC%B4%9D%EC%A0%95%EB%A6%AC

[JS] 자바스크립트 this 완전 정복

this 정의 let group = { title: "1모둠", students: ["보라", "호진", "지민"], title2 : this.title, title3() { console.log(this.title) } }; console.log(group.title2); //undefined group.title3(); // 1모둠 this는 함수의 블록 스코프 내에

inpa.tistory.com

https://www.youtube.com/watch?v=7RiMu2DQrb4

https://im-developer.tistory.com/96

[JS/this] 자바스크립트, this의 4가지 역할

Javascript, This. 자바스크립트에는 this라는 키워드가 있다. this는 문맥에 따라서 다양한 값을 가지는 데, this가 쓰이는 함수를 어떤 방식으로 실행하느냐에 따라서 그 역할이 구별된다. this의 값들

im-developer.tistory.com

Javascript Closure

muyeon — Mon, 29 Apr 2024 21:59:37 +0900

클로져를 알기위해서는 실행 컨텍스트에 대해 알아야 한다.

https://muyeon95.tistory.com/317

실행 컨텍스트

실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 이는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념이다. 자바스크립트는 어떤 실행 컨텍스트

muyeon95.tistory.com

클로져는 무엇이고 어떻게 활용할 수 있을까?

정의

MDN : 함수와 함수가 선언된 어휘적 환경의 조합

????????????

확실히 MDN 이 만능은 아니다.

코어 자바스크립트 : 어떤 함수 A 에서 선언한 변수 a 를 참조하는 내부 함수 B를 외부로 전달할 경우 A 의 실행 컨텍스트가 종료된 이후에도 변수 a 가 사라지지 않는 현상

ex code

function something() {
	const x = 10;
    function sum(y) {
    	return x + y; // something 함수에서 선언한 x 변수 참조
    }
    return sum; // 내부함수 sum 을 외부로 전달
}

const some = something();
console.log(some(3)); // 13
// x 변수가 사라지지 않는다.

function sum(x) {
	return function (y) {
    	return x + y;
    }
}

const add = sum(2);
console.log(add(7));

1. 코드 평가

첫번째로 Global 에 LexicalEnvironment 를 생성하고 전역 코드 평가가 이루어 진다.
코드 평가에서는 sum 함수와 add 변수를 호이스팅해 record 에 add 와 sum 함수를 기록해둔다.
현재 전역 코드 평가가 이루어지고 있기 때문에 outer 에는 null 이 할당된다.
콜 스택에 Global 의 LexicalEnvironment 를 push 하게 된다.
코드 평가 과정 종료

2. 코드 순차적으로 진행

add 변수에 값을 할당하기 위해 sum 함수를 호출한다.
Global 의 LexicalEnvironment 코드 평가 과정과 동일하게 sum 함수도 LexicalEnvironment 를 생성
sum 함수 내부의 코드 평가 진행
코드 평가에서는 매개변수 x 와 return 문에 있는 익명함수를 호이스팅해 record 에 기록해둔다.
outer 에는 상위 스코프인 Global 의 LexicalEnvironment 를 가리킨다.
콜 스택에 sum 의 LexicalEnvironment 를 push 하게 된다.

sum의 LexicalEnvironment 의 outer 는 함수가 호출되어 평ㅇ가되는 시점이 아닌 함수가 선언되는 시점에 결정된다.
Global 의 LexicalEnvironment 코드 평가 과정에 sum 함수가 선언되었으니 sum 의 LexicalEnvironment outer 에는 Global 의 LexicalEnvironment 를 가리키게 된다.

sum 의 코드 평가 과정이 종료되어 코드가 한 줄씩 실행된다.
매개변수 x 에는 인자로 넘겨준 2를 할당
record 안에 x 변수에 2를 기록
이후 실행할 코드가 없으니 sum 의 LexicalEnvironment 는 콜 스택에서 pop 된다.
Global 의 LexicalEnvironment 로 돌아와 add 변수에 sum 함수의 리턴값인 익명함수를 할당한다.
record 에 있는 add 변수에 익명함수를 할당한다.
마지막 전역 코드인 console.log 를 실행하기 위해 add 함수를 호출하게 된다.

3. add 함수 호출

add 함수에 호출이 일어나면 add 에 LexicalEnvironment 를 생성
add 함수 내부 코드 평가
매개변수 y 를 호이스팅해 record 에 기록
outer 에는 sum 의 LexicalEnvironment 를 가리키게 한다.

여기서 이상한 점은 현재 콜 스택에는 Global 의 LexicalEnvironment 만 존재한다.

어떻게 add 의 LexicalEnvironment 의 outer 는 sum 의 LexicalEnvironment 를 가리키게 할 수 있을까?

이런 특성 때문에 클러져라는 현상이 일어난다.

활용

1) before

let cnt = 0;
function cntPlus() {
	cnt = cnt + 1;
}

console.log(cnt);
cntPlus();
console.log(cnt);

// 1억개의 코드
cnt = 100;
// 1억개의 코드
cntPlus();
console.log(cnt);

전역으로 선언했을 때 위와같은 문제가 발생한다.

이를 해결하기 위해서 cnt 를 은닉화해 접근을 막고 cnt 의 state 를 유지할 수 있다.

2) after

function closure() {
	let cnt = 0;
    function cntPlus() {
    	cnt = cnt + 1;
    }
    function setCnt(value) {
    	cnt = value;
    }
    function printCnt() {
    	console.log(cnt);
    }
    return {
		cntPlus,
        setCnt,
        printCnt,
	}
}

const cntClosure = closure();
console.log(cntClosure);
cntClosure.printCnt();
cntClosure.cntPlus();
cntClosure.printCnt();
cntClosure.printCnt();
cntClosure.setCnt(100);
cntClosure.printCnt();

참고 링크

https://poiemaweb.com/js-closure

Closure | PoiemaWeb

클로저(closure)는 자바스크립트에서 중요한 개념 중 하나로 자바스크립트에 관심을 가지고 있다면 한번쯤은 들어보았을 내용이다. execution context에 대한 사전 지식이 있으면 이해하기 어렵지 않

poiemaweb.com

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Closures - JavaScript | MDN

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function. In JavaScript, closur

developer.mozilla.org

https://ko.javascript.info/closure

변수의 유효범위와 클로저

ko.javascript.info

https://www.youtube.com/watch?v=LL0DGc5pg7A

https://www.youtube.com/watch?v=PJjPVfQO61o