모듈 번들러란?모듈 번들러는 여러 자바스크립트 파일과 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..

줄거리먼 미래, 지구는 기후변화로 인해 끝없이 내리는 비에 잠기기 시작한다. 도시들은 물에 잠기고, 인류는 터전을 잃었다.수해는 인류가 쌓아온 무수한 기록들을 파괴했고, 많은 이들이 가족과 일상을 잃는다. 한이소 역시 그중 하나였다. 70일간 이어진 폭우가 끝난 뒤, 인류는 다시 일상을 회복하기 위해 노력한다. 보호소에서 자라 성인이 된 이소는 ‘태거 하우스’라는 곳에서 일하게 된다. 이곳은 침수 피해로 유실된 영화 자료를 복원하는 기관으로, 영화를 보고 그에 맞는 주제를 AI에 입력하는 작업, 이른바 ‘태깅’을 수행하는 곳이다.이 작업을 맡은 사람들을 ‘태거’라고 불렀다. 이소는 태거라는 일에 흥미와 적성을 느꼈고, 남들처럼 더 높은 자리에 오르고 싶다는 욕심도 있었다. 그러던 중, 예상치 못한 해고 ..

이 책은 내용을 모르고 읽었을때 더 뜻 깊은 책이니, 궁금한 분들은 읽은 다음에 후기를 찾아보는 걸 추천합니다.줄거리이 책의 작가 룰루 밀러가 인생의 가장 어두운 시기를 지날때 무너진 삶 속에서 어떤 '질서'를 찾는 과정에서 시작된다. 그는 위기를 겪은 후에도 무너지지 않고 다시 일어난 과학자 데이비드 조던의 일화를 듣게 되고 그의 생애에 관심을 갖게된다. 조던은 수많은 물고기를 발견해 이름을 붙이고 세계를 질서있게 정리하려고 했다. 학자로써 투철한 인생을 살던 그는 자연재해로 인해 30년동안 연구해왔던 표본들을 잃게 된다. 그럼에도 조던은 포기하지 않고, 무너진 잔해 속에서 표본 하나하나를 다시 찾아 복구한다. 혼돈 속에서도 의미를 붙잡으려는 그의 투지가 룰루에게 삶을 다시 살아갈 용기를 주는 듯했다..

줄거리작은 땅의 야수들』은 20세기 초, 일제강점기 조선을 배경으로 그 시대를 살아가는 사람들의 사랑, 야망, 갈등, 그리고 얽히고설킨 운명을 그린다. (줄거리를 세세하게 하나씩 적으면 끝도 없어서 생략, 등장인물도 꽤 되고 서사도 가득하다..)감상평『작은 땅의 야수들』… 제목처럼, 정말 다들 야수 같다. 이성보다는 모두 본능과 감정에 휘둘려 산다. 작은 우연과 인연이 인물들의 인생을 뒤흔드는 전환점이 되기도 하고, 한순간의 선택이 추락의 결정타가 되기도 한다. 읽는 내내 "왜 이러는 거야", "제발 그만. 지랄 금지" 같은 말이 절로 나오는데 또 한편으론 “그래서 어떻게 되는데…?” 하는 마음이 끝까지 읽게 만들었다. 일제강점기를 배경으로 하지만, 이 소설은 역사적 사건 자체를 중심에 두지는 않는다...

줄거리「시선으로부터」는 심시선의 시선을 통해 전해지는 이야기이자, 심시선이라는 존재로부터 이어진 가족들의 이야기다. 가족들은 심시선의 사망 10주기를 맞아 그의 제사를 지내기 위해 하와이로 떠난다. 제사는 전통적인 방식이 아닌 각자 심시선에게 보여주고 싶은 물건을 준비하기로 한다. 가족들은 자신의 삶과 심시선과의 추억을 떠올리며 그녀를 위한, 동시에 자기 자신을 위한 여행을 시작한다.감상평심시선이라는 인물은 소설 속에서 단순한 어머니나 아내가 아니라 가부장제 시대에 맞서 싸운 여성으로 그려진다. 여성으로서 억압받고 무시당했던 사회에서 자기 목소리를 내며 살아왔고 그의 시선과 가치관은 그가 죽은 후에도 후대에 영향을 미친다. 심시선은 세상을 떠났지만 그의 정신은 독자들에게까지 깊이 남게 된다. 열혈 팬도 ..