서버에 업로드하기 전에 해상도나 저장 크기를 줄여 jpeg, png, webp, bmp 이미지를 압축할 수 있는 라이브러리입니다.

사용하게 된 배경

프로젝트에서 게시글 작성 시 이미지를 업로드하는 기능을 개발했습니다.

초기에 구현한 방식은 이미지를 압축 없이 원본 그대로 업로드하는 방식이었습니다.

하지만 테스트 과정에서 다음과 같은 문제를 발견했습니다.

• 원본 파일 그대로 업로드 시 로딩 속도 저하
• 렌더링 시간 증가로 UX 품질 저하

이를 해결하기 위해 클라이언트 측에서 먼저 이미지를 압축한 후 업로드하는 방식으로 개선했습니다.

사용 방법

압축을 원하는 파일과 옵션을 지정한 뒤, imageCompression 비동기 함수를 사용해 압축 시켜주면 됩니다!

코드 설명

💻수정 전 코드

const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files ? e.target.files[0] : null;
    if (file) {
      // 선택된 파일을 상태로 저장
      setSelctedImageFIle(file);
      const reader = new FileReader();
      reader.onload = () => {
        setPreviewImage(reader.result as string);
      };
      reader.readAsDataURL(file);
      // 파일 입력 필드 초기화
      e.target.value = '';
    }
  };

문제점

• 압축되지 않은 파일 업로드
• 큰 이미지 파일은 네트워크와 렌더링 성능에 부하를 줌

💻수정 후 코드

const handleImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    const maxFileSizeMB = 5;
    if (file.size > maxFileSizeMB * 1024 * 1024) {
      alert(`파일 크기가 ${maxFileSizeMB}MB를 초과했습니다.`);
      return;
    }
        // 이미지 옵션
    const options = {
      maxSizeMB: 0.2,
      maxWidthOrHeight: 1226,
      useWebWorker: true,
    };

    try {
      // 이미지 압축
      const compressedBlob = await imageCompression(file, options);
      const compressedFile = new File([compressedBlob], file.name, {
        type: file.type,
        lastModified: Date.now(),
      });

      setSelectedImageFile(compressedFile);

      // 미리보기 이미지 생성
      const reader = new FileReader();
      reader.onload = () => setPreviewImage(reader.result as string);
      reader.readAsDataURL(compressedFile);

      // 파일 입력 필드 초기화
      e.target.value = '';
    } catch (error) {
      alert('이미지를 처리하는 도중 오류가 발생했습니다. 다시 시도해 주세요.');
    }
  };

개선된 점

• 서버에서 5MB 제한을 지정해줌 → 사용자에게 명확한 피드백 제공
• 최대 크기 0.2MB로 압축 → 게시글 권장 크기(100~200KB) 준수
• 최대 너비 또는 높이 1224px 제한
• 압축 후 Blob → File 변환
  • 서버 업로드를 위한 일관된 파일 형식 유지

1224px 결정 이유

업로드된 이미지가 다양한 페이지에서 사용되는데,

가장 작은 사이즈에 맞추면 다른 뷰에서 이미지가 깨질 위험이 있었습니다.

그래서 여러 화면에서 가장 무난하고 균형 잡힌 크기로 보이도록 1224px로 지정했습니다.

결과

같은 이미지를 개선 전·후 적용해본 결과, 파일 크기는 4.3MB → 145KB, 로딩 시간은 1.01초 → 820ms로 개선되었습니다. 이로 인해 페이지 로딩 속도 향상, 사용자 경험 개선을 향상 시켰습니다.

라이브러리 https://www.npmjs.com/package/browser-image-compression 더 자세한 코드는 깃허브 참고 https://github.com/Co-Drive/Driver-Client/pull/369

this는 자신이 속한 객체를 가리킨다.

하지만 함수 호출 방식에 따라 this가 참조하는 값은 달라진다. (동적 바인딩)

이번 글에서는 일반 함수 호출, 메서드 호출, 생성자 함수 호출, 콜백 함수 호출 네 가지 상황에서 this가 어떻게 바뀌는지 정리해보자!

1. 일반 함수 호출

일반 함수로 호출했을 때, this는 전역 객체를 가리킨다.

(브라우저에서는 window, Node.js에서는 global)

console.log(this);
// 브라우저 → window 객체 출력

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

func();
// 일반 함수로 호출 → this는 window

2. 메서드 호출

메서드는 객체의 프로퍼티로 등록된 함수를 말한다.

메서드로 호출하면, this는 그 메서드를 소유한 객체를 가리킨다.

const cafe = {
  brand: "이디야",
  menu: "커피",
  newCafe: {
    brand: "커피",
    menu: "음료",
    print: function () {
      console.log(this);
    },
  },
};

cafe.newCafe.print();
// → { brand: '커피', menu: '음료', print: ƒ }

✅ 요점:

• cafe.newCafe.print() 호출 시 this는 newCafe 객체를 가리킨다.

3. 메서드를 일반 함수처럼 호출한 경우

메서드를 변수에 할당하고 호출하면 어떻게 될까?

const game = {
  name: "answn",
  age: "29",
  print: function () {
    console.log(this);
  },
};

const myGame = game.print;
myGame();
// 일반 함수 호출 → this는 window

✅ 요점:

• game.print는 객체에 묶여있지만 myGame에 할당하는 순간 연결이 끊긴다.
• myGame()을 일반 함수처럼 호출했기 때문에 this는 전역 객체(window)를 가리킨다.

중간 요약

4. 생성자 함수 호출

생성자 함수는 new 키워드와 함께 호출해서 새로운 객체를 만든다.

function Cafe(menu) {
  console.log(this); // Cafe {}
  this.menu = menu;
}

let myCafe = new Cafe("latte");
console.log(myCafe);
// → Cafe { menu: 'latte' }

✅ 요점:

• new Cafe("latte") 호출 시, 새로운 객체가 생성되고 this는 그 객체를 가리킨다.

만약 new 없이 호출한다면?

let myCafe = Cafe("latte");

• 일반 함수 호출로 취급된다.
• this는 전역 객체(window)를 가리킨다.
• menu가 window.menu로 설정된다.
• 반환값이 없기 때문에 myCafe는 undefined가 된다.

console.log(window.menu); // "latte"
console.log(myCafe); // undefined

5. 콜백 함수 호출

콜백 함수에서는 this가 예상과 다를 수 있다.

const game = {
  name: "answn",
  age: "",
  setGame: function (age) {
    this.age = age;
  },
};

setGame은 전달받은 age를 game 객체의 age 프로퍼티에 할당하는 메서드다.

문제 상황

function getGame(age, callback) {
  callback(age);
}

getGame("29", game.setGame);

console.log(game);
// { name: 'answn', age: '', setGame: ƒ }

❌ game.age가 기대했던 "29"로 업데이트되지 않았다.

이유는?

• getGame 안에서 callback(age)를 일반 함수 호출로 실행했다.
• 콜백이 객체와 분리되어 this가 전역 객체(window) 를 가리키게 됐다.
• 결과적으로 window.age = "29"가 되어버렸다.

console.log(window.age); // "29"

최종 요약

한 줄 정리

"함수가 어떻게 호출되었느냐"에 따라 this가 결정된다.

new 키워드, 호출 방식, 콜백 전달 방식에 주의하자.

DOM(Document Object Model)은 HTML 문서를 브라우저가 이해하고 자바스크립트로 조작할 수 있도록 객체(Object) 형태로 구조화한 모델이다.

HTML 요소들을 트리 형태로 구성하여 자바스크립트가 이 구조에 접근하고, 내용을 읽거나 수정하거나 삭제할 수 있게 만든 것이다.

• DOM은 프로그래밍 언어와 독립적으로 설계된 API를 기반으로 동작한다.
• 자바스크립트를 통해 DOM을 조작함으로써 웹페이지를 동적으로 제어할 수 있다.

DOM 트리란?

HTML 문서는 계층적인 구조를 가지고 있고, 브라우저는 이를 트리 형태의 객체 구조로 변환한다. 이 구조를 DOM 트리라고 부른다.

DOM 트리의 특징

• 각 HTML 요소는 노드(Node)로 표현된다.
• 노드들은 부모-자식 관계를 이루며 연결된다.
• 최상단의 <html> 요소가 루트 노드(root node)가 된다.

주요 노드 종류

이러한 트리 구조 덕분에 특정 요소를 찾아내고, 삭제하거나 변경할 수 있다.

DOM API

자바스크립트는 다양한 DOM API를 통해 HTML 요소에 접근하고, 이를 조작할 수 있다.

1. 요소 선택하기

document.getElementById('myId')
document.querySelector('.my-class')
document.querySelectorAll('div > p')

• getElementById, querySelector, querySelectorAll 등은 DOM 트리에서 노드를 찾을 때 사용됩니다.

2. 속성 변경

const element = document.querySelector('#title')
element.textContent = '새로운 제목'
element.setAttribute('data-role', 'header')

• textContent: 텍스트 변경
• setAttribute, getAttribute: HTML 속성 조작

3. 클래스 조작

element.classList.add('active')  // 클래스 추가
element.classList.remove('hidden') // 클래스 제거
element.classList.toggle('on') // 클래스 토글

📍 예시: 버튼 클릭 시 'on' 클래스를 추가해서 스타일을 바꾸거나, 'hidden' 클래스를 제거해 요소를 보이게 만들 수 있다.

4. DOM 요소 생성/삽입/삭제

const newElement = document.createElement('div')
newElement.textContent = '새로운 요소'

// 삽입
document.body.appendChild(newElement)

// 삭제
document.body.removeChild(newElement)

❗removeChild()는 반드시 부모 요소가 자식 요소를 제거하는 형태여야 작동한다.

💻참고 사이트

• https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model
• https://ko.javascript.info/dom-nodes
• https://yozm.wishket.com/magazine/detail/1803/

모든 식별자(변수, 함수, 클래스 등)는 자신이 선언된 위치에 따라 참조할 수 있는 유효 범위(scope)가 결정된다. 이를 스코프라고 하며, 크게 전역 스코프와 지역 스코프로 나눌 수 있다.

▫︎ 전역 스코프

• 코드의 가장 바깥 영역에 선언된 변수는 어디서든 전역적으로 참조 가능하다.
• 예를 들어 함수 바깥에서 선언된 변수는 모든 함수 내부에서 사용할 수 있다.

▫︎ 지역 스코프

• 지역 변수는 자신이 선언된 지역과 하위 지역에서만 참조할 수 있다.
• 즉, 특정 함수나 블록 내부에서 선언된 변수는 그 범위 내에서만 유효하다.

예시 설명:

• outer 함수 내부에서 선언된 z 변수는 지역 변수이며,
  • outer 함수 내부와 그 하위 지역인 inner 함수에서도 참조할 수 있다.
  • 하지만 전역 스코프에서는 참조할 수 없기 때문에 참조 에러가 발생한다.
• inner 함수 내부에서 선언된 x 변수는 inner 함수 안에서만 참조할 수 있다.
  • 전역 스코프 또는 outer 함수에서는 참조할 수 없으며, 참조 시 에러가 발생한다.

▫︎ 스코프 체인

• 스코프는 함수의 중첩 구조에 따라 계층적으로 형성된다.
• 자바스크립트 엔진은 변수를 참조할 때 자신의 스코프에서 시작하여 상위 스코프 방향으로 올라가며 식별자를 검색한다.
• 이를 스코프 체인이라고 하며, 다음과 같은 특징이 있다:
  • 하위 스코프에서는 상위 스코프의 변수를 자유롭게 참조할 수 있다.
  • 반대로 상위 스코프에서는 하위 스코프의 변수에 접근할 수 없다.

▫︎ 코드의 문맥과 환경: 렉시컬 환경 & 실행 컨텍스트

• 렉시컬 환경: 코드가 어디에서, 어떤 문맥에서 선언되었는지를 의미하며, 스코프의 기반이 된다.
• 실행 컨텍스트는 이러한 렉시컬 환경을 구현한 개념으로, 코드가 평가되고 실행되는 환경이다.

▫︎ 식별자란?

• 식별자는 변수, 함수, 클래스 등의 이름을 나타내는 고유한 문자열이다.
• 동일한 스코프 내에서는 중복될 수 없으며, 하나의 값은 하나의 식별자에만 연결되어야 한다.

▫︎ var, let, const의 스코프 차이

🔹 블록 레벨 스코프 (let, const)

• let과 const는 코드 블록({})을 기준으로 스코프가 생성된다.
• if, for, while, try/catch 등 모든 코드 블록 내에서 유효한 스코프를 블록 레벨 스코프라 부른다.
• 동일한 스코프 내에서 중복 선언이 허용되지 않는다.

function bar() {
  let x = 1;
  let x = 2; // ❌ SyntaxError: Identifier 'x' has already been declared
}
bar();

🔹 함수 레벨 스코프 (var)

• var는 오직 함수 코드 블록만을 지역 스코프로 인식한다.

• 블록(if, for 등) 안에서 선언해도 함수 전체에서 접근 가능하다.

• 동일한 스코프 내에서 중복 선언이 허용되며, 의도치 않게 변수값이 덮어쓰일 수 있다.

function example() {
  var y = 1;
  var y = 2; // ✅ 가능하지만 예기치 않은 동작을 유발할 수 있음
  console.log(y); // 2
}
example();

우선, 중첩된 조건문을 사용하는 코드를 확인해 봅시다.

function compare(num) {
  if (num === 0) {
    console.log("num의 값이 0입니다.");
  } else if (num < 0) {
    console.log("num의 값이 0보다 작습니다.");
  } else {
    if (num >= 10) {
      console.log("num의 값이 10보다 크거나 같습니다.");
    } else {
      console.log("num의 값이 0보다 크고 10보다 작습니다.");
    }
  }
} 

위 코드는 if-else 문이 중첩되어 있어 가독성이 떨어집니다. 이를 Early Return 패턴을 적용해 개선할 수 있습니다.

function compare(num) {
  if (num === 0) {
    return "num의 값이 0입니다.";
  }
  if (num < 0) {
    return "num의 값이 0보다 작습니다.";
  }
  if (num >= 0) {
    return "num의 값이 10보다 크거나 같습니다.";
  }
  return "num의 값이 0보다 크고 10보다 작습니다.";
}

✔ Early Return을 사용하는 이유

위 코드처럼 조건을 만족하면 즉시 return하여 불필요한 else를 없앨 수 있습니다.

이를 통해 중첩된 조건문을 줄이고, 가독성을 높이며, 코드의 흐름을 단순화할 수 있습니다.

우테코 프리코스에서는 else를 사용하지 않는 것을 요구사항으로 명시하기도 하는데,

그 이유는 불필요한 중첩을 방지하여 코드를 읽기 쉽게 하기 위함입니다.

하지만 무조건 Early Return을 적용하는 것이 항상 좋은가?에 대해서는 고민이 필요합니다.

✅ Early Return의 장점

• 중첩 조건문을 줄여 코드의 가독성을 높이고 읽기 쉽게 만든다.
• 조건이 추가될 때 깊은 중첩을 방지할 수 있다.
• 빠르게 특정 조건을 검사하고 함수 실행을 종료할 수 있다.

❌ Early Return의 단점

• 함수 내에 여러 개의 return이 존재하면 흐름을 추적하기 어려울 수 있다.
• 코드가 지나치게 여러 곳에서 return하면 유지보수가 어려워질 가능성이 있다.
• 특정 상황에서는 if-else보다 흐름을 이해하기 어려울 수 있다.

결론

Early return 패턴은 적절히 활용하면 가독성과 유지보수성을 높일 수 있는 강력한 패턴이지만,

너무 남용하면 오히려 코드 흐름을 이해하기 어렵게 만들 수도 있습니다.

따라서 상황에 맞게 사용하는 것이 중요합니다!

쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각으로, 브라우저가 저장했다가 동일한 서버에 재요청 시 함께 전송하는 방식으로 동작합니다. HTTP 요청을 수신할 때, 서버는 응답과 함께 Set-Cookie 헤더를 전송할 수 있으며, 이후 해당 쿠키는 같은 서버로 보내는 요청의 Cookie 헤더에 포함됩니다.

📌 쿠키의 목적

쿠키는 두 요청이 동일한 브라우저에서 들어왔는지를 판단하는 데 사용됩니다. 주요 목적은 다음과 같습니다.

세션 관리

• 로그인, 장바구니, 게임 스코어 등의 정보를 유지하는 데 활용됩니다. (예: 로그인 상태 유지)

개인화

• 사용자 선호도, 테마 설정 등을 저장하여 개인 맞춤 환경을 제공합니다. (예: 다크 모드, 언어 설정)

트래킹

• 사용자 행동을 기록하고 분석하는 용도로 사용됩니다. (예: 광고 맞춤화)

쿠키는 다양한 활용이 가능하지만, 보안 및 개인정보 보호 측면에서 단점이 있습니다. 정보가 클라이언트 측에 저장되기 때문에 악용될 가능성이 있으며, 보안에 취약할 수 있습니다. 이를 보완하기 위해 Secure 속성을 설정하여 HTTPS에서만 전송되도록 하고, HttpOnly 속성을 추가하여 JavaScript 접근을 차단할 수 있습니다. 또한 SameSite 속성을 이용해 CSRF(사이트 간 요청 위조) 공격을 방지하고, 쿠키 암호화를 통해 중요한 정보를 직접 저장하지 않는 것이 좋습니다.

📌 쿠키가 만들어지는 과정

1. 사용자가 페이지에 접근

2. 서버에서 Set-Cookie 헤더를 포함하여 응답

3. 브라우저가 쿠키를 저장

4. 사용자가 페이지에 다시 접근할 때 저장된 쿠키를 서버로 전송

5. 서버에서 해당 쿠키를 인식하고 처리

6. 쿠키 값이 변경되었다면, 업데이트된 정보로 다시 저장

📌 쿠키의 종류

세션 쿠키 (Session Cookie) : 브라우저 종료 시 삭제되며, 로그인 세션 유지 등에 사용됩니다.

영구 쿠키 (Persistent Cookie) : 만료 날짜(Expires 또는 Max-Age)가 설정되어 일정 기간 동안 유지됩니다. 자동 로그인, 사용자 설정 저장 등에 활용됩니다.

퍼스트파티 쿠키 (First-Party Cookie) : 사용자가 방문한 웹사이트에서 직접 생성한 쿠키로, 로그인 상태 유지 등 사용자 경험 개선에 사용됩니다.

서드파티 쿠키 (Third-Party Cookie) : 광고 업체 등 다른 도메인에서 제공하는 쿠키로, 사용자 추적 및 광고 맞춤화에 사용됩니다. 최근 브라우저 정책에 따라 점점 차단되고 있습니다. (예: Chrome의 서드파티 쿠키 차단 정책)

📌 정리

웹 쿠키는 사용자 경험을 향상시키고 맞춤형 서비스를 제공하는 데 중요한 역할을 하지만, 보안 및 개인정보 보호 측면에서 취약할 수 있습니다. 따라서 적절한 설정이 필요하며, 경우에 따라 쿠키가 아닌 LocalStorage나 SessionStorage와 같은 대체 저장 방식을 활용하여 보안을 강화하는 것이 좋습니다. 웹 개발 시 쿠키의 활용과 보안 설정을 고려하여 안전하고 효율적인 환경을 구축하는 것이 중요합니다.

Meta(Facebook)이 개발한 오픈소스 JavaScript 라이브러리로서, 사용자 인터페이스를 구축하기 위해 사용된다.

React의 기술적인 특징

1. 컴포넌트를 기반으로 UI를 표현한다.
2. 화면 업데이트 구현이 쉽다.
3. 화면 업데이트가 빠르게 처리된다.
   

1. 컴포넌트를 기반으로 UI를 표현한다.

페이지의 모든 요소를 컴포넌트라는 단위로 모듈화해서 개발하기 때문에 여러 페이지에서 공통으로 사용되는 요소가 필요할 때 필요한 컴포넌트를 만들고 불러와서 사용한다. 이와 같이 사용하면 좋은 점은 중복 코드가 발생 하지 않고, 재사용할 수 있게 만들 수 있어서 유지보수가 쉽고 확장하기 용이한 코드를 작성할 수 있다.

2. 화면 업데이트 구현이 쉽다.

여기서 업데이트란? 사용자의 이벤트에 따라 웹페이지가 스스로 모습을 바꿔 상호작용하는 것을 말한다.

React는 선언형 프로그래밍이다.

선언형 프로그래밍이란? 과정은 생략하고 목적만 간결히 명시하는 방법 (코드가 간결함)

페이지를 컴포넌트 단위로 개발하게 되는데 컴포넌트에는 state(상태) 현재 상태를 저장하는 변수를 저장할 수 있다. state의 값이 바뀌면 컴포넌트가 바뀐 state 값에 따라 각각 다른 UI를 화면에 렌더링 하도록 설정할 수 있다.

3. 화면 업데이트가 빠르게 처리된다.

자바스크립트로 DOM을 수정해서 업데이트를 구현할 때 DOM 수정 횟수를 최소화 해야 되기 때문에 다양한 업데이트들이 있을 때 한 번 한 번 다 수정시키도록 만드는 게 아니라 어딘가의 변수라든지 등등의 장소에 업데이트들을 다 모아두었다가 한 번만 DOM을 수정할 수 있도록 각별히 신경을 써줘야 한다.

위에 설명한 이러한 작업을 리액트는 자동으로 처리해 준다. *(Virtual DOM) * 그렇기 때문에 우리가 리액트를 쓸 때는 아무리 많은 업데이트를 동시에 발생시킨다고 하더라도 대부분의 상황에 충분히 빠르게 업데이트를 구현할 수 있도록 도와준다.

Virtual DOM(가상 돔) 이란?

• 실제 돔과 같은 내용을 담고 있는 복사본이라 생각하면 된다. 복사본은 실제 돔이 아닌 자바스크립트 객체 형태로 메로리 안에 저장되어 있다.
• 리액트는 두 개의 가상 돔을 갖고 있다.
  • 첫 번째 가상 돔은 변경 이전의 내용을 담고 있다.
    • 두 번째 가상 돔은 변경 이후에 보여질 내용을 담고 있다.
• 변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에 리액트는 두 개의 가상 돔을 비교해서 정확히 어떤 부분이 바뀌었는지 비교하여 파악한다. 그리고 이러한 과정을 Diffing이라고 부른다.
• Diffing을 통해서 변경된 부분들을 파악한 이후에, 리액트는 Batch Update를 수행함으로 실제 DOM에 한 번에 적용시켜 준다. 그리고 이러한 과정을 Reconsiliation, 재조정이라고 한다.

참고

https://ko.legacy.reactjs.org/ https://www.youtube.com/watch?v=gc-kXt0tjTM

로그인/회원가입 기능 동작 방식

우선 로그인과 회원가입이 어떻게 동작하는지 어떤 방식이 있는지 가볍게 알아보고, 로그인 기능부터 알아보자.

회원가입

• 유저가 회원가입을 하면 아이디/비번을 DB에 저장해 둔다.

로그인

• 유저가 로그인 시 아이디/비번을 서버로 보낸다.
• 서버는 DB에 있는 아이디/비번과 유저가 보낸 아이디/비번이 일치하는 경우 입장권을 발급해 준다.

*로그인이 필요한 서버 기능 *

• 유저는 서버에 GET/POST로 데이터 요청 시 입장권도 함께 제시한다.
• 서버는 입장권 확인 후 데이터나 페이지 보내준다. 여기서 입장권을 만들 땐 대표적으로 session, token 방식이 있다.
  

session 방식

세션이란 쉽게 말하면 서버의 컴퓨터(서버에 세션 저장소)에 클라이언트의 정보를 기억하고 유지하는 것이다. 유저(정확히는 브라우저)가 로그인을 하였다면 서버의 컴퓨터(세션 저장소)에서 사용자 정보(주로 브라우저에 쿠키에 저장하게 된다)를 확인한 뒤 확인되었다면 일정 시간 동안 유지시키며 이후 사용자가 서비스를 요청할 때마다 세션 저장소에서 세션을 조회하고 작업을 처리하는 방식이다.

서버 측에 { 유저의 아이디, 로그인 날짜, 유효기간, session id } 등의 유저의 정보를 저장하고, 식별자(Session ID)값을 클라이언트 쿠키에 남겨둔 후 사용자 상태를 유지하기 위해 세션 식별자(Session ID)를 사용합니다. 이러한 장점은 매번 GET/POST 요청할 때 마다 DB를 조회해 보기 때문에 하나하나의 요청마다 엄격하게 유저를 체크해볼 수 있고, 세션 ID값만 가지고 접근할 수 있고 저장하기 때문에 접근이 매우 용이하다.

단점은 그만큼 DB의 부담이 심해질 수 있고, 모든 서버끼리 같은 세션을 공유하여야 하므로 확장성 문제도 있다.

token 방식

token 방식은 대부분 우리가 알고 있는 JWT방식 이다. JWT(JSON Web Token)

JWT는 사용자 정보를 JSON 객체에 담아 이를 암호화하고 해싱 작업을 거쳐 문자열 토큰을 생성하는 방식이다. 유저가 로그인하면 유저에게 입장권을 발급해 줄 때 입장권에 { 유저의 아이디, 로그인 날짜, 유효기간 } 등을 적어두고 암호화해서 보냅니다. 그리고 별 이상 없으면 통과시켜 준다. DB에 뭐 저장하거나 그런 건 없음.

장점은 매번 GET/POST 요청할 때마다 DB를 조회할 필요가 없어서 DB 부담이 적다.

단점은 누군가 토큰을 빼간다면 토큰을 이용하여 권한을 수행할 수 있기 때문에 보안에 신경 쓸 필요가 있다. 그렇다고 매번 그 누군가를 잡아서 DB 같은 곳에 기록해 두고 조회해서 로그인시킨다면 이건 session 방식과 딱히 다른 점이 없다.

OAuth

OAuth는 입장권 같은 건 아니고 OAuth의 뜻은 유저의 A 사이트의 사용 권한을 B 사이트를 운영하는 내가 잠깐 빌릴 수 있는데 그 과정을 정의하는 규칙 같은 거다.

그래서 OAuth를 잘 이용하면 유저의 A 사이트 회원 정보를 가져와서 내가 운영하는 B 사이트 회원가입 시 사용할 수도 있고 이걸 흔히 소셜 로그인이라고도 부른다.

마무리

간단하게 session token OAuth방식을 알아봤는데 각자의 장단점이 있기 때문에 제작하고 있는 페이지와 유저를 고려한 뒤 적절하게 사용해서 기능을 구현해야 겠다. 다음 글은 Next-Auth (Auth.js) 라이브러리를 가지고 로그인 하는 방법을 가져올게요.

기본적으로 Next.js는 서버 컴포넌트를 사용한다. 이를 통해 추가 구성 없이 서버 렌더링을 자동으로 구현할 수 있으며, 필요할 때 클라이언트 컴포넌트 사용을 선택할 수 있다. 그래서 클라이언트 컴포넌트는 언제 사용하는가?🤔 같이 알아보자.

Server Component

• 페이지를 요청할 때마다 서버에서 해당 페이지의 HTML을 생성하여 클라이언트에게 전달한다.
• 검색 엔진 최적화(SEO)에 유리하며, 초기 로딩 시간이 짧은 사용자 경험을 제공한다.

Client Component

• 초기에는 서버에서 빈 페이지를 제공하고, 그 후에 자바스크립트가 실행되어 클라이언트에서 페이지를 렌더링한다.
  

Server Component와 Client Component 특징

Server Component

Next.js에서는 /app 디렉터리 내부에 컴포넌트를 만들면, 디폴트로 Server Component가 된다.

• 모든 컴포넌트는 Server Component가 디폴트이다. 따라서 Client Component로 사용하고 싶다면, 'use Client' 를 입력해주면 된다.
• 자바스크립트 번들 감소
• Hydration 과정이 없다. (정적인 HTML 요소들에 JS 코드들이 결합되며 버튼 클릭에 따른 이벤트 처리 등이 가능한 것)
• Event Listener(onClick 등) 사용 불가
• React Hooks(useEffect 등)사용 불가
• Client Component 사용 불가
• async 함수로 정의 가능
  

*Client Component *

Client Component를 정의하기 위해서는 컴포넌트 파일 최상단에 'use client'를 추가해 주면 된다.

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

장점 : html 안에 자바스크립트 마음대로 넣어서 기능 개발 가능 단점 : 자바스크립트로 인해 페이지 용량도 커지고 로딩 속도도 느려질 수 있다.

특히 client component를 로드하려면 hydration이라는 과정을 거치게 되는데 html을 로드하고 나서 거기에 리액트 문법을 적용하기 위해 컴퓨터가 html을 읽고 분석하는 과정이 필요한데 그걸 hydration이라고 부른다.

hydration이란?

Server-Side에서 렌더링 된 정적 페이지(HTML)와 번들링 된 JS 파일을 클라이언트에게 보내면, Client-Side에서 HTML 코드와 JS(React) 코드를 서로 매칭시키는 과정

hydration 과정을 이해하려면 next.js렌더링 방식을 정확히 이해하고 있어야 한다. 렌더링 방식은 다음에 알아보자.

Server Component, Client Component 언제 사용할까?

이표는 Server Component와 Client Component의 다른 사용 사례를 요약

참고

• https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns (공식문서)
• https://curryyou.tistory.com/539

Next.Js 공부하면서 다양한 페이지 이동 방법을 이용해 코드를 작성해 봤다. 잊어버리기 전에 정리해보자. 오늘은 우선 Link컴포넌트와 useRouter 방식을 알아보자.

Link

<Link>은 HTML <a> 요소를 확장하여 prefetching과 클라이언트 측 라우트 간 탐색을 제공하는 React 컴포넌트이다.

import Link from "next/link";
import DetailLink from "./DetailLink";

  return (
    <div className="list-bg">
      {result.map((a, i) => (
        <div className="list-item" key={i}>
          <Link href={"/이동할 경로/" + result[i]._id}>
            <h4>{result[i].title}</h4>
          </Link>
          <p>1월 1일</p>
        </div>
      ))}
    </div>
  );
}

위에 코드처럼 href에 이동하고자 하는 경로를 입력하면 라우터로 이동한다.

Link 컴포넌트의 구성요소

• href : href="/이동할 경로”
• replace : replace={false} 기본값은 false 이며 브라우저 기록 에 새 URL을 추가하는 대신 현재 기록 상태를 대처한다.
• scroll : scroll={false} 기본값은 true 이며 <Link>새 경로의 맨 위로 스크롤하거나 앞뒤 탐색을 위해 스크롤 위치를 유지하는 것이다.
• prefetch : prefetch={false} 전체 경로와 해당 데이터가 미리 가져온다. (아래에서 자세히 알아보자.)

useRouter

next.js에서 제공하는 useRouter 훅을 이용하면 클라이언트 컴포넌트 내에서 사용할 수 있다. 하지만 특별한 요구사항이 없다면 Link컴포넌트를 사용하는 것이 권장된다.

'use client'

import {useRouter} from 'next/navigation'

export default function DetailLink(){
  let router = useRouter()
  return (
    <button onClick={()=>{ router.push('이동할경로') }}>버튼</button>
  )
}

위에 코드 처럼 useRouter 훅을 사용하여 라우터 객체를 얻고, 이를 통해 클라이언트 사이드에서 라우트를 변경할 수 있다. router.push 메서드 안에 ‘이동할경로’를 적어준다.

import Link from "next/link";
import DetailLink from "./DetailLink";

  return (
    <div className="list-bg">
      {result.map((a, i) => (
        <div className="list-item" key={i}>
          <Link href={"/이동할 경로/" + result[i]._id}>
            <h4>{result[i].title}</h4>
          </Link>
          <DetailLink />
          <p>1월 1일</p>
        </div>
      ))}
    </div>
  );
}

위에 코드처럼 server component에서 useRouter를 사용하고 싶으면 따로 client component(<DetailLink />)를 만들어서 server component에 import하는 방식으로 사용해야 한다.
router.push뿐만 아니라 useRouter에는 다양한 메서드를 이용해 내비게이션 작업을 수행할 수 있다. 같이 알아보자.

• router.push(href: string, { scroll: boolean }): 주어진 라우트로 클라이언트 측 네비게이션을 수행합니다. 브라우저의 히스토리 스택에 새 항목을 추가합니다.
• router.replace(href: string, { scroll: boolean }): 브라우저의 히스토리 스택에 새 항목을 추가하지 않고 주어진 라우트로 클라이언트 측 네비게이션을 수행합니다.
• router.refresh(): 현재 라우트를 새로고침합니다. 서버에 새로운 요청을 보내고 데이터 요청을 다시 가져오며 서버 컴포넌트를 다시 렌더링합니다. 클라이언트는 업데이트된 React 서버 컴포넌트 페이로드를 유지하면서 영향받지 않은 클라이언트 측 React (예: useState) 또는 브라우저 상태 (예: 스크롤 위치)를 재병합합니다.
• router.prefetch(href: string): 주어진 라우트를 미리 가져와 더 빠른 클라이언트 측 전환을 위한 작업을 수행합니다.
• router.back(): 브라우저의 히스토리 스택에서 이전 라우트로 이동합니다.
• router.forward(): 브라우저의 히스토리 스택에서 다음 페이지로 이동합니다.
  

prefetch

위에 있는 메서드 중 Link컴포넌트와 useRouter 둘 다 갖고있는 prefetch속성 기능에 대해 알아보자.

Link

<Link href={'/이동할 경로'} prefetch>링크</Link>

-------------------------------------------------------

<Link href={'/이동할 경로'} prefetch={false}>링크</Link>

• Link 컴포넌트는 기본적으로 prefetch 이 활성화 되어 있기 때문에 사용자가 실제로 그 페이지로 이동하기 전에 미리 가져오는 작업을 하고, 이렇게 하면 웹페이지 로딩과 렌더링 속도가 모두 빨라진다.
• prefetch 은 기본적으로 true로 활성화 되어 있기 때문에 기능을 사용하고 싶지 않으면 prefetch속성을 false로 바꿔줘야 한다.
  

useRouter

<button onClick={()=>{ router.prefetch('/이동할 경로') }}>버튼</button>

• useRouter도 prefetch 를 사용하면 미리 가져오는 작업을 해줘서 사용자가 해당 페이지로 이동할 때 더 빠르게 로딩된다.

참고

<next.js 공식문서> https://nextjs.org/docs/app/api-reference/components/link https://nextjs.org/docs/app/api-reference/functions/use-router https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching <코딩애플> https://codingapple.com/course/next-js/

문제 설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요.

제한사항 1 ≤ left ≤ right ≤ 1,000

💡문제이해

• 주어진 left, right 범위 내의 모든 숫자 약수의 개수 구하기
• 약수의 개수가 짝이면 더하고, 홀수면 뺀다.

💻코드작성

나의 풀이

function solution(left, right) {
    var answer = 0;
    for (let num = left; num <= right; num++) {
        let divisorsCount = 0; 

        // 약수의 개수 구하기
        for(let i = 1; i <= num; i++) {
            if(num % i === 0) {
                divisorsCount++;
            }
        }

        // 약수의 개수가 짝이면 더하고, 홀수면 뺀다.
        if(divisorsCount % 2 === 0) {
            answer += num;
        }else {
            answer -= num;
        }
    }
    return answer;
}

다른 풀이

function solution(left, right) {
    var answer = 0;
    for (let i = left; i <= right; i++) {
        if (Number.isInteger(Math.sqrt(i))) {
            answer -= i;
        } else {
            answer += i;
        }
    }
    return answer;
}

😄정리

약수의 개수를 직접 구했는데 이 풀이는 약수의 개수를 직접 계산하지 않고, 각 숫자의 제곱근을 이용하여 약수의 개수가 짝수인지 홀수인지를 판별하는 방식으로 문제를 해결했다. Math.sqrt() 문법으로 제곱근을 구한 뒤 Number.isInteger() 문법을 사용하여 정수를 구별해 주고 제곱근이 정수인 경우 빼주고, 정수가 아닌 경우에는 더해 줬다. 기억하자 제곱근이 정수면 약수의 개수는 홀수다...✍️

문제 설명 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.

재한사항 s는 길이가 1 이상, 100이하인 스트링입니다.

💡문제이해

• middleIndex: 문자열의 중앙 인덱스를 계산합니다. Math.floor 함수를 사용하여 소수점 이하를 버린다.
• 문자열의 길이가 짝수이면, 중앙의 두 글자를 반환한다. slice 함수를 사용하여 시작 인덱스부터 종료 인덱스 전까지의 부분 문자열을 추출한다.
• 문자열의 길이가 홀수이면, 중앙의 한 글자를 반환한다. charAt 함수를 사용하여 특정 인덱스의 문자를 가져온다.

💻코드작성

function solution(s) {
    const length = s.length;
    const middleIndex = Math.floor(length / 2);

    if(length % 2 === 0) {
        return s.slice(middleIndex -1, middleIndex + 1);
    } else {
        return s.charAt(middleIndex);
    }
}

원시 타입

• 변경 불가능한 값
• 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다.

객체 타입

• 객체(참조) 변경 가능한 값
• 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.

얕은 복사, 깊은 복사

객체를 프로퍼티 값으로 갖는 객체의 경우 얕은 복사는 한 단계까지만 복사하는 것을 말하고 깊은 복사는 객체에 중되어 있는 개체까지 모두 복사하는 것을 말한다.

📄예시를 통해 알아보자!

얕은 복사(Shallow Copy) 얕은 복사란 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말한다. 객체 안에 객체가 있을 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있다면 이를 얕은 복사라고 한다.

const arr = [{ j: 'k' }, { l: 'm' }];
const shallowCopy = [...arry]; // 스프레드 문법
console.log(arr === shallowCopy); // false
console.log(arr[0] === shallowCopy[0]); // true

• arr 배열에는 두 개의 객체를 포함하고 있고, 스프레드 문법을 사용하여 arr을 복사하여 shallowCopy 배열을 만들었다.
• 원본 배열과 복사된 배열을 비교했을 때 얕은 복사를 통해 새로운 배열이 생성되었으므로 두 배열은 서로 다른 객체이기 때문에 false가 출력 된다.
• 하지만 배열 내부의 객체들은 얕은 복사를 통해 참조값이 복사되었기 때문에, 두 배열의 첫 번째 요소는 같은 객체를 참조하고 있습니다. 따라서 이 비교는 true를 출력한다.

요약하자면, 얕은 복사를 통해 배열을 복사하면 배열 자체는 새로운 객체가 되지만 내부의 객체들은 여전히 원본과 동일한 참조를 유지한다.

깊은복사(Deep Copy) 깊은 복사된 객체는 객체 안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어지고 복사를 해온다.

const reference = arr; // 참조
const deepCopy = JSON.parse(JSON.stringify(arr)); // 깊은 복사

console.log(arr === reference); // true
console.log(arr === deepCopy); // false
console.log(arr[0] === deepCopy[0]); // false

• reference라는 변수에 arr을 할당하고 이는 단순히 참조를 복사하는 것이다.
• JSON.stringify()를 사용하여 객체나 배열을 문자열로 변환하고, 그 문자열을 다시 JSON.parse()를 사용하여 새로운 객체나 배열로 변환하는 방법을 사용하여 깊은 복사를 했다. 이러한 방법은 간단하게 모든 객체나 배열을 문자열로 변환하고 다시 파싱하는 것으로, 원본과는 별개의 객체를 생성한다.
• arr과 reference는 동일한 배열을 가리키기 때문에 true가 출력됩니다.
• arr과 deepCopy는 서로 다른 객체이기 때문에 false가 출력됩니다.
• arr과 deepCopy의 첫 번째 요소도 서로 다른 객체이기 때문에 false가 출력된다.

마무리

얕은 복사(Shallow Copy)는 객체를 복사할 때 원본 객체의 프로퍼티들을 새로운 객체로 복사하지만, 프로퍼티 값이 객체인 경우 해당 객체는 참조로 유지되어 두 객체가 같은 객체를 가리키게 된다. 이에 반해 깊은 복사(Deep Copy)는 객체를 복사할 때 내부 객체까지 재귀적으로 복사하여, 원본과는 독립적인 새로운 객체를 생성합니다. 따라서 얕은 복사는 내부 객체의 변경이 복사된 객체에도 영향을 미칠 수 있지만, 깊은 복사는 내부 객체의 변경이 영향을 미치지 않는다. 따라서 상황에 맞게 적절히 활용해야 할 것이다.

1, 2주차 회고록 (GIT, HTML, CSS, 스프린트회고)

느낀점

멋사 프론트엔드 스쿨은 비대면 수업으로 진행된다. 생각보다 정신없던 이주였다. 일단 비대면으로 듣는 게 처음이라 적응하는 데 꽤 걸렸다. 현장에서만 느낄 수 있는 느낌 동기부여 등들이 있는데 못 느껴서 아쉽지만 온라인 안에서도 서로 도와주고 이끌어 나가는 관경을 보고 비대면 수업도 괜찮다는 생각을 했다.

배운것들

1주 차에는 현업에서 가장 중요한 코드 관리! git을 배웠다. git 이란 소스 코드를 효율적으로 관리하기 위해 만들어진 "분산형 버전 관리 시스템"이다. git을 이용하는 방식은 두 가지인데 첫 번째 방식은 GUI 방식이고 두 번째는 CLI 방식이다. 항상 git을 push 할 때 GUI 방식을 이용하여 레파지토리에 올렸는데 CLI 방식을 배우고 나선 git과 더 친해지기 위해 CLI 방식을 이용하여 git 관리를 하고 있는 중이다.

1. 터미널에 명령어를 이용하는 CLI 방식
2. 소스 트리 등의 프로그램을 사용하는 GUI 방식

2주 차에는 본격적으로 마크업 구조와 css 스타일을 공부하였다. 마크업을 할 땐 웹 접근성을 항상 고려해야 하고, 장애를 가진 사람들이 스크린 리더기를 사용하는 등 여러 가지 방법으로 웹에 쉽게 접근할 수 있도록 구조를 설계해야 한다. css는 아직 더 배우는 중이지만 알고 있던 속성보다 더 다양한 속성들을 배워서 생각보다 공부할게 많다.(얼른 복습하자...)

개선할점

생각보다 게으른 2주를 보냈다. 파이팅 넘치는 동기들을 보니 나도 공부를 해야겠다는 생각이 들어서 회고록부터 작성하기 시작했다. 이번 주부터 배웠던 것들을 정리하면서 마무리해야 마지막까지 지치지 않고 수료할 것 같다.

목표

3주차 목표 - css flexbox와 position속성에 익숙해져 보기.

git과 github를 모르면 취업 못합니다. 얘기를 듣고 호다닥 공부했습니다.

Git이란?

소스 코드를 효율적으로 관리하기 위해 만들어진 버전관리소프트웨어이다.

git 장점

• 작업한 코드들을 기록하고 보관이 가능하다.
• 특정 시점에 저장된 버전과 비교하거나 특정 시점으로 되돌아갈 수 있습니다.

git 저장소 생성 [git init]

git init

• 새로운 git 저장소를 생성할 때 사용하는 git 명령어 이다.
• "git init" 명령어 실행

git status

git status

• 파일 상태 확인 명령어 이다.

git 용어 정리

• staging area : commit 할 파일 골라놈
• local repository : 기록 저장소에 옮김

더 공부하면서 채워 나가겠습니다.