로컬스토리지(LocalStorage), 세션스토리지(SessionStorage), 쿠키(Cookie)의 차이점

웹 애플리케이션을 개발하다 보면 클라이언트 측에 데이터를 저장할 필요가 생긴다. 대표적으로 사용되는 기술이 LocalStorage, SessionStorage, Cookie이다. 이 글에서는 각 저장 방식의 특징과 차이점, 그리고 언제 어떤 걸 쓰는 게 좋은지에 대해 정리해본다. 1. LocalStorage브라우저에 영구적으로 데이터를 저장할 수 있는 방법 -> 내 브라우저 안의 보관함용량: 약 5~10MB (브라우저마다 다름)만료 시점: 사용자가 명시적으로 삭제하지 않는 한 영구 저장브라우저/탭 간 공유: 동일 출처(origin) 내에서는 모든 탭/창에서 공유HTTP 요청에 포함: ❌ 포함되지 않음API: localStorage.setItem(key, value) / localStorage.getIte..

• format_list_bulleted 코딩/Web
• · 2025. 7. 23.
• textsms

null과 undefined의 차이

코딩을 하다보면 null과 undefined를 잘 사용했지만 문득 누군가 나에게 물어봤을때 문장으로 이야기 할 수 있을까라는 생각에 자신감이 떨어지는 모습을 보고 정리해보고자 한다.! null과 undefined란?JavaScript에서 null과 undefined는 모두 "값이 없음"을 나타내지만, 의미와 사용 목적이 다르다.아래 표를 보고 자세히 비교해보자. 구분nullundefined정의값이 할당되지 않은 상태의도적으로 값이 비어있음(null) 을 명시타입undefined (자체 타입)object (초기 JS 설계 오류로 object로 나온다)자동 생성 여부변수 선언만 했지만 값을 주지 않으면 자동으로 됨명시적으로 개발자가 할당해야 함사용 예시초기화되지 않은 변수, 없는 속성 접근 결과변수에 "값 ..

• format_list_bulleted 코딩/Web
• · 2025. 6. 4.
• textsms

Transpiling(트랜스파일링) - JavaScript

transpiling이란? transpiling이란 transpile = translate + compile의 합성어로, 한 프로그래밍 언어의 코드를 다른 언어로 변환하는 과정을 의미한다. 즉, 같은 수준의 추상화(같은 레벨의 언어)에서 코드 변환을 하는 프로세스인 것이다.예시로 JavaScript → 다른 버전의 JavaScript 또는 TypeScript → JavaScript가 있다. 그렇다면 왜 transpiling이 필요한지 알아보자. transpiling이 필요한 이유브라우저/환경 호환성 문제 해결 : 프로그래밍 언어, 특히 JavaScript는 지속적으로 새로운 기능과 문법이 추가되지만,모든 브라우저와 실행 환경이 이 새로운 기능을 즉시 지원하지는 못한다. 하지만 사용자가 구형 브라우저를..

• format_list_bulleted 코딩/Web
• · 2025. 5. 10.
• textsms

TypeScript에서 type vs interface 무엇이 다를까?

type과 interface는 모두 객체의 형태(shape) 를 정의하는 데 사용된다. 하지만 겉보기에는 비슷하지만, 확장성, 유연성, 표현력에서 차이가 있다. 같이 알아보자 1. 기본 문법 비교- 선언하는 방식은 아래와 같고 둘 다 동일하게 작동한다.// interface 선언interface Person { name: string; age: number;}// type 선언type Person = { name: string; age: number;}; 2. 확장(확장성) 방식의 차이// interface는 extends로 확장이 가능하다.interface Animal { name: string;}interface Dog extends Animal { breed: string;}// typ..

• format_list_bulleted 코딩/TypeScript
• · 2025. 4. 20.
• textsms

[React] 공공데이터 포털 Open API 사용하기

Axios로 Spring과 연동 연습을 한 후 새로운 api 사용 방법에 대해 공부해 보았다. 2023.07.18 - [코딩/React] - [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip Axios란? Axios는 JavaScript에서 HTTP 요청을 보내는 데 가장 많이 사용되는 라이브러리이다. 주로 웹 애플리케이션과 API를 통신하는 데 사용되는데, Axios는 HTTP 요청을 보내고 해당 작업이 완료되면 Pro quddkflty.tistory.com 이번 글에서는 공공데이터 포털에 있는 국가 Open Api를 사용하는 방법을 적어보고자 한다. 1. 원하는 공공 API 검색 공공데이터 포털에 회원 가입을 한 후..

• format_list_bulleted 코딩/React
• · 2023. 10. 16.
• textsms

[React] date-fns와 Style-Components로 커스텀하기 쉬운 달력 만들기(2편)

저번 1편에 이어서 2편으로 date-fns와 Style-Components로 커스텀 달력 편을 마무리 하고자 합니다! 2023.07.06 - [코딩/Javascript] - [React] date-fns와 style-components로 커스텀 달력 만들기(1편) [React] date-fns와 style-components로 커스텀 달력 만들기(1편) 올해 새로운 프로젝트를 맡게 되면서 달력에 서버에 있는 데이터를 보여줘야하는 기능을 구현하게 되었다. 다양한 라이브러리가 있었지만 디자이너의 요구에 맞는 달력을 제작하기가 어려워 da quddkflty.tistory.com 커스텀 달력 만들기 이제 date-fns에 대한 이해도가 어느 정도 생겼다는 가정하에 글을 쓰도록 하겠다. 1. Date-fns 라..

• format_list_bulleted 코딩/React
• · 2023. 7. 6.
• textsms