반응형 전체 글23 [React 공식문서 공부] JSX란? JSX란? JSX라고 불리는 이 구문은 string도 아니고 HTML도 아닙니다. JSX는 HTML처럼 보이는 코드를 작성할 수 있게 해주는 자바스크립트의 extension 입니다. JSX는 근본적으로 React.createElement 함수를 편하게 사용하기 위해서 나온 자바스크립트 확장문법이다. HTML 스러운 문법과 함께 JS를 표현할 수 있어 편리하고 가독성이 높고 작성하기 쉽습니다. JSX는 객체로 변환이 됩니다. Babel은 JSX를 React.createElement() 호출로 컴파일합니다 // 1, 2는 동일한 결과다 //1 const element = ( Hello, world! ); //2 const element = React.createElement( 'h1', {className:.. 2023. 1. 29. React 모바일(safari, chrome)에서 100vh 네비바 로 인한 화면 가려지는 현상 해결하기 web 개발하다 보면 여러가지 디바이스에서 자신이 개발한 화면이 잘 호환되면서 나오는지 확인하면서 개발하는게 굉장히 중요합니다. 모바일 화면에서 어떠한 모달을 띄우는데 모달의 크기가 큰 경우 모바일 웹 브라우저 네비바로 인하여 모달이 가려지는 현상이 종종 생기는데요 오늘은 이런문제 해결하는 방법을 작성해 보겠습니다. 문제 : pc 버전(chrome) 모바일 뷰에서는 잘 보여지는것을 볼 수 있습니다. 하지만 이제 모바일 chrome에서는 네비바 때문에 가려져서 나옵니다. 이유는 모달 컨테이너 css 보면서 설명 드리겠습니다. const Background = styled.div` position: absolute; background-color: rgba(0, 0, 0, 0.5); top: 0; left:.. 2022. 12. 9. 시맨틱 (Semantic)하게 HTML 작성하기 HTML 작성할 때 시맨틱 하게 작성하는 것이 굉장히 중요합니다. 그럼 시맨틱 하게 HTML작성을 어떻게 해야 할까요? 바로 HTML 태그를 상황에 따라서 의미 있게 작성하면 된다. 처럼 의미 없는 태그들을 막무가내로 쓰는 게 아닌 , , , , , ...처럼 의미 있는 태그를 상황에 따라 사용하는 것이 시맨틱 하게 작성하는 방법이다. 장점: 의미 있는 태그를 씀으로써 코드 가독성이 높아진다. HTML 문서를 봤을 때 정확히 무슨 정보를 담고 있는지 한눈에 파악하기 쉬워지기 때문이다. 검색엔진(SEO) 최적화에 도움이 된다. HTML의 계층 구조를 통해서 중요도를 파악하고 우선순위를 매겨서 노출을 해주기 때문에 시맨틱 하게 작성된 HTML에는 더 구체화한 정보를 제공할 수 있게 됩니다. 의미 있는 태그 .. 2022. 12. 3. 이전 1 ··· 3 4 5 6 다음 반응형
