Dev study and Repost

노마드코더 ReactJS로 영화 웹 서비스 만들기 07 무료강좌 리액트 API 의 json을 받아 값을 처리하여 간단 웹페이지 구현을 하게 됩니다.이어서 react router 기능을 실습하게 됩니다. ***Command npm i react-router-dom*** ***React Router DOM***React Router DOM은 웹페이지의 주소(URL)에 따라 화면을 바꿔주는 도구로,예를 들어, /about 주소로 가면 "About 페이지"가 보이고, /home으로 가면 "Home 페이지"가 보이게 만들어줍니다. 페이지를 새로고침하지 않고 부드럽게 동작합니다.쉽게 말해, React 앱에서 주소별로 화면(컴포넌트)을 연결해 주는 역할을 합니다. https://reactrouter.com/ Rea..

노마드코더 ReactJS로 영화 웹 서비스 만들기 06 무료강좌 리액트 useEffect 간단 요약 useEffect는 React에서 컴포넌트가 화면에 렌더링되거나 업데이트될 때, 특정 작업(예: 데이터 가져오기, 구독 설정)을 수행하도록 도와주는 함수입니다.사용자가 지정한 조건(의존성 배열)에 따라 실행됩니다.컴포넌트가 사라질 때 정리(clean-up) 작업도 처리할 수 있습니다. 예를 들어, 처음 렌더링 시 API 호출을 하거나, 이벤트 리스너를 추가/제거하는 데 자주 사용됩니다.상세한 설명과 예시는 아래 링크를 참고해주세요.참고 링크: https://ko.legacy.reactjs.org/docs/hooks-effect.html Using the Effect Hook – ReactA JavaScri..

노마드코더 ReactJS로 영화 웹 서비스 만들기 05-2 무료강좌 진행중 npm start 후 오류 코드Failed to compile.[eslint] src/Button.js Line 7:8: Typo in static class property declaration react/no-typossrc/index.js Line 18:1: 'reportWebVitals' is not defined no-undefSearch for the keywords to learn more about each error.ERROR in [eslint] src/Button.js Line 7:8: Typo in static class property declaration react/no-typossrc/..

노마드코더 ReactJS로 영화 웹 서비스 만들기 05-1 무료강좌 🔻🔻🔻node.js 설치 방법 확인하기ㅣhttps://blog.naver.com/devlunch4/223724591778 맥북 node js 설치 macOS Node.js install 설치 버전 확인맥북 node js 설치 macOS Node.js install 설치 버전 확인 웹 개발 시 node.js를 사용하는 경우가 있습...blog.naver.comreact app 설치 생성하지만 오류가 발생..이 에러는 주로 React 프로젝트를 생성하거나 패키지를 설치할 때 발생하며, 주된 원인은 의존성 충돌입니다.아래 단계에 따라 문제를 해결해 보았지만.. (실패..)1. 에러의 원인 react 버전 19.0.0이 설치되어 있는데, ..

바닐라 JS로 크롬 앱 만들기 8장 강좌들 노마드코더 무료강좌​노마드코더 바닐라JS 자바스크립트 강좌 #8.0 Geolocation 요약:1. Geolocation API를 사용하면 사용자의 현재 위치 정보를 가져올 수 있습니다.2. navigator.geolocation.getCurrentPosition 메서드를 통해 위도와 경도를 얻는 방법을 설명합니다.3. 위치 정보는 콜백 함수로 처리되며, 성공 및 에러를 처리하는 구조를 배우게 됩니다.​index.html 과 weather.js 생성하면됩니다.​*weather.js 소스코드function onGeoOk(position) {const lat = position.coords.latitude;const lng = position.coords.longi..

바닐라 JS로 크롬 앱 만들기 7장 강좌들 노마드코더 무료강좌​실질적인 TODO LIST를 생성하게 됩니다.​*JSON.stringify()JavaScript 객체를 JSON 문자열로 변환하는 함수입니다.​*간단예시 코드const obj = { name: "Julia", age: 99, city: "London" };const jsonString = JSON.stringify(obj);console.log(jsonString); // 출력: '{"name":"Julia","age":99,"city":"London"}'*JSON.parse()JSON 문자열을 javaScript 객체로 변환하는 함수입니다.const jsonString = '{"name":"Julia","age":99,"city":"Lond..

웹 개발자들이 기억해야할 주요 사항Key points to remember​​1Tags are made up of an opening and closing angle bracket with a tag name in the middle. Elements are pairs of tags that encapsulate or wrap-around other elements or web content. 태그는 여는 꺽쇠 괄호와 닫는 꺽쇠 괄호 사이에 태그 이름이 포함되어 있습니다. 요소는 다른 요소나 웹 콘텐츠를 감싸는 태그 쌍으로 이루어집니다.​2HTML is a declarative language, meaning it describes the rules for what a page should display..

자바스크립트 용어 해설 정리 Glossary- JavaScript Programming for Web Applications - CAD101-12​​*국문Glossary- JavaScript Programming for Web Applications웹 애플리케이션을 위한 자바스크립트 프로그래밍Term정의AJAXJavaScript 및 XML을 통한 비동기 서버 호출 이상의 기능을 포함하는 "비동기 JavaScript 및 XML"입니다. 프로그래밍 언어나 기술이 아니라 프로그래밍 개념입니다. Ajax는 HTML, JavaScript, Cascading 스타일 시트를 통해 더욱 풍부한 대화형 웹 애플리케이션을 제공하고 문서 개체 모델을 통해 웹 페이지를 수정하는 일련의 기술을 나타냅니다. 요즘에는 XML 대신..

CSS 개요 및 HTML5 요소 / 용어 해설 - CSS Overview & HTML5 Elements - CAD101-7​안녕하세요 데브런치입니다.웹개발에 사용하는 언어인 CSS와 HTML을 복습해보고 있는데요.CSS에서 사용되는 용어, 웹개발에서 사용하는 용어 몇가지를 정리 기록을 남겨봅니다.​컴포넌트 프레임워크, CSS (Cascading Style Sheets), 고정 레이아웃, 유동 레이아웃, 유틸리티 프레임워크의 원어(영어)와 뜻을 알아보았습니다. CSS 개요 및 HTML5 요소 / 용어 해설*국문용어 해설 CSS 개요 및 HTML5 요소용어정의Component Framework구성 요소 프레임워크는 모든 웹 사이트에 쉽게 추가할 수 있는 미리 스타일이 지정된 구성 요소와 템플릿을 제공합니다...

CSS 개요 & HTML5 요소/읽어보기 요약 - CSS Overview & HTML5 Elements/Reading: Summary CAD101-6​안녕하세요. 데브런치입니다.웹 개발 관련 내용들을 요약, 정리, 기록을 하고있습니다.​이번 포스팅에서는 CSS와 HTML에 대한 요약을 적어보았습니다.​CSS는 "Cascading Style Sheet.", (캐스캐딩 스타일 시트)의 약자입니다.웹개발시 웹 화면의 디자인, 구조 등을 추가하여 사용하는 웹 문서이지요.​그럼 CSS와 HTML에 대한 간단 요약을 적어봅니다.​CSS 개요 & HTML5 요소/읽어보기 요약*국문- CSS는 웹사이트의 각 페이지의 각 요소에 균일한 외관을 만듭니다.-CSS는 일반적으로 외부 스타일 시트에서 코딩되며 웹사이트의 기본 ..