예산https://school.programmers.co.kr/learn/courses/30/lessons/12982 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr 풀이메모리: 33.7 MB, 시간: 6.48 ms d는 부서별로 신청한 금액이 들어있는 배열, budget은 예산이다. 최종적으로 구해야하는 건 지원할 수 있는 물품의 수. 예산이 적은 팀부터 처리하기 위해 금액을 오름차순으로 정렬한다.각 팀의 요청 금액이 남은 예산을 초과하면 반복을 중단하고 초과하지 않으면 금액을 예산에서 차감하고 결과 값을 증가시킨다.function solution(d, budget) { let result = 0; let ..

이진 변환 반복하기https://school.programmers.co.kr/learn/courses/30/lessons/70129?language=javascript 프로그래머스SW개발자를 위한 평가, 교육의 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프programmers.co.kr풀이메모리: 36.6 MB, 시간: 13.11 ms 먼저 필요한 값을 변수로 뽑는다.1이 될때까지 반복 0의 개수는 문자열을 '0' 기준으로 나눈 뒤 공백의 개수를 세어 계산했고이진 변환 횟수는 변환이 한 번 일어날 때마다 1씩 증가시켰다.function solution(s) { //이진 변환 횟수와 변환 과정에서 제거된 0를 배열에 담아라... let num = s; let count = 0; ..

모듈 번들러란?모듈 번들러는 여러 자바스크립트 파일과 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년동안 연구해왔던 표본들을 잃게 된다. 그럼에도 조던은 포기하지 않고, 무너진 잔해 속에서 표본 하나하나를 다시 찾아 복구한다. 혼돈 속에서도 의미를 붙잡으려는 그의 투지가 룰루에게 삶을 다시 살아갈 용기를 주는 듯했다..