전체 글 (128) 썸네일형 리스트형 [Frontend] 렌더링(Rendering)이란 목차 (OPEN)🖼️ 렌더링이란🧱 비유💡 렌더링 과정🔄 리렌더링이란 🖼️ 렌더링이란프론트엔드를 처음 배우다 보면,"React는 컴포넌트를 렌더링한다", "화면이 다시 렌더링된다" 같이 렌더링이라는 단어를 자주 듣게 된다. 여기에서 말하는 렌더링(Rendering)이란,코드(HTML,CSS, JS)를 우리가 보는 실제 화면(UI)으로 바꿔 그려주는 과정을 의미한다. 🧱 비유렌더링을 쉽게 이해하려면, 집 짓기에 비유해볼 수 있다. 우리가 코드를 작성하면, 그건 설계도라고 볼 수 있다.다음으로, 브라우저는 이 설계도를 보고 실제로 화면을 만들어 보여주는 건축가이다.마지막으로, 건축가가 설계도를 보고 벽돌을 쌓아서 실제 집을 만드는 과정을 바로 렌더링이라고 하는 것이다. 💡 렌더링 과정프론.. [프로그래머스/JAVA] 바탕화면 정리 목차 (OPEN)🔗 문제 바로가기📌 문제 요약🔍 최종 코드💻 실행 흐름 예시💡 핵심 포인트🕑 시간 복잡도 🔗 문제 바로가기 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 📌 문제 요약1️⃣ 문자열 배열 wallpaper는 컴퓨터 바탕화면을 나타낸다.2️⃣ "#"은 파일이 있는 칸이고, "."은 빈칸이다.3️⃣ 한 번의 드래그로 모든 파일을 선택해서 지우고자 한다.4️⃣ 드래그는 (lux, luy) ~ (rdx, rdy)로 직사각형을 형성하며, 최소한의 영역을 선택히야 한다.5️⃣ 반환 형식: [lux, luy, rdx, rdy] ✅ 최종 코드public class Solution { .. [프로그래머스/JAVA] 요격시스템 목차 (OPEN)🔗 문제 바로가기📌 문제 요약✅ 알고리즘 설계🧠 그리디 알고리즘 적용 방식🔍 최종 코드💻 실행 흐름 예시💡 핵심 포인트🕑 시간 복잡도 🔗 문제 바로가기 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 📌 문제 요약1️⃣ 2차원 평면에서 여러 개의 폭격 미사일이 (s, e)의 x축 개구간으로 날아온다.2️⃣ B국은 특정 x 좌표에서 요격 미사일을 쏴서 해당 x좌표를 포함하는 모든 미사일을 한 번에 요격할 수 있다.3️⃣ 단, s와 e 위치에서 쏘는 것은 요격으로 인정되지 않으며, (s 4️⃣ 모든 폭격 미사일을 최소한의 요격 미사일로 방어해야 된다. ✅ 알고리즘 설계처음.. [Frontend] React란 목차 (OPEN)🌱 React란🧠 React를 사용하는 이유🏗️ React의 핵심 개념 🌱 React란React는 Facebook (Meta)에서 개발한 자바스크립트 기반의 UI 라이브러리이다. (간혹 프레임워크라고 알고 계신 분들이 있는데, 라이브러리입니다 ..) 주로 웹 애플리케이션의 사용자 인터페이스 (UI)를 만들기 위해 사용된다. 🧠 React를 사용하는 이유1️⃣ 선언형 프로그래밍 방식React는 HTML 요소를 직접 수정하지 않아도,상태(state)만 바꿔주면 알아서 화면(UI)을 다시 그려준다. 예를 들어, 버튼을 클릭해서 숫자를 증가시킬 때,우리가 DOM을 직접 보작하지 않아도상태가 바뀌면 React가 자동으로 UI를 업데이트해준다. 즉, 더 적은 코드로도 예측 가능한 UI를.. [Frontend] React Router로 SPA에서 페이지 이동 구현하기 목차 (OPEN)🧩 React Router는 왜 필요할까?✅ SPA란🛣️ React Router가 하는 일🚀 React Router가 없으면 어떻게 될까?✅ 결론🔧 실제 라우팅 코드 예제 🧩 React Router는 왜 필요할까?✅ SPA란SPA (Single Page Application)는 말 그대로하나의 HTML 파일로 구성된 웹 애플리케이션을 의미한다. 페이지를 이동해도, 실제로는 새 HTML 파일을 받아오는 게 아니라,기존 HTML 안에서 JavaScript로 화면을 바꿔주는 방식인 것이다. 즉, 유저 입장에서는 '페이지가 이동한 것처럼' 보이지만,실제로 브라우저가 페이지를 새로 불러오지는 않는다. 예를 들어 유저가 www.example.com/login에 에 접속하면,기존 방식.. [트러블슈팅] GitHub Actions에서 vite: not found 오류 해결 목차 (OPEN)🧩 문제 현상🔎 문제 요약✅ 첫 번째 시도: 의존성 재설치💡 원인 분석✅ 해결 방법: npx vite build 사용🚀 결과🧠 회고💻 최종 파일 🧩 문제 현상React + Vite로 만든 프로젝트에서GitHub Actions를 이용해서 CI를 구성하다가아래와 같은 에러를 마주했다. > npm run build> vite buildsh: 1: vite: not foundError: Process completed with exit code 127. 로컬에서는 멀쩡히 잘 작동하는데,CI 환경에서만 Vite를 못 찾고 있는 것이었다. 😭 🔎 문제 요약GitHub Actions에서 npm ci로 의존성 설치이후 npm run build 실행 시, vite 명령어를 못 찾는.. [웹 기초] 웹 브라우저 목차 (OPEN)🌐 웹 브라우저란🕰️ 웹 브라우저의 역사⚙️ 웹 브라우저의 작동 원리🧩 웹 브라우저의 주요 기능 🌐 웹 브라우저란웹 브라우저는 사용자가 인터넷에 접속해서다양한 웹 페이지를 탐색하고, 상호작용할 수 있도록 도와주는 소프트웨어이다. 브라우저는 웹 서버로부터 정보를 받아와서 사용자에게 시각적으로 표시해준다. 대표적인 웹 브라우저로는Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge 등이 있다. 🕰️ 웹 브라우저의 역사1️⃣ 1990년, 팀 버너스리가 최초의 웹 브라우저인 WorldWideWeb (후에 Nexus로 변경)을 개발했다.2️⃣ 1993년, Mosaic 브라우저가 그래픽 사용자 인터페이스를 도입하여 웹의 대중화를 .. [웹 기초] 도메인 이름이란 목차 (OPEN)🌐 도메인 이름이란🖥️ 도메인 이름이 필요한 이유🔍 도메인 이름의 구조🏷️ 도메인 이름의 규칙💰 도메인은 구입하는게 아니다?🌍 DNS는 어떻게 작동할까🧠 DNS 갱신 🌐 도메인 이름이란도메인 이름 (Domain Name)은 인터넷에서 사용하는 사람이 읽기 쉬운 웹 주소이다. 예를 들면,www.naver.comgoogle.co.kr등이 있다. 🖥️ 도메인 이름이 필요한 이유앞선 포스팅에서 계속해서 설명했듯이,모든 인터넷에 연결된 장치 (컴퓨터, 스마트폰 등) 들은 고유한 IP 주소를 가지고 있다. 하지만 이런 숫자 조합들은 사람이 외우기 불편할 뿐만 아니라,IP 주소는 변경될 수도 있기 때문에,이를 직접 사용하는 것은 비효율적이다. 그래서 등장한 것이 바로 도메인 이름.. 이전 1 ··· 11 12 13 14 15 16 다음
