타마

백엔드 & 프론트엔드 오류 코드 프론트엔드 개발자라면 한 번쯤 마주치는 그 빨간 에러 메시지들. 오늘은 HTTP 상태 코드별로 왜 발생하는지, 어떻게 해결하는지 정리해본다.들어가며서버와 클라이언트가 통신하는 한, 에러는 피할 수 없다. 중요한 건 에러가 났을 때 누구의 문제인지 빠르게 판단하고, 어떻게 해결할지 아는 것이다.이 글에서는 HTTP 상태 코드를 기준으로 백엔드 측 오류와 프론트엔드 측 오류를 나눠서 정리하고, 실제 코드 예시와 함께 해결 방법을 살펴본다.1. 백엔드 측 오류 (4xx, 5xx)🔸 400 Bad Request — 잘못된 요청발생 원인가장 흔한 케이스는 클라이언트가 보낸 데이터에 문제가 있을 때다.필수 파라미터 누락데이터 타입 불일치 (예: Number를 받아야 하는데 Stri..

1. TypeScript1.1. 정의TypeScript는 JavaScript를 확장한 정적 타입 언어다. JavaScript의 모든 문법을 포함하면서, 변수·매개변수·반환값에 타입을 명시할 수 있는 기능을 추가한다. 작성된 TypeScript 코드는 컴파일러를 거쳐 JavaScript로 변환되며, 변환된 코드는 브라우저 또는 Node.js 환경에서 실행된다.1.2. 왜 JavaScript에 타입이 필요한가JavaScript는 변수에 어떤 타입의 값이든 자유롭게 담을 수 있다. 이는 내용물을 표시하지 않은 상자에 비유할 수 있다. 상자 안의 값이 무엇인지 확인하려면 코드를 직접 실행해보거나 문서를 일일이 확인해야 한다. 프로젝트 규모가 커질수록 이 비용은 기하급수적으로 증가한다.TypeScript는 상자 ..

리액트를 처음 배우면 이런 생각이 많이 든다.버튼을 누르면 화면이 왜 바뀌지?입력창에 글자를 치면 그 값은 어디에 저장되지?state랑 ref는 뭐가 다른 거지?DOM을 직접 만지면 안 된다는데, 그럼 언제 ref를 써야 하지?useEffect는 왜 필요한 거지?이번 글에서는 이 흐름을 이벤트 → State → Ref → Effect 순서로 아주 쉽게 정리해보려고 한다.이 순서대로 이해하면 리액트가 왜 그렇게 동작하는지 훨씬 잘 보인다.이벤트란?이벤트는 사용자와의 상호작용으로 일어난 사건이다.예를 들면 이런 것들이다.버튼 클릭입력 값 변경마우스 호버인풋 포커스창 크기 조절동영상 재생즉, 사용자가 화면에서 어떤 행동을 했을 때 발생하는 것이 이벤트다.쉽게 말하면“사용자가 뭔가 했다” = 이벤트가 발생했다이..

React 입문 — JSX · 컴포넌트 · CSS 스타일링이 글은 프론트엔드 개발 커리큘럼 Week 1 강의 내용을 정리한 글입니다.React란 무엇인가?React는 Meta(구 Facebook)가 만든 UI 라이브러리다. 웹 페이지의 화면(UI)을 만드는 데 특화되어 있으며, 핵심 특징은 다음과 같다.컴포넌트 기반 — UI를 독립적인 조각으로 나눠 관리Virtual DOM — 변경된 부분만 업데이트해서 성능이 뛰어남재사용성 — 한 번 만든 컴포넌트를 어디서든 재사용 가능Node.js 설치하기React 개발을 시작하려면 Node.js가 필요하다. nodejs.org에서 LTS 버전을 설치한 뒤 아래 명령어로 확인하자.node -vnpm -v버전 번호가 출력되면 설치 완료.첫 리액트 프로젝트 만들기 (Vi..

예외 처리 방식 const API_URL = `링크내용~~:generateContent?key=${GEMINI_API_KEY}`; try { const apiResponse = await fetch(API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents }), }); 개발을 할 때 오류가 많이 발생하는데 보통 자바스크립트는 에러가 발생해도 어디서 구체적으로 발생한 것인지 알기 어려울 때가 많아서예외 처리 구문을 사용하여 에러 발생 위치를 잡는다.Try/Catch 사용 방법try { 구문 } 안에 catch를 넣어서 try 블록에..

1. 백엔드 서버 구축하기 (Node.js & Express)React로 만든 프론트엔드 애플리케이션은 결국 데이터를 주고받거나 완성된 HTML 파일을 사용자에게 제공할 '서버'가 필요합니다.먼저 Node.js와 Express를 사용해 간단한 웹 서버를 만들어 보겠습니다.1단계: 개발 환경 준비Node.js 설치: 구글에서 'Node.js'를 검색하여 공식 사이트에서 LTS (Long Term Support) 버전을 다운로드하여 설치합니다. Node.js를 설치하면 패키지 관리 도구인 npm도 함께 설치됩니다.작업 폴더 생성: 프로젝트를 진행할 폴더를 하나 만듭니다. (예: my-project) 폴더 이름은 가급적 영어로 설정하는 것이 좋습니다.에디터로 열기: VS Code와 같은 코드 에디터로 방금 만..

1. 인라인 함수 함수 호출 시 발생하는 오버헤드를 줄이기 위해서 함수를 호출하는 대신 함수가 호출되는 곳마다 함수의 코드를 복사하여 넣어주는 특별한 함수#include using namespace std;// 홀수인지 판별하는 함수int odd(int x) { return (x % 2);}int main() { int sum = 0; // 1에서 10000까지의 홀수의 합 계산 for (int i = 1; i 함수 호출의 숨겨진 비용, 오버헤드for 루프 등에서 odd()와 같이 아주 작은 함수를 수만 번 호출하면, 실제 함수 내용이 실행되는 시간보다 함수를 호출하고 돌아오는 과정에 드는 부가적인 시간이 더 커지는 비효율이 발생합니다.문제점: 배보다 배꼽이 더 크다! ?..

1. React 개발환경 세팅 (with Vite)React를 시작하기 전에 먼저 개발 환경부터 준비해야 합니다.최근엔 Vite가 CRA(create-react-app)보다 훨씬 빠르고 효율적이라 많이 사용됩니다.✅ Node.js 설치공식 웹사이트: https://nodejs.org설치하면 npm도 함께 설치됩니다.npm: 자바스크립트 패키지(라이브러리)를 관리해주는 도구입니다.✅ 프로젝트 생성 순서# 1. 새 폴더 만들기mkdir my-react-blog# 2. 폴더로 이동cd my-react-blog# 3. Vite로 React 프로젝트 생성npm create vite@latest# 4. 프로젝트 이름 입력 (예: my-react-app)# 5. 프레임워크 선택 → React# 6. Variant 선..

🌱 자바스크립트 기초 개념 & 실습 정리✅ 1. 변수 (Variable)📘 개념값을 저장할 공간을 만드는 것let: 값을 나중에 바꿀 수 있음const: 한 번만 값을 지정 (변경 불가능)let name = "Mike";const AGE = 30;✅ 2. 자료형 (Data Type)📘 개념자바스크립트의 기본 자료형: 문자열, 숫자, 불린, 객체, 배열, undefined/nullconst name = "Jane";const age = 20;const isAdult = true;✅ 3. 문자열 다루기 & 템플릿 리터럴📘 개념백틱(`)과 ${변수} 사용const name = "Tom";const message = `Hello, my name is ${name}`;console.log(message);..

자바스크립트와 CSS 기초 개념 정리 💻프론트엔드 개발을 시작하면서 꼭 알아야 할 자바스크립트와 CSS 레이아웃(Flex/Grid), 그리고 Float에 대한 기초 개념을 간단한 예시와 함께 정리해봤습니다. 🧠 자바스크립트 기본 문법 document.getElementById('hello').innerHTML = '안녕';✔️ 코드해석document : 문서 (웹 페이지 전체)getElementById : id로 HTML 요소를 가져오는 선택자innerHTML : 요소 내부의 내용 (텍스트나 HTML) 을 바꾼다= : 대입 연산자 (오른쪽 값을 왼쪽에 넣음)'안녕' : 문자열은 작은따옴표(') 또는 큰따옴표(")로 감싼다🔍 영어 뜻만 잘 파악하면, 코드가 무슨 일을 하는지 쉽게 이해할 수 있어요!?..