한발두발개발자

CORS는 브라우저가 보안 때문에 다른 도메인(출처) 간 리소스 요청을 제한하는 정책이야. 서버에서 CORS 설정 제대로 안 하면 브라우저가 요청 막아서 "CORS 에러"가 뜨지. 이 글에선 CORS 에러 원인과 해결 방법을 정리CORS 에러의 원인Access-Control-Allow-Origin 헤더 누락이나 설정 오류서버가 Access-Control-Allow-Origin 헤더를 응답에 포함 안 하거나 잘못 설정하면 발생함.프리플라이트(OPTIONS) 요청 설정 오류CORS는 HTTP OPTIONS 요청으로 서버가 요청 허용하는지 확인해. 이 설정 제대로 안 하면 에러가 남.인증과 쿠키 관련 문제인증 정보나 쿠키 포함된 요청 보낼 때, Access-Control-Allow-Credentials 헤더 ..

소개Vue.js로 개발하다 보면, 컴포넌트 이름이 단일 단어일 경우 ESLint에서 다음과 같은 에러가 발생할 수 있습니다:"Component name ~ should always be multi-word."이는 Vue의 공식 스타일 가이드에 따라, 컴포넌트 이름을 두 단어 이상의 조합으로 작성하도록 권장하기 때문입니다. 하지만 특정 상황에서는 이 규칙을 무시하거나 비활성화해야 할 필요가 있을 수 있습니다.이 글에서는 vue/multi-word-component-names 규칙을 비활성화하거나 무시하는 다양한 방법을 정리했습니다.또한, 이 규칙의 존재 이유와, 개발 상황에 맞게 이를 활용하는 방법까지 자세히 다룹니다.Vue.js ESLint "Component name ~ should always be ..

DOM이란 무엇인가?DOM은 Document Object Model의 약자로, 웹 페이지의 HTML이나 XML 문서를 트리 구조의 객체로 표현한 모델입니다. 브라우저는 HTML 문서를 로드한 후 이를 파싱하여 메모리에 적재하고, 이 구조를 통해 웹 페이지의 내용과 스타일을 동적으로 수정할 수 있게 해줍니다. DOM을 사용하면 웹 페이지의 요소를 자바스크립트로 조작하여 페이지를 실시간으로 변경할 수 있습니다.DOM의 구조: 트리 형식의 객체 모델DOM은 트리 구조로 표현됩니다. 이 트리의 최상위 노드는 요소이며, 그 아래로 , , , 등 다양한 HTML 요소들이 계층적인 관계를 형성합니다. 각 HTML 요소는 노드(Node)라는 객체로 변환되어 트리 구조에 배치됩니다.HTML 요소는 DOM 트리에서 엘..

MVC (Model-View-Controller) 패턴은 웹 애플리케이션의 구조를 명확하게 분리하여 개발할 수 있게 도와주는 중요한 소프트웨어 디자인 패턴입니다. 이 패턴은 애플리케이션을 모델(Model), 뷰(View), 그리고 컨트롤러(Controller) 세 부분으로 나눕니다. 이 구분을 통해 애플리케이션의 유지보수성을 높이고, 개발 과정에서의 역할 분담을 명확하게 할 수 있습니다. 1. 사용자 요청 처리웹 애플리케이션 사용 시, 사용자는 특정 작업을 요청합니다. 예를 들어, 로그인 페이지를 요청할 수 있습니다. 이 요청은 DispatcherServlet을 통해 들어오며, 이는 Spring 프레임워크의 중심 컴포넌트로 모든 요청의 진입점 역할을 합니다.2. 적절한 컨트롤러 선택DispatcherSe..

리액트 개발 환경을 처음  구축하는 과정에서저와 같은  초보자는  다소 복잡하게 느껴질 수 있다고 생각했습니다.본 가이드는 리액트 프로젝트를 처음 시작할 때 필요한 초기 설정을 단계별로 설명하겠습니다. 1. Node.js와 npm 설치Node.js는 자바스크립트를 브라우저 밖에서 실행할 수 있게 해주는 환경입니다. 리액트 애플리케이션은 웹 브라우저에서 실행되지만, 개발 도구들이 Node.js를 필요로 하기 때문에 설치가 필요합니다.Node.js 설치 방법:Node.js 홈페이지에서 LTS(Long Term Support) 버전을 다운로드합니다. LTS 버전은 안정성이 검증되어 오류 가능성이 낮습니다.설치 후 터미널에서 node -v를 입력하여 버전 확인을 통해 설치가 정상적으로 완료되었는지 검증합니다.n..

React에서 API 데이터 불러오기: 실전 가이드React 애플리케이션에서 데이터를 불러와서 화면에 표시하는 것은 매우 중요한 작업 중 하나입니다.여기서는 fetch API를 사용하여 데이터를 불러오고, 이를 상태로 관리하는 방법을 설명합니다.예제로 사용할 코드는 jsonplaceholder.typicode.com에서 댓글 데이터를 불러오는 것입니다. import React, { useEffect, useState, useRef } from 'react';const App = () => { const [data, setData] = useState([]); const dataId = useRef(1); const getData = async () => { const res = await fe..

인터넷: 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미를 가진 INternational Network의 약자입니다. 웹(Web)이란?: 월드 와이드 웹(World Wide Web)이란, 인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 것을 말합니다. 간단하게 WWW, W3로 불립니다. 웹(Web)의 시작: 1980년대 어느 날, 스위스의 한 유럽 입자 물리 연구소의 컴퓨터 과학자 팀 버너스-리에에 의해 탄생하였으며, 연구원들 간 신속한 정보교환을 위해 고안되었습니다. 웹(Web)의 특징: 정보를 하이퍼텍스트 형식으로 표현하여, 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보/문서들을 연결하여 제공합니다. 웹 브라우저(Web browser)란?: 웹을 찾거나 읽을 때 사용하는..