반응형 Front-end16 타입스크립트와 자바스크립트의 차이 타입스크립트는 자바스크립트의 모든 기능을 지원하며 단지, 자바스크립트 위에 타입 시스템이라는 추가적인 레이어를 추가한 것입니다. 즉, 여러분이 작성한 자바스크립트 코드는 타입스크립트라고 할 수 있습니다. 타입스크립트의 주요 이점은 여러분이 예상하지 못한 돌발 상황을 쉽게 발견할 수 있게 해 주고, 버그의 가능성을 낮춰준다는 점입니다. 자바스크립트와의 차이 자바스크립트를 사용하다보면 자주 undefined를 마주하게 됩니다. 자바스크립트는 타입을 엄격하게 따지지 않기 때문에 '이 값이 왜 여기서 나와?' 하는 경우에는 그냥 undefined로 취급해 버립니다. 이것은 어떻게 보면 장점이라고 할 수도 있습니다. 개발자가 작성한 코드에 사소한 문제가 있더라도 자바스크립트는 최대한 성실하게 코드를 실행하기 위해.. 2023. 3. 13. HTML 기본 구조와 태그(tag), 요소(element), 속성(attribute) HTML(Hypertext Markup Language)은 웹 페이지의 구조를 나타내기 위한 마크업 언어입니다. 웹 페이지의 전체적인 골격을 형성하고, CSS에 의해서 스타일링되거나 JS에 의해서 조작될 수 있는 요소들을 만든 다음, 그 안에 컨텐츠를 채워넣기 위해 사용됩니다. 기본적인 형태는 다음과 같습니다. 최상단에서 으로 이 html 문서의 타입을 정의합니다(DTD). 과거에는 이렇게 길고 복잡한 형태를 가지고 있었지만, html5 이후로는 아래와 같이 간소화되었습니다. 내용 html문서의 전체 내용은 태그가 감싸게 됩니다. html 태그에서 적용한 속성은 문서 전체에 적용되기 때문에 보통 lang 속성을 통해서 사용할 언어(한국-ko, 영어-en)를 지정해줍니다. 그 하위에 와 가 위치합니다. 에.. 2023. 1. 19. submit 버튼 쓰지 않고 submit하기 1. 폼 태그에 대한 간략한 설명 태그는 사용자로부터 값을 입력받기 위해 사용됩니다. 최근 개발되는 웹 또는 앱 서비스의 경우 가입 시 개인 정보 수집을 최소화하려는 경향을 보이고 있긴 합니다만, 전통적인 회원가입 페이지를 한번 떠올려보죠. 사용자는 의 내부에 있는 에 아이디와 비밀번호를 입력하고, 에서 생년월일을 고르고, 라디오 버튼이나 체크박스까지 모두 선택한 뒤에 마지막으로 또는 을 누릅니다. 이 '제출하기' 라는 행위를 통해서 폼에 입력된 데이터들은 서버로 전송되게 됩니다. 2. Submit 버튼의 대안 1) submit() 메서드로 submit하기 button이 아닌 어떤 html 요소를 클릭했을 때 submit이 이루어지도록 하려면, onclick 이벤트 발생 시 특정 폼을 지정하여 submi.. 2023. 1. 12. React 시작하기 react는 프론트엔드 개발을 위해 페이스북에서 만든 js 라이브러리입니다. 리액트의 장점은 빠르다는 것입니다. DOM을 직접 조작하지 않고 가상 DOM을 사용하며, 하나의 동적인 페이지로 구현되는 Single page application(SPA)이기 때문이죠. vue나 angular도 유사한 특성을 가지고 있습니다. 또 확장성과 재사용성, 높은 생산성과 더불어 커뮤니티의 활성화로 관련 자료를 많이 찾아볼 수 있다는 점도 리액트가 인기를 끄는 이유라고 할 수 있겠습니다. 그럼 지금부터 10초만에 리액트 프로젝트를 만드는 법을 알려드리겠습니다. 0. 준비단계 - node.js 설치하기 react를 설치하기 위해서는 node.js가 필요합니다. 리눅스 환경에서는 커맨드 한 줄이면 nodejs 를 설치할 수.. 2022. 9. 20. CSS / 애니메이션과 트랜지션 animation & transition 시작에 앞서 CSS를 적용할 대상을 만들어줍니다. .ball { width: 200px; height: 200px; background-color: skyblue; border-radius: 50%; } 애니메이션 1. 애니메이션 제작하기 먼저 @keyframes로 애니메이션을 만들어봅시다. @keyframes colorChange { from {background-color: #0dcaf0;} to {background-color: #0a53be;} } @keyframes colorChangeAdvanced { 0% {background-color: #0dcaf0;} 25% {background-color: #3cb3ff;} 50% {background-color: #4e69ff;} 100% {back.. 2022. 5. 23. Javascript - DOM (Document Object Model) DOM 은 html 문서를 트리형태로 구조화한 인터페이스입니다. DOM 을 이용하면 javascript에서 html 문서에 접근하고 탐색 및 조작을 할 수 있습니다. 1. 탐색 Welcome paragraph item1 item2 위와 같은 html 문서에서 각 요소들을 선택하기 위해서 document의 메서드인 getElementByid() 또는 querySelector()를 이용할 수 있습니다. 이 메서드들은 주어진 조건에 해당되는 element를 반환합니다. //id가 hd인 요소 var heading = document.getElementById("hd"); //class가 pr인 요소 var paragraph = document.querySelector(".pr"); //li 중 2번째 자식 v.. 2021. 12. 8. 이전 1 2 3 다음 반응형
