Dev study and Repost

노마드코더 ReactJS로 영화 웹 서비스 만들기 04 무료강좌​PropTypes 란?PropTypes는 React에서 컴포넌트의 props가 올바른 타입인지 확인하기 위한 도구입니다.이를 통해 컴포넌트가 예상치 못한 props를 받아 발생할 수 있는 오류를 방지할 수 있습니다.PropTypes를 사용하는 이유 문서화: props의 타입과 사용법을 명시적으로 알 수 있습니다.오류 방지: 잘못된 props를 전달했을 때 경고를 띄워줍니다.유지보수 용이: props의 예상 타입을 명확히 정의하여 코드 가독성을 높입니다.코드 설명 text: PropTypes.string.isRequiredtext는 문자열(string)이어야 하며, 필수(isRequired)로 전달해야 합니다.fontSize: PropType..

노마드코더 ReactJS로 영화 웹 서비스 만들기 03 무료강좌JSX와 React 모드 간단 설명JSX에서 HTML 속성 이름JSX는 JavaScript와 HTML의 예약어 충돌을 피하기 위해 속성 이름을 약간 다르게 사용합니다.class → classNamefor → htmlForJSX: javascript: React.createElement('div', { id: 'root' });React 모드Development 모드: 개발 중에는 버그를 쉽게 찾을 수 있도록 자세한 에러 메시지를 제공합니다.Production 모드: 배포용으로 최적화되어 에러 메시지를 간소화하고 성능을 높입니다.​더 쉽게 말하면, JSX는 HTML을 JavaScript에서 사용하기 편리하게 변형한 것이고, React는 개발과 ..

바닐라 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..

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

Module 2 - HTML Overview / Cheatsheet - HTML Overview​안녕하세요 데브런치입니다.​이번 포스팅에서는 HTML에서 사용하는 태그, 요소별 용어의 종류와 정의 예시를 기록으로 남겨봅니다.웹 개발시 기본적인 컴퓨터 언어, 웹 언어로 HTML가 많이 사용되는데요.잘 숙지하여 웹개발, 웹페이지 작성시 도움이 되었으면 합니다.​그럼 표로 작성 된 내용을 확인해주세요.표 내용으로는 태그 요소, 설명, 예시 순서로 작성되어 있습니다. 표 내용으로는 태그 요소, 설명, 예시 순서로 작성되어 있습니다.HTML5 태그 요소별 용어 및 설명*국문​*HTML5 요소별 용어 및 설명요소설명예시이 태그는 브라우저에 표시되지 않지만 코드를 숨기고 문서화하는 데 유용할 수 있는 HTML의 주..

HTML 개요/용어 HTML Overview/Glossary - CAD101-4​이전에 작성한 클라우드 프로그래밍 용어에 이어지는 포스팅입니다.이번 포스팅은 HTML(하이퍼텍스트 마크업 랭기지)의 일부 용어 정리입니다.HTML5는 HTML의 버전을 뜻하네요. 즉, 5번째 버전을 말합니다.​간단하게 HTML과 HTML5를 요약해보면 아래와 같습니다.HTML은 웹 페이지 구조와 콘텐츠를 정의하는 마크업 언어이고, HTML5는 최신 웹 기술과 기능을 추가하여 멀티미디어와 그래픽 처리를 강화한 버전입니다.HTML5는 더 현대적이고 다양한 미디어 요소와 API를 지원하여 웹 개발에 더 많은 기능 제공합니다. *국문용어: HTML5 개요용어정의DOM 트리"문서 객체 모델"은 웹상의 문서 구조와 내용을 구성하는 객체..

HTML 개요/읽어보기 요약 HTML Overview/Reading: Summary - CAD101-3 ​ 웹개발에서 프론트엔드, 즉 보여지는 부분에서 사용하는 컴퓨터 프로그래밍 언어, 웹 언어인 HTML에 대한 요약을 기록해보았습니다. ​ HTML 개요 국문 ​ -HTML은 태그를 사용하여 웹사이트의 기본 구조와 콘텐츠를 제공합니다. -태그는 HTML 페이지의 요소를 나타냅니다. -HTML DOM 트리는 웹사이트의 구조를 설명합니다. -HTML은 API를 사용하여 사용자 경험을 향상하고 고급 애니메이션, 오디오 및 비디오 기능을 제공합니다. -스크립팅은 웹사이트를 탐색할 때 더욱 대화형 사용자 경험을 제공합니다. -스크립팅은 비활성화될 수 있으므로 의존하지 않는 것이 좋습니다. -HTML5 샌드박스는 ..

일단 따로 로딩/ 다운로드로 인한 시간지연. 속도의 문제. 재구성의 문제. 각 구성에 대한 확인. 일관성으로 인한 역효과로 기존의 틀어짐. 즉 동일성. 동일화. 속도의 문제가 발생하므로. 뭔가 정해 놓기 위한 것이지만 오히려 최적화와 안정성. 속도 측면에서 단점이 크기에. 미디어쿼리를 추천하지 않는 이유. 단점 col 만세!

각 코드들이 나오기 마련이다. 간단한 코드 오류로는 200/404/500정도가 아닐까 싶다. 대부분 명칭 오류이거나 주소 오류. 또는 메소드 실행 오류. 경로 오류 등이다. 이것도 문제가 없다면. 서버 클린을 하거나 웹페이지 로딩후 시프트+F5로 웹 브라우저의 캐시들을 리셋. 및 재로드 해주면 해결된다. 아마 대부분 코딩상의 오류가 아닐까 싶다. 나의경우는 없지만. 팀원들 파일을 하나의 프젝으로 합치는데 보면... 팀원들이 명칭을 동일하지 않거나 같은 명칭을 사용해놓아서 내가 다 수정하는데... 하다보니 지저분한 코드들이 너무 많아서 결국 내가 새로이 코딩하는 급이 되네.. 그러다가 지쳐서 그냥 지저분하게 통합을 하고있다.. 다들 코딩하는데 본인것만 해결되면 다 되는줄 알어 ㅠㅠㅠㅠ 나는 힘들다구 ㅠㅠㅠ