뭉균의 개발일지

🚪 들어가며 프로젝트 진행 중 백엔드(서버)에서 토큰 값을 넘겨줄 때, 프론트엔드에서 토큰의 저장 방식을 결정해야 하는 상황이 발생했습니다. 이 경우에 쿠키 또는 로컬 스토리지에 토큰을 보관해야하는데 각각 어떤 상황에 사용해야하는 지 의문이 생겨 해당 부분을 공부하게 되었고 공부한 내용을 정리하기위해 이번 포스팅을 작성했습니다🖥️  📚 쿠키와 로컬 스토리지가 무엇인가? 🍪 쿠키(Cookie) 쿠키는 웹 서버에서 클라이언트(사용자의 브라우저)에 저장하는 작은 데이터 파일입니다. 웹사이트를 방문할 때 특정 정보를 클라이언트에 저장해두고, 이후 재방문 시 이 정보를 활용하여 사용자 경험을 맞춤화하거나 사용자의 로그인 상태를 유지하는 용도로 사용됩니다. 쿠키는 브라우저에 저장되며, 서버와 클라이언트 간의..

🚪 들어가며    JavaScript에서 화살표 함수는 ES6(ECMAScript 2015)에서 새롭게 도입된 기능입니다. 화살표 함수는 간결한 문법으로 함수 표현식을 작성할 수 있게 해주며, 특히 this 바인딩 방식에서 기존의 일반 함수와 중요한 차이가 있습니다. 이 외에도 다양한 특징들을 일반함수와 비교하여 알아보겠습니다. 해당 포스팅에서 등장하는 예시코드는 JavaScript로 작성했습니다.   📌 함수 선언 방식 일반 함수: 함수 선언식 또는 함수 표현식으로 정의할 수 있습니다.function regularFunction() {} // 함수 선언식 화살표 함수: 함수 표현식으로만 사용할 수 있습니다.const arrowFunction = () => {}; // 함수 표현식 여기서 등장하는..

🚪 들어가며 프론트엔드 개발을 하다보면 CORS 에러를 마주치는 순간들이 있습니다. 특히, 서버에게 API를 요청하는 과정에서 발생하기 쉽습니다. 이번 포스팅에서는 API를 요청하는 기술인 AJAX와 그 과정에서 발생할 수 있는 CORS에러에 대해 알아보겠습니다.  📌 AJAX란 무엇인가?AJAX(Asynchronous JavaScript and XML)는 웹 페이지를 새로고침(리렌더링)하지 않고 서버와 데이터를 주고받는 기술입니다. 비동기적인 방식으로 서버에 요청을 보내고, 그 응답을 받아서 페이지를 동적으로 갱신할 수 있습니다.AJAX의 동작은 XMLHttpRequest 객체나 최신 브라우저에서는 Fetch API를 통해 이루어집니다. 이 객체들은 웹 페이지가 새로고침 없이 서버에 HTTP 요청을..

✏️ 객체지향 프로그래밍이란?객체지향 프로그래밍(OOP, Object-Oriented Programming)은 프로그램을 객체(object)라는 단위로 구성하여 개발하는 방법론으로 현실 세계의 개념을 코드로 표현하고자 하는 접근법입니다. 객체는 데이터(속성, property)와 그 데이터에 작용하는 함수(메서드, method)를 하나로 묶은 단위입니다. OOP의 핵심은 코드의 재사용성, 유지보수성, 확장성을 높이는 데 있습니다. 📚 용어 정리객체지향 프로그래밍에서 주로 사용되는 용어를 정리하겠습니다.  객체(Object)현실 세계의 사물이나 개념을 프로그래밍적으로 표현한 것입니다. 객체는 속성과 행동을 가집니다. 예를 들어, '자동차'라는 객체는 '색상', '모델' 등의 속성과 '운전하다', '멈추다'..