Dev Log

토근 저장 방법 (HTTPOnly 쿠키 / localStorage)HTTPOnly 쿠키장점보안 클라이언트 측 스크립트(JavaScript)에서 접근할 수 없기 때문에 XSS(Cross-Site Scripting) 공격으로부터 보호된다자동 전송 요청을 보낼 때 브라우저가 자동으로 쿠키를 포함시켜 주기 때문에 개발자가 직접 토큰을 헤더에 추가할 필요가 없다SameSite 속성 쿠키의 SameSite 속성을 통해 CSRF(Cross-Site Request Forgery) 공격을 방지할 수 있다단점특정 도메인 제한 특정 도메인에만 저장되므로, 도메인 간에 토큰을 공유하기 어려울 수 있다localStorage장점간편함 데이터를 저장하고 불러오는 방법이 간단하다브라우저 전역 접근 동일한 도메인 내의 모든 탭과 창에..

Front/React 2025. 2. 9. 08:00

모달(Modal)과 팝업(Popup)Popup현재 열려있는 브라우저 페이지에 또 다른 브라우저 페이지를 띄우는 것Modal일반 팝업처럼 새로운 윈도우를 여는 것이 아닌 현재 윈도우의 레이어를 쌓아서 보여주는 형식의 팝업을 의미사용자의 이목을 끌기 위해 표현하는 화면 전환 기법화면 전환 보다는 이목을 집중해야 하는 화면을 다른 화면 위로 띄워 표현하는 방식중요한 정보 전달 혹은 사용자에게 작업에 대한 내용 확인팝업처럼 새로운 창을 띄우는 게 아니라, 기존 열려있는 브라우저 위에 레이어 깔기기존 브라우저와 부모-자식 형태의 관계모달 창을 사라지게하려면 반드시 특정 선택을 해야 함.⇒ 다음 단계로 나아가기 위해 필요한 창브라우저 옵션에 영향을 받지 않음공통점특정 영역 위치에 원하는 사이즈로 별도의 레이어를 만..

Front/React 2025. 2. 8. 08:00

fetch, axios 기본 개념기본 제공 여부Fetch: 브라우저에 내장된 JavaScript API로 별도의 설치가 필요 없다.Axios: 외부 라이브러리로 사용하기 전에 설치가 필요하다npm install axios 기능 차이 Fetch기본적인 HTTP 요청만 제공요청과 응답 처리 시 JSON 변환 등을 수동으로 처리해야 함요청 타임아웃, 응답 데이터 변환 등의 고급 기능은 직접 구현해야 함fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .th..

Front/React 2025. 2. 7. 13:47

Routing라우팅은 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다. 조금 풀어서 얘기하면, 다양한 주소의 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜 주는 작업이라고 볼 수 있다.React는 SPA(Single Page Application)로 구성되어 있기 때문에 경로가 변경된다고 페이지가 갈아 끼워지는 게 아닌, 컴포넌트가 갈아 끼워지게 된다.React는 프레임워크가 아닌 라이브러리이므로 vue나 angular처럼 내장 라우팅을 지원하지 않는다. 따라서, Router 라이브러리를 별도로 설치해 사용해야 한다.React-Router-DomReact 애플리케이션에서 페이지를 탐색할 수 있도록 도와주는 라이브러리 특징SPA 라우팅 React 애플리케이션은 보통 하나의 HTML 페이지에서 ..

Front/React 2025. 2. 6. 14:43

React Hook의 등장배경리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 함수형 컴포넌트에 Hook이 나오기 전까지는, 일반적으로 클래스형 컴포넌트를 많이 사용했다. 하지만 클래스형 컴포넌트에서 상태(state)를 사용하고, 생명주기 메서드를 사용하는 방식은 많은 문제들과 불편함을 가지고 있었다.  React Hook은 클래스형 컴포넌트의 단점을 보완하여, 함수형 컴포넌트를 사용할 수 있도록 한다. React Hook리액트 16.8 버전에 새로 도입된 기능으로, 함수형 컴포넌트에서 사용되는 몇 가지 기술들을 일컫는다.  리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주며 대표적인 예로는 useState, useEffect 등이 존재한다. React Hoo..

Front/React 2025. 2. 5. 14:03

CORS란웹 브라우저에서는 보안상의 이유로, 다른 출처(origin)에서 자원을 요청하는 경우 제한한다.이것을 **SOP(Same Origin Policy)** 동일 출처 정책이라 한다. 즉, 동일 출처(Same-Origin) 서버에 있는 리소스는 자유로이 가져올 수 있지만, 다른 출처(Cross-Origin) 서버의 리소스는 상호작용이 불가능하다는 말이다.Cross-Origin Resource Sharing직역하면 "교차 출처 리소스 공유 정책"이라고 해석할 수 있는데, 여기서 교차 출처라고 하는 것은 (엇갈린) 다른 출처를 의미하는 것으로 보면 된다. ’서로 다른 출처에서 리소스를 공유하는 것’을 뜻한다. 출처(Origin) 란?출처(Origin)라는 것은 Protolcol과 Host 그리고 Port..

Front/React 2025. 1. 31. 20:28

Node.js 설치Node.js 설치https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org원하는 Node.js 버전을 선택하여 설치한다.설치 확인node -vnpm -vReact Project 생성프로젝트 생성npx create-react-app [프로젝트명]생성한 react app을 실행cd [프로젝트명]npm start  Can’t resolve ‘web-vitals’ Error 조치방법더보기 web-vitals 설치 후 재실행npm i web-vitals --save-devVS Code로 React Project..

Front/React 2025. 1. 30. 16:55

React란?React는 Facebook에 의해 출시되었고 현재까지 꾸준한 인기를 누리고 있다.Facebook은 매우 복잡한 사용자 인터페이스를 가지고 있으며, 수많은 컴포넌트로 구성되어 있다.기존의 방식보다 빠른 UI 렌더링과 반응성 등 페이스북의 성능 요구사항을 충족시키기 위해 React를 만들었다.리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.출처 : 위키백과React가 개발된 이유 웹 개발이 복잡해짐에 따라 HTML, CSS, Javascript만으로는 한계가 생기게 되었다.이후 Web 개발을 위한 프론트엔드 라이브러리로 DOM조작을 쉽게 해 주는 jQuery 라이브러리가 주로 사용되었다. jQuery를 사용하..

Front/React 2025. 1. 23. 15:29