Irene88

🔷 PWA란?**PWA(Progressive Web App)**는 웹 앱을 네이티브 앱처럼 보이고 작동하게 만드는 웹 기술이다. 즉, 웹사이트지만 스마트폰 홈 화면에 설치하고, 오프라인에서도 작동하게 만들 수 있다.🔹 PWA의 핵심 특징기능설명📶 오프라인 지원서비스 워커(Service Worker) 덕분에 오프라인에서도 작동 가능🏠 설치 가능홈 화면에 앱처럼 설치 가능 (웹 앱 설치 배너 등장)⚡ 빠른 로딩캐시를 이용해서 빠르게 로딩됨📱 앱 같은 UI네이티브 앱처럼 전체화면 모드로 실행 가능🔹 리액트 + Vite에서 PWA 적용하려면?PWA를 적용하려면 보통 다음과 같은 세 가지가 필요:manifest.json 파일service workerHTTPS 환경 (로컬에선 localhost만 가능) ..

🔗 Link란? React에서는 SPA(Single Page Application)를 구현할 때 브라우저의 기본 태그를 직접 사용하면 페이지 전체가 새로고침되어 상태가 초기화된다. 이를 피하기 위해 react-router-dom의 를 사용한다. ✅ 기본 사용법 //jsximport { Link } from 'react-router-dom';메인 페이지 to 속성: 이동할 URL 경로 (ex: /main, /about, /contact)내부의 텍스트나 태그는 클릭 가능한 링크처럼 동작 💡 예시: 페이지 이동 //jsxAbout 페이지로 이동→ 이걸 클릭하면 브라우저 주소는 /about으로 바뀌고, 해당 경로에 맞는 컴포넌트가 렌더링됩니다. 하지만 페이지 전체는 새로고침되지 않음. ✨ 비교: vs ..

useLocation() 훅은 React Router에서 제공하는 훅 중 하나로, **현재 위치(현재 URL 정보)**를 가져오는 데 사용된다. 이 훅을 사용하면 현재 경로, 쿼리 스트링, 해시값 등 다양한 URL 정보를 얻을 수 있다. ✅ 기본 개념useLocation()은 React Router v6에서 제공되며, react-router-dom에서 import해서 사용할 수 있다.import { useLocation } from 'react-router-dom'; 📌 반환값useLocation()은 아래와 같은 location 객체를 반환한다.{ pathname: "/about", search: "?name=kim", hash: "#top", state: null, key: "ac3df4"..

개발을 하다보면 API란 용어를 많이 접할것이고, 개발자 구인공고에도 자주 나오는 이야기가 RESTful API를 구축 할수 있는지 내용이 나오는데.. 이번에 좀 제대로 알아보자! ✅ 1. REST란?**REST (Representational State Transfer)**는웹에서 자원을 어떻게 잘 표현하고, 다루고, 전송할 것인지에 대한 아키텍처 스타일(설계 방식)쉽게 말하면: "웹 API를 만들 때 규칙을 잘 정해서, 누구나 예측 가능하고 일관성 있게 다룰 수 있도록 만들자"는 원칙✅ 2. RESTful API란?REST 원칙에 따라서 만든 API를 RESTful API라고 해. ✅ 3. RESTful API의 핵심 요소요소설명자원(Resource)URI로 표현됨. 예: /users, /produc..

리액트 프로젝트를 생성하다 보면 두가지 빌드 중에 어떤걸 할지 갈림길에 선다.나의 경우 국비수료때 했던 프로젝트는 yarn으로 했고, 작년 NextJS는 npm으로 진행했다. 🆚 npm vs yarn 요약비교항목npmyarn개발사Node.js 공식Meta(구 Facebook)속도예전엔 느림 (요즘은 개선됨)빠름 (캐싱, 병렬 처리 덕분)설치 명령npm installyarn패키지 추가npm install axiosyarn add axios버전 고정package-lock.jsonyarn.lock캐시 처리기본 캐시 있음더 강력하고 안정적인 캐시 시스템병렬 설치기본 설치자동 병렬 설치 (속도 ↑)Plug'n'Play❌✅ (Yarn v2 이상)모듈 중복 제거기본적으로 유지중복 제거 최적화 더 잘됨사용 편의성n..

✅ 서블릿(Servlet)이란?Servlet은 서버에서 실행되는 Java 프로그램사용자의 요청(HTTP 요청)을 받아서 처리하고, 그 결과(HTML, JSON 등)를 다시 사용자에게 돌려주는 역할을 한다. 🔄 JSP와 Servlet의 관계JSP는 HTML 중심 + Java 코드 포함Servlet은 Java 중심 + HTML 생성📌 JSP는 내부적으로 서블릿으로 변환되어 실행.즉, JSP 파일을 실행하면 실제로는 서버가 서블릿 코드로 변환 → 컴파일 → 실행해서 동작한다. 💡 Servlet 기본 구조import java.io.*;import javax.servlet.*;import javax.servlet.http.*;public class HelloServlet extends HttpServlet ..

솔직히 생명주기 라는 단어를 들었을때, 무슨 뜻인지 전혀 이해가 가지 않았다.지금도 이해가 가지 않는다.누군가 설명하라고 했을때, 설명할 자신이 없다.그래서 이 블로그에 남겨놓는다. 챗GPT한테 이 '생명주기'에 대해 개념을 물어보았다. **프로그래밍 언어에서 "생명주기(Lifecycle)"**라는 말은, **무언가(예: 변수, 객체, 프로세스 등)**가 "생겨나서(생성)" → "사용되다가" → "사라지는(소멸)" 과정을 뜻해. 즉, 어떤 것이 메모리에 존재하는 시간 범위를 말하는 것이다. 🔍 예시1. 변수의 생명주기지역변수(local variable): 함수 안에서 선언된 변수는 함수가 호출될 때 생성되고, 함수가 끝나면 자동으로 사라져(소멸).def my_func(): x = 10 # 여기..

리액트 Hooks는 함수형 컴포넌트에서 상태 관리나 생명주기 기능 등을 사용할 수 있게 해주는 기능. 이전에는 클래스 컴포넌트에서만 가능했던 것들을 함수형에서도 가능하게 해줘서 현대 리액트 개발의 중심이라고 할 수 있다. ✅ 1. Hook이란?Hook은 함수 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있도록 해주는 함수. React 16.8 버전부터 도입되었고, 클래스 컴포넌트 없이도 기능을 확장할 수 있도록 도와줍니다. ✅ 2. 대표적인 Hook 종류Hook설명useState상태(state)를 관리할 수 있게 해줌useEffect컴포넌트가 렌더링될 때 특정 작업(부수효과)을 실행할 수 있음useRefDOM에 직접 접근하거나, 렌더링과 무관한 값을 저장할 때 사용use..

✅ 1. HTTP란?**HTTP(HyperText Transfer Protocol)**는**웹 브라우저(클라이언트)**와 웹 서버가**텍스트, 이미지, HTML, JSON 등의 데이터를 주고받는 규약(약속된 형식)**즉, 웹에서 클라이언트와 서버 간의 통신을 위한 약속된 방식✅ 2. HTTP의 작동 원리 (요청 & 응답 구조)HTTP는 기본적으로 요청(Request) → 응답(Response) 구조로 작동한다.[브라우저] → 요청 → [웹 서버][웹 서버] → 응답 → [브라우저]✔ 예시:네가 브라우저에 https://naver.com을 입력하면,브라우저가 서버에 "네이버 홈페이지 주세요" (요청)서버가 HTML, CSS, JS 등을 돌려줌 (응답)✅ 3. HTTP 메서드 종류 (Request 방식)HT..

🌐 렌더링(Rendering)이란?정의: 사용자에게 웹페이지를 화면에 시각적으로 보여주는 과정비유: 머릿속 그림을 종이에 그리는 행위 → 실제로 HTML을 생성하고 화면에 출력하는 것✅ 기본 개념부터!용어약자의미CSRClient Side Rendering브라우저(클라이언트)가 페이지를 렌더링SSRServer Side Rendering서버가 HTML을 렌더링해서 클라이언트에 전달 🖥️ 클라이언트 사이드 렌더링 (CSR: Client-Side Rendering) React, Vue 등 SPA의 기본 방식HTML 껍데기만 받고, 실제 화면은 JavaScript가 브라우저에서 만들어서 보여줌개념: 서버는 기본 HTML + JavaScript만 보내고, 브라우저가 JS로 직접 화면을 그림 처음 로딩 시 JS ..