리액트 - JSX 구문

본 글은 를 참고해 공부한 내용을 정리한 글입니다. JSX 리액트에서 가상 DOM 객체를 만들어주는 함수는 React.createElement이다. 이를 이용해서 go to google 위의 HTML 코드를 리액트 방식으로 구현하면 아래와 같다. const CE = React.createElement const rootVirtualDOM = CE('ul', null, [ CE('li', null, [ CE('a', {href: 'http://www.google.com', target: ' _blank'}, [ CE('p', null, 'go to google') ]) ]) ]) 매번 React.createElement를 호출해야 하는 것도 번거롭고, HTML 코드에 비해 요소 간의 관계를 파악하기 힘들다..

• format_list_bulleted React
• · 2023. 5. 4.
• textsms

color picker로 티스토리 <code> 태그 꾸미기

문장 중간에 인라인 타입 코드 삽입하기 개발 블로그를 운영하면 필연적으로 코드블록을 삽입하게 된다. 티스토리는 코드블록을 지원해서 코드만 붙여넣으면 알아서 블록이 완성된다. 그런데, 나 같은 경우 문제풀이 포스팅을 주로 하다 보니 코드를 설명하기 위해 문장 중간에 inline 타입의 코드를 넣고 싶을 때가 있다. code 이렇게 말이다. 방법은 단순하다. 작성 모드를 HTML 편집 모드로 바꿔서 단어를 code와 /code 태그로 감싸주면 된다. 하지만 그냥 적용하면 별로 멋이 안 날 것이다. 코드블록처럼 디자인해서 일관성을 주고 싶은 마음이 든다. 나는 memostack님이 배포한 berry 스킨을 사용하고 있는데, 기본으로 code 태그에 css가 적용되어 있다. 하지만 색상이 그라데이션이 가미된 화..

• format_list_bulleted 블로그 관리
• · 2022. 10. 14.
• textsms