요모조모

🍰 오늘은 그나마 중간중간 브레이크 걸어주셔서 간신히 따라갈 수 있었다. 그러나 머리에 남은 건 없는... 오늘 글 짱 깁니다. 주의.1. 작업할 폴더 생성 후 이동mkdir vite-reactcd vite-react/2. README.md와 index.html과 .gitignore 파일 생성touch README.md index.html .gitignore3. .gitignore 파일 내용 추가💡 Git이 의도적으로 추적하지 않을 파일 지정.DS_Store(맥 사용자만)node_modulesbuilddist4. Vite 설치pnpm add vite -D # --save-dev5. package.json 파일 수정{ "type": "module", "private": true, "name": "vit..

🍰 오늘도... vite보다 빠른 속도의 진도.🍴 React Component: 리액트 컴포넌트는 사용자 인터페이스(UI)의 뷰(view)를 구성하는 부품마크업으로 뿌릴 수 있는 JavaScript 함수React 앱에서 모든 UI는 컴포넌트이름은 대문자로 시작JSX 마크업을 반환🍫 함수 컴포넌트function Welcome(props) { return Hello, {props.name};} 🍫 클래스 컴포넌트class Welcome extends React.Component { render() { return Hello, {this.props.name}; // this는 클래스 컴포넌트에서 컴포넌트의 인스턴스를 가리키기 위해 사용됨 // 이 인스턴스는 해당 컴포넌트의 속성과 메..

🍰 겁나 빠르다.🍴 module: SW 개발에서 코드의 조직과 재사용성을 높이기 위해 사용하는 개념.독립적인 코드 조각특정 기능을 수행하는 단위ex. 클래스 하나, 특정 목적을 가진 복수의 함수로 구성된 라이브러리 하나🍫 특징캡슐화 - 자체적인 scope를 가지며, 외부와의 상호작용 최소화재사용성 - 한 번 정의한 모듈을 다른 코드에서 가져다 사용 가능분리와 조직화 - 코드 기능 논리적으로 분리 가능 복잡한 프로그램 -> 작고 관리하기 쉬운 조각으로 나누어 개발🍴 ES(ECMAScript) module(표준) vs CommonJS module1. server.mjs (ES 모듈)import liveServer from "live-server";const params = { host: "local..

🍰 오늘은 대망의 중간 점검 받는 날. 진짜 얼마나 긴장했던지.   근데 생각보다 20분이 너무 짧아서 후루룩 지나갔다. 거의 선생님께서 랩을 하고 가신 수준. 약간 방금 뭐가 지나갔지...?싶은 정도였다.  정리해보면 아이콘 사용 시 sprite 이미지 사용해 보기정적 자산, 동적 자산 어떻게 분류해서 관리할 지 정하기이미지 포맷을 webp로 사용하기 (혹은 lazy loading)명도대비도 고려하기

🍰 오늘은 새로운 진도. 이제 JS 진도가 수요일에 끝난다. 🍴 Vite: 빠르고 효율적인 프론트엔드 개발을 위한 혁신적인 도구빠른 서버 시작HMRHMR: Hot Module Replacement개발자가 코드를 변경할 때마다 전체 페이지를 새로 고쳐야 하는 번거로움 없이 실시간으로 코드 변경 사항 반영하는 기능수정된 코드만 다시 로드하여 애플리케이션을 업데이트하기 때문에 개발 속도 크게 향상시킴개발자 서버 vs 클라이언트 서버개발자 서버 - 웹 개발자가 로컬 환경에서 웹 애플리케이션을 개발하고 테스트하는 데 사용하는 서버클라이언트 서버 - 실제 웹 애플리케이션을 사용하는 사용자에게 서비스를 제공하는 서버https://ko.vitejs.dev/guide/ ViteVite, 차세대 프런트엔드 개발 툴ko..

🍰 수업 때도 겨우겨우 따라가는 정도이다 보니, 나중에 복습할 때는... 백지에서부터 다시 시작하는 기분... 오늘은 실습 잔뜩과 localStorage 진도를 나갔다. 음... 다음 주 프로젝트 인 게 말이 되나?🍴 웹 스토리지 객체: 클라이언트 측에서 데이터를 저장하고 관리하기 위해 사용되는 HTML5 API쿠키와 유사한 역할, but 더 많은 데이터 저장 가능쿠키와 달라 HTTP 요청 헤더에 포함되지 않아 보안성이 높음localStorage사용자가 브라우저를 닫을 때까지 데이터 유지sessionStorage사용자가 브라우저 세션을 종료할 때까지 데이터 유지사용자가 브라우저를 닫고 다시 열면 세션 스토리지에 저장된 데이터는 삭제됨웹 스토리지 객체 사용 방법 setItem() 메서드: 데이터를 저장..

🍴 콜백 함수: 특정 작업이 완료된 후 호출되는 함수.자바스크립트의 비동기 작업에서 콜백 함수를 통해 작업 완료 후의 처리를 정의함.주로 시간 지연 함수(setTimeout), I/O 작업, 네트워크 요청 등의 비동기 작업에 사용됨.단점콜백 헬(Callback Hell)비동기 작업이 중첩되어 코드의 가독성과 유지보수성이 떨어짐function step1(callback) { setTimeout(() => { console.log("1단계 완료"); callback(); }, 1000);}function step2(callback) { setTimeout(() => { console.log("2단계 완료"); callback(); }, 1000);}function step3(c..

🍰 요즘... 어렵다.🍴 AJAX(Asynchronous JavaScript And XML): 웹 애플리케이션이 서버와 비동기적으로 소통할 수 있게 해주는 기술.웹 페이지 전체를 다시 로드X -> 서버와 데이터 주고 받음핵심 요소XMLHttpRequest 객체: 브라우저 내에서 서버와의 HTTP 요청을 만들고 처리하는 데 사용됨.DOM: HTML 문서의 구조화된 표현 제공. 자바스크립트가 문서의 내용을 동적으로 변경할 수 있게 함.XML(or JSON): 서버와 데이터 교환 형식으로 XML이나 JSON 사용.AJAX의 작동 원리사용자 이벤트 발생: 사용자가 웹 페이지에서 어떤 작업을 수행 (예: 버튼 클릭).XMLHttpRequest 객체 생성: JavaScript를 통해 XMLHttpRequest ..

🍰 요즘은 그냥... 수업으로 한 방에 이해하는 건 이미 포기했다. 이번 주는 뭘 했는 지 흔적만 남기는 것에 의의를 두기로...🍴 jQueryhttps://jquery.com/ jQueryWhat is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.jquery.com 🍴 Swiperhttps://swiper..

🍰 지금도 더워서 선풍기 틀고 버티는데, 더 더워지면 어떡하나 걱정이다. 작년에 너무 더워서 의욕도 안 생기고... 나태해지고(원래도 그랬을지도.)...🍴 버블링: 이벤트가 발생한 요소에서 시작하여 최상위 요소까지 전달되는 방식이벤트는 트리의 하단에서 시작하여 점차 올라감다음 순서로 진행됨실제 이벤트가 발생한 요소중간의 부모 요소들documentwindow🍴 캡처링: 최상위 요소에서 시작하여 이벤트가 발생한 실제 요소까지 전달되는 방식진행되는 순서windowdocument중간의 부모 요소들실제 이벤트가 발생한 요소🍴 중단하기: 버블링, 캡처링 중단하도록 명령 => event.stopPropagation() 사용element.addEventListener('click', function(event)..