반응형 Javascript9 카카오테크캠퍼스 2기 | 7주차(24-05-20 ~ 24-05-26) 회고 ⭕ 카카오테크캠퍼스 2기 | 7주차(24-05-20 ~ 24-05-26) 회고JavaScript에서 DOM을 다루면서 노드와 요소의 차이를 명확히 이해하는 것이 중요하다는 것을 느꼈습니다. 처음에는 이 두 개념이 비슷해서 혼동이 되었지만, 실제로는 노드가 요소를 포함하고 있다는 것을 알게 되었습니다. 또한, 노드와 요소를 조작하는 메소드가 다르기 때문에 이를 정확히 이해하고 있어야 JavaScript 메소드를 올바르게 사용할 수 있음을 깨달았습니다. 메소드를 제대로 이해하고 사용하니 웹 페이지를 더욱 효율적이고 안전하게 다룰 수 있어서 큰 도움이 되었습니다. 💡 2024. 6. 11. 웹 구조 Web | 프론트엔드 개발: UI(User Interface)와 GUI(Graphic User Interface) ⭕ 웹 구조 Web | 프론트엔드 개발: UI(User Interface)와 GUI(Graphic User Interface) 프론트엔드 개발은 웹 개발의 가장 전면적인 부분 HTML, CSS, JavaScript 기술을 활용하여 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고 사용자와 상호 작용하게 하는 과정 프론트엔드 개발자는 사용자가 직접 보고 경험하는 웹 페이지의 실질적인 구축을 담당함 ➡️ UI(User Interface) 사용자와 컴퓨터가 정보를 주고받기 위해 사용자와 프로그램이 상호 작용하는 프로그램의 일부분 ➡️ GUI(Graphic User Interface) 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 환경 이전까지 사용자 인터페이스는 키보드를 통해 명령어로 작업을 수행하였지만.. 2024. 4. 22. 자바스크립트 JavaScript | 비동기 처리 ⭕ 자바스크립트 JavaScript | 비동기 처리 비동기 처리는 코드가 순차적으로 실행되는 대신, 특정 작업이 백그라운드에서 실행되도록 하고, 그 작업의 완료 여부와 상관없이 다음 코드로 진행할 수 있게 해주는 프로그래밍 방식입니다. JavaScript에서는 이러한 비동기 처리가 매우 중요한데, 예를 들어 웹 애플리케이션에서 서버로부터 데이터를 요청하고 그 데이터가 도착할 때까지 기다리는 경우, 사용자 인터페이스(UI)가 멈추지 않고 다른 작업을 계속할 수 있게 해 줍니다. ➡️ Promise Promise는 비동기 작업의 최종 성공 또는 실패를 나타내는 객체입니다. 이 객체는 세 가지 상태를 가지게 됩니다. pending: 아직 결과가 정해지지 않은 초기 상태입니다. fulfilled: 비동기 작업이.. 2024. 3. 9. 리액트 React | 웹의 역사: AJAX (Asynchronous JavaScript and XML), Node.js, jQuery ⭕ 리액트 React | 웹의 역사: AJAX (Asynchronous JavaScript and XML), Node.js, jQuery ➡️ AJAX (Asynchronous JavaScript and XML) 문제점: 전통적인 웹 페이지 방식은 페이지 전환 시 전체 HTML 페이지를 서버로부터 받아오기 때문에 화면 깜빡임이 발생함 기능: JavaScript를 통해 서버와 비동기 방식으로 데이터 교환 및 조작 가능 구현: XHR (XMLHttpRequest) 객체 사용하여 데이터 요청 및 수신 장점: 페이지 전체 새로고침 없이 페이지 일부만 업데이트 가능 ➡️ Node.js 확장성: JavaScript를 서버 사이드에서 사용 가능, JavaScript의 범용성 증가 기술 도입: CommonJS 모듈 시.. 2024. 3. 9. 리액트 React | Redux ⭕ 리액트 React | Redux JavaScript 앱을 위한 예측 가능한 상태 컨테이너 애플리케이션의 상태 관리를 효율적이고 일관된 방식으로 수행할 수 있음 상태 관리의 복잡성을 줄이고, 애플리케이션의 동작을 더 예측 가능하도록 함 ➡️ Redux 3가지 원칙 단일 진실의 원천(Single Source of Truth): 애플리케이션의 전체 상태는 하나의 객체 트리 스토어(store)로 저장됨, 애플리케이션 내 어디서든 같은 상태에 접근할 수 있음 상태는 읽기 전용(States Are Read-Only): 상태를 변경할 수 있는 유일한 방법은 액션(action)을 발생하는 것 변화는 순수 함수에 의해 이루어진다(Changes Are Made with Pure Functions): 상태 변화는 리듀서.. 2024. 3. 8. 리액트 React | React에서 Ajax(비동기 통신) 사용하기: Axios 방식 ⭕ 리액트 React | React에서 Ajax(비동기 통신) 사용하기 Ajax는 서버에 새로고침 없이 요청을 할 수 있게 도와주는 일종의 JavaScript 코드입니다. React에서는 Ajax(Asynchronous JavaScript and XML)를 사용하여 서버와의 비동기 통신을 처리할 수 있습니다. 이를 통해 웹 애플리케이션에서 데이터를 동적으로 로드하거나 업데이트할 수 있습니다. 라이브러리로는 Axios, jQuery AJAX, 그리고 브라우저에 내장된 window.fetch 등이 있습니다. 주로 Axios와 window.fetch를 많이 사용합니다. ⭕ Axios 방식 ➡️ Axios 라이브러리 설치 가장 일반적으로 사용되는 Ajax 라이브러리 중 하나인 Axios를 사용하여 Ajax 요청.. 2024. 3. 8. 리액트 React | JSX와 Babel: JavaScript의 확장된 문법과 변환 도구 ✅ JSX, JavaScript XML JSX는 리액트에서 사용되는 자바스크립트의 확장 문법입니다. 이를 통해 XML과 유사한 형태로 UI를 작성할 수 있습니다. JSX는 리액트 컴포넌트 파일에서 UI를 표현하는 데 주로 사용됩니다. JSX는 XML과 비슷한 구문으로 UI 구성 요소를 작성하며, 자바스크립트 코드 내에서 시각적으로 UI를 표현하는 데 도움을 줍니다. 개발자들은 주로 JSX를 활용하여 UI를 작성하고 유지보수하는 것을 선호합니다. .JSX 코드를 브라우저에서 직접 실행할 수는 없기 때문에, Babel과 같은 도구를 사용하여 JSX 코드를 일반 자바스크립트로 변환해야 합니다. 💡 JSX를 이용한 방법 JSX를 이용하면 HTML과 비슷한 형태로 코드를 작성할 수 있습니다. JSX 코드는 실제로.. 2023. 3. 25. 리액트 React | React 웹 개발 환경 구축: Node.js, npm, npx ✅ React 웹 개발 환경 React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. React를 개발하기 위한 환경을 구축하는 것은 프로젝트를 시작하는 첫 단계입니다. 이러한 환경을 구성하기 위해 다음과 같은 도구들이 사용됩니다. 💡 Node.js Node.js는 Chrome V8 JavaScript 엔진으로 구동되는 오픈소스 자바스크립트 런타임 환경입니다. Node.js는 서버 측 자바스크립트 실행을 위한 플랫폼으로 사용되며, React 개발에서는 바벨(Babel)과 웹팩(Webpack)과 같은 도구들을 사용하기 위해 필요합니다. Node.js는 비동기 이벤트 기반의 입출력 모델을 사용하여 가볍고 효율적인 네트워크 애플리케이션 개발을 가능하게 합니다. Babel: B.. 2023. 3. 7. 웹 구조 WEB | 브라우저 종류 | 요청과 응답의 렌더링 과정 ✅ 브라우저 브라우저는 하이퍼텍스트를 보여준다. HTML로 기술되어 있는 웹 페이지는 웹 사이트를 구성하고 브라우저에서 본다. 브라우저 종류 구글 Chrome 마이크로소프트 Microsoft Edge Internet Explorer 💡 브라우저 렌더링 Rendering Path 브라우저가 요청하고, 응답받는 과정을 렌더링 Rendering Path라고 한다. 요청, 리퀘스트 브라우저는 웹 서버에 요청을 한다. 응답, 리스폰스 웹 서버는 브라우저에 응답을 한다. HTML, CSS, JavaScript가 응답이다. 2023. 2. 8. 이전 1 다음 반응형
