npm, callback, setTimeout

5일차: 2026. 1. 6. (화) - callback, promise, fetch, async & await

개요, 구현 상세, 결과, 개선할 점

렌더링, 코어 바이탈

HTTP, HTTPS, jQuery

React 개요(CSR, SPA, 컴포넌트 기반, 가상 DOM, useState 함수)
React 실습: Todo 페이지 만들기(CreatePortal, 할일 추가 기능, spreading 문법)

기획 과정, filter 함수 제대로 사용하기

Context API, Reducer

Todo-app 리팩토링, 프론트엔드 테스트(E2E Test, Cypress)

1. Nginx SPA 애플리케이션 배포 다음과 같은 명령어를 통해 빌드 단계를 수행할 수 있다. 빌드 과정에서는 번들링을 통해 .jsx, .html, .css와 같이 개발자가 작성한 코드 파일들이 브라우저가 이해할 수 있는 단일 .html, .css, .js 파일로 압축된다. 번들링(Bundling) 번들링이란, 여러 개의 JS 파일을 하나의 파...

Next.js React/Vite만 가지고 개발한 결과물의 특징 Gmail과 같은 CSR(Client Side Rendering)을 진행한다. 빌드한 결과물이 단일 html, css, js 파일이다. 배포하려면 별도의 웹서버(ex. Nginx)를 통해 배포해야 한다. 페이지 라우팅에 대한 별도의 방법이 필요하다. (React router를 주로 불러...

오전 시간에는 Next.js 튜토리얼 실습을 진행해 페이지를 배포했다. 배포 링크는 아래에 있다! https://next-js-dashboard-example-xi.vercel.app 렌더링 클라이언트 사이드 렌더링 (CSR) 클라이언트 측(Browser)에서 페이지 렌더링을 수행한다. SPA로 동작한다. 단점 SEO가 떨어진다. ...

Data Fetching 서버 컴포넌트에서 데이터를 가져오는 처리 로직은 Web API인 fetch를 활용하면 된다. 기본 예시 캐싱 캐시 기능을 넣어주니, 브라우저에 있는 캐시로 사용하므로 서버에게 요청을 날리지 않으며, 서버에서 값이 바뀌어도 반영되지 않는다. 코드 fetch의 두 번째 인수에 cache: ‘force-cache’ 옵션을 넣...

github 링크 : https://github.com/yujinjo1/Woori-card-ranking 기획 카드 사용량 비교 사이트 '카드 고릴라'의 우리카드 순위 페이지를,Next.js를 활용해 클론 코딩한 프로젝트이다. 차별점 카드 고릴라 사이트는 마지막 업데이트가 2025년 12월 22일인 것으로 보인다. 또한, 사용자는 2025년 12월이 ...