자바스크립트가 어떤 특징을 가진 언어인지 간단히 알아봅시다!1. 웹브라우저에서 동작하는 프로그래밍언어자바스크립트는 대부분의 웹 브라우저(Chrome, Firefox, Safari 등)에 기본 탑재되어 있으며,HTML과 CSS와 함께 웹을 구성하는 3대 요소 중 하나입니다.브라우저 내에서 즉시 실행 가능하고, 별도의 설치 없이 동작합니다.버튼 클릭, 입력 처리, 애니메이션 등 동적인 UI를 구현할 수 있습니다.예: 사용자가 버튼을 클릭하면 팝업을 띄우는 로직 2. 인터프리터 언어 (개발자가 별도의 컴파일 작업을 수행하지 않음)자바스크립트는 컴파일 단계 없이 코드가 한 줄씩 해석되고 즉시 실행되는 언어입니다.개발자가 작성한 코드를 별도의 번역 과정 없이 바로 실행코드 변경 후 브라우저를 새로고침하면 즉시 반..

모듈 번들러란?모듈 번들러는 여러 자바스크립트 파일과 CSS, 이미지, 글꼴 같은 웹 자원을 하나 또는 여러 개의 번들로 묶어주는 도구입니다.이 작업은 웹 페이지를 브라우저에서 빠르고 안정적으로 불러오기 위해 필요합니다.대표적인 모듈 번들러Webpack: 설정이 복잡하지만 유연성이 뛰어난 대표적 번들러Vite: 빠른 개발 서버와 간편한 설정으로 최근 인기를 끄는 모던 번들러Rollup: 라이브러리 번들링에 적합하며 ES 모듈을 우선 지원Parcel: 설정이 거의 필요 없는 자동화 중심 번들러 번들러의 등장배경초창기 웹개발과거에는 HTML 파일에 이렇게 분할하면 필요한 시점에만 코드를 불러올 수 있어 초기 로딩 속도를 줄이고 사용자가 실제로 요청한 기능을 더 빠르게 제공할 수 있습니다. 또한 ..

CSS를 사용하다 보면 다음과 같은 문제를 겪은 적이 있을 것입니다.“같은 색상을 여러 곳에 썼는데, 바꾸려면 전부 수정해야 해...”“flex를 썼는데, 브라우저마다 다르게 보이네?”“스타일이 많아지니 점점 유지보수가 어렵다…” 이런 문제를 해결하는 데 도움이 되는 도구가 바로 전처리기(Preprocessor)와 후처리기(Postprocessor)입니다. 전처리기(Preprocessor)란?전처리기는 CSS를 작성하기 전에 사용하는 도구로, CSS를 더 프로그래밍답게 쓸 수 있게 해줍니다.대표적인 전처리기로는 SASS, LESS, Stylus 등이 있습니다. 전처리기를 쓰면 다음과 같은 기능을 사용할 수 있습니다:변수: 색상, 폰트 등 반복되는 값을 한 곳에 정의중첩(Nesting): 선택자 구조를 더..

CSS Diner: 선택자 연습을 위한 CSS 학습 사이트https://flukeout.github.io/ CSS DinerA fun game to help you learn and practice CSS selectors.flukeout.github.ioCSS Diner는 CSS 선택자를 재미있게 배우고 연습할 수 있는 웹 기반 게임입니다.화면에는 선택할 HTML 요소가 그림으로 제시되며, CSS 편집기에 해당 요소를 선택하는 선택자(selector)를 입력하면 됩니다. 처음에는 쉽지만 뒤로 갈수록 잘 쓰지 않는 선택자들도 등장해 꽤 어렵다.어려울 땐 화면 오른쪽의 예시와 힌트를 참고!

CSSCSS(Cascading Style Sheets)는 HTML 요소에 스타일(색상, 폰트, 배치 등)을 적용하기 위한 언어이다.HTML이 문서의 구조를 담당한다면, CSS는 시각적인 표현을 담당한다. 예를 들어 아래와 같이 HTML만으로는 단순한 구조만 표현할 수 있지만:환영합니다!CSS를 사용하면 다음과 같이 꾸밀 수 있다.p { color: blue; font-size: 20px; text-align: center;}CSS의 주요 특징css의 주요 특징은 캐스캐이딩과 상속이다. 이 두 가지 특징을 알면 css를 더 잘 이해할 수 있다.1. 캐스캐이딩 (Cascading)캐스캐이딩(Cascading)은 여러 CSS 규칙이 하나의 요소에 적용될 때, 어떤 규칙을 우선 적용할지 결정하는 원칙이다...

시맨틱 태그(Semantic tag)사전적 정의로 시맨틱(Semantic)은 ‘의미 있는’이라는 뜻이다.웹에서 쓰는 시맨틱 태그도 이와 비슷하게 "이 영역이 어떤 역할을 하는지"를 브라우저와 사람 모두에게 설명하는 태그를 말한다. 시멘틱 태그가 왜 중요할까?접근성 개선: 스크린 리더가 페이지 구조를 더 잘 이해함가독성 향상: 개발자가 HTML 구조를 보고도 빠르게 역할을 파악할 수 있음SEO에 도움: 검색 엔진이 콘텐츠를 더 잘 분석하고 평가할 수 있음대표적인 시멘틱 태그문서나 섹션의 머리말. 로고, 제목, 네비게이션 등이 들어간다.주요 탐색 링크 집합. 메뉴나 목차를 담는다.페이지의 주요 콘텐츠. 한 페이지에 하나만 있어야 한다.문서의 논리적인 구획. 주제를 가진 블록 단위로 나눌 때 사용.독립적인 ..

1. 순수한 컴포넌트React에서는 컴포넌트를 "순수하게(Pure)" 작성하는 게 중요하다.쉽게 말해, 입력값이 같으면 결과도 항상 같아야 한다. 수학공식처럼 y = 2x일 때 x = 2 → y = 4, x = 3 → y = 6이 함수는 항상 같은 결과를 반환한다. 컴포넌트로 예시를 들어보면, 다음 컴포넌트는 항상 name에 따라 "안녕하세요, name님!" 을 보여준다.function Greeting({ name }) { return 안녕하세요, {name}님!;} 이처럼 예측 가능한 컴포넌트가 바로 "순수"한 컴포넌트이다. 2. 반대로 순수하지 않은 컴포넌트는?let randomNumber = Math.random();function LuckyNumber() { return 당신의 숫자는 {ran..

1. 컴포넌트 import 및 export JavaScript의 import, export 문법을 사용하여 컴포넌트를 다른 파일에서도 불러와 사용할 수 있다.컴포넌트의 가장 큰 장점 = 재사용성 리액트는 한번 만든 컴포넌트를 조합해 어디서든 쓸 수 있다.// Button.jsxexport default function Button({ label }) { return {label};}이렇게 만든 버튼 컴포넌트를 다른 컴포넌트 안에 넣어 조합해 새로운 컴포넌트를 만들 수 있다.// App.jsximport Button from './Button';export default function App() { return ( 메인 페이지 );} 다른 파일에서 모듈(컴포넌트)를..

리액트 공식문서에서 틱택토 게임 만들기를 살펴보면 중간에 key에 대한 이야기가 나온다.(틱택토 게임 만드는 방법은 생략! https://ko.react.dev/learn/tutorial-tic-tac-toe ) 1. 리액트에서 리스트 항목에 대한 렌더링 리스트를 화면에 보여줄 때, React는 마치 메모장처럼 각 항목을 기억해 둔다. 리스트가 바뀌면 (예: 새로운 항목 추가, 삭제, 순서 변경 등), React는 이전에 기억해 둔 메모와 비교해서 실제로 무엇이 달라졌는지 찾아낸다. 장보기 목록을 적는다고 가정해보자. 리액트는 두 개의 메모장을 가지고 이전 메모와 비교하여 장보기 목록에 '우유'를 추가했다면 → 새로운 항목이 추가된 것을 알아챈다.'계란'을 지웠다면 → 그 항목이 사라진 것을 파악한다항..

1. 컴포넌트: UI 구성 요소 React의 핵심 개념인 컴포넌트는 마크업, CSS, JavaScript를 하나로 모아 독립적이고 재사용 가능하게 만든 UI 조각이다. HTML 태그와 마찬가지로 컴포넌트를 조합하여 전체 페이지를 구성한다. 마치 레고 블록처럼 한번 만든 컴포넌트를 여러 곳에서 재사용할 수 있다!컴포넌트 재사용의 주요 장점을 몇 가지 살펴보면: 반복적인 코드 작성 감소로 개발 시간이 단축, 동일한 컴포넌트를 사용해서 일관성 유지, 컴포넌트 수정 시 사용된 모든 곳에 자동 반영 되므로 모듈화 되어 관리가 쉬워짐 등 Docs 컴포넌트를 들여다 보면 마크업을 반환하는 함수로 이루어져 있다. export default function Profile() ..