요모조모

🍰 우와 너무 밀려서 일단 올려놓고 업데이트 해야겠다.🍫 ?urlVite 또는 다른 번들러에서 사용되는 특별한 쿼리 파라미터에셋 처리 지시자 - ?url은 번들러에게 이 파일을 어떻게 처리해야 하는 지 알려줌?url 사용 시 번들러가 자동으로 content hash를 생성해줌🍫 Content hash파일의 내용을 기반으로 생성되는 고유한 문자열파일 내용 변경 시 해시 값도 변경됨생성 과정번들러가 빌드 과정에서 각 파일의 내용을 읽음파일 내용을 해시 함수에 통과시켜 고유한 해시값을 생성함이 해시 값을 파일 이름에 추가함번들러가 이 과정을 자동으로 처리함 🍴 JSX 마크업: JSX는 JavaScript의 확장 문법. HTML보다 더 엄격하고 몇 가지 규칙이 있음. 🍫 1. 하나의 루트 엘리먼트로 반..

🍰 오늘은 그나마 중간중간 브레이크 걸어주셔서 간신히 따라갈 수 있었다. 그러나 머리에 남은 건 없는... 오늘 글 짱 깁니다. 주의.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..

🍰 소프트웨어 생명 주기: 소프트웨어 개발을 위한 설계, 운용, 유지보수 등 과정을 단계별로 나눈 것폭포수 모형이전 단계로 돌아갈 수 없음을 전제각 단계 확실히 → 검토, 승인 → 다음 단계 진행가장 오래되고 폭넓게 사용됨고전적 생명 주기 모형각 단계 끝난 후 다음 단계 수행을 위한 결과물이 명확하게 산출돼야 함프로토타입 모형실제 개발될 SW에 대한 견본품(prototype) 만들어 최종 결과물 예측사용자 - 시스템 사이의 인터페이스에 중점 두어 견본품 개발나선형 모형(점진적 모형)SW 개발 과정을 여러 번 거쳐 점진적으로 개발보헴이 제안누락/추가된 요구사항 첨가 가능유지보수 과정 필요 X계획 수립 → 위험 분석 → 개발 및 검증 → 고객 평가애자일 모형고객의 요구사항 변화에 유연하게 대응, 일정 주기..

🍰 오늘도... 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..

🍰 둘 다 JavaScript에서 성능 최적화를 위해 특정 이벤트의 호출 빈도를 제어하는 데 사용됨.🍴 Throttle: 이벤트가 연속해서 발생 시, 일정 시간 간격으로 이벤트를 처리함.이벤트가 자주 발생해도 일정 시간마다 한 번씩만 처리됨. let waiting = false; function throttle(callback, limit = 200) { if (!waiting) { // waiting이 false일 때만 실행 callback(); waiting = true; setTimeout(() => { // limit초 뒤에 waiting을 false로 변경하는 타이머 waiting = false; }, limit); }}타이머가 돌고..

🍰 WAI-ARIA 속성들 정리ARIA 속성 유형Widget 속성 - 웹 페이지의 상호 작용 요소를 식별하고 기능을 정의Live region 속성 - 웹 페이지의 내용이 동적으로 업데이트되는 영역을 식별하고 스크린 리더에 알림Drag-and-Drop 속성 - 웹 페이지에서 드래그 앤 드롭 기능을 구현하고 접근성을 향상시킴Relationship 속성 - 웹 페이지의 요소들 간의 관계를 정의하고 의미를 명확하게 전달함aria-haspopup - 해당 요소와 연결된 팝업 창이나 메뉴가 있는지 여부 나타냄true - 요소에 연결된 팝업이 있음false - 요소에 연결된 팝업이 없음(기본값)aria-controls - 현재 요소가 제어하는 요소(들)을 식별함ex. 탭 패널을 제어하는 탭과 같이 다른 요소를 제어..

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