본문 바로가기

FE54

JSX? Javascript XML React 혹은 next.js를 시작한다면 처음 마주하는 언어(?)다. 자바스크립트 같으면서 순간 "뭐지"하는 그것이다. JSX 문법을 잠깐 살펴보자. export default function first() { return ( 하이 클릭하세요. ); } 자바스크립트 함수를 선언 같아 보인다. 자세히 보면 반환 값으로 HTML이 들어있다. 쉽게 말하면 JSX란 Javascript에 XML문법을 더해 HTML까지 한 번에 작성하는 자바스크립트 확장 문법이다. 물론, 리턴문 안에 HTML 태그처럼 작성하지만 실제 HTML 태그는 아니며 JSX용 HTML이라고 이해하는 게 좋다. 리턴문은 실제 작동에선 babel을 이용해 자바스크립트 형태로 바꾸어 실행한다. export defaul.. 2022. 8. 30.
함수 선언식, 표현식, 화살표 함수의 공통점과 차이점 자바스크립트를 배우면 제일 먼저 맞딱뜨리는 것이 함수고, 제일 많이 쓰는 것이 함수다. 함수를 쓰는데 있어서 세 가지 방법이 있다. 함수 선언식, 함수 표현식, 화살표 함수. 함수 선언식은 전통적인 함수 선언 방법이고, 화살표 함수는 자바스크립트가 ES6로 업데이트되면서 새로 생긴 방식이다. 세 함수식 특징을 잘 알고 사용할 필요가 있기에 이들의 공통점과 차이점을 살펴보려 한다. 먼저 각 선언식이다. 함수 선언식 함수의 기본 선언식이다. function을 선언하고 함수명('func_declaration')을 기재하고 매개변수를 위한 소괄호와 로직을 위한 중괄호를 쓴다. function func_declaration(){ console("함수 선언식") } 함수 표현식 비슷한 듯 다른 함수 표현식. 변수를.. 2022. 8. 14.
'getElementById' VS 'querySelector' getElementById getElementById는 주어진 문자열과 일치한 id 요소를 찾고, 해당하는 element를 반환한다. id는 문서 안에서 유일하기 때문에 특정 요소를 빠르게 찾을 수 있다. 반환 값이 없다면 null을 반환한다. querySelector querySelector는 제공한 선택자(id, class, tag 등) 혹은 선택자 뭉치 중 첫번째 요소를 element로 반환한다. 반환 값이 없다면 null을 반환한다. 공통점 1. 특정 요소를 찾아 element를 반환한다. 2. 반환 값이 없다면 null을 반환한다. 차이점 1. getElementById는 ID만 탐색하는 반면, querySelector는 class 혹은 ID를 선택할 수 있다. 2. 상대적으로 getElemen.. 2022. 8. 8.
<!DOCTYPE html>의 의미 DOCTYPE와 DTD DOCTYPE은 그 말대로 문서 타입 즉, 형식을 나타낸다. 더불어 문서를 작성하기에 앞서 해당 문서가 어떻게 작성했는지 컴퓨터와 사용자에게 알려주어야 한다. 이를 DTD(Document Type Definition)라고 표현한다. 는 문서타입이 html이라고 알리는 DTD인 셈이다. HTML을 처음 시작할 때 제일 먼저 배우는 단어(?)다. 꺽쇄를 사용했기에 태그 같아 보이지만 이를 HTML 태그라 부르지 않는다. 는 단순한 선언이고, 문서 유형에 대한 '정보'다. 다시 말해 "이제부터 기술하는 언어와 문법은 html이다"라고 미리 알려줄 뿐이다. 왜 선언하는가 결론부터 말하자면 호환성을 높이기 위해서다. HTML은 HTML1.0부터 시작해 현재 HTML5까지 버전 업그레이드 되.. 2022. 8. 7.

티스토리툴바