Dev study and notes

노마드코더 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로 웹 브라우저의 캐시들을 리셋. 및 재로드 해주면 해결된다. 아마 대부분 코딩상의 오류가 아닐까 싶다. 나의경우는 없지만. 팀원들 파일을 하나의 프젝으로 합치는데 보면... 팀원들이 명칭을 동일하지 않거나 같은 명칭을 사용해놓아서 내가 다 수정하는데... 하다보니 지저분한 코드들이 너무 많아서 결국 내가 새로이 코딩하는 급이 되네.. 그러다가 지쳐서 그냥 지저분하게 통합을 하고있다.. 다들 코딩하는데 본인것만 해결되면 다 되는줄 알어 ㅠㅠㅠㅠ 나는 힘들다구 ㅠㅠㅠ

코드펜이라는 사이트가 있다. 해당 사이트에서 HTML / CSS / JS 를 한 화면에서 작성을 할수 가 있다. codepen.io/trending CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 예시로 왼쪽 프레임의 코드펜 보기 형식을 클릭하면 아래와 같은 배치로 작성이 가능하다 이제 웹상에서 편하게 코딩이 가능하다. 연동 되는 파일들은 어떻게 불러와야할까.. 아마 script 태그를 이용하여 해당 파일의 웹 경로를 활용해..