매일 딱 30분만 투자해서 문제를 풀고 싶은데… 일단 코딩 기초 트레이닝은 총 124문제뿐이니까 처음엔 그냥 하나씩 받아쓰기해서 목록 만들까 했었다.

근데 문득 생각났다.

“웹스크롤링으로 긁어오면 되잖아?”

사실 웹스크롤링에 대해서는 “뭔가를 긁어오는 거?” 정도만 알고 있었다. 근데 챗GPT랑 같이 얘기하며 코드 짜봤더니 금방 원하는 결과물이 나왔다. 이게 바로… 바이브코딩인가? 😎

🎯 목표

• 프로그래머스 코딩 기초 트레이닝 문제 7페이지(총 124문제) 긁어오기
• 제목 + 링크를 모아서 CSV 파일로 저장

🧑‍💻 최종 코드

const puppeteer = require("puppeteer");
const fs = require("fs");

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  const allTitles = [];
  const totalPages = 7;

  for (let currentPage = 1; currentPage <= totalPages; currentPage++) {
    const url = `https://school.programmers.co.kr/learn/challenges/training?order=acceptance_desc&languages=javascript&page=${currentPage}`;
    console.log(`📄 페이지 ${currentPage} 로딩 중...`);

    await page.goto(url, {
      waitUntil: "networkidle2",
      timeout: 120000,
    });

    await new Promise((resolve) => setTimeout(resolve, 2000));

    const titles = await page.$$eval("td.title a", (elements) =>
      elements.map((el) => ({
        title: el.innerText.trim(),
        link: el.href,
      }))
    );

    console.log(`✅ 페이지 ${currentPage}에서 ${titles.length}개 수집`);
    allTitles.push(...titles);
  }

  console.log(`\n📦 모든 문제 제목 (총 ${allTitles.length}개):`);
  allTitles.forEach((title, index) => {
    console.log(`${index + 1}. ${title.title}`);
  });

  await browser.close();

  const csvHeader = "번호,제목,링크\n";
  const csvContent = allTitles
    .map((p, i) => `${i + 1},"${p.title}","${p.link}"`)
    .join("\n");
  fs.writeFileSync("programmers_problems.csv", csvHeader + csvContent, "utf-8");

  console.log(`💾 CSV 저장 완료: programmers_problems.csv`);
})();

😅 삽질의 시작

🐛 npm init에서 에러 터짐

처음 npm init -y 했더니 이러더라.

npm ERR! Invalid name: "코딩202507"

한글 폴더명 때문에 npm이 삐짐… 바로 폴더명을 coding-2507으로 바꿔서 해결했다.

🐌 페이지 로딩 TimeoutError

첫 실행 때 이 에러가 떴다.

TimeoutError: Navigation timeout of 60000 ms exceeded

Puppeteer가 페이지의 모든 요청이 끝나길 기다리느라 타임아웃 걸림. 해결법은 간단했다.

• waitUntil: "networkidle0" → "networkidle2"
• timeout: 120000으로 늘림
• 그리고 headless: false로 실제 브라우저 켜서 동작 확인

📄 페이지 1번만 긁힘

아무리 돌려도 1페이지 20문제만 긁힘. URL에 page=1이 박혀있던 걸 발견하고 for문으로 1~7페이지 순회하도록 수정했다.

for (let currentPage = 1; currentPage <= totalPages; currentPage++) {
  const url = `...page=${currentPage}`;
  await page.goto(url, ...);
}

❌ CSV에 undefined 뜸

이번엔 CSV 결과가 이 모양:

"문제제목","function link() { [native code] }"

원인은 두 가지였다.

• el.textContent가 동작 안 함 → 동적 페이지라서
• el.getAttribute("href") 대신 함수 참조가 찍힘

고친 방법:

title: el.innerText.trim(),
link: el.href,

바꿨더니 깔끔하게 제목+링크 출력됨.

🚨 ReferenceError: fs is not defined

마지막으로 fs.writeFileSync() 썼더니:

ReferenceError: fs is not defined

fs 모듈을 import 안 해서 생긴 실수였다. 상단에 추가로 해결.

const fs = require("fs");

📦 결과물

최종적으로 나온 programmers_problems.csv

엑셀로 열면 바로 링크 클릭 가능 👍

✨ 배운 것

• Puppeteer에서 동적 페이지는 innerText, href로 접근해야 안전
• networkidle2 + setTimeout 조합으로 로딩 안정화
• 페이지네이션은 쿼리 파라미터로 간단히 처리 가능
• npm 패키지 이름은 영어 소문자 + 숫자 + 하이픈만

const cats = [
  { name: "나비", age: 2 },
  { name: "미미", age: 4 },
  { name: "초코", age: 3 },
  { name: "망고", age: 1 }
];

const targetNames = ["초코", "미미", "망고"];

function checkAge(names, minAge) {
  return names.filter(name => {
    const cat = cats.find(c => c.name === name);
    return cat && cat.age >= minAge;
  });
}

console.log(checkAge(targetNames, 3)); // ["초코", "미미"]

🧠 구조 다시 설명

names.filter(name => {
  const cat = cats.find(c => c.name === name); // 이름으로 고양이 찾고
  return cat && cat.age >= minAge;             // 나이가 조건보다 크면 OK
});

책이든 사람 목록이든 "이름 배열 + 실제 정보 배열" 구조일 때 자주 나오는 패턴

배열에서 조건을 "처음으로" 만족하는 딱 하나만 찾아줌!

✅ 기본 문법

배열.find(요소 => 조건)

✅ 예제 1: 짝수 중 첫 번째 찾기

const numbers = [1, 3, 4, 6, 8];

const firstEven = numbers.find(num => num % 2 === 0);

console.log(firstEven); // 👉 4 (처음으로 짝수인 값)

✅ 예제 2: 이름이 '지민'인 사람 찾기

const people = [
  { name: "태형", age: 25 },
  { name: "지민", age: 24 },
  { name: "정국", age: 23 }
];

const person = people.find(p => p.name === "지민");

console.log(person); // 👉 { name: "지민", age: 24 }

✅ filter랑 차이점은?

✅ 요약 한 줄

find()는 "첫 번째 조건 일치하는 것" 딱 하나만 찾아줌!

배열에서 "조건을 만족하는 애들만 골라서" 새 배열로 만드는 함수

✅ 기본 문법

배열.filter(요소 => 조건)

✅ 예제

const numbers = [1, 2, 3, 4, 5];

const even = numbers.filter(num => num % 2 === 0);

console.log(even); // 👉 [2, 4]

🧠 num % 2 === 0 → 짝수인 애들만 남긴다

✅ 예제 2: 이름이 "민"으로 끝나는 친구만 남기기

const names = ["지민", "태형", "유민", "정국"];

const filtered = names.filter(name => name.endsWith("민"));

console.log(filtered); // 👉 ["지민", "유민"]

✅ 핵심 정리

한 문장 요약: 👉 "필터는 배열 거르기!"

🧱 먼저 arrays[i]만 보면? arrays[0] → [10] arrays[1] → [30, 21] arrays[2] → [50] arrays[3] → [80]

즉, arrays[i]는 i번째 배열을 말하는 거야.

🧱 그다음 arrays[i].length 배열의 길이를 말함

예: arrays[1] = [30, 21] → length = 2

🧱 arrays[i].length - 1 배열에서 마지막 위치의 인덱스를 찾는 공식이야 왜냐면 배열 인덱스는 0부터 시작하니까!

[30, 21]  // 인덱스는 0, 1
length = 2 → 마지막 인덱스는 2 - 1 = 1

arrays[i][arrays[i].length - 1] i번째 배열(0부터 시작)의 마지막 숫자를 꺼내는 공식!

🎯 문제

다음과 같은 2차원 배열이 있어:

const arrays = [
  [10],
  [30, 21],
  [50, 12, 34],
  [80, 56, 78, 90]
];

각 배열에서 마지막 숫자만 꺼내서 출력하는 코드를 작성해보세요.

출력 결과는 이렇게 되어야 합니다:

10
21
34
90

✅ 예시 답안

const arrays = [
  [10],
  [30, 21],
  [50, 12, 34],
  [80, 56, 78, 90]
];

for (let i = 0; i < arrays.length; i++) {
  const lastNumber = arrays[i][arrays[i].length - 1];
  console.log(lastNumber);
}

💡 핵심 포인트 복습

arrays[i]는 i번째 배열 arrays[i].length - 1은 그 배열의 마지막 인덱스 arrays[i][arrays[i].length - 1]은 마지막 숫자!

반복문 복습

✅ 1. 기본 형태부터!

for (초기값; 조건식; 증가식) {
  // 반복할 코드
}

✅ 2. 가장 단순한 예제

for (let i = 0; i < 5; i++) {
  console.log(i);
}

결과:

0
1
2
3
4

🔍 작동 순서

1. let i = 0 → i를 0으로 시작(초기값)
2. i < 5 → 조건 검사 (맞으면 블록 실행)(조건문)
3. console.log(i) → i를 출력
4. i++ → i 값을 1 증가(증가식)
5. 조건 검사로 다시 돌아감 → 계속 반복

✅ 3. 다른 증가 방법

2씩 증가

i += 2

for (let i = 0; i < 10; i += 2) {
  console.log(i); // 0, 2, 4, 6, 8
}

거꾸로 감소

i--

for (let i = 5; i > 0; i--) {
  console.log(i); // 5, 4, 3, 2, 1
}

✅ 4. 배열 요소 하나씩 출력하기

const fruits = ['apple', 'banana', 'cherry'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

결과:

apple
banana
cherry

✅ 5. 배열의 길이를 직접 써도 되지만…

for (let i = 0; i < 3; i++) {
  console.log(fruits[i]); // 가능은 하지만 비효율적
}

보통은 fruits.length 같이 배열의 길이를 써야 배열이 몇 개든 자동으로 처리됨!

일정

목표

• 노마드 강의 5% 할인 쿠폰
• TIL 매일 적기
• 리프레시!

#코딩 #개발자 #북클럽 #노마드북클럽

settings - color검색 - workbench - apperance - Edit in settings.json

"workbench.colorCustomizations": {
    "terminal.background":"#090300",
    "terminal.foreground":"#A5A2A2",
    "terminalCursor.background":"#A5A2A2",
    "terminalCursor.foreground":"#A5A2A2",
    "terminal.ansiBlack":"#cfc9c6",
    "terminal.ansiBlue":"#A5A2A2",
    "terminal.ansiBrightBlack":"#5C5855",
    "terminal.ansiBrightBlue":"#A5A2A2",
    "terminal.ansiBrightCyan":"#B5E4F4",
    "terminal.ansiBrightGreen":"#5C5855",
    "terminal.ansiBrightMagenta":"#A16A94",
    "terminal.ansiBrightRed":"#DB2D20",
    "terminal.ansiBrightWhite":"#F7F7F7",
    "terminal.ansiBrightYellow":"#FDED02",
    "terminal.ansiCyan":"#B5E4F4",
    "terminal.ansiGreen":"#5C5855",
    "terminal.ansiMagenta":"#A16A94",
    "terminal.ansiRed":"#DB2D20",
    "terminal.ansiWhite":"#A5A2A2",
    "terminal.ansiYellow":"#FDED02"
  },

여기서 커스텀 변경

이름 바꾸기

1. vscode에서 터미널 열기
2. vi ~/.zshrc 입력
3. 맨 아래로 내려가서 다음 추가하기

   prompt_context() {
   prompt_segment black default ""
   }

   내용 복사 후 o -> cmd + v -> esc -> :wq + enter

vi 사용법을 알아야 함!

o (open) 입력모드로 들어감: 커서가 위치한 행의 다음행에 입력 esc 입력모드 빠져나옴 :wq + enter 작업 내용 저장 후 종료

https://jitolit.tistory.com/27

참고

https://velog.io/@dding_yull/VScode-%ED%84%B0%EB%AF%B8%EB%84%90-%EA%BE%B8%EB%AF%B8%EA%B8%B0%EC%95%84%EC%9D%B4%EC%BD%98%EB%84%A3%EA%B8%B0 https://glitchbone.github.io/vscode-base16-term/#/atelier-heath-light https://kangyb.tistory.com/23

1️⃣ 기한 내 과제 제출 여부 ➡️ ⭕️ 2️⃣ GitHub URL, 배포된 결과물 등 과제 확인에 필요한 요소들의 정상 제출, 접근 가능 여부 ‼ ➡️ ⭕️ 3️⃣ 과제가 요구하는 기능들 구현 완성도 ➡️ 🔺(4/5) 4️⃣ README 파일의 완성도 ➡️ 🔺(2/5) 5️⃣ Git commit message & history 관리의 완성도 ➡️ 🔺(2/5) 6️⃣ 프로젝트의 구조, 코드의 가독성 등 전체 프로젝트의 구현 퀄리티 ➡️ 🔺(3/5)

보완 결과

강의 : 화, 금 화, 금 : 14:00 - 17:00

Week 1-1. 과제를 하기에 앞서 알아야 할 팀으로 일하는 법, 개발자의 기본기

Git & GitHub / ESLint / Prettier / husky / Git hook

강사/교육파트너 소개 / 코스 커리큘럼 및 학습 목표 소개 선발 과제 피드백 Git & GitHub을 사용하면서 지켜야 할 것 ESLint와 Prettier, Git hook을 이용한 팀의 능률 올리기" [아하!모먼트] Agile이 필요하다고 느낀 순간

Week 1-2. 프로젝트를 지속적으로 통합하고 배포하는 법

AWS / AWS S3 / CRA / CI/CD / GitHub Actions

온 프레미스와 클라우드, 그리고 AWS 프론트엔드 배포하기 with AWS S3 CI/CD를 구축해야 하는 이유 GitHub Actions를 통한 배포 파이프라인 구축하기 [아하!모먼트] 프론트엔드가 배포까지 해야 할까?

Week 2. 프리온보딩 커리어 챌린지

채용 트렌드 분석 / 이력서 작성 / 면접 & 비즈니스 매너 / 현직자 Q&A

2주차에는 커리어 챌린지에 참여하여 이력서 작성 및 Q&A 시간을 갖습니다. 현직자 Q&A는 Google Meet에서 그룹 별로 진행됩니다. 이력서 특강을 통해 그동안의 경험을 올바르게 담아내는 방법을 살펴봅니다. 커리어 챌린지를 통해 앞으로의 취업 계획을 효과적으로 수립합니다. 링크) 프리온보딩 커리어 챌린지 2022

Week 3-1. React Hook의 심층 활용

의존성 배열 / useEffect / React.memo / useCallback / useMemo / Context API

리액트에서 렌더링 최적화를 수행하는 법 React.memo를 이용해 컴포넌트 렌더링 최적화하기 메모이제이션을 통한 최적화 수행하기 useEffect의 의존성 배열 올바르게 다루기 Context API로 컴포넌트에 맥락 전달하기 [아하!모먼트] 최적화를 해야하는 시기는 언제일까?

Week 3-2. Clean Code와 소프트웨어를 유연하고 확장성있게 만드는 법

Clena Code / SRP / DIP / 횡단 관심사 / Custom Hook / Context API

관심사의 분리와 SRP 리액트에서 관심사를 분리하는 법 HTTP 통신의 횡단 관심사 처리하기 의존성 역전을 통해 소프트웨어 유연하게 만들기 컴포넌트에 의존성 주입하기 with Context API [아하!모먼트] 소프트웨어 아키텍쳐를 왜 신경써야 할까?

Week 4-1. TypeScript로 런타임에 안전한 웹 앱 작성하기

TypeScript / 타입 가드 / 타입 추론 / 제네릭

TypeScript를 사용해야 하는 이유 제네릭을 사용하여 타입 재사용하기 d.ts 파일을 통해 타입 구조 파악하기 타입 가드를 통해 더욱 정확한 타입 사용하기 [아하!모먼트] 타입스크립트가 편하게 느껴진 순간

Week 4-2. Redux로 알아보는 React 전역 상태 관리

전역 상태 관리 / Redux / Flux

Redux를 이용한 전역 상태 관리 Redux와 middleware란? middleware의 원리 middleware 직접 만들고 적용해보기 [아하!모먼트] 신기술의 홍수에서 살아남는 법

Week 5-1. 프론트엔드에서의 테스트

Software Testing / Unit Test / TDD / Jest

소프트웨어 테스트란? Jest를 활용한 JavaScript 테스트 TDD를 이용한 소프트웨어 개발 방식 Redux에 테스트 적용하기 [아하!모먼트] 테스트가 중요하다고 느낀 순간

Week 5-2. Advanced Javascript - 실행 컨텍스트

실행 컨텍스트 / 클로저 / 스코프 / 호이스팅

JavaScript의 실행 컨텍스트 스코프 & 호이스팅을 실행 컨텍스트 관점에서 이해하기 클로저를 이용해 React Hook 직접 만들어보기 [아하!모먼트] 개발은 과연 어떻게 공부해야 할까?

위 과제조건을 만족시키기 위해 처음에는

이렇게 app.js에서 로컬스토리지에 액세스 토큰이 있으면 /todo로 이동하도록 짰다.

문제는 이렇게 할 경우, todolist에서 로그아웃 버튼을 클릭했을 때 홈으로 이동하도록 navigate를 하면 새로고침을 해야만(window.location.reload()) 이동이 되는 현상이 나왔다.

정확히는 모르겠지만, 로컬스토리지의 변화가 바로바로 반영이 안되고, app.js에서 route가 고정되어 나타나는 현상 같았다.

그래서 app.js에 있는 라우트를 분기하지 않고, 각 페이지마다 useEffect를 사용하여 처음 렌더링될 때 로컬스토리지에 액세스토큰이 있는지를 확인하도록 바꾸었다.

그런데 처음 썼던 방식도 navigate 뒤에 window.location.reload()만 더해주면 이동을 했기 때문에... 바꾼 방식이 더 나은것인지는 확신하지 못하겠다.

axios 요청을 하다가 위 3가지 경우가 궁금해져서 찾아봤다.

일반적으로 함수에서 return;로 리턴값 없이 끝내버리면, 함수의 동작이 멈춘다.

return; is the same as return undefined;, which is the same as having a function with no return statement at all. (출처: https://stackoverflow.com/questions/5596404/return-false-the-same-as-return)

즉 리턴값이 없이 끝내버리면 그 함수는 undefined를 반환하는 것과 같다.

그렇다면 return; 보다 return false를 사용하는 것이 더 좋은걸까?

I would recommend always return something, in this case false because if your function doesn't have return statement then it will always return undefined. So for sake of easier debugging, it's better to return false rather than undefined, because you will imminently know that return statement was indeed executed, while with undefined you have 1 more step to check. (출처: https://stackoverflow.com/questions/47597864/difference-between-return-and-return-false)

디버깅을 위해서 return;으로 끝내는 것보단 return false로 리턴값을 명확히 하는 것이 더 좋다는 답글이 많다.

https://yongblog.tistory.com/entry/onclick-%EC%97%90%EC%84%9C-return-false-%EC%9D%98-%EC%9D%98%EB%AF%B8

최소 20개 이상의 이력서 작성이 필요하다. 하지만 보다 많은 기회를 얻기 위해서 적어도 100개 이상의 이력서를 쓸 각오가 되어있다.

2. 프리온보딩 인턴십에서 숏에세이 작성제도를 시행하는 목적

주최측 입장에서는 수많은 참가자 중에서 해당 참가자가 무분별하게 지원하는 것인지 아니면 진정성을 가지고 지원하는지를 파악할 수 있다. 반면 참가자 입장에서는 숏에세이를 통해 지원하고 싶은 참가기업을 확인하고 자신에게 정말 필요한 기회인지를 생각해볼 수 있다. 또한 참가기업 입장에서는 지원을 희망하는 신입개발자들의 공개 에세이를 통해 직간접적으로 자신의 회사를 알릴 수 있는 효과를 얻을 수 있기 때문에 숏에세이 작성제도를 시행한다고 생각한다.

3. 지원하고 싶은 참가기업은 어디인지

1. 에듀템

   리얼타임 쉐도잉 개발을 통해 좋은 평가를 받고 있는 에듀템은 인공지능 기반의 에듀테크를 연구, 개발 회사이다. 인터넷 테크놀로지를 통해 가장 급격하게 변화한 업계 중 하나가 교육계이다. 하지만 교육계는 아직도 더 많은 성장가능성을 가지고 있다고 생각한다. 특히 온라인 교육의 효과성, 효율성, 비용절감성 등에서 한발 더 나아가 개인맞춤형 교육서비스로 성장한다면 지금보다 더 큰 시너지를 낼 수 있다고 생각한다. 전공이 교육이었기 때문에 개발을 하면서도 교육서비스 쪽으로 자연스럽게 관심을 가지게 되었고, 가장 최근에 진행했던 프로젝트 역시 교육관련 커뮤니티 서비스였기 때문에 즐겁게 개발할 수 있을 것 같다.

2. 젠스타메이트

   젠스타메이드는 국내 최대 상업용 부동산 종합 서비스 회사이다. 평소에 부동산에 관심이 있어서 부동산 업계에서 일해보고 싶다는 생각을 했다. 일반인의 입장에서 부동산 정보를 찾다보면 결국은 객관적인 지표와 함께 종합적인 전문 서비스가 필요하다는 생각을 했다. 부동산 서비스에서 제공하는 정보는 그 양이 방대하고 복잡하기 때문에 적절하게 시각화해야 하고, 실시간 정보제공이 원활해야 한다고 생각한다. 관심있는 부동산 분야에서 개발자로서 함께 성장하고 싶다.

   3. 렉시냅틱스

      렉시냅틱스는 법률산업의 디지털 혁신을 추구하는 기업이다. 예전에는 법적인 내용을 상담하려면 무조건 변호사를 찾아가야 했지만, 이제는 법조계 역시 많이 변화하고 있다. 법적 당사자는 모든 것을 변호사에게 맡겨두기 보다는 자신의 법률문제를 스스로 관리하려고 노력하며, 나홀로 전자소송과 같이 변호사를 선임하지 않고 소송을 진행하기도 한다. 몇 년 전에 집안에 민사소송이 있어 법률적인 조언이 필요했던 적이 있는데, 렉시냅틱스는 아니었지만 다른 디지털 법률 서비스를 이용한 경험이 있다. 법적 문제는 일반인이 처리하게에는 그 절차와 내용이 어렵고 그 비용 역시 천문학적인데, 디지털 법률 서비스를 통해 소송비용도 줄일 수 있고 억울한 마음 역시 전문적인 상담을 받으며 객관적으로 바라볼 수 있었다. 기회가 된다면 이렇게 귀중한 가치를 지닌 디지털법률 서비스가 더욱 발전할 수 있도록 자부심을 가지고 일하고 싶다.

npm install redux@latest react-redux@latest

https://bobbyhadz.com/blog/react-module-not-found-cant-resolve-redux

Defer offscreen images

<문제> 오프스크린 이미지 <해결책>

• 지연 해결을 위한 lazy-load 플러그인, 모듈을 설치 오프스크린 이미지란? 사용자가 보고 있는 화면에 보이지 않는 이미지 레이지로드란? 오프스크린 이미지를 로딩하지 않고 있다가, 사용자가 스크롤을 움직여서 해당 이미지가 보여야 할 시점에 이미지를 로딩하는 기술
• lazysizes를 사용하여 오프스크린 이미지를 지연 로드 <script src="lazysizes.min.js" async></script> <img data-src="images/flower3.png" class="lazyload" alt="">

Reduce unused JavaScript

<문제> 사용하지 않는 자바스크립트 <해결책> 사용하지 않는 JavaScript를 제거

1. 사용하지 않는 자바스크립트 감지 Chrome DevTools 의 Coverage 탭 에서는 사용하지 않는 코드를 한 줄씩 분석 막대의 빨간색 부분은 사용되지 않은 바이트

2. 사용하지 않는 코드 제거 지원을 위한 빌드 도구 (리액트)

• 서버 측 렌더링이 아닌 경우 JavaScript 번들을 React.lazy()로 분할

  import React, { lazy } from 'react';
  

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (

```

• loadable-components 와 같은 타사 라이브러리를 사용하여 코드를 분할

Serve images in next-gen formats

<문제> 이전 형식의 이미지 사용 <해결책> 이미지를 AVIF 또는 WebP 형식으로 제공 AVIF 및 WebP는 이전 JPEG 및 PNG 형식에 비해 압축 및 품질 특성이 우수한 이미지 형식입니다. JPEG 또는 PNG가 아닌 이러한 형식으로 이미지를 인코딩하면 더 빠르게 로드되고 더 적은 셀룰러 데이터를 소비합니다. AVIF는 Chrome, Firefox 및 Opera에서 지원되며 동일한 품질 설정의 다른 형식에 비해 작은 파일 크기를 제공합니다. AVIF에 대한 자세한 내용은 AVIF 이미지 제공 Codelab 을 참조하세요. WebP는 최신 버전의 Chrome, Firefox, Safari, Edge 및 Opera에서 지원되며 웹의 이미지에 대해 더 나은 손실 및 무손실 압축을 제공합니다. WebP에 대한 자세한 내용은 A New Image Format For Web 을 참조하십시오.

Efficiently encode images

<문제> 이미지를 효율적으로 인코딩 <해결책> 이미지를 최적화하는 방법

• 이미지 CDN 사용
• 이미지 압축
• 애니메이션 GIF를 비디오로 대체
• 이미지 로딩 지연
• 반응형 이미지 제공
• 올바른 크기의 이미지 제공
• WebP 이미지 사용

Use HTTP/2

<문제> 모든 리소스에 HTTP/2를 사용하지 않음 <해결책> HTTP/2는 유선을 통해 이동하는 데이터를 줄여 페이지 리소스를 더 빠르게 제공합니다.

1. src폴더 하나 만들어서 js, html, css파일 모두 넣기

2. js파일이 2개면, 메인 js파일에 합칠 수 있도록 require, exports 하기

메인파일 const 어쩌구 = require('./보조파일명.js'); 보조파일 module.exports = agoraStatesDiscussions;

3. npm init -y package.json 파일이 생성

4. npm install -D webpack webpack-cli 웹팩 설치

5. 웹팩 config파일 만들기 webpack.config.js 만들고 내용 작성

   const path = require('path');
   

module.exports = { entry: './src/메인파일명.js', output: { path: path.resolve(__dirname, 'dist'), // './dist'의 절대 경로를 리턴합니다. filename: '출력할파일명.js', }, mode: 'development', };

  mode: 'development' -> 개발자 옵션 추가하기

6.
번들링 명령어 입력
`npx webpack`
dist폴더가 생성되고, 그 안에 파일이 생성되면 성공

7. 
package.json 파일에서
script에 명령어 추가
`"build": "webpack",`
이제 npm run build 명령어 사용가능

![](https://velog.velcdn.com/images/dev_29/post/7dd41929-6457-4ed8-8258-725e38d5d072/image.png)



**----css파일 번들링(합치기)----
**



html파일을 src폴더에서 dist폴더로 옮긴 후,
html파일에서 script 태그에 src를 dist에 생성된 파일명으로 바꾸기

`  <script src="main.js"></script>
`
html파일을 열어보면, css가 적용되지 않은 모습이 나온다

![](https://velog.velcdn.com/images/dev_29/post/176e6fcc-071d-464a-8920-4f42479f3a0f/image.png)

8. src에 있는 script파일에 
require로 src폴더에 있는 css파일 불러오기

`require('./style.css');`


9. 
로더 설치
`npm i -D css-loader style-loader
`

10. 
webpack.config.js에 모듈 추가

// webpack.config.js const path = require("path");

module.exports = { entry: "./src/메인파일명.js", output: { path: path.resolve(__dirname, "dist"), filename: "출력할파일명.js", }, mode: 'development', module: { rules: [ { test: /.css$/, use: ["style-loader", "css-loader"], exclude: /node_modules/, }, ], }, };

11. 
`npm run build`를 입력하여 번들링

**
------html파일 번들링---------**

dist폴더에 있던 html파일을 다시 src폴더로 옮기기(왜? 플러그인을 통해서 dist폴더에 번들링한 html파일을 생성할 거임)


12. 
html 플러그인 설치
`npm i -D html-webpack-plugin`

13.
webpack.config.js 파일에 해당 플러그인을 적용
첫번째 줄에 require하는 것도 잊지말기!!

...생략... const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = { ...생략... plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, "src", "index.html") })] };

14.
`npm run build`로 번들링 결과 확인
-> dist/index.html 파일을 새로 생성되면 성공

dist에 생성된 index.html 파일을 보면,
플러그인이 `<script defer="defer" src="app.bundle.js"></script>` 스크립트 요소를 자동으로 추가한 것을 볼 수 있다.

15. dist에 생성된 html파일을 라이브서버로 열어서 확인

// 참고자료
코드스테이츠 
https://study-ihl.tistory.com/137
https://inpa.tistory.com/entry/NODE-%F0%9F%93%9A-require-%E2%9A%94%EF%B8%8F-import-CommonJs%EC%99%80-ES6-%EC%B0%A8%EC%9D%B4-1

나는 5년 이내에 외국계 회사에서 일하는 디지털 노마더가 되고 싶다🙏”

“그 이후엔 10년 이내에 재미있게 개발공부를 할 수 있는 어린이용 교육프로그램을 만들고 싶다”

“그 이후엔 끊임없이 무언가를 하고 싶어하는 마음을 잃지 않는 열정 있는 개발자가 되고 싶다”

Keep

• 알고리즘 스터디에 참여하게 되었는데, 스터디가 강제성을 주어 좀더 공부를 하게 된다.
• 일주일에 2~3번 운동은 유지하고 있다. 필라테스를 하니까 허리 부담이 덜 가는 것 같다.

Problem

• 자는 시간이 자꾸 늦어지고, 일어나는 시간도 늦어진다.
• 확실히 섹션1, 2 보다 지치고 버겁다. 해이해졌다기 보다는 버거워서 많은 양을 소화하지 못한 것 같다. 특히 데일리코딩

Try

• 필라테스, 등산 외에 유산소 운동도 주1회 이상 하기
• 11시에 자기
• 스터디에 더 참여하기
• 독서시간 가지기
• 사이드 프로젝트
• 데일리코딩 주말에 꼭 복습

두 정수 A와 B가 주어졌을 때, A와 B를 비교하는 프로그램을 작성하시오.

2 9498 시험 성적

3 2753 윤년

4 14681 사분면 고르기

5 2884 알람 시계

6 2525 오븐 시계

7 2480 주사위 세개

(예시)

<input 
   type="text" 
   id="name" 
   name="name" 
   required 
   minlength="4" 
   maxlength="8" 
   size="10">

<input> 요소의 동작 방식은 type 특성에 따라 현격히 달라지므로, 각각의 유형은 별도의 참고 문서에서 더 자세히 확인할 수 있습니다. 특성을 지정하지 않은 경우, 기본값은 text입니다.

<input> 유형

<input type="text"> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text <input type="date"> <input type="password"> <input type="search"> <input type="submit">

속성

type: input 양식 컨트롤의 유형 value: 양식 컨트롤의 현재 값. (name/value pair)의 일부로서 양식과 함께 전송된다 name: input 양식 컨트롤의 이름. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다 placeholder maxlength: value의 최대 길이 (문자수) minlength: value의 최소 길이 (문자수) max min checked autocomplete

A common form

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input