Dani's Dev TokTok

2025년 정보처리기사 1회 필기 합격 후기

다니니니 — Fri, 14 Mar 2025 19:24:18 +0900

오늘은 3월 2일에 치룬 정보처리기사 필기 시험 공부 후기와 합격 후기를 적어보고자 합니다.

안읽어도 되는 공부하게 된 배경

~~힘들게 취업했던 회사에서 멘탈이 털리는 사건이 생긴 후..(직장내 성희롱과 성추행.....ㅠ )~~

~~멘탈 회복을 위해 어디 집중할 곳이 필요했습니다.~~

~~그래서 미루고 미뤘던 정보처리기사 시험 준비를 했습니다.~~

시험 준비기간

2025년 1월 ~ 2025년 2월 대략 한달반 정도

그렇지만 제 블로그의 다른 포스팅을 보면 아시다시피 자바의 기본 문법이나 sql 기본 문법은 부트캠프를 통해 배워서 알고 있는 상태였습니다.

또한 자바스크립트를 공부해서 프로그래밍 언어에서 공통적으로 쓰이는 문법(조건문이나 반복문)의 원리를 알고 있는 상태였습니다.

공부방법

이전에 공부해두려고 사둔 시나공 정보처리기사 필기 기본서(2024년도)가 있어서 그것을 바탕으로 이론 1회독을 했습니다.

저는 개인적으로 필기하면서 공부하는 것을 좋아하기 때문에 노트에 적어가면서 공부를 했습니다.

노트를 두 권 두고 한 권은 그냥 중요해보이는 것을 적고(책에서 강조하는 것들) 한 권은 시나공 기본서의 챕터가 끝날때마다 마지막에 핵심요약한 곳이 있는데 그것을 보면서 노트에 정리해가며 공부를 했습니다.

기본서 구성에 기출문제집도 포함되어 있는데, 저는 기본서를 2024년 초반에 구매했기 때문에 2023년도 까지의 기출문제밖에 없었습니다.

그래서 2024 기출문제는 시나공 홈페이지에 가서 다운받아서 문제 풀이했습니다.

그리고 기출문제를 다 푼후에는 cbt 풀 수 있는 곳은 다 가서 한 번씩은 다 풀었습니다.

앞서 말했듯이 제가 프로그래밍 언어와 sql 언어의 기본문법은 알고 있어도 다른 이론 같은것은 잘 몰랐기 때문에

처음에 기출문제를 풀때는 최대 8개 최소 4개 정도는 문제를 틀렸습니다.

틀린 문제는 오답노트를 써서 다시 외웠습니다.

제가 특히 그 페이지 결함 문제나 자료구조에서 나오는 정렬문제에 좀 약했는데

계속 문제를 풀고 오답노트를 쓰다보니 요령을 알게 되서 나중에는 좀 손쉽게 할 수 있었습니다.

문제를 계속 풀다보니 뭔가 키워드 위주로 아 이 키워드가 나오면 답은 이거겠군.. 하고 예상이 되더라구요

심지어 나중에는 코딩문제를 그냥 형태만 봐도 아 답 이거네 하고 찍어서 맞는 수준에 까지 이르게 되었습니다..ㅋㅋㅋ

기출문제 많이 풀기랑 오답노트 진짜 추천드립니다.

시험 후기

시험은 무조건 집에서 가까운 곳에서 봐야합니다.

저는 그래서 집이 다행히 서울이라 지하철로 2~3정거장이면 갈 수 있는 곳으로 시험장을 정했습니다.

준비물은

신분증, 필기구

이 두개만 덜렁 들고 갔습니다.

시나공 홈페이지가면 핵심정리 자료가 있습니다 그거 핸드폰에 다운받아놓고 가는 길에 계속 보면서 갔어요

어차피 스마트폰은 시험장 들어가기 직전에 끄라고 알려줍니다.

제가 3시험장이었나 5시험장이었나 (기억이 안남..) 이었는데

대기장소가 협소해서 1시험장부터 차례대로 입장을 했어요

입장하기 전에 스마트폰 끈거 보여주고 들어갔습니다.

그리고 시험장에 들어가서 감독관님이 신분증 확인하고 필기할 종이는 나눠주셨습니다.

시험 직전에 본인 필기구만 꺼내서 필통은 가방에 넣고 가방은 본인 자리 뒤에다 두라고 하십니다.

종이는 시험장 나가기 전에 반납하라고 하셔서 나갈때 반납했습니다.

시험시간은 과목당 30분이라서 총 2시간 30분 정도인데

컴퓨터 화면에 문제 푸는 곳 상단에 남은 시간이 나왔던 것 같습니다.

그 시간을 다 꽉 채우진 않았고 30~40분만에 풀고 나왔습니다.

대략 25분만에 풀고 나머지는 내가 잘못 찍은거 없나.. 하고 검토한 뒤에 제출했습니다.

제출하니까 가채점 결과가 나오더라구요

손바닥에 점수 쓰려고 하니까 어차피 나중에 나오는데 뭐하러 쓰냐며 감독관님께 혼났습니다..ㅋㅋㅋ(그래서 쫄려서 못씀)

최종 결과

시험에 공부한 부분이 많이 나와서 좋은 점수를 받을 수 있었습니다.

체감상 기출에서 60% 기출변형이 35% 생판 처음보는거 5% 비율로 나온 것 같았습니다.

특히 5과목이 보안??관련된것이 있어서 그런지?? 처음보는게 많이 나왔더라구요

cbt 나 기출 볼때도 5과목을 많이 틀렸어서 좀 불안했는데 다행히 합격권이었습니다..

그럼 이제 실기를 준비해야겠네요

어차피 2년 유예기간이 있어서 바로 볼지 아니면 좀 더 두고 볼지 아직 고민중입니다..ㅋㅋㅋ

요즘에는 정처기 필기 준비중!

다니니니 — Wed, 26 Feb 2025 10:25:57 +0900

미루고 미뤄왔던 정보처리기사 필기 준비중이다.

3월이 시험이다! 으악 떨려!

[React] React Datepicker 이용해서 달력 만들기

다니니니 — Tue, 3 Dec 2024 22:51:28 +0900

들어가며

리액트에서 달력을 구현할 수 있는 여러가지 라이브러리 중 react-datepicker 를 이용해서

시작 날짜와 종료 날짜를 선택할 수 있는 즉, 날짜를 범위로 선택할 수 있는 달력을 구현해보고자 한다.

이것을 이용해서 여행 일정 관리나, 날짜를 선택해야 하는 예약 시스템을 구현할 수 있을거라 생각한다.

달력 만들기

먼저 리액트 프로젝트에서 npm이나 yarn 을 이용해서 date-picker 를 다운로드 한다.

npm install react-datepicker

yarn add react-datepicker

만약 날짜를 한국어로 설정하고 싶다면 date-fns 에서 해당 기능을 제공하므로 같이 다운로드 한다.

npm install date-fns

yarn add date-fns

기본 달력 표시

DatePicker 라는 컴포넌트를 import 해서 사용할 수 있다.

아래는 기본적인 달력의 모습을 보여줄 수 있는 코드 예시다.

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.module.css";
import { ko } from "date-fns/locale";


export default function DateSelector() {
  return (
    <>
      <DatePicker
        inline
        locale={ko}
        dateFormatCalendar="yyyy년 M월"
      />
    </>
  );
}

그러면 위와 같이 기본적인 달력의 UI 를 구성해준다.

inline 속성을 써야 기본 달력이 보이며, 쓰지 않으면 input 창을 보여주고 input 을 눌러야 달력을 보여준다.

locale 설정으로 언어를 설정할 수 있다.

locale 에 ko 즉, 한국어 설정을 넣어서 한국어로 출력했다.

또한 달력의 날짜 포맷을 지정해줄 수 있다.

dateFormatCalendar 에서 "yyyy년 M월" 로 써서 년도, 월 순으로 출력해줬다.

이제 여기서 응용해서 시작 일자와 종료 일자를 선택할 수 있는 달력 UI 를 구현해보고자 한다.

일정 관리 달력 구현

일정 관리 달력(시작 일자와 종료 일자 선택하는 달력)은 여행 일정 관리 앱이나 호텔 예약 사이트에서 흔히 볼 수 있다.

date-picker 를 사용하면 간단하게 구현할 수 있다.

import { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.module.css";
import { ko } from "date-fns/locale";
import "./DateSelector.css";

export default function DateSelector() {
  // 오늘 날짜
  const today = new Date();

  // 시작 일자, 종료 일자 상태 관리
  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
    null,
    null,
  ]);
  const [startDate, endDate] = dateRange;

  // 날짜 포맷팅 함수
  const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    return `${year}년 ${month}월 ${day}일`;
  };

  return (
    <>
      <div>
        {startDate !== null && <span>{`${formatDate(startDate)}`}</span>}
        {startDate !== null && endDate !== null && (
          <span>{` - ${formatDate(endDate)}`}</span>
        )}
      </div>
      <DatePicker
        inline
        monthsShown={2}
        selectsRange={true}
        startDate={startDate ?? undefined}
        endDate={endDate ?? undefined}
        minDate={today}
        maxDate={
          startDate !== null && endDate === null
            ? new Date(
                startDate.getFullYear(),
                startDate.getMonth(),
                startDate.getDate() + 10
              )
            : undefined
        }
        onChange={(date) => setDateRange(date)}
        locale={ko}
        dateFormatCalendar="yyyy년 M월"
      />
    </>
  );
}

1. 먼저 시작 일자, 종료 일자를 지정하기 위해

useState 를 이용해서 상태 관리를 한다.

const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([
  null,
  null,
]);
const [startDate, endDate] = dateRange;

그리고 이걸 DatePicker 컴포넌트에서 startDate, endDate 에 각각 값을 할당한다.

단, 저 속성에는 null 값을 지정할 수 없다. 그래서 null 값이면 undefind 를 할당되도록 했다.

2. minDate, maxDate 속성 설정으로 날짜 범위를 제한할 수 있다.

minDate={today}
maxDate={
  startDate !== null && endDate === null
    ? new Date(
        startDate.getFullYear(),
        startDate.getMonth(),
        startDate.getDate() + 10
      )
    : undefined
}

minDate는 오늘 날짜를 지정해서 오늘 날짜 이전의 날짜를 선택할 수 없도록 설정하고,

maxDate 는 선택된 날짜로부터 10일까지만 선택하도록 제한했다.

3. onChange 함수로 날짜를 지정하면 그 값이 startDate, endDate 에 저장이 되도록 설정했다.

selectsRange 를 true 로 설정해야 날짜의 범위를 지정할 수 있다.

4. 선택된 날짜를 한 눈에 볼 수 있도록 포맷팅 함수와 그 함수를 이용해서 날짜를 표시하는 것을 해줬다.

  // 날짜 포맷팅 함수
  const formatDate = (date: Date) => {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();

    return `${year}년 ${month}월 ${day}일`;
  };

  return (
      <div>
        {startDate !== null && <span>{`${formatDate(startDate)}`}</span>}
        {startDate !== null && endDate !== null && (
          <span>{` - ${formatDate(endDate)}`}</span>
        )}
      </div>
  )

결과

이 방법을 응용해서 프로젝트를 더 효율적으로 개발할 수 있을거라 생각한다.

Reference

https://reactdatepicker.com/

React Datepicker crafted by HackerOne

reactdatepicker.com

패스트캠퍼스 강의 자료

SSR 과 CSR 의 차이

다니니니 — Wed, 27 Nov 2024 00:14:22 +0900

들어가며

SSR(Server Side rendering) 과 CSR(Client Side Rendering) 은 페이지 렌더링 방식을 경정하는 개념이다.

이 개념들을 이해하고 차이가 뭔지 알아보고자 한다.

SSR & CSR

SSR(Server Side Rendering)

서버 사이드 렌더링은 클라이언트 요청에 따라 HTML 파일을 서버에서 렌더링해서 완성된 HTML 파일을 클라이언트에 전달한다. 그 후 브라우저는 서버로부터 완성된 HTML 을 받아서 화면에 표시한다.

출처 : https://prismic.io/blog/client-side-vs-server-side-rendering

서버 사이드 렌더링은 다음과 같은 단계로 진행된다.

서버는 웹 페이지에 대한 요청을 받으면 필요한 데이터를 검색한 후에 해당 데이터를 HTML 템플릿에 붙인다.
서버는 페이지에 대한 HTML 마크업을 생성하고 콘텐츠를 렌더링하고 필요한 스타일을 적용한다.
페이지를 렌더링 한 후에 서버는 렌더링된 페이지를 브라우저에 전달한다.
브라우저에 전달된 HTML 은 즉시 렌더링된다. (그러나 상호작용은 불가)
브라우저가 JS 를 다운받고, 실행한다.
JS 가 실행된 후에는 웹 페지는 상호작용이 가능하다.

장점

필요한 부분의 HTML 과 JS 파일만 불러오므로 초기 로딩속도가 빠르다.
SEO에 유리하다.

단점

JS 파일이 모두 다운로드되어야 인터랙션이 가능해서 인터랙션까지의 시간이 걸린다.
페이지 이동 시 깜박거림이 있고, 이동할 때 마다 서버에 요청을 하므로 서버 비용이 증가하고 느려질 수 있다.

CSR(Client Side Rendering)

클라이언트 사이드 렌더링은 HTML 와 자바스크립트를 로드한 후, 브라우저에서 자바스크립트를 실행해서 화면을 그리는 방식이다.

출처 : https://prismic.io/blog/client-side-vs-server-side-rendering

클라이언트 사이드 렌더링은 다음과 같은 단계로 진행된다.

서버가 웹 페이지에 대한 요청을 받으면 브라우저에 CSS 및 자바스크립트 링크가 포함된 빈 HTML 파일을 브라우저에 보낸다.
브라우저는 HTML 을 파싱해서 DOM 트리를 구성한다.
브라우저는 CSS 와 자바스크립트 리소스를 다운로드한다. 그런 다음 웹 페이지를 렌더링한다.
브라우저는 자바스크립트 코드를 실행하여 애니메이션, 폼 검증, API로부터 가져온 데이터와 같은 동적 콘텐츠 및 상호작용 기능을 추가한다.
버튼 클릭이나 폼 제출 같은 상호작용이 발생하면 브라우저는 페이지의 일부를 리렌더링하고 업데이트 한다.

장점

초기 로딩 이후에 페이지 이동이 빠르고, 깜박거림이 없다.
변경이 필요한 부분만 요청하므로 서버의 비용이 SSR 에 비해 적다
로딩이 완료되면 바로 상호작용을 할 수 있어서 동적 데이터 처리에 적합하다.

단점

초기에 렌더링에 필요한 JS를 불어와야 하므로 로딩속도가 느리다.
SEO 에 불리하다.

SSR과 CSR 비교

특징	SSR	CSR
초기 로딩 속도	빠름	느림
페이지 이동 속도	느림	빠름
SEO	SEO 친화적	추가 설정 필요
서버 부하	높음	낮음

사용 사례

SSR

초기 로딩 속도가 중요한 페이지
SEO 가 중요한 페이지(ex. 쇼핑몰)

CSR

SEO 와 초기 속도가 덜 중요한 페이지(ex. 사내 페이지 등...)
SPA 로 구현해야하는 페이지
사용자와의 상호작용이 많은 애플리케이션

번외 ( chat gpt 대답)

gpt 한테 물어보니 이렇게 사례를 알려줬다. 참고하면 좋을 것 같다.

Reference

https://kruschecompany.com/ssr-or-csr-for-progressive-web-app/

SSR or CSR - what is better for Progressive Web App?

Progressive Web Apps are on rising tide of popularity. In this article, we’ll talk a bit about transitioning to PWA and related issues

kruschecompany.com

https://prismic.io/blog/client-side-vs-server-side-rendering

Client-side Rendering (CSR) vs. Server-side Rendering (SSR)

Choosing between client-side (CSR) vs. server-side rendering (SSR)? This guide breaks down the differences, pros/cons, and ideal use cases for each approach.

prismic.io

https://velog.io/@vagabondms/%EA%B8%B0%EC%88%A0-%EC%8A%A4%ED%84%B0%EB%94%94-SSR%EA%B3%BC-CSR%EC%9D%98-%EC%B0%A8%EC%9D%B4

[ 기술 스터디 ] SSR과 CSR의 차이

자강두천

velog.io

[React] React의 렌더링 프로세스(Virtual DOM)

다니니니 — Tue, 26 Nov 2024 10:52:04 +0900

들어가며

React 의 특징 중 하나는 Virtual DOM(가상돔) 를 가지고 있다는 것이다.

리액트가 가상돔으로 어떻게 렌더링을 하는지 알아볼 것이다

React 의 렌더링 프로세스

Virtual DOM (가상 돔)

DOM 을 변경하는 작업이 많아질수록, 브라우저는 많은 연산을 수행해야 하고 이는 성능 저하로 이어질 수 있다.

React 같은 라이브러리는 가상 DOM 을 사용해서 이 문제를 해결한다.

Virtual DOM(가상 돔) 은 실제 DOM의 복사본으로, JS 객체 형태로 메모리 안에 저장된다.

가상돔은 브라우저의 실제 DOM을 조작하기 전에 변경 사항을 미리 계산하고,

최소한의 작업만 실제 DOM 에 적용하도록 도와준다.

이를 통해서 성능을 최적화하고 빠른 UI 업데이트를 할 수 있게 해준다.

React 의 렌더링 프로세스

컴포넌트에서 반환하는 JSX 를 React Element 라는 객체를 생성한다.
React Element 들을 모아서 Virtual DOM 을 생성한다.
생성된 가상돔을 바탕으로 브라우저의 실제 DOM 에 컴포넌트를 렌더링한다

React 의 리렌더링 프로세스

React 에서 상태(state) 나 props 가 변경될 때 컴포넌트를 다시 렌더링한다.

React 는 2단계를 거쳐서 화면에 UI 를 리렌더링한다.

Render Phase(렌더 단계) : 컴포넌트를 계산하고 업데이트 사항을 파악하는 단계
Commit Phase(커밋 단계) : 변경사항을 실제 DOM 에 반영하는 단계

Render Phase(렌더 단계)

리액트 컴포넌트가 렌더링 해야하는 UI 를 가상돔으로 변환하는 과정이다.

리액트는 두 개의 가상돔을 가지고 렌더링을 진행한다.

첫 번째 가상 돔은 변경 이전의 내용을 담고 있고, 두 번째 가상 돔은 변경 이후에 보여질 내용을 담고 있다.

출처 : 코딩온 교안 자료

리액트는 변경 전 가상 돔과 변경 후 가상 돔의 차이점을 비교해서 어느 부분이 바뀌었는지 파악한다.

이 과정을 Diffing 이라고 한다.

이 때, 동시에 발생하는 업데이트들을 모은다.

이 단계에서는 화면에 실제로 변경사항을 적용하지 않고, 변경 사항을 기록하는 순수한 계산 작업만 진행한다.

Commit Phase(커밋 단계)

변경된 Virtual DOM(가상돔) 을 Actual DOM 에 반영시키는 단계다.

이 때, 리액트는 Render Phase 에서 반영된 모든 변경사항을 Actual DOM 에 한번에 업데이트 한다.

렌더링 프로세스 정리

리액트는 두 개의 가상돔(변경 이전의 가상돔, 변경 후의 가상돔) 의 내용을 비교해서 동시에 발생하는 업데이트들을 모은다. (Diffing)
Diffing 을 통해 변경 사항을 파악한 후, 반영된 모든 업데이트들을 실제 돔에 한번에 적용시킨다.
(Reconsiliation)

이 과정들을 거쳐서 업데이트를 하므로, 실제 돔 조작을 최소화하여 성능을 최적화할 수 있다.

다만, 가상돔을 생성하고 비교하는데에도 연산이 소요되기 때문에

React.Memo, useMemo, useCallback 같은 메모이제이션을 할 수 있는 리엑트 도구들을 사용해서

불필요한 리렌더링을 방지하고 적절한 최적화를 해야한다.

Reference

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

https://www.youtube.com/watch?v=gc-kXt0tjTM

브라우저의 렌더링 과정

다니니니 — Mon, 25 Nov 2024 19:17:00 +0900

들어가며

이전에 면접 질문으로도 받았었고 프론트엔드 개발자 뿐만 아니라 웹 개발자라면 알아야 할 거라 생각해서 정리해보려 한다.

브라우저 렌더링

브라우저의 렌더링 순서

브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받는다.
서버로부터 HTML 문서를 전달받으면, 브라우저 엔진은 위에서 아래로 순차적으로 파싱하며 태그와 속성을 발견한다
이 태그와 속성들을 트리 형태로 변환해서 메모리에 저장되는데, 이를 DOM Tree 라고 한다.
HTML 파싱 중 CSS 를 만나면 이를 파싱해서 CSSOM Tree 로 변환한다.
DOM tree 와 CSSOM tree 를 결합해서 Render Tree 를 생성한다.
렌더 트리를 기반으로 html 요소의 레이아웃(위치와 크기) 을 계산하고, 브라우저 화면에 html 요소를 페인팅한다.

DOM 생성

DOM(Document Object Model) 은 웹 페이지의 구조를 표현한 객체 모델로, 노드로 이루어졌다.

다음과 같은 html 문서가 있다고 했을 때

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <ul>
        <li id="apple">Apple</li>
        <li id="banana">Banana</li>
        <li id="orange">Orange</li>
    </ul>
    <script src="app.js"></script>
</body>
</html>

브라우저 엔진은 다음 과정을 거쳐서 html 문서를 파싱해서 DOM을 생성한다.

HTML 파싱 / 출처 : 모던 자바스크립트 Deep Dive

서버에 있는 html 파일이 브라우저 요청에 의해 응답됨
서버는 브라우저가 요청한 html 파일을 바이트(2진수) 형태로 응답(바이트화)
바이트 형태로 응답받은 html 문서를 meta 태그의 charset 어트리뷰트에 지정된 인코딩 방식(ex. UTF-8)을 기준으로
문자열로 변환(캐릭터화)
문자열로 변환된 html 문서를 읽어들여서 토큰화 시킴
각 토큰들을 객체로 변환해서 노드들을 생성
(토큰 내용에 따라 문서 노드, 요소 노드, 어트리뷰트 노드, 텍스트 노트가 생성됨)
만들어낸 노드들을 관계화 시켜서(예. 부모-자식 관계 설정) 트리 자료 구조로 구성함.
이 트리 자료구조를 DOM(Document Object Model) 이라 함

DOM 구조 / 출처 : 모던 자바스크립트 Deep Dive

CSSOM 생성

렌더링 엔진은 DOM 을 생성하다가 CSS 를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단한다.

그리고 link 태그를 만난다면 href 에 어트리뷰트 지정된 CSS 파일을 서버에 요청한다.

로드한 CSS 파일이나 style 태그 내의 CSS 를 HTML 과 동일한 파싱 과정(바이트 -> 문자 -> 토큰 -> 노드 -> CSSOM) 을 거쳐서 CSSOM(CSS Object Model) 을 생성한다.

CSS 파싱을 완료하면 HTML 파싱이 중단된 지점부터 다시 HTML을 파싱하기 시작하여 DOM 생성을 한다.

위의 html 파일에 지정된 style.css 코드가 다음과 같다고 가정해보자

body {
   font-size : 18px;
}

ul {
   list-style-type : none;
}

CSSOM은 CSS 상속을 반영해서 생성된다.

CSSOM / 출처 : 모던 자바스크립트 Deep Dive

렌더 트리 생성

DOM 트리와 CSSOM 트리를 결합해서 렌더 트리(Render Tree) 를 생성한다.

웹 사이트를 그리기 위한 최종 설계도라고 생각하면 된다.

이 때, body 태그 내에 있는 노드들과 CSS 에 의해 표시되는 노드들만 포함해서 만든다.

(head 태그 내의 meta 태그 등과 CSS 에 의해 비표시 되는 것 display : none 표시 되는 노드들은 포함하지 않는다.)

레이아웃

브라우저는 완성된 렌더 트리를 사용해서 각 요소의 정확한 위치와 크기를 계산한다.

이 과정을 레이아웃이라 한다.

레이아웃 과정에서 렌더 트리의 각 노드가 어디에 위치할지, 얼마나 큰지 계산한다.

이 계산은 화면의 뷰포트(viewport) 크기와 같은 정보에 의존한다.

예를 들어, 화면의 크기가 변경되면 브라우저는 레이아웃 과정을 다시 수행해야 한다.(리플로우)

페인팅

레이아웃이 완료되면, 브라우저는 각 요소를 실제로 화면에 그리는 작업을 한다.

페인팅 단계에서는 텍스트, 색상, 그림자, 이미지 등 모든 시각적 요소가 화면에 그려진다.

(화면에 표시될 그래픽 요소 생성)

렌더트리와 레이아웃, 페인트 / 출처 : 모던 자바스크립트 Deep Dive

이 과정은 반복해서 실행될 수 있다.

다음의 경우 레이아웃 계산과 페인팅이 재차 실행된다.

자바스크립트에 의해 노드 추가 또는 삭제
브라우저 창의 리사이징에 의한 뷰포트 크기 변경
HTML 요소의 레이아웃(위치, 크기)에 변경을 발생시키는 width/height, margin, padding, border, display, position, top/right/bottom/left 등의 스타일 변경

이렇게 변경된 DOM 트리와 CSSOM 트리는 다시 렌더트리로 결합되고 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 다시 거친다.

이를 리플로우(reflow), 리페인트(repaint) 라 한다.

리플로우(reflow)

브라우저가 페이지의 레이아웃을 다시 계산하는 과정이다.

노드의 추가나 삭제, 요소의 크기나 위치 변경, 윈도우 리사이징 등 레이아웃에 영향을 주는 변경이 발생한 경우애 한하여 실행된다.

리플로우가 될 때를 보면 다음과 같다

페이지 초기 렌더링 시(최초 layout)
윈도우 리사이징(viewport 크기 변경 시)
노드 추가 또는 제거
요소의 위치, 크기 변경(left, top, margin, padding, border, width, heigth)
폰트 변경, 이미지 크기 변경 등

이 과정은 모든 자식 요소와 관련된 부모 요소까지 영향을 주기 때문에 비용이 많이 든다.

리페인트(repaint)

요소의 모양이나 스타일이 변경될 때 발생한다.

요소의 레이아웃은 그대로지만 색상이나 배경 등의 스타일만 변경되는 경우에 해당한다.

이 때 브라우저는 요소의 모양이나 색상만 다시 그리면 되기 때문에 리플로우보다는 비용이 덜 든다.

다시 말하면

리플로우는 레이아웃을 다시 계산하는 과정,

리페인트는 그 계산 결과를 화면에 다시 그리는 과정이다.

이 둘을 잘 이해하고 관리하면 성능 최적화에 도움이 된다.

성능 최적화 예시

리플로우(reflow) 를 유발하는 CSS 속성 사용 최소화
width, height, margin, padding, border 등의 속성은 요소의 레이아웃을 다시 계산하므로 가능한 미리
CSS 에서 스타일을 설정해서 초기 로드 시에만 계산이 이루어지도록 하고 이후에는 변경을 최소화하는 것이 좋다
CSS 애니메이션 최적화
애니메이션에 transform 과 opacity 속성을 사용하는 것이 좋다. 이 두 속성은 리페인트만 발생시킨다.
위에서 말했다시피 width, height, left, top 등은 리플로우를 발생시키므로
transform 의 속성을 이용하는 것이 성능에 유리하다
will-change 속성 사용
CSS 의 will-change 속성을 사용해서 브라우저에 특정 요소가 변경될 것이라고 알려줄 수 있다.
미리 GPU 에 요소를 준비하게 해서 리플로우 및 리페인트에 미치는 영향을 줄일 수 있다.
하지만 너무 자주 사용하면 메모리 낭비가 일어나므로 필요한 요소에만 적용하는 것이 좋다.

자바스크립트 파싱에 의한 HTML 파싱 중단

HTML 파싱 중간에 script 태그를 만나면 브라우저는 해당 스크립트를 로드하고 실행하기 위해 HTML 파싱을 일시 중단한다.

즉, script 태그에 의해 블로킹이 발생할 수 있다.

외부 스크립트의 경우, 스크립트를 로드하고 실행한 후 파싱을 재개하고

내부 스크립트의 경우, 실행이 완료될 때까지 파싱이 중단된다.

이로 인해서 파싱 속도가 저하되고, DOM 트리가 완성되기 전에 자바스크립트가 DOM 을 조작하면 에러가 발생할 수 있다.

따라서 HTML 문서 내에서 script 태그의 위치가 중요하다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <ul>
        <li id="apple">Apple</li>
        <li id="banana">Banana</li>
        <li id="orange">Orange</li>
    </ul>
    <script src="app.js"></script>
</body>
</html>

위의 코드 예제의 경우 sciprt 태그 즉, 자바스크립트 코드는 DOM 트리가 완성된 후에 실행된다.

따라서 자바스크립트가 DOM을 조작할 때 DOM트리가 완성되지 않아서 생기는 오류가 생기지 않는다.

또 위의 코드는 자바스크립트가 실행되기 이전에 DOM 생성이 완료되어 랜더링되므로 페이지 로딩 시간이 단축된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <script src="app.js"></script>
</head>
<body>
    <ul>
        <li id="apple">Apple</li>
        <li id="banana">Banana</li>
        <li id="orange">Orange</li>
    </ul>
</body>
</html>

그러나 위의 코드는 script 태그가 위에 존재하기 때문에 블로킹이 일어나서

DOM조작 시 오류가 날 수 있다.

script 태그의 async, defer 속성

자바스크립트 파싱에 의한 DOM 생성 중단을 방지하기 위해 HTML5 부터 async와 defer 속성이 script 태그에 추가되었다.

이 두 속성은 외부 스크립트를 로드할 경우에만 사용할 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <script defer src="app.js"></script>
</head>
<body>
    <ul>
        <li id="apple">Apple</li>
        <li id="banana">Banana</li>
        <li id="orange">Orange</li>
    </ul>
</body>
</html>

위의 코드처럼 script 태그에 defer (혹은 async ) 속성을 써주면 된다.

이 속성들을 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다.

그러나 두 속성은 실행 시점에 차이가 있다.

async

자바스크립트 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행한다.

여러 개의 script 에 async 속성을 지정하면 태그의 순서와 상관없이 로드가 완료된 자바스크립트부터 실행한다.

즉, 순서가 보장되지 않는다. 따라서 순서 보장이 중요한 경우에는 사용하지 않는 것이 좋다.

defer

자바스크립트 파싱과 실행은 HTML 파싱이 완료된 직후, 즉 DOM 생성이 완료된 직후에 진행된다.

따라서 DOM 생성이 완료된 이후 실행되어야 할 자바스크립트에 유용하다.

종합하면

async 는 스크립트 로드 순서에 상관없이 실행되는 경우에 적합하고,

defer는 스크립트 실행 순서가 중요할 때 적합하다.

Reference

https://www.youtube.com/watch?v=Mqh13dNI8jc&t=646s

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

모던 자바스크립트 Deep Dive

http://product.kyobobook.co.kr/detail/S000001766445?LINK=NVB&NaPm=ct%3Dlwt20us8%7Cci%3D3eeae87413d188962c2189bfc03af972cec288fd%7Ctr%3Dboksl1%7Csn%3D5342564%7Chk%3D0a86971807241e21311b2f82ad997d61e4c24ab4

모던 자바스크립트 Deep Dive | 이웅모 - 교보문고

모던 자바스크립트 Deep Dive | 269개의 그림과 원리를 파헤치는 설명으로 ‘자바스크립트의 기본 개념과 동작 원리’를 이해하자!웹페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도로

product.kyobobook.co.kr

https://poiemaweb.com/js-dom

DOM | PoiemaWeb

브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저

poiemaweb.com

https://www.maeil-mail.kr/

매일메일 - 기술 면접 질문 구독 서비스

기술 면접 질문을 매일매일 메일로 보내드릴게요!

www.maeil-mail.kr

로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)

다니니니 — Sun, 24 Nov 2024 18:58:46 +0900

들어가며

로컬 스토리지와 세션 스토리지는 HTML5 부터 추가된 웹 스토리지의 종류로 서버가 아니라 클라이언트에서 데이터를 저장할 수 있다.

이번 포스팅에서는 로컬 스토리지와 세션 스토리지에 대해서 다루도록 하겠다.

웹 스토리지(Web Storage)

웹 스토리지(Web Storage) 는 브라우저가 제공하는 클라이언트 측 저장소다.

데이터는 키-값(key-value) 쌍으로 저장하며, 문자열 형태로 저장된다.

데이터 저장 시 : JSON.stringify(배열/객체)
데이터 사용 시 : JSON.parse(문자열배열/객체)

서버와의 통신 없이 데이터를 읽고 쓸 수 있어 빠르고 간단하게 사용할 수 있다.

웹 스토리지는 쿠키와 유사하지만 용량이 훨씬 크다.(쿠키 : 4KB / 웹 스토리지 : 약 5MB)

서버와 독립적으로 브라우저에 데이터를 저장할 수 있는 기능을 제공한다.

또한, 모든 HTTP 요청마다 전송되어 성능을 저하를 일으킬 수 있는 쿠키와 달리 서버에 전송되지 않는다.

웹 스토리지는 클라이언트 저장소이므로 쉽게 접근 가능하다.

따라서 민감한 데이터를 저장하기는 부적절하다.

민감한 데이터는 암호화하거나 서버에만 관리하는 것이 좋다.

웹 스토리지의 종류에는 로컬 스토리지와 세션 스토리지가 있다.

로컬 스토리지(Local Storage)

로컬 스토리지는 데이터를 명시적으로 삭제하지 않는 이상 브라우저를 닫아도 데이터가 유지된다.

같은 PC, 같은 브라우저 일 경우 데이터가 계속 유지된다는 뜻이다.

또 도메인 기반이라 동일한 도메인에서만 데이터에 접근이 가능하다.

사용 메서드

값 설정 : setItem(key, value)
값 읽기 : getItem(key)
전체 지우기 : clear()
키 번호 읽기 : ket(index)
개별 항목 삭제 : removeItem(key)
개수 : length

예시 코드

로컬 스토리지를 활용해서 서버에 저장하지 않고 클라이언트에서만 todo list 를 구현해보고자 한다.

코드는 노마드 코더 강의를 참고했다.

index.html

<!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>
    <h1>Todo</h1>
    <form>
      <label for="todo">할 일</label>
      <input type="text" id="todo" name="todo" />
      <button type="submit">등록</button>
      <button type="button" class="all-delete">댓글 모두 지우기</button>
    </form>
    <ul class="todo-list"></ul>
  </body>
  <script src="./index.js"></script>
</html>

index.js

// 대상요소 잡기
const form = document.querySelector("form");
const todoInput = form.querySelector("#todo");
const todoList = document.querySelector(".todo-list");
const allDeleteBtn = document.querySelector(".all-delete");

const TODO = "todo";
let todoObj = [];

// 폼요소 제출 이벤트
form.addEventListener("submit", handleSubmit);

let savedTodo = localStorage.getItem(TODO);

// 폼요소 제출 이벤트 함수
function handleSubmit(event) {
  // 이벤트 기본 기능 막기
  event.preventDefault();

  // 빈값인지 확인
  if (todoInput.value.trim() == "") {
    alert("내용을 입력해주세요");
    return;
  }

  // 로컬스토리지에 내용 저장
  handleSave(todoInput.value);
  todoInput.value = "";
  todoInput.focus();
}

// 로컬스토리지 댓글 내용 저장
function handleSave(content) {
  // 새로운 객체 생성
  let newTodo = {
    text: content,
    id: Date.now(),
  };

  // 새로 추가된 내용 배열에 추가
  todoObj.push(newTodo);
  // li추가 함수
  todoWrite(newTodo);
  // json형태로 로컬스토리지에 저장
  todoLocalSave();
}

function todoLocalSave() {
  localStorage.setItem(TODO, JSON.stringify(todoObj));
}

// li에 댓글내용 입력을 위한 함수
function todoWrite(comment) {
  const li = document.createElement("li");
  li.id = comment.id;
  const span = document.createElement("span");
  span.innerText = comment.text;
  const button = document.createElement("button");
  button.innerText = "❌";
  button.addEventListener("click", deleteTodo);
  li.appendChild(span);
  li.appendChild(button);
  todoList.appendChild(li);
}

// 로컬스토리지에 있던거 화면에 출력하기
if (savedTodo !== null) {
  const parsedTodo = JSON.parse(savedTodo);
  todoObj = parsedTodo;
  todoObj.forEach(todoWrite);
}

// 모두 지우기
allDeleteBtn.addEventListener("click", deleteAll);

function deleteAll() {
  localStorage.clear();
  const li = todoList.querySelectorAll("li");
  li.forEach((li) => li.remove())
}

// todo 지우기
function deleteTodo(event) {
  const li = event.target.parentElement;
  todoObj = todoObj.filter((todo) => todo.id !== parseInt(li.id));
  li.remove();
  todoLocalSave();
}

결과

이런식으로 로컬 스토리지에 저장되어서

새로고침을 하거나 브라우저를 닫았다가 켜도

작성했던 todo 내용을 지우지 않는 한 그대로 남아있어서 다시 불러올 수 있다.

활용 사례

장기적으로 유지해야하는 데이터를 저장하는 편이다

예를 들어 사용자 설정이나, 캐싱 정보 등이 있다.

세션 스토리지(Session Storage)

세션 스토리지는 로컬 스토리지와는 달리 브라우저 창이 닫히면 데이터도 사라진다.

사용하는 메서드는 로컬 스토리지와 동일하다.

활용 사례

임시 데이터를 저장하는 것에 사용한다.

예를 들어 임시 폼 데이터나, 인증 정보 등이 있다.

로컬 스토리지와 세션 스토리지 비교

로컬 스토리지와 세션 스토리지를 비교하면 다음과 같다.

항목	로컬 스토리지	세션 스토리지
데이터 지속성	브라우저를 닫아도 지속 (명시적으로 지우거나 캐시 데이터를 지우지 않는 이상 지속됨)	브라우저 창을 닫으면 데이터 삭제됨
사용 목적	장기적으로 유지해야 할 데이터 (예 : 사용자 설정, 캐싱 데이터)	일회성 또는 세션 동안만 필요한 데이터 (예 : 폼 임시 저장)
삭제 시점	명시적으로 삭제하거나 브라우저 캐시 삭제 시	브라우저 창을 닫으면 삭제
활용 사례	사용자 설정, 캐시 정보 등	인증 세션 데이터, 임시 폼 데이터 등

Reference

https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

웹 스토리지 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전.

ko.wikipedia.org

https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API

Web Storage API - Web API | MDN

Web Storage API는 브라우저에서 키/값 쌍을 쿠키보다 훨씬 직관적으로 저장할 수 있는 방법을 제공합니다.

developer.mozilla.org

https://www.w3schools.com/js/js_api_web_storage.asp

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://www.youtube.com/watch?v=-4Sa7nTrXr4

[React] React Hook Form

다니니니 — Sat, 23 Nov 2024 16:10:30 +0900

들어가며

React Hook Form 은 비제어 컴포넌트를 기반으로 동작하는 폼 관리 라이브러리다.

React 에서 form 을 쉽게 관리할 수 있도록 해주며, form의 상태 관리와 유효성 검사를 간단하게 만들어준다.

React Hook Form

React Hook Form 은 다음의 커맨드로 설치할 수 있다.

npm install react-hook-form

React Hook Form 은 useForm 이라는 훅을 통해 폼 상태, 검증 및 제출 로직을 관리한다.

import { useForm } from 'react-hook-form'

React Hook Form 에서 주로 사용되는 메서드는 아래와 같다.

register : 입력 요소에 연결하기 위한 함수. 이 함수를 통해서 입력 요소에 유효성 검사 규칙을 설정할 수 있다
handleSubmit : 폼의 제출을 처리하기 위한 함수. 이 함수에 전달된 콜백은 유효성 검사를 통과한 데이터를 인자로 받아서 실행한다.
watch : 특정 폼 필드의 값을 실시간으로 관찰하는 함수
formState : 폼의 상태를 나타내는 객체 (ex. errors, isValid, isDirty, isSubmitted 등의 상태 포함)

예시 코드

import React from "react";
import { useForm } from "react-hook-form";

const errorMsgStyle = {
  fontSize: "12px",
  color: "red",
};

export default function Form() {
  const {
    register, // input 할당, value 변경 감지
    handleSubmit, // form submit 시 호출
    formState: { errors }, // 폼 상태 객체
    watch, // 특정 폼 필드의 값을 실시간으로 사용
  } = useForm();

  // handleSubmit(func A[, func B]) - 두개의 함수를 인자로 받는다. (두번째인자는 생략 가능)
  // func A는 필수 값, 유효할 때 실행
  // func B는 선택, 유효하지 않을 때 실행

  // func A -> 유효할 떄 실행
  const onValid = (data) => {
    console.log("onValid >>> ", data);
  };

  // func B -> 유효하지 않을 때 실행
  const onInValid = (err) => {
    console.log("onInValid >>> ", err);
  };

  console.log("errors>>>", errors);
  console.log("watch>>>", watch("username"));

  return (
    <div>
      <h1>react-hook-form 라이브러리 DEMO</h1>
      <form onSubmit={handleSubmit(onValid, onInValid)}>
        <div>
          <input
            type="text"
            placeholder="username"
            {...register("username", {
              required: "이름은 필수항목입니다.",
              minLength: {
                message: "이름은 최소 2글자 이상 작성해주세요",
                value: 2,
              },
            })}
            // 'username'이라는 필드명 / required, minLengh 라는 유효성 검사 규칙
            // 'username' 이라는 input 필드를 RHF(react-hook-form)에 등록
          />
          {errors.username && (
            <div style={errorMsgStyle}>{errors.username.message}</div>
          )}
        </div>
        {/* 이 표현은 조건부 렌더링과 옵셔널 체이닝을 활용하여 폼 필드의 오류 메시지를 표시하는 방법 */}
        {/* errors = formState 객체 중 하나 각 폼 필드에 대한 오류 메시지를 담고, 유효성 검사가 실패한 경우에만 해당 필드의 오류 메시지가 저장됨 */}
        {/* 옵셔널 체이닝 연산자 '?.'
                JS에서 객체의 속성에 접근할 때 해당 속성이 존재하는지 확인하고, 없을 경우 undefined 반환하는 연산자 */}

        <div>
          <input
            type="email"
            placeholder="email(gmail)"
            {...register("email", {
              required: "이메일을 입력해주세요",
              validate: {
                useGmail: (v) =>
                  v.includes("gmail.com") || "gmail로만 가입 가능합니다.",
              },
            })}
          />
          {/* validate : reat hook form 에서 제공하는 유효성 검사 옵션 중 하나,
                폼 필드에 대하 커스텀 유효성 검사를 수행할 수 있도록 함,
                함수 또는 함수들을 포함하는 객체를 받을 수 있음 */}
          {/* validate 가 객체로 사용될 경우, 객체의 각 속성에 대해 개별적인 유효성 검사 수행 가능
                각 속성은 함수 형태로 정의, 이 함수들이 개별적인 유효성 검사 규칙 적용 */}
          {/* 
                useGmail : validate 옵션의 객체 내부에서 useGmail 이라는 이름의 함수로 정의, 특정 유효성 검사 규칙 설정 
                v : 사용자가 email 필드에 입력한 값(이메일 주소)을 의미
            */}

          {errors.email && (
            <div style={errorMsgStyle}>{errors.email.message}</div>
          )}
        </div>
        <div>
          <input
            type="password"
            placeholder="password"
            {...register("password", {
              required: "비밀번호를 입력해주세요",
              pattern: {
                value: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{2,8}$/,
                message: "2~8글자의 영어+숫자 조합으로 입력해주세요",
              },
            })}
          />
          {/* pattern 을 사용해서 정규식으로 유효성 검사 가능 */}
          {errors.password && (
            <div style={errorMsgStyle}>{errors.password.message}</div>
          )}
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

결과

유효성 검사 및 폼 제출

폼 제출 결과

React Hook Form 의 특징

React Hook Form 은 비제어 컴포넌트 기반으로 동작하기 때문에

폼 필드가 업데이트 될 때마다 전체 폼이 리렌더링 되지는 않는다.

이로 인해 불필요한 렌더링을 줄이고, 결과적으론 앱성능을 향상시킬 수 있다.

즉, 최적화에 적합하다.

또한, HTML5 의 기본적인 검증 속성인 required, minLength, maxLength 등을 사용할 수 있어,

검증 로직을 쉽고 간편하게 구현할 수 있다.

또, error 등 상태를 나타낼 수 있는 객체를 사용해서 간단하게 에러 메시지를 관리할 수 있다.

React Hook Form 의 동작 방식

앞서, React Hook Form 은 비제어 컴포넌트 기반으로 동작한다고 했다.

그래서 input 이나 form 의 값을 react state 에서 직접 관리하는 것이 아니라, 브라우저의 DOM 상태를 참조한다.

이로 인해 최소한의 리렌더링을 하여 성능을 향상 시킬 수 있다.

상태 관리는 폼 제출, 유효성 검사 시점에서 이루어진다.

React Hook Form 과 일반 Form 작성 비교

일반 Form

각 입력 필드의 상태를 useState 로 관리해야함
값이 바뀔 때마다 전체 컴포넌트가 리렌더링 될 수 있다.
검증 로직을 직접 다 작성해야한다.
폼 제출 시 각 입력 필드의 상태들을 모아서 폼 데이터를 수집해야 한다.

React Hook Form

useForm이라는 단일 훅을 이용해서 폼 상태, 검증 및 제출 로직을 관리하므로, 사용법이 직관적이고 코드가 간결하다.
비제어 컴포넌트 기반으로 동작하여 필요한 경우에만 리렌더링 한다.
다양한 검증 규칙을 쉽게 설정할 수 있다
handleSubmit 함수 하나로 모든 폼 데이터를 쉽게 관리할 수 있다.

이를 표로 정리하면 다음과 같다.

특징	일반 Form	React Hook Form
상태 관리	React State 로 직접 관리	비제어 컴포넌트를 사용하여 상태를 DOM 에서 관리
유효성 검사	별도의 검증 로직을 작성	register 등을 사용해서 간단하게 구현 가능
리렌더링	입력값 변경 시마다 리렌더링 발생	비제어 컴포넌트 기반으로 리렌더링 최소화
코드 복잡도	state 관리 및 이벤트 핸들러로 인해 코드가 길어질 수 있음	간결한 코드로 작성 가능
성능	대규모 폼 양식 작성 시 성능 저하 문제 발생할 수 있음	최소한의 리렌더링으로 인한 성능 향상

따라서 일반 Form 양식은 간단한 폼 양식 작성 시에 사용하기 적합하고

React Hook Form 복잡하고 대규모 폼 양식을 작성할 떄 사용하기 적합하다.

(ex. 회원가입/로그인 폼 등)

따라서 리액트 프로젝트에서 form 을 사용할 일이 있으면

프로젝트의 규모, form 을 사용하는 곳의 규모를 생각해서 적절한 것을 사용하면 되겠다.

Reference

코딩온 교안 자료

[React] 제어 컴포넌트와 비제어 컴포넌트

다니니니 — Fri, 22 Nov 2024 14:42:32 +0900

들어가며

React 로 form 을 구현할 때 제어 컴포넌트와(Controlled Component) 와 비제어 컴포넌트(Uncontrolled Component) 라는 개념을 접할 수 있다.

이 두 방식은 입력 값을 관리하는 방법에서 차이가 있으며, 상황에 따라 적절한 방법을 선택해야 한다.

이번 포스팅에서는 이 두 개념을 비교할 것이다.

제어 컴포넌트와 비제어 컴포넌트

제어 컴포넌트(Controlled Component)

입력 값이 React 의 state에 의해서 제어되는 컴포넌트

입력 값이 변경될 때마다 onChange 이벤트로 상태 업데이트하고, 업데이트된 상태로 다시 렌더링 한다.

작동 원리

사용자가 input 에 값을 입력하면 onChange 이벤트가 호출된다.
이벤트 핸들러가 새로운 입력 값을 React 의 state 로 업데이트한다.
React 는 상태를 기반으로 컴포넌트를 재렌더링하고, input 의 value 속성을 새 값으로 설정한다.

제어 컴포넌트의 특징

React 의 state 를 통해 데이터 흐름을 제어한다.
입력 값 변경에 따라 컴포넌트가 재렌더링된다.
폼 데이터 검증이나 여러 입력 필드 간 동기화가 필요할 때 적합하다.
사용자 입력에 따라 다른 컴포넌트 상태를 동기화 해야 하거나, 값의 변경이 실시간으로 반영되어야 하는 경우에 사용한다.

예시 코드

import React, { useState } from "react";

export default function ControlledInput() {
  const [value, setValue] = useState("");
  const [submittedValue, setSubmittedValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleSubmit = () => {
    setSubmittedValue(value);
  }

  return (
    <div style={{marginLeft : '100px'}}>
      <h1>제어 컴포넌트</h1>
      <input type="text" value={value} onChange={handleChange} />
      <h5>State : {value}</h5>
      <button onClick={handleSubmit} type="button">전송</button>
      <p>전송된 값 : {submittedValue}</p>
    </div>
  );
}

결과

결과 해석

useState로 입력 값을 제어했기 때문에, 입력 값이 바뀔 때마다 리렌더링되면서 값이 실시간으로 반영된다.

전송버튼을 누르면 해당되는 함수가 호출되며 submiitedValue 상태가 저장되고, 화면에 전송된 값이 표시된다.

비제어 컴포넌트(Uncontrolled Component)

DOM 요소 자체가 상태를 관리하는 방식으로, React 가 제어하는 것이 아니라

ref 를 사용해서 DOM 에 접근해 값을 읽거나 조작한다.

작동 원리

사용자가 input 에 값을 입력하면 DOM 이 자체적으로 값을 관리한다.
React 는 ref 를 통해 DOM 요소에 접근하고 value 를 읽는다.
상태를 React 에서 관리하지 않아도 된다.

비제어 컴포넌트의 특징

DOM 요소가 입력 값을 보유하며, React 와 독립적으로 동작한다.
defaultValue 속성을 사용해 초기값을 설정할 수 있다.
간단한 입력 값 처리나 초기화 로직이 적은 경우 적합하다.
입력 값이 실시간으로 반영되지는 않지만, 과도한 리렌더링을 방지할 수 있어서 성능적으로 이득을 얻을 수 있다.
DOM 요소에서 제어하기 때문에 form 의 기본 동작을 사용할 수 있다.

예시 코드

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

export default function UncontrolledInput() {
  const inputRef = useRef();
  const [submittedValue, setSubmittedValue] = useState("");

  const handleSubmit = () => {
    if (inputRef.current) {
      setSubmittedValue(inputRef.current.value);
    }
  };

  return (
    <div style={{ marginLeft: "100px" }}>
      <h1>비제어 컴포넌트</h1>
      <input type="text" ref={inputRef} />
      <h5>Ref : {inputRef.current?.value}</h5>
      <button onClick={handleSubmit} type="button">
        전송
      </button>
      <p>전송된 값 : {submittedValue}</p>
    </div>
  );
};

결과

결과 해석

ref 를 사용하여 DOM을 참조했기 때문에 DOM 에는 입력값이 저장되나, 재렌더링은 되지 않아서

실시간으로 값이 반영되지는 않는다.

다만 전송 버튼을 눌렀을 때 submittedValue state 가 저장되면서 리렌더링므로

리렌더링 후에는 입력된 값이 반영된다.

제어 컴포넌트와 비제어 컴포넌트 비교

특징	제어 컴포넌트	비제어 컴포넌트
상태 관리	React state 로 관리	DOM 요소가 자체 상태 관리
초기값 설정	value 속성과 상태로 설정	defaultValue 로 설정
데이터 접근 방식	상태(state) 기반	ref 를 사용하여 DOM 에 직접 접근
실시간 반영(동적 입력)	O	X

제어 컴포넌트를 사용할 경우

입력 값을 실시간으로 검증해야 하거나 여러 필드 간 동기화가 필요한 경우
(ex. 비밀번호 입력 필드 값과 비밀번호 확인 입력 필드 값을 실시간으로 비교할 때)
사용자 입력에 따라 다른 컴포넌트 상태를 동기화해야 하는 경우
(입력값 변경에 따른 버튼 활성화 상태를 조정할 때)
값의 변경이 실시간으로 반영되어야 하는 경우
(입력 값이 바로 반영되는 실시간 검색)

비제어 컴포넌트를 사용할 경우

단순한 폼이나 초기 렌더링 이후 값 관리를 신경 쓰지 않아도 되는 경우
(회원가입 시 이름, 이메일 드으이 단순 입력 필드)
외부 라이브러리와 연동하는 경우
(파일 선택 필드나 드래그 앤 드롭 파일 업로드 등의 외부 라이브러리 사용 시)

따라서

각 상황에 맞게 제어 컴포넌트와 비제어 컴포넌트를 선택해서 쓰면 되겠다.

Reference

https://ko.legacy.reactjs.org/docs/forms.html#controlled-components

폼 – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

https://ko.legacy.reactjs.org/docs/uncontrolled-components.html

비제어 컴포넌트 – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

https://velog.io/@thumb_hyeok/%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-vs-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

제어 컴포넌트 vs 비제어 컴포넌트

결론부터 말하고 가자면 React에 의해서 값이 제어되는 컴포넌트를 제어 컴포넌트, React에 의해서 값이 제어되지 않는 컴포넌트를 비제어 컴포넌트라고 한다.우리는 form 이나 input 요소를 다룰 때,

velog.io

https://velog.io/@yukyung/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%99%80-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%ED%86%BA%EC%95%84%EB%B3%B4%EA%B8%B0

React: 제어 컴포넌트와 비제어 컴포넌트의 차이점

제어 컴포넌트와 비제어 컴포넌트의 차이점, 활용 방법에 대해 알아봅시다

velog.io

https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/

goshacmd.com

CORS 에 대해서 알아보기

다니니니 — Thu, 21 Nov 2024 14:12:48 +0900

CORS(Cross-Origin Resource Sharing)

CORS 란 교차 출처 리소스 공유를 의미한다.

브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 해주는 보안 메커니즘이다.

브라우저는 기본적으로 SOP(Same-Origin Policy) 정책을 따르는데, 이 정책은 같은 출처에서만 리소스를 공유할 수 있다고 정한 정책이다.

그러나 개발을 하다보면, 클라이언트와 서버의 출처(Origin)가 서로 다를 수 있다.

예를 들어, 리액트 서버(포트 번호 3000) 와 스프링부트 혹은 익스프레스 서버(포트 번호 8080) 가 리소스를 주고받으려 하면 서로 다른 출처로 판단되어서 CORS 위반 에러가 난다.

출처 : 코딩온 교안 자료

참고로 출처(Origin) 는

프로토콜(http 또는 https)

도메인(test.com)

포트 번호(:8080, :3030 등)

이 세 가지가 모두 동일할 때만 동일 출처로 간주된다.

출처 : https://docs.tosspayments.com/resources/glossary/cors

예를 들어 https://www.test.com:8080 이라는 url 이 있을 때

https://test.com:8080 -> 같은 출처로 간주
http://www.test.com:8080 -> 프로토콜이 다르므로 다른 출처로 간주
http://sub.test.com -> 도메인이 다르므로 다른 출처로 간주
https://www.test.com:3030 -> 포트번호가 다르므로 다른 출처로 간주

CORS 요청 종류

1) Simple Request (단순 요청)

브라우저가 사전 요청없이 바로 요청을 보내는 경우

요청 메서드는 GET, POST, HEAD 만 허용

Request Header 에는 다음 속성만 허용

Accept, Accept-Language, Content-Language,

Content-Type(application/x-www-form-urlencoded, multipart/form-data, text/plain)

** application/json 은 simple request 에 해당하지 않는다.

** 클라이언트에서 임의로 커스텀 헤더를 추가하면 simple request 에 해당하지 않는다.

예시)

1. 클라이언트 요청

// 클라이언트 요청
fetch('https://example.com/api/message', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain', // 허용된 Content-Type
  },
  body: 'Hello World!', // 단순 텍스트
})
  .then(response => response.text())
  .then(data => console.log(data));

2. 서버 응답 헤더

HTTP/1.1 200 OK
Content-Type: text/plain
Access-Control-Allow-Origin: https://example.com

2) Preflight Request (사전 요청)

요청이 더 복잡하거나 보안적으로 민감할 경우, 브라우저는 OPTIONS 메서드를 사용하여 서버에 사전요청을 보낸다.

이 경우 브라우저는 요청을 한 번에 보내지 않고 사전 요청과 실제 요청으로 나누어서 요청하며,

사전 요청을 서버가 허용하면 실제 요청을 보낸다.

예시)

1. 사전 요청(OPTIONS) : 브라우저는 OPTIONS 메서드로 서버에 요청

OPTIONS /api/data HTTP/1.1
Origin: https://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Authorization

2. 서버 응답 : 서버는 허용 정보를 포함하여 응답

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: Authorization
Access-Control-Allow-Credentials: true

Access-Control-Allow-Origin: 허용할 출처 명시
Access-Control-Allow-Methods: 허용할 HTTP 메서드 (GET, POST, PUT 등)
Access-Control-Allow-Headers: 허용할 요청 헤더 (예: Authorization, Content-Type)
Access-Control-Allow-Credentials: 인증 정보(쿠키, 인증 헤더 등) 허용 여부

3. 실제 요청 : 브라우저는 서버의 허용 여부를 확인 후, 실제 요청을 보냄

PUT /api/data HTTP/1.1
Authorization: Bearer <token>
Content-Type: application/json
Origin: https://example.com

4. 서버 응답

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://example.com
Content-Type: application/json

CORS 설정 하기 (feat. Express.js)

CORS 설정은 서버에서 하는 것이 일반적이다.

브라우저는 보안 정책으로 CORS 강제한다.

서버에서 응답 헤더를 통해 특정 출처를 허용한다고 명시하지 않으면, 브라우저는 요청이 성공하더라도 응답을 차단한다.

만약 Express.js 로 서버를 구축했다면 cors 미들웨어로 간단하게 CORS 설정을 할 수 있다.

다음의 커맨드로 cors 패키지를 설치한다.

npm install cors

cors 미들웨어를 등록한다.

const express = require('express');
const cors = require('cors');
const app = express();

// 기본 CORS 설정
app.use(cors());

app.get('/api/data', (req, res) => {
  res.json({ message: 'CORS enabled for all origins!' });
});

app.listen(8080, () => {
  console.log('Server is running on port 8080');
});

#1. 모든 출처에서 요청 허용

cors 는 기본적으로 모든 출처에서의 요청을 허용한다.

app.use(cors());

#2. 특정 출처에서의 요청만 허용

origin 옵션에 허용할 출처를 명시하면 특정 출처에서의 요청만 허용할 수 있다.

app.use(cors({
    origin : 'http://ex.com' -> 이 도메인에서의 요청만 허용
}))

#3. 특정 옵션 설정

여러 출처를 허용하고 싶다면 origin 옵션에 배열로 출처를 적어준다.

methods 에 허용할 메서드를 명시할 수 있다.

allowedHeaders 로 허용할 요청 헤더를 명시할 수 있다.

app.use({
    origin : ['http://ex.com', 'https://ex2.com'],
    methods : ['GET', 'POST'],
    allowedHeaders : ['Content-Type', 'Authorizaion']
})

#4. 인증 정보를 포함한 요청 허용

쿠키와 같은 인증 정보를 전달하려면 credentials 옵션을 설정한다.

이 경우 origin 은 반드시 명시적으로 설정해야 한다. ( * 사용 불가 )

app.use(cors({
  origin: 'http://ex.com', // 허용할 출처
  credentials: true,            // 인증 정보 허용
}));

이 경우에는 클라이언트 측 코드에서 요청을 보낼 때 withCredentials : true 를 설정해야 한다.

axios.get('http://server.com/api/data', { withCredentials: true });

Reference

코딩온 교안 자료

https://docs.tosspayments.com/resources/glossary/cors

CORS(교차 출처 리소스 공유) | 토스페이먼츠 개발자센터

CORS를 번역하면 “교차 출처 리소스 공유”에요. ‘두 출처가 서로 다르다’는 뜻인데요. CORS를 설정한다는 건 ‘출처가 다른 서버 간의 리소스 공유’를 허용한다는 거죠.

docs.tosspayments.com

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 브라우저가 자신의 출처가 아닌 다른 어떤 출처(도메인, 스킴 혹은 포트)로부터 자원을 로딩하는 것을 허용하도록 서버가 허가 해주는 HTTP

developer.mozilla.org

https://velog.io/@effirin/CORS%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

CORS란 무엇인가?

CORS가 무엇인지 알기 전에, 이 CORS가 등장하게 된 배경을 먼저 알아보자.SOP는 2011년 RFC 6454에서 등장한 보안 정책으로 "같은 출처에서만 리소스를 공유할 수 있다"라는 규칙을 가진 정책이다.그러

velog.io