반응형 부트캠프65 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 70 (리액트 라이브러리 API, 리액트 컴포넌트, 컴포넌트 렌더링) 목차리액트 라이브러리 API리액트 컴포넌트컴포넌트 렌더링오늘 하루를 돌아보며 리액트 라이브러리 API리액트 라이브러리를 사용하면 정적 마크업을 동적으로 구현할 수 있다. React.createElement는 리액트 앱 UI를 구성하는 요소(Element)를 생성하는 API(함수)다. ReactDOM.createRoot는 리액트로 구현된 요소 트리(Element Tree)를 실제 DOM에 렌더링하는 API(함수)다.// React.createElement(type, props, ...children)const divElement = React.createElement('div', { className: 'container' })// ReactDOM.createRoot(element)const root = .. 2025. 8. 12. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 69 (안녕! 리액트) 목차리액트 라이브러리리액트의 탄생과 발전사리액트의 특징오늘 하루를 돌아보며 리액트 라이브러리리액트는 웹 또는 모바일 사용자 인터페이스(UI)를 구축하는 라이브러리다. 종종 리액트를 프론트엔드 프레임워크라고도 부르지만, 실제로는 라이브러리에 더 가깝다. 리엑트는 사용자 인터페이스 구축에 집중하며, 라우팅이나 인증 등은 별도의 라이브러리로 보완해야 하기 때문이다. 리액트는 라이브러리의 기능만 제공하기 때문에 필요한 기능만 선택적으로 도입할 수 있어 유연성이 높다. 반면, 여러 옵션 중 필요한 것을 직접 선택해야 하기 때문에 초보자에게는 오히려 혼란을 줄 수 있기도 하다. 간단한 웹사이트는 자바스크립트만으로 충분히 구현할 수 있지만 웹 애플리케이션이 복잡해질수록 기존 자바스크립트만으로는 유지보수와 확장성이 점.. 2025. 8. 11. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 57-68 (Vanilla 프로젝트 회고) 목차프로젝트 주제 선정프로젝트를 통해 배운 것프로젝트에서 아쉬운 것프로젝트 GitHub 프로젝트 주제 선정중간 프로젝트는 Vanilla로 진행했다. HTML, CSS, 순수한 JavaScript만 사용해야 했다. 라이브러리 사용은 최소화하고 최대한 JavaScript만 사용해서 구현해야 했다. 처음에는 기존 eBook 리더기의 기능을 향상시키는 방향으로 진행해 보려고 했는데, 우리들의 실력이 따라가기 어려울 것 같았다. 문서를 렌더링할 때 라이브러리를 사용해야 했고, 특히 문서 위에 밑줄을 그리거나 하이라이트를 한 후, 해당 내용의 위치를 기억하게 하는 것이 생각보다 어려운 기술을 요했다. 이후 빠르게 주제를 바꿔 보기로 했다. 거의 하루를 쏟아서 주제를 발전하다가 필요한 기술이 우리의 실력을 .. 2025. 8. 11. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 54 (비동기 자바스크립트 - Fetch API, Promise, Request/Response) 목차Fetch APIPromiseRequest/Response오늘 하루를 돌아보며 Fetch APIFetch API는 AJAX 요청을 위한 현대적인 방법이다. 기존 XMLHttpRequest(XHR)보다 더 간결하고 강력한 인터페이스를 제공한다. 요청을 보낼 때는 fetch() 함수를 사용하고, 호출하는 즉시 요청한다.fetch(url, options)url: 요청할 서버 URL 주소options: 요청 방식, 헤더, 본문 등을 포함하는 객체(옵션) Fetch API는 Promise를 반환하고 응답은 Response 객체로 제공한다. 이 응답(response) 객체는 다양한 메서드를 통해 데이터를 추출할 수 있다. fetch() 함수의 응답 결과를 확인하려면 .then() 메서드를 사용한다.fetch('.. 2025. 7. 14. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 53 (고유 식별자(ID), 타임아웃, 인터벌, 비동기 자바스크립트 - AJAX, JSON) 목차고유 식별자(ID)타임아웃(Timeout)인터벌(Interval)비동기 자바스크립트 - AJAX비동기 자바스크립트 - JSON오늘 하루를 돌아보며 고유 식별자(ID)고유 문자열은 숫자와 문자가 포함된 문자 값을 말한다. 포함된 문자열 길이가 길어서 두 번 생성하는 것이 거의 불가능한 고유한 값이다.const uniqueId1 = '577ac755d7fef11100753579'const uniqueId2 = '5b4ef18839cd6500114e04d2' 고유 식별자를 생성하려면 다음과 같은 코드를 사용할 수 있다. 전달된 length 인수 값에 따라 문자 개수를 설정하고, 고유한 문자값을 반환한다.function generateUniqueString(length) { return Math.rando.. 2025. 7. 14. 이전 1 2 3 4 5 6 7 ··· 13 다음 반응형
