프론트엔드 개발 썸네일형 리스트형 JSX에 대한 간단한 실습 1. 개요 지금까지 JSX에 대한 이론을 간단하게 정리하였다. 이제 JSX 문법을 이용한 간단한 실습을 하고자 한다. create-react-app 을 이용하여, react에 대한 기본적인 스켈레톤 코드를 받고 그 src 폴더 밑에 Chapter_03이라는 폴더를 하나 만든다. 그리고 위와 같이 Book.jsx 와 Library.jsx 파일을 하나씩 만들겠다. 2. Book.jsx import React from "react"; function Book (props) { return ( {`이 책의 이름은 ${props.name} 입니다.`} {`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`} ); } export default Book; 코드에 대한 설명을 하겠다. Book이.. 더보기 JSX의 장점 및 사용법 1. JSX의 장점 ⓐ 간결해진 코드 > 높은 가독성 > 오류 잡기 쉬움 저번 포스팅에서 말했듯이, JSX를 쓰면 하나의 JSX 코드 내에서 JS와 HTML 코드를 혼용해서 사용할 수 있었다. 이는, JS 로직과 그것을 연결하려고 하는 HTML 요소를 특정하는 로직을 한번 더 작성할 필요가 없기 때문에 코드가 짧아지고, 간결해진다. 이는 엄청난 장점이다. ⓑ Injection attack 해킹 방어에 용이 이건 그렇게 와닿는 내용이 아니라서 깊게 듣지는 않았다. JSX를 쓰면 해당 주입성 공격을 방어하기 더 용이하다고 한다. 2. JSX 사용법 ⓐ HTML 요소를 하나의 JS 변수로 사용한다. const element1 = Hello World!! 요렇게 하나의 요소를 변수로 특정이 가능하다. 당연히 해.. 더보기 JSX의 정의와 원리에 대하여 1. JSX의 정의 원래 프론트 코드는 화면을 띄우는 HTML, 그 HTML을 꾸미는 CSS, 프리젠테이션 로직을 담당하는 JS 총 3가지로 나뉜다. 이렇게 영역을 구분하여 작성하는 것은 때때로, 피로감을 유발한다. 왜냐하면, JS로 만든 모듈(특정 기능을 하는 코드)을 연결할 특정 HTML 요소(elements)와 연결하는 작업을 항상 해줘야하기 때문이다. 해당 작업을 위해 따로 코드를 작성해야 하기에 가독성이 더욱 안 좋아진다. JSX는 JavaScript & XML/HTML의 약자로, 위에서 보여진 프론트 엔드 전반의 약점을 보완하기 위해 만들어진 개념이다. JSX에서는 Javascript 코드 안에서 HTML 코드를 작성하는 것이 가능하다. 따라서 밑과 같은 코드 작성이 가능해진다. const e.. 더보기 [HTML 심화] div 태그의 용도에 따른 이름. 은 모두 div 태그와 기능이 동일하고 이름만 다를 뿐이다. 아무 기능도 없는 해당 태그들을 div 대신 쓰는 이유는 다음과 같다. 1. div를 남발할 시, 가독성이 떨어져 유지보수가 어렵다. 2. 해당 태그들을 쓰면 검색엔진이 정보의 종류를 파악할 때 도움이 된다. 3. 스크린 리더로 읽는 분들이 읽기 훨씬 수월해 진다. 그럼 각 태그들이 어떨 때 쓰이는 지 알아보자. 페이지 전체나 특정 구획의 제목 역할을 하는 요소들을 두는데 사용된다. ex- 로고, 제목, 검색창 링크가 들어가는 요소가 들어가는 태그 ex- 색인, 페이지 메뉴들 페이지 전체에서 혹은 특정 구획의 최하단에 뭐 적을 때 해당 태그를 이용함 ex- 페이지의 주요 내용이 들어가는 곳으로 페이지마다 꼭 하나여야만 한다. 사이드 바 같은 거.. 더보기 [HTML 심화] 모두가 이용할 수 있는 웹사이트 모두가 이용할 수 있는 웹사이트를 만들어야 한다. 모두가 이용할 수 있다는 소리는 저시력 시각 장애인, 지체 장애인 분들도 이용하기가 수월해야한다는 것이다. 시각 장애인 분들은 스크린의 내용을 읽을때 스크린 리더기를 사용한다. 1. 이미지에 대한 주석을 alt로 달아놓자. (1) 주석이 짧을 때 스크린 리더기로 읽힐 내용은 해당 태그에 속성 alt를 덧붙여서 개발자가 설정할 수 있다. 그냥 의미 없거나, 읽을 필요가 없는 이미지에도 alt를 써줘야 한다. 왜냐하면 alt가 없다면 스크린 리더가 이미지 소스 이름을 그대로 읽어버리기 때문이다. 이때는 아무 의미 없는 내용이므로 alt에 공백을 쓴다. 그러면 스크린 리더도 안 읽고 지나간다. (2) 주석이 길때 이미지에 대한 주석이 길 때는 주석 내용을 일반.. 더보기 [HTML 심화] 상단의 태그들 뜯어보기 우리가 vs code 에서 html 을 작성할 때, 처음에 !치고 tab 누르면 뜨는 내용들이 있다. 우리는 항상 body 내부를 채우는데 집중했었는데, 이번에는 위에 뜨는 메타 데이터들이 무슨 뜻을 하는지 알아보겠다. 1. 기본 메타데이터 (1) 해당 html 문서가 최신 버전의 html인 HTML5를 쓰고 있음을 나타냄. (2) Head 태그들 (1) charset="UTF-8"은 해당 html을 어떤 해독기로 번역해야 하는지 브라우저에게 알려주는 것이다. utf-8로 인코딩 된 문서를 다른 해독기로 번역하면 문자가 다 깨져서 나온다. (2) 두번째 줄 내용은 혹시 윈도우 익스플로러로 열람시 어떤 모드로 실행할 것인지에 대한 내용이다. (3) 3번째 줄은 viewport 관련 내용이다. viewpor.. 더보기 [CSS] Flex layout 1. 부모요소에서 설정해줘야 할 것 display: flex; /* 부모요소에 flex로 설정하면, 자식 요소들의 크기 위치를 자유자재로 바꿀 수 있게 된다. 자식 요소 사용에 대한 유연성이 주어진다. */ flex-direction: row /*column, row-reverse,column-reverse*/ /* 자식 요소들이 배열될 기준을 정한다. row로 하면, 왼위에서 오른쪽으로(가로축) 쭉 나열, column으로 하면 위에서 아래로(세로축) 쭉 나열 reverse는 각각 오른쪽에서 왼쪽, 아래에서 위로 여기서 main 축은 해당 요소가 정한 기준이고, 수직 축은 그에 반대되는 축이다. 예를 들어 row이면 main 축은 가로이고 수직 축은 column이다.*/ flex-wrap: wrap or.. 더보기 [CSS] 요소 감추는 방법 1. 커서 cursor: auto; /* auto: 상황에 맞게 자동 변화 근데 이게 내가 원하지 않는 것일 수 있음 주의 default: 그냥 무조건 화살표 none: 커서 안 보임 zoom-in: 돋보기 pointer: 손가락으로 바뀜. not-allowed: 금지 표시 나옴. 그 외 more... mdn 문서 확인 바람 */ 2. 요소 감추는 법 opacity: 1; visibility: hidden; display: none; /* opacity: 불투명도 1 == 잘 보임 (100%), 0 == 안 보임 (0%) opacity: 0; 이 되면 모습만 감추는 것이기 때문에 해당 태그에 커스터마이징 했던 커서 모양 바뀜, 클릭, 포커스(input 요소가 선택된 것) 전부 다 됨. visibility.. 더보기 이전 1 2 3 4 5 6 다음
